/Styling-fundamentals

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

Primary LanguageHTML

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)