• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lesson 04
 

Lesson 04

on

  • 311 views

 

Statistics

Views

Total Views
311
Views on SlideShare
311
Embed Views
0

Actions

Likes
0
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lesson 04 Lesson 04 Presentation Transcript

    • Front-End Web Development Lesson 4 Layout
    • 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)
    • Review FileZilla & Web Server Shared Class Web Server http://studio.generalassemb.ly/FEWDBOS5/ http://studio.generalassemb.ly/fewdbos5/ Box Model Fashion Blog
    • Classes, IDs, Divs With classes and ids we can target specific elements on a page so that we can manipulate each uniquely.
    • Classes, IDs, Divs
    • Classes, IDs, Divs Examples: <div id=”container”></div> <span class=”bold”></span> <li id=”current”></li>
    • Classes, IDs, Divs IDs are unique only one ID per page Classes are not unique can have multiple classes per page
    • Classes, IDs, Divs
    • Floats Float is a CSS positioning property, used to layout a web page. element { float: left; float: right; } NOTE: there is no float: center;
    • Classes, IDs, Divs Let’s build this … … and see how floats work
    • HTML5 Structural Elements New elements in HTML5: <header></header> <nav></nav> <article></article> <section></section> <aside></aside> <footer></footer>
    • HTML5 Structural Elements
    • HTML5 Structural Elements Assignment: Replace “old school” divs and IDs page with HTML5 structural elements
    • Floats ~ Revisit Wendy G. Bite ~ float image ~ add border ~ add margin and/or padding
    • How to Start ~ Add two-column layout to Fashion Blog
    • Lab Time ~ Build out Fashion Blog
    • 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