css-challenges

← overzicht

CSS challenge: Container queries en units

Oefening 0: 🌳 Media query recap-je (opwarmen)

πŸ“Š βΈΊ 🟦 πŸŸ₯

πŸ§‘β€πŸ’» βΈΊ Code voor jou (CodePen)
πŸ§‘β€πŸ’» βΈΊ Uitwerking (CodePen)

niet meteen spieken 🫣

Stappen:

  1. width > 30em β†’ icons in header groter
  2. width > 40em β†’ icons in header nog groter
  3. width > 40em β†’ tekst en icons in a’s in header naast elkaar
  4. width > 40em β†’ grotere padiing voor de header
  5. width > 27em β†’ nieuwe layout voor de cards (li’s)
  6. width > 27em β†’ img in de cards groter

Oefening 1: 🌱 My first container query (opwarmen)

πŸ“Š βΈΊ 🟦 πŸŸ₯

πŸ§‘β€πŸ’» βΈΊ Code voor jou (CodePen)
πŸ§‘β€πŸ’» βΈΊ Uitwerking (CodePen)

niet meteen spieken 🫣

Stappen:

  1. maak van de li’s een container (container-type en container-name)
  2. card width > 20em β†’ nieuwe layout voor de div
  3. card width > 20em β†’ de button rechtsboven in zijn cel

Oefening 2: 🍱 Layout met container queries

πŸ“Š βΈΊ πŸŸ₯ ⬛️

πŸ§‘β€πŸ’» βΈΊ Code voor jou (CodePen)
πŸ§‘β€πŸ’» βΈΊ Uitwerking (CodePen)

niet meteen spieken 🫣

Stappen:

  1. main β†’ width > 48em β†’ 2 gelijke kolommen (media query)
  2. section.hero β†’ 4 properties uncommenten
  3. ol β†’ 2 properties uncommenten
  4. li β†’ 5 properties uncommenten
  5. section.stappen β†’ container maken (type en name)
  6. ol β†’ width > 36em β†’ 3 gelijke kolommen
  7. li β†’ width > 36em β†’ andere layout
  8. main img β†’ width > 36em β†’ witruimte boven en onder
  9. ol β†’ hele hoogte vullen
  10. li β†’ width > 36em β†’ nog een beetje tweaken

Oefening 3: 🐑 Container queries units

πŸ“Š βΈΊ πŸŸ₯ ⬛️

πŸ§‘β€πŸ’» βΈΊ Code voor jou (CodePen)
πŸ§‘β€πŸ’» βΈΊ Uitwerking (CodePen)

niet meteen spieken 🫣

Stappen:

  1. main img β†’ breedte
  2. p β†’ font-size
  3. ol β†’ padding
  4. section.hero β†’ container
  5. h1 β†’ font-size

🎯 βΈΊ A Friendly Introduction to Container Queries (Josh Comeau πŸ§‘β€πŸ’»)
🎯 βΈΊ CSS Container Query Units (Ahmad Shadeed πŸ§‘β€πŸ’»)
🎯 βΈΊ Container Query Units and Fluid Typography (Stephanie Eckles πŸ§‘β€πŸ’»)

This site is open source. Improve this page.