The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2018 هذه الدورة تدرس باللغة الإنجليزية

تفاصيل الدورة

After this course, you'll be able touse Flexboxto...

• vertically align any element
• create moderngrids
• take up remaining space
• add spacing between elements
• implement complete site layouts
• and much more!

More goodies inside this course:

• I'll answer allquestions 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-projectswillmanifest your skills and enable youto use Flexbox productively in future web designprojects.

What Students Say About Me (takenfrom other courses of mine)

Such a great course. second one for me with Peter Sommerhoff.
a great Instructor, uses very easy way to explain the materials.

- Ahmed

I absolutely LOVE this course, it teaches everything you need in details
and more! They really do listen to their students and answer as fast as
the road runner. Thanks so much for posting your course and I am
looking forward other courses!

- Ana

Great course, Peter explained it thoroughly, and he answers any questions within a day.

- Dunja

The course covered the required information quickly and concisely
without fluff or wasted motion. It provides sufficient pointers to
additional information and documentation. I thought it was a good
value.

- Robert

I'm glad to have received such great reviews from my students -- and I'll do my best to provide you with the best learning Ican as well.

Check out the free preview videos below.

Ilook forward to seeing you inside :)

***

In this tutorial, you'll learn to use each and everyFlexbox property:

Styling flex containers:

1. flex-direction
2. justify-content
3. align-items
4. flex-wrap
5. align-content

Then individual flex items:

1. order
2. align-self
3. flex-grow
4. flex-shrink
5. flex-basis
6. flex

At the end, we'll look at real-worldFlexbox examples to see what kinds of layouts can be achieved:

1. Simple grids with Flexbox where all columns in a row have the same size
2. More advanced Flexboxgrids where columns can have arbitrary sizes
3. Vertical centering to vertically align any element
4. Media objects,the popular OOCSSpattern
5. The Holy Grail Layout,a complete sitelayout 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, Iincluded thecode fora Flexbox demo showcase-- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layoutexample from this tutorial.