Class Agenda

1. Normal Flow

This section will help the students to understand how webpage elements are laid out by default.

Last class introduced the idea that everything on the page is a box.
By default, these boxes can be stacked up on top of one another, or side by side
Revision: What does block level and inline elements mean?
Discuss display: inline-block. How is it similar/different to block and inline?

You can change how elements behave in normal flow with the display property.

Exercise:

Apply a border on all elements on your page.
Using the dev tools, identify elements with display block and change them to inline (and vice versa)
Observe how the flow of elements on the page changes

Float was originally introduced to simple layouts like wrapping text around an image (borrowed from print design).
But it became used to achieve more complex layouts
Exercises:
- We will restructure our HTML a little bit
  - Pull out the nav content out of the header, so it is a direct child of the body
  - Copy and paste the nav across the other HTML files
  - In index.html, the header should now be below the nav and should contain then h1 and img
  - Check Checkpoint 12 for example with completed steps
- We will use Float to layout our header contain (logo on the right, navigation bar on the left)
In the exercises, we’ll learn:
- float: left
- float: right
- Clearing floats