1. Front-End Web
Development
Lesson 4
Layout

2. Agenda
●
●
●
●
●
●
Review (15 minutes)
Classes, IDs, Divs (30 minutes)
HTML5 Structural Elements (20 minutes)
Floats (50 minutes)
How to Start (10 minutes)
Lab Time (45 minutes)

3. Review
FileZilla & Web Server
Shared Class Web Server
http://studio.generalassemb.ly/FEWDBOS5/
http://studio.generalassemb.ly/fewdbos5/
Git and GitHub

4. Review
Box Model
Fashion Blog

5. Classes, IDs, Divs
With classes and ids we can target specific
elements on a page so that we can manipulate
each uniquely.

6. Classes, IDs, Divs

7. Classes, IDs, Divs
Examples:
<div id=”container”></div>
<span class=”bold”></span>
<li id=”current”></li>

8. Classes, IDs, Divs
IDs are unique
only one ID per page
Classes are not unique
can have multiple classes per page

9. Classes, IDs, Divs

10. Floats
Float is a CSS positioning property, used to
layout a web page.
element {
float: left;
float: right;
}
NOTE: there is no float: center;

11. Classes, IDs, Divs
Let’s build this …
… and see how
floats work

12. HTML5 Structural Elements
New elements in HTML5:
<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>

13. HTML5 Structural Elements

14. HTML5 Structural Elements
Assignment:
Replace “old school” divs and IDs page with
HTML5 structural elements

15. Floats
~ Revisit Wendy G. Bite
~ float image
~ add border
~ add margin and/or padding

16. How to Start
~ Add two-column layout to Fashion Blog

17. Lab Time
~ Build out Fashion Blog

18. Homework
~ Complete Fashion Blog
~ Create index page for your server workspace
~ Sign up for GA Front Row
~ Read A Preview of HTML 5
~ Read CSS Float Theory
~ Read The Difference Between ID and Class