Gain insights into designing mobile-responsive web layouts using Flexbox. Delve into Box Model basics, Flexbox containers, and item alignment, and apply your knowledge to create stunning, mobile-first websites.

CBCA - CSS with Flexbox (Intermediate)-01.jpg

In this course, you will get hands-on experience in designing mobile-responsive web layouts using Flexbox. You will start with the basics like the Box Model and the process of layouting.

You will then move on to advanced concepts such as Flexbox containers, and aligning individual Flexbox items. Near the end of the course, you will put everything you just learned into practice. You will work on a project that focuses on developing a mobile-first website where you’ll experiment with page layout, headers, footers, and a lot more.

By the end of this course, you will be able to use Flexbox in your own projects to create beautiful layouts.

Designing Web Layouts with CSS and Flexbox

## Removing the border

Wherever you see a `border: 1px solid black;` rule, remove it. We won't need these borders anymore, as our page is well defined and the layout does not need to be changed.

## Introducing CSS variables 

CSS variables help us define a consistent palette for our application. Create descriptive names for your variables, and use them everywhere in your CSS. Once you need to change a color, you only need to perform the update in one place.

Variables are added to the `:root` element of the document and are accessible everywhere in the document.

```css
:root {
  --dark-color: #222222;
  --light-color: #dddddd;
  --highlight-color: #eeeeee;
}
```

To access a variable as a value, use the notation `var(--variable-name)`. For instance, to set the color of an element `.x`, the following rule is needed: 

```css
.x {
  color: var(--variable-name);
}
```

## Changing the colors and backgrounds 

We will use one dark and one light color to define a header and a footer with a dark background and light text; and a main light  area with dark text.

We will also use a `--highlight-color` background to highlight the featured blog post. 

After defining the palette, change the `color` and `background-color` properties of the layout items that previously had creative colorful backgrounds.

After finishing this step, you will see that the links stay dark blue. As dark blue is hard to read on a black background, we will need to change the color of links. It makes sense changing all link variant styles, including visited links, active links, and hover links.

```css
.nav-link, .nav-link:visited, .nav-link:active, .nav-link:hover,
.footer-link, .footer-link:visited, .footer-link:active, .footer-link:hover {
  color: var(--light-color);
}
```

The end result looks as follows:

# Removing the border

Wherever you see a `border: 1px solid black;` rule, remove it. We won't need these borders anymore, as our page is well defined and the layout does not need to be changed.

# Introducing CSS variables 

CSS variables help us define a consistent palette for our application. Create descriptive names for your variables, and use them everywhere in your CSS. Once you need to change a color, you only need to perform the update in one place.

Variables are added to the `:root` element of the document and are accessible everywhere in the document.

```css
:root {
  --dark-color: #222222;
  --light-color: #dddddd;
  --highlight-color: #eeeeee;
}
```

To access a variable as a value, use the notation `var(--variable-name)`. For instance, to set the color of an element `.x`, the following rule is needed: 

```css
.x {
  color: var(--variable-name);
}
```

# Changing the colors and backgrounds 

We will use one dark and one light color to define a header and a footer with a dark background and light text; and a main light  area with dark text.

We will also use a `--highlight-color` background to highlight the featured blog post. 

After defining the palette, change the `color` and `background-color` properties of the layout items that previously had creative colorful backgrounds.

After finishing this step, you will see that the links stay dark blue. As dark blue is hard to read on a black background, we will need to change the color of links. It makes sense changing all link variant styles, including visited links, active links, and hover links.

```css
.nav-link, .nav-link:visited, .nav-link:active, .nav-link:hover,
.footer-link, .footer-link:visited, .footer-link:active, .footer-link:hover {
  color: var(--light-color);
}
```

The end result looks as follows:

During top-down design, it makes sense to signal the boundaries of layout items with borders. Backgrounds may help too. Once the layout of your document is defined, remove these helpers.

Getting Started

Using Flexbox Containers

Aligning Individual Flexbox Items

Designing a Mobile-first Website Using Flexbox

Flexbox Conclusion and Next Steps

Removing the Layout Indicators

Removing the border

Introducing CSS variables