Day 2

• Take Home Review
• More HTML
• Daily Challenge
• CSS
• Take Home Challenge

Hover here to view take home answers

• Void Elements (aka Self-Closing Tags)
• • <hr>
  • <link>
  • <meta>
  • <br>
  • ...full list
• Hyperlinks
• Entities, entity syntax &name;
• Best Practices
• • Nesting
  • Code indentation

1. Create a New Folder in your Desktop
2. Open that folder in VS Code
3. Create a new Visual Studio Code File in that folder
4. Add the following content to your HTML page:
   • Heading
   • Paragraph
   • Hyperlink to an external website
   • Unordered List
   • BONUS: Add the Doctype, Head and Body elements.
5. Save your work!
6. Right click your code > "Open with Live Server" to view your work in the browser!

• Cascading Style Sheet
• Syntax

          selector { property: value; }
        

• Readability

        
selector {
  property: value;
}

selector2 {
  property: value;
}

/* comment */
        
      

• CSS Properties
• Cascade and Inheritance
• Specificity
• Units
• Box Model
• • Margin vs Padding
    • margin collapsing
• Box Sizing
• Color Values
• Color Resources
  • W3Schools Color Picker
  • Adobe Color Theme Creator
  • Color Pick Eydropper Browser Extension (Chrome)
  • ColorZilla Browser Extension (Chrome / Firefox)

1. Create a new Visual Studio Code File
2. Create 4 div elements as described:
   • Size: 100px height / 100px width
   • Color: Any. (Must use a hexadecimal color value)
   • Arrangement: Vertically stacked with space around each div.
   • BONUS: Display divs horizontally
   • BONUS: Give each div a different color