After this course, you’ll be able to use Flexbox to…
- vertically align any element
- create modern grids
- take up remaining space
- add spacing between elements
- implement complete site layouts
- and much more!
More goodies inside this course:
- I’ll answer all questions you may have along the way to make sure you reach your learning goals
- I’ve added manual, high-quality captions (CC) to this course
- To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects.
In this tutorial, you’ll learn to use each and every Flexbox property:
Styling flex containers:
Then individual flex items:
At the end, we’ll look at real-world Flexbox examples to see what kinds of layouts can be achieved:
- Simple grids with Flexbox where all columns in a row have the same size
- More advanced Flexbox grids where columns can have arbitrary sizes
- Vertical centering to vertically align any element
- Media objects, the popular OOCSS pattern
- The Holy Grail Layout, a complete site layout with sidebars and sticky footer
As a bonus, this course includes a complete Flexbox Cheat Sheet that you can use to recap all you’ve learned and to refer back to while using Flexbox.
Additionally, I included the code for a Flexbox demo showcase — which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.
Who this course is for:
- Web designers and developers who want to improve their frontend skills
- Designers who want to increase their productivity
- Anyone who wants to keep up with newest developments in web standards
- Basic HTML & CSS
- Using a code editor
Last updated 2/2018
The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2018.zip | Mirror [Size: 298.2 MB]
Download Torrent (Please seed after downloading)