Box Model & Layouts
1. Recommended Lynda.com Videos
| What is the box model? | 5:11 |
| Margins & padding | 4:25 |
| Borders | 4:09 |
| Backgrounds | 5:08 |
| Element positioning | 7:04 |
| Floats | 4:49 |
| Basic CSS layout concepts | 5:14 |
| Media types and media queries | 5:19 |
| Using CSS frameworks & grids | 5:12 |
| Popular CSS frameworks | 2:42 |
2. Additional Resources
- W3Schools CSS Property Reference:
- display
- box-sizing
- border
- padding
- margin
- width / height
- Practice Activity
3. Sample Layouts
Sample 1
|---------------------------------|
| <header> |
|-----------|---------------------|
| <nav> | <section> |
|-----------|---------------------|
| <footer> |
|---------------------------------|
Sample 2
|---------------------------------|
| <header> |
|---------------------------------|
| <nav> |
|-----------------|---------------|
| <section> | |
|-----------------| <aside> |
| <article> | |
|-----------------|---------------|
| <footer> |
|---------------------------------|
Sample 3
To implement this layout, see the Code Pen sample below:
Sample 4
To implement this layout, see the Code Pen sample below:
