BOX MODEL & LAYOUTS

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

3. Sample Layouts

Sample 1

|---------------------------------|
|             <header>            |
|-----------|---------------------|
|   <nav>   |      <section>      |
|-----------|---------------------|
|             <footer>            | 
|---------------------------------|

See the Pen by vanwars (@vanwars) on CodePen.

Sample 2

|---------------------------------|
|             <header>            |
|---------------------------------|
|              <nav>              |
|-----------------|---------------|
|     <section>   |               |
|-----------------|    <aside>    |
|     <article>   |               |
|-----------------|---------------|
|             <footer>            | 
|---------------------------------|

See the Pen by vanwars (@vanwars) on CodePen.

Sample 3

To implement this layout, see the Code Pen sample below:

See the Pen by vanwars (@vanwars) on CodePen.

Sample 4

To implement this layout, see the Code Pen sample below:

See the Pen by vanwars (@vanwars) on CodePen.

results matching ""

    No results matching ""