Day 3

• Take Home Review
• Display Property
• Visibility Property
• Opacity Property
• Daily Challenge
• Branding & Design Best Practices
• Lists and Navigation
• Take Home Challenge

• Questions?

• Universal syntax: * { ... }
• Element (aka Type) syntax: element { ... }
• Classes syntax: .class1 { ... }
• IDs syntax: #id1 { ... }

⚠️ Advanced

• Attributes syntax: [attr1="val1"] { ... }
• Pseudo-elements syntax: ::pseudo-element { ... }
• Pseudo-class syntax: :pseudo-class { ... }
• Grouping syntax: selector1, selector2, selector3 { ... }
• Combinators "space", >, ~, and +

• Normal flow
• Block elements
  • think vertical
  • stack up like pancakes
  • don't want any elements to their left or right side
  • take the full width available
  • height is dictated by the content
  • css properties: width, height, margin, and padding will work
  • default block elements
• Inline elements
  • think horizontal
  • share the horizontal space as much as possible, if room runs out then they wrap around to next line. Similar to a movie theater being filled row by row as more people come in
  • the width and height is dictated by the content
  • css properties: width, height, margin, and padding will NOT work as expected
  • default inline elements
• Inline-Block elements
  • a hybrid between block and inline elements
  • css properties: width, height, margin, and padding will work as expected
  • suffer from phantom space

• Common Uses
• More Property Values

1. Using the Visual Studio Code file from your take home challenge:
2. Add more boxes - the more the better
3. Hide every other box so that it creates a checkerboard pattern
4. (Hint): Resize your screen to see how the boxes wrap around
5. Save your work!
6. Right click your code > "Open with Live Server" to view your work in the browser!
7. Example:

• Common Uses

• Common Uses

• Worst Websites:
• (Visual)
  • The World's Worst Website Ever
  • Yale School of Art: Home
• Best Websites:
• (Visual)
  • Awwwards
  • X Energy
• Best Practices:
  • Tips for Organizing CSS

• Lists
  • ul vs li
  • List item styling
  • ::marker
• Navbar

1. Create a new Visual Studio Code File
2. Create a horizontal navbar with 3 nav items
3. Add hyperlinks to each nav item
4. Save your work!