This document outlines the agenda and content for a front-end web development lesson on layout. The lesson will cover reviewing concepts from previous classes, using classes, IDs and divs to target and style elements, HTML5 structural elements, floats, how to get started, and will conclude with lab time to work on homework assignments which include creating an index page and completing work on a fashion blog project.

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