Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lesson 05

430 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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 Complete Fashion Blog Create index page for your server workspace Sign up for GA Front Row & read articles
  4. 4. Lab Time Learning Objective: ● Practice web development by transforming a design comp into an HTML and CSS web page
  5. 5. Project Startup Matchmaker: ● students work in groups to determine what needs to be done ● plan -- then code -- the website
  6. 6. Project Resources (assets): ● image ● fonts used ○ Source Sans Pro ○ Merriweather ○ Oswald ● ● class web server FileZilla
  7. 7. Project Tips: ● ● ● ● sketch boxes on paper determine file structure translate sketch into “html wireframe” add content and styling to wireframe
  8. 8. Project Research needed: ● background image ● opacity ● <del> and <ins> tags ● overflow?
  9. 9. Project Bonus: ● build out two additional pages ○ Find Developers ○ Find Designers
  10. 10. Project Deliverable: ● Each team will present their work at the beginning of class on Monday, December 2
  11. 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

×