<p>Published on <a href="https://blog.prototypr.io/become-a-2018-ready-web-developer-by-learning-flexbox-and-css-grid-d32e4af2dcc0?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Saheel Wagh </p>
<h4>A collection of resources to learn tomorrow’s technologies today.</h4>
<p>Although I’ve referred to them as tomorrow’s technologies, Flexbox and Grid are supported by nearly all modern browsers. What makes these seem futurisitic is that very few web developers are aware of them. Even fewer use these while designing websites, instead relying on css frameworks like <a href="https://getbootstrap.com/">bootstrap</a>, <a href="https://foundation.zurb.com/">foundation </a>and <a href="http://materializecss.com/">materialize.</a> This despite many advantages offered over the frameworks.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Xc0t4i2BORGDM0ZzwKSuyw.jpeg">Stock Photo; pexels.com</p>
<h4>The 3 layout Options</h4>
<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">Box Model</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a></li>
</ol>
<p>Box Model and Flexbox are useful for reasoning about laying out smaller components in a single direction. An example of this would be navigation items inside a navbar. Whereas CSS grid is used for laying out elements of the webpage along two axes. Think laying out navbar, main section and footer responsiveky.</p>
<p>Flexbox offfers the following benfites compared to tradtional methods like Box Model</p>
<ol>
<li>Easy to get started : Most Basic layouts can be achieved by using only three properties approprtiately: display, justify-content and align-items</li>
<li>Painless vertical and horizontal centering of items</li>
<li>You can manipulate inline elements easily.</li>
</ol>
<p>Read more about advantages of flexbox at <a href="https://bitsofco.de/6-reasons-to-start-using-flexbox/">bitsfoco.de</a>.</p>
<h4>Resources to Learn Flexbox</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-cCQcA4cijH8gZ65pvzz_w.png">Kill Zombies while learning Flexbox</p>
<p>Handy refrence :<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"> MDN flexbox Docs</a></p>
<p>Pre-requisites:</p>
<ol>
<li>HTML Basics.</li>
<li>CSS syntax and selectors</li>
<li>CSS Values and Units</li>
<li>Cascade and Inheritance</li>
<li>Box Model</li>
</ol>
<h4>The Action Plan</h4>
<ol>
<li>Understand <a href="https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35">flexbox through GIFS</a></li>
<li>Your first visit to MDN docs :<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"> Get a high level overview by reading this page</a></li>
<li>Get a more hands-on high level overview from this another <a href="https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af">brilliant medium article</a> and build a music app over 90 minutes</li>
<li>Fight off zombies while learning flexbox. I can’t recommend <a href="https://geddski.teachable.com/">flexbox zombies</a> enoguh!</li>
<li>Alternatively if you prefer a tutorial with no bloodshed, <a href="http://flexboxfroggy.com/">help some frogs with your flexbox skills</a></li>
<li>If you prefer video courses and want to learn from a brilliant instructor, check out <a href="https://medium.com/u/86a55cd7983b">Wes Bos</a>’s <a href="https://flexbox.io/">WTF(What the Flexbox?!)</a></li>
</ol>
<p>All the above resources are completely free. Once you are comfortable with flexbox, you can start learning CSS grid.</p>
<h4>CSS Grid: What it is and How to learn</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-eVF0BrEDt1zizhXwMyWgw.png">Carrots are good for your eyes, but don’t stare at screens for too long!</p>
<p>A grid is simply a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.A grid will typically have <strong>columns</strong>, <strong>rows</strong>, and then gaps between each row and column — commonly referred to as <strong>gutters</strong>.</p>
<p>CSS Grid is one of a few new <em>specifications</em> for CSS — essentially, a guideline that defines a new way of implementing grid based layout without using 3rd party frameworks. It offers something new (and improved) in the way of layout control and works on top of existing layout tools like Flexbox.If Flexbox works from the content <em>out</em>, Grid works from the content grid <em>in</em>.</p>
<p>It is a very new technology with the following benefits</p>
<ol>
<li>Lighter websites : you only include the css that’s required, not all the extra features that come with a heavy framework.</li>
<li>Easier to customise than frameworks. Your websites will be much more distinguished.</li>
<li>Easier to reason about layout. No more memorizing and sprinkling around quirky class names.</li>
<li>Unless you need to support older versions of I.E, you can start using it today.</li>
<li>It allows for both complete control over layout placement, or you can let the browser do the work.</li>
</ol>
<p>This article explain further how Grid <a href="https://www.caktusgroup.com/blog/2016/12/07/css-grid-not-frameworks-are-future/">will reduce a lot of issues we web developers face</a></p>
<p>Pre-requisites:</p>
<ol>
<li>Everything upto flexbox</li>
<li>Media Queries</li>
</ol>
<h4>The Action Plan</h4>
<ol>
<li>Utilize <a href="https://medium.com/the-blog-of-dean-yeong/the-pareto-principle-a3e25b51f73">Paretto’s principle</a>: Learn the 20% essential to master the remaining 80% of css grid by dedicating 25 miutes to <a href="https://medium.com/flexbox-and-grids/how-to-efficiently-master-the-css-grid-in-a-jiffy-585d0c213577">this medium post</a></li>
<li>Back to MDN: time for some <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">high level overview</a></li>
<li>A more visual overview in this <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">beautiful guide</a></li>
<li><a href="http://cssgridgarden.com/">Grow carrots while learning grid</a></li>
<li>Video time, this <a href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY">youtube series</a> by the always excellent net ninja.</li>
<li>Enroll to this <a href="https://scrimba.com/g/gR8PTE">awesome scrimba course (video</a> + interactive)</li>
</ol>
<p>As with flexbox, the above resources are completely free. Take a moment to appreciate all the wonderful folks who dedicate their time and efforts to create such wonderful works and release it for free.</p>
<p>There is one benefit common to both Flexbox and CSS grid in addition to being future-proof.</p>
<p>While learning and using these technologies, you will not have any framework to hide behind. You will have to really know your CSS and why each element gets laid out the way it does. This is what will distinguish you from an average developer who has mastered her framework of choice.</p>
<p>Do share in the responses if you know of more wonderful resources.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d32e4af2dcc0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/become-a-2018-ready-web-developer-by-learning-flexbox-and-css-grid-d32e4af2dcc0">Become a 2018 ready Web Developer By Learning Flexbox and CSS Grid</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Become a 2018 ready Web Developer By Learning Flexbox and CSS Grid

A collection of resources to learn tomorrow’s technologies today.

Top Stories