Styling Fundametals

This workshop will give a short introduction to styling (CSS), and contain assignments aimed at practising the fundametals of styling for modern websites.

What you need

• Any modern web browser: Firefox, Chrome etc

Exercises

Exercise 1 - The cascade, selectors, and specificity

Exercise 2 - Sizing and the box model

Exercise 3 - Layout using flex box and floats

Exercise 4 - Making it responsive with media queries

Exercise 5 - Introduction to transform and transition

Exercise 6 - Freestyle

Icons with special meaning

• ✏️ - A task you should do
• 📖 - A section of text to read (no tasks, just information).
• 💡 - Additional information.
• ❗ - Something important.
• ❓ - Open-ended question for the reader ("What do you think would happen if...")
• 💩 - Bad practice (don't-do-this)
• ⭐ - A bonus task (not required)

Nice to have links

CSS Properties (W3Schools)

CSS Selectors (W3Schools)

Psaudo-classes (MDN web docs)

Flexboxfroggy - A game to learn flexbox

A Complete Guide to Flexbox (CSS-tricks.com)