1. Front-End Web
Development
Lesson 5
Lab

2. Agenda
● Review (10 minutes)
● Lab Time (160 minutes) +

3. Review
● Classes, IDs, Divs
● HTML5 Structural Elements
● Floats
● Wireframe folder

4. Review
● Fashion Blog
● Class Web Server
○ create personal folder (directory)
○ create subfolders (directories)
○ upload Fashion Blog
● Fashion Blog volunteers

5. Homework
● complete Fashion Blog
● Class Web Server
○ http://studio.generalassemb.ly/FEWDBOS7/
○ organize and design personal space
● read articles
○ Discussions > Lesson 4 reading

6. Lab Time
Learning Objective:
● Practice web development by
transforming a design comp into an HTML
and CSS web page

7. Project
Startup Matchmaker:
● work in teams to determine what needs to
be done
● plan -- then code -- the website

8. Project
Resources (assets):
● class web server
● FileZilla
● Git & GitHub

9. Project
Resources (assets):
● HTML Wireframe
● new template
○ demo navigation

10. Project
Resources (assets):
● image
● fonts used
○ Source Sans Pro
○ Merriweather
○ Oswald
● How to Use Google Fonts API

11. Project
Tips:
● sketch boxes on paper
● determine file structure
● translate sketch into “html wireframe”
● add content and styling to wireframe

12. Project
Research needed:
● background image
● opacity
● <del> and <ins> tags
● overflow?

13. Project
Bonus:
● build out two additional pages
○ Find Developers
○ Find Designers

14. Project
Deliverable:
● Teams will post their work
○ Class Web Server?
○ GitHub?
● Volunteer teams will present their work
at the beginning of Session 6