15 - Flexbox I | Robbin Law

The following file is required for this lesson:

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Download the demo-flexbox.zip file and extract its contents to a folder called demo-flexbox.
The result of this demo should look like:
Modify the <footer> element in index.html to look like:
Calculate the width of each <div> in the <main> using the following steps:
1. Subtract the final right margin: 960 - 10 = 950
2. Subtract the left margin of each <div>: 950 – 20 = 930
3. Divide that result by 2: 930 / 2 = 465
In the css folder add the following code:
1. Style the <main> element:
2. Style the <div> elements:
3. Create a class called .red-paint:
4. Create a class called .blue-paint:
5. Create a class called .black-paint:
6. Style the <footer> element:
Open the index.html file in your browser. If the result is different, make any necessary corrections, and refresh your browser.
In your browser, open the developer tools and examine the widths of each of the <div> elements in the <main>:
As an experiment, adjust the size in the main > div to:
1. width: 465px;
2. width: 470px;