Learn CSS Flexbox & Build 5 real world responsvie layouts using CSS3 Flexbox!
CSS Flexbox is a new layout module in CSS3 which is designed for laying out more complex site layouts easily and rapidly!
In this course, you will learn the CSS3 Flexbox from scratch and you will learn how to build real world flexible layouts with less and the easiest code using Flexbox.
In this course, we will start with the very basics of CSS3 Flexbox and then we will gradually learn more and more about CSS3 Flexbox. You will learn what is exactly Flexbox, why do you need it, what are the main components of Flexbox, we will discuss current browser support for Flexbox.
Then we will start working on flex container and we will take a detailed look at all the possible properties which can be used directly on flex container. You will also learn about the two axes of flexbox, the main axis and cross axis. We will also discuss the difference between display flex and display inline flex. And you will be learning all that with practical coding examples so you can understand flexbox module the right way.
We cover working on flex items. We will take a detailed look at all the possible properties which can be used directly on an individual flex item. Actually, you will learn about the sizing and flexibility of flex items. And of course, you will learn all that along with coding examples.
So once you learn the CSS3 Flexbox module then we will start building some real-world flexible layouts using flexbox.
You will learn about css centering using Flexbox.
I will show you how to build a simple flexible image grid with the help of flexbox. The image grid, we will build in course will look great on large screens as well as on small screens.
We will be building simple pricing tables with the help of flexbox. You will see, how with little CSS flexbox we design & align pricing tables.
We will be building a responsive header for a web page with the help of flexbox.
You will learn to build flexible cards using flexbox. We will be building these cards which will have equal height and they will look great on smaller screens; they will easily wrap on smaller screen if there is not enough space available.
By the end of this course, you will feel comfortable using Flexbox in your projects. By the end of this course, you will be a fully-fledged Flexbox developer. Thanks
CSS3 Flexbox & How it works
All the possible Flexbox properties
Flexbox with coding exercise
4 Lectures
6 Lectures
11 Lectures
7 Lectures
6 Lectures
1 Lectures
Hi, I'm senior web developer working in development field for last 8 years and with great passion for online teaching. I've worked on hundred of web projects for my happy clients, I mean 'HAPPY' clients :)Teaching online is great way to spread knowledge in this modern world, therefore I'm here to teach you best of my web development skills. Waiting...
The course was excellent. It was streamlined, clear, concise and presented nicely by the teacher. The exercises at the end were not too complex and clearly showed some of the key points of using flex in layouts. Highly recommended.
A good concentrated tutorial on flexbox. However could have used flexbox more in the example layouts. Responsive navigation could use it to space and center the menu text. Flexible Cards push the buttons to the bottom of all equal height flex container. Otherwise great focused training on flexbox and using them for common layouts.
Great introduction to flex-box with six projects. I used Corbel font instead of Lexend since it threw out an error.
Very clear and well structured. I'm halfway through and I learned a ton. Looking forward to the second half of the course.
Great course. Was really helpful for kynclient side web dev assignment!
This is exactly what I was looking for! I have been through many tutorials on YouTube but I am glad I found this course. Each step is explained in a clear and concise manner so you fully understand. The pace is just right. Just amazing!
clear and to the point on learning the material
Good content but the video is unnecessary long due to repetition.
Simple and clear explanation with hands-on exercises.
Your email address will not be published. Required fields are marked *
Courage B. I.
A job well done