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
Complete Fashion Blog
Create index page for your server workspace
Sign up for GA Front Row & read articles

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

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

6. Project
Resources (assets):
● image
● fonts used
○ Source Sans Pro
○ Merriweather
○ Oswald
●
●
class web server
FileZilla

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

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

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

10. Project
Deliverable:
● Each team will present their work at the
beginning of class on Monday,
December 2

11. Homework
●
●
●
●
Watch football, eat turkey and take nap
Complete Startup Matchmaker
Create index page for your server workspace
Sign up for GA Front Row & read articles