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/
Box Model
Fashion Blog

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

5. Classes, IDs, Divs

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

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

8. Classes, IDs, Divs

9. Classes, IDs, Divs

10. Classes, IDs, Divs

11. HTML5 Structural Elements

12. Floats

13. How to Start

14. Lab Time

15. Homework
~ Create an index page for your server
workspace
~ Read A Preview of HTML 5
~ Complete Fashion Blog