Lesson 04

443 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
443
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 04

  1. 1. Front-End Web Development Lesson 4 Layout
  2. 2. Agenda ● ● ● ● ● ● Review (15 minutes) Classes, IDs, Divs (30 minutes) HTML5 Structural Elements (20 minutes) Floats (50 minutes) How to Start (10 minutes) Lab Time (45 minutes)
  3. 3. Review FileZilla & Web Server Shared Class Web Server http://studio.generalassemb.ly/FEWDBOS5/ http://studio.generalassemb.ly/fewdbos5/ Box Model Fashion Blog
  4. 4. Classes, IDs, Divs With classes and ids we can target specific elements on a page so that we can manipulate each uniquely.
  5. 5. Classes, IDs, Divs
  6. 6. Classes, IDs, Divs Examples: <div id=”container”></div> <span class=”bold”></span> <li id=”current”></li>
  7. 7. Classes, IDs, Divs IDs are unique only one ID per page Classes are not unique can have multiple classes per page
  8. 8. Classes, IDs, Divs
  9. 9. Floats Float is a CSS positioning property, used to layout a web page. element { float: left; float: right; } NOTE: there is no float: center;
  10. 10. Classes, IDs, Divs Let’s build this … … and see how floats work
  11. 11. HTML5 Structural Elements New elements in HTML5: <header></header> <nav></nav> <article></article> <section></section> <aside></aside> <footer></footer>
  12. 12. HTML5 Structural Elements
  13. 13. HTML5 Structural Elements Assignment: Replace “old school” divs and IDs page with HTML5 structural elements
  14. 14. Floats ~ Revisit Wendy G. Bite ~ float image ~ add border ~ add margin and/or padding
  15. 15. How to Start ~ Add two-column layout to Fashion Blog
  16. 16. Lab Time ~ Build out Fashion Blog
  17. 17. Homework ~ Complete Fashion Blog ~ Create index page for your server workspace ~ Sign up for GA Front Row ~ Read A Preview of HTML 5 ~ Read CSS Float Theory ~ Read The Difference Between ID and Class

×