Lesson 04

Lesson 04

• 1.
  Front-End Web Development Lesson 4 Layout
• 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.
  Review FileZilla & WebServer Shared Class Web Server http://studio.generalassemb.ly/FEWDBOS5/ http://studio.generalassemb.ly/fewdbos5/ Box Model Fashion Blog
• 4.
  Classes, IDs, Divs Withclasses and ids we can target specific elements on a page so that we can manipulate each uniquely.
• 5.
  Classes, IDs, Divs
• 6.
  Classes, IDs, Divs Examples: <divid=”container”></div> <span class=”bold”></span> <li id=”current”></li>
• 7.
  Classes, IDs, Divs IDsare unique only one ID per page Classes are not unique can have multiple classes per page
• 8.
  Classes, IDs, Divs
• 9.
  Floats Float is aCSS positioning property, used to layout a web page. element { float: left; float: right; } NOTE: there is no float: center;
• 10.
  Classes, IDs, Divs Let’sbuild this … … and see how floats work
• 11.
  HTML5 Structural Elements Newelements in HTML5: <header></header> <nav></nav> <article></article> <section></section> <aside></aside> <footer></footer>
• 12.
  HTML5 Structural Elements
• 13.
  HTML5 Structural Elements Assignment: Replace“old school” divs and IDs page with HTML5 structural elements
• 14.
  Floats ~ Revisit WendyG. Bite ~ float image ~ add border ~ add margin and/or padding
• 15.
  How to Start ~Add two-column layout to Fashion Blog
• 16.
  Lab Time ~ Buildout Fashion Blog
• 17.
  Homework ~ Complete FashionBlog ~ 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