Front-End Web
Development
Lesson 5
Lab
Agenda
● Review (10 minutes)
● Lab Time (160 minutes) +
Review
● Classes, IDs, Divs
● HTML5 Structural Elements
● Floats
● Wireframe folder
Review
● Fashion Blog
● Class Web Server
○ create personal folder (directory)
○ create subfolders (directories)
○ upload F...
Homework
● complete Fashion Blog
● Class Web Server
○ http://studio.generalassemb.ly/FEWDBOS7/
○ organize and design perso...
Lab Time
Learning Objective:
● Practice web development by
transforming a design comp into an HTML
and CSS web page
Project
Startup Matchmaker:
● work in teams to determine what needs to
be done
● plan -- then code -- the website
Project
Resources (assets):
● class web server
● FileZilla
● Git & GitHub
Project
Resources (assets):
● HTML Wireframe
● new template
○ demo navigation
Project
Resources (assets):
● image
● fonts used
○ Source Sans Pro
○ Merriweather
○ Oswald
● How to Use Google Fonts API
Project
Tips:
● sketch boxes on paper
● determine file structure
● translate sketch into “html wireframe”
● add content an...
Project
Research needed:
● background image
● opacity
● <del> and <ins> tags
● overflow?
Project
Bonus:
● build out two additional pages
○ Find Developers
○ Find Designers
Project
Deliverable:
● Teams will post their work
○ Class Web Server?
○ GitHub?
● Volunteer teams will present their work
...
Upcoming SlideShare
Loading in...5
×

Lesson 05

95

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
95
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lesson 05"

  1. 1. Front-End Web Development Lesson 5 Lab
  2. 2. Agenda ● Review (10 minutes) ● Lab Time (160 minutes) +
  3. 3. Review ● Classes, IDs, Divs ● HTML5 Structural Elements ● Floats ● Wireframe folder
  4. 4. Review ● Fashion Blog ● Class Web Server ○ create personal folder (directory) ○ create subfolders (directories) ○ upload Fashion Blog ● Fashion Blog volunteers
  5. 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. 6. Lab Time Learning Objective: ● Practice web development by transforming a design comp into an HTML and CSS web page
  7. 7. Project Startup Matchmaker: ● work in teams to determine what needs to be done ● plan -- then code -- the website
  8. 8. Project Resources (assets): ● class web server ● FileZilla ● Git & GitHub
  9. 9. Project Resources (assets): ● HTML Wireframe ● new template ○ demo navigation
  10. 10. Project Resources (assets): ● image ● fonts used ○ Source Sans Pro ○ Merriweather ○ Oswald ● How to Use Google Fonts API
  11. 11. Project Tips: ● sketch boxes on paper ● determine file structure ● translate sketch into “html wireframe” ● add content and styling to wireframe
  12. 12. Project Research needed: ● background image ● opacity ● <del> and <ins> tags ● overflow?
  13. 13. Project Bonus: ● build out two additional pages ○ Find Developers ○ Find Designers
  14. 14. Project Deliverable: ● Teams will post their work ○ Class Web Server? ○ GitHub? ● Volunteer teams will present their work at the beginning of Session 6
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×