css-challenges

← overzicht

CSS challenge 6: Fonts en font-properties (en kleuren)

🗓️ ⸺ Dinsdag 19 november
⏰ ⸺ 9:30 - ca 11:30 uur
🙋 ⸺ even aanmelden - max 24

📗 ⸺ Fonts en font-properties intro (pdf 3MB)

Code

🧑‍💻 ⸺ Code voor oefening 1, 2 en 3 (GitHub - even forken)

Oefening 1: 🌱 Fonts en font-properties (opwarmen)

📊 ⸺ 🟦 🟥

📙 ⸺ Typografie oefening 1 (pdf)

🧑‍💻 ⸺ Uitwerking (CodePen)

niet meteen spieken 🫣

Oefening 2: 🦚 Mini posters

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ Typografie oefening 2 (pdf 3MB)

🧑‍💻 ⸺ Uitwerking (CodePen)
🧑‍💻 ⸺ Uitwerking met extra’s (CodePen)

niet meteen spieken 🫣

Oefening 3: 🦋 Variabele fonts

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ Typografie oefening 3 (pdf 3MB)

🧑‍💻 ⸺ Uitwerking (CodePen)
🧑‍💻 ⸺ Uitwerking met extra’s (CodePen)

niet meteen spieken 🫣

🎯 ⸺ web-safe fonts (www 🧑‍💻)

🎯 ⸺ @font-face intro (w3schools 🐥)
🎯 ⸺ @font-face uitgebreider (MDN 🦊)

🎯 ⸺ font-weight (MDN 🦊)
🎯 ⸺ font-style (MDN 🦊)
🎯 ⸺ font-strectch (MDN 🦊)
🎯 ⸺ font-display (MDN 🦊)
🎯 ⸺ font-variation-settings (MDN 🦊)

🎯 ⸺ variabele fonts intro (MDN 🦊)
🎯 ⸺ variabele fonts collectie (Google fonts🦖)
🎯 ⸺ variabele fonts voorbeelden (www 🧑‍💻)

🎯 ⸺ wakamaifondue - de font info tool (roel niekskens 🤴)
🎯 ⸺ Font Squirrel - font generator (www 🐿️)

🎯 ⸺ FOIT vs FOUT (www 🧑‍💻)
🎯 ⸺ Google fonts illegaal in EU (www 🧑‍💻)

This site is open source. Improve this page.