Your SlideShare is downloading. ×
0
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Lesson 05
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 05

85

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×