todos.md

• Create new directory named 03-position-layout
• Initialize Git using git init
• Create new repo using hub create
• Open project in your editor
• Create Boilerplate contents of index.html
  • html tag
  • head tag
  • title tag
  • body tag
• Create Boilerplate of style.css
  • Border Box
  • Base Font Size
  • body Margin Reset
• Commit this base set of files
• Push commit to github git push -u origin master
• Create a new develop branch
• Open index.html in your browser
• Goal: Header Layout
  • Checkpoint: Create markup to represent header
    • Markup: Banner Image
    • Markup: Brand Logo
  • Checkpoint: Style header
    • Style: Banner Image
    • Style: Brand Logo
• Commit change and push to github
• Create a new pull request with hub pull-request -m "Turning in assignment"
• Submit link to pull request to online.theironyard.com
• Goal: Sidebar and Main Article Layout
  • Checkpoint: Create markup to represent sidebar and main article (not the content inside of it!)
    • Markup: App Content
    • Markup: Sidebar
    • Markup: Main Article
  • Checkpoint: Style sidebar and main article layout
    • Style: App Content centering
    • Style: Background (for easier placement) and width sidebar
    • Style: Background (for easier placement) and width main article
• Goal: Sidebar Contents
  • Checkpoint: Create markup to represent sidebar contents
    • Markup: Sidebar brand title
    • Markup: Sidebar brand description
    • Markup: Sidebar search form
  • Checkpoint: Style sidebar contents
    • Style: Sidebar brand title
    • Style: Sidebar brand description
    • Style: Sidebar search form
• Goal: Main Contents
  • Checkpoint: Create markup to represent main contents
    • Markup: Main article title
    • Markup: Main article byline
    • Markup: Main article image
    • Markup: Main article paragraph text
  • Checkpoint: Style main contents
    • Style: Main article title
    • Style: Main article byline
    • Style: Main article image
    • Style: Main article paragraph text
• Hard Mode Goal: Alert Box
  • Checkpoint: Create markup to represent alert box
    • Markup: Alert box container
    • Markup: Alert box title
    • Markup: Alert box close button
    • Markup: Alert box Media Object Container
    • Markup: Alert box Media Object Image
    • Markup: Alert box Media Object Username
    • Markup: Alert box Media Object Description
    • Markup: Alert box Media Object Button
  • Checkpoint: Style alert box
    • Style: Alert box container
    • Style: Alert box title
    • Style: Alert box close button
    • Style: Alert box Media Object Container
    • Style: Alert box Media Object Image
    • Style: Alert box Media Object Username
    • Style: Alert box Media Object Description
    • Style: Alert box Media Object Button