The Complete CSS Flexbox Guide With a Complete Project 2019
4.7 (77 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,367 students enrolled

The Complete CSS Flexbox Guide With a Complete Project 2019

understand the concept behind css flexbox and create a real world project with complex responsive layouts using flexbox
4.7 (77 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,367 students enrolled
Created by Ahmed Sadek
Last updated 12/2018
English
English [Auto-generated]
Current price: $11.99 Original price: $199.99 Discount: 94% off
4 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 29 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • understand everything about flexbox and how it actually works
  • build advanced responsive layouts fast and easily with minimal code using flexbox

  • build menus using flexbox

  • build a complete website with advanced responsive layouts like ( the holy grail layout - the equal columns layout - the horizontal masonry layout ) and so much more!
  • enhance your productivity and save more time as a web developer
  • build photo galleries using flexbox
Course content
Expand all 30 lectures 02:24:48
+ css flexbox basics
5 lectures 16:35
understanding main and cross axes
05:01
more about flex flow property
02:24
learning the flex wrap property
01:54
+ controlling the alignment of elements using css flexbox
6 lectures 20:47
aligning elements with justify content property
05:38
more about justify content
02:13
aligning elements with align items property
04:48
aligning a single element with align self property
02:47
aligning multiple lines with align content property
02:33
learning the order property
02:48
+ controlling the sizing of elements using flexbox
3 lectures 15:40
flex grow
06:31
flex shrink
04:48
flex basis
04:21
+ use flexbox in action and build two menus
3 lectures 18:01
section overview and starting files
01:33
building an advanced menu with flexbox
07:28
+ our flexbox-based project
13 lectures 01:13:45
overview of our final project
04:09
building the holygrail layout
05:32
building our header using flexbox
06:36
building and styling our posts section
07:05
adding flexbox to our posts
03:51
building and styling the watch section
04:42
adding flexbox to the watch section
02:45
building and styling the download section
07:20
adding flexbox to the download section
07:53
adding gallery lightbox plugin to our gallery
03:54
building our sidebar using flexbox
06:38
building our menu and our footer
04:38
Requirements
  • An Internet Connection
  • Basic Understanding Of HTML & CSS
  • Any Code Editor Of Your Choice
Description

Are you tired of using floats then clearing these floats ?   

Are you tired of using positioning to achieve the layout you want and then finding out that the everything collapses when you view it on different screen sizes ?

do you want an efficient way to create complex layouts easily and quickly ?

do you want to create advanced responsive layouts using css only with just simple lines of code ?   

if so then this course is for you !


In this course you will learn everything you need to know to get started using flexbox in your future projects   

We will start by learning and understanding how flexbox works, because I think if you used flexbox before you might be overwhelmed by the number of new properties, we have about 11 or 12 new properties with an average of 4 potential values so it can be a little bit overwhelming to jump right in with everything,    

but in this course you will clearly understand how every property works and how a specific property can be used to control the layout in different ways    

I believe in learning by doing so after understanding and learning all the properties of flexbox we will get our hands dirty and we will start by building two menus, a simple single level menu and  an advanced one and in this section of the course you will see every thing you learned in action step by step   

One thing I put in my mind when I was building this course is that I wanted this course to stand out from other courses so I noticed that in all other flexbox courses you will just see some boxes on the screen all the time and the instructor is just moving them around using flexbox and at the end, the course will be finished and you become like "ok that was good i learned the basics of flexbox but now what? How can I use this knowledge in real world examples"   

 because after all the web pages are not some boxes moving around, right ? and that is exactly why I created the last section of the course.   

So in this last section we will build a complete project from scratch that I built for you , and my main focus while I was building this project is how to implement every property we will learn about flexbox in this project so you get a solid understanding of what we can do using these properties in real life!

So in this project you will learn how to create many advanced different layouts like

1 - the holygrail layout

2 - you will learn how to center elements vertically easily

3 - how to build posts articles with equal heights easily using flexbox

4 - very advanced cards layouts that is almost impossible to attain without flexbox

5 - the horizontal masonry layout which is very interesting

Who this course is for:
  • web designers and developers who want to improve their skills
  • front end web developers who wants to be able to build advanced layouts easily and faster
  • web developers who want to build responsive layouts without having to use frameworks like bootstrap
  • experienced web developers who want to create websites layouts in a much more easy way
  • any web developer who wants to improve his productivity and save time