Course Introduction

Layouting is hard in CSS for some people, while it is very easy for others. If you fall under the first category, you may be wondering how great website layouts are created. You may even admire the secret talent of some developers who make seemingly anything happen.

What if there was a way for you to become this extra-talented developer by the end of this course? What if you found out that the “talent” that separates you from creating cutting-edge designs is Flexbox?

While many people learn the block, inline, inline-block layout modes, floating techniques, absolute and relative positioning, there is one ingredient that can be used in most cases: Flexbox.

In this course, we will learn how to create stunning designs with Flexbox, and find out why and how it is structurally superior to other solutions. This means that we will use Flexbox for:

• Creating a three-column layout instead of inline-block content,
• Centering your elements horizontally or vertically instead of applying auto margins or absolutely positioning elements
• Creating navbars
• Layouting problems

What to expect?

The course is structured as follows:

1. In this part, we will highlight CSS techniques and challenges that will be useful in the upcoming chapters. While we won’t cover Flexbox in this section, we will get a glimpse at how powerful Flexbox is.
2. In part two, we will learn about Flexbox containers and their properties
3. In part three, we will learn about the properties of Flexbox elements.
4. No course can be complete without a real-world example. Therefore, we will build a mobile-first website using Flexbox in part four.

Objectives of part one - getting started with Flexbox

By the end of this chapter, you will not only refresh your CSS knowledge, but you will also be able to create a website layout with the following features:

• Multi-column layout
• Mobile-first responsive design
• Fluid or fixed containers

After a brief review of the fundamentals of CSS declarations, you will learn how the box model is structured. The importance of the box model is not only to understand how margins, borders, paddings, and content dimensions are rendered. You will also understand why the border-box box-sizing model is important when it comes to writing solid CSS

We will properly introduce the block, inline, and inline-block display modes, and we’ll put them into practice by creating a three-column layout.

The examples in this course will illustrate why Flexbox is a better choice for multi-column layouts compared to inline-block styling.

Flexbox works well with media queries. Therefore, we will review the basics of writing responsive breakpoints using media queries, illustrating the principles of mobile-first responsive design with real examples.

By the end of Part One, you will be able to create the following web layout on your own:

As the objective of part one is to review CSS from the perspective of introducing and using Flexbox, if you completely understand the above example, feel free to skip most of part one, and head over to part two after reading the lesson titled Solution with Flexbox.