CSS

Lessons

1. 1Linking CSS & SetupYou'll learn the ways to add CSS to a page and why a separate linked stylesheet is usually best. Keeping structure (HTML) and appearance (CSS) apart makes both easier to change.
2. 2Selectors & PropertiesYou'll learn how selectors choose which elements to style, and how specificity decides which rule wins when two rules conflict.
3. 3The Box ModelEvery HTML element is drawn as a box made of content, padding, border and margin. Understanding this box model makes sizing and spacing much more predictable.
4. 4FlexboxFlexbox lays items out in a single row or column and makes alignment and spacing straightforward. You'll use it for navbars, rows of cards, and centering content.
5. 5CSS GridCSS Grid lets you lay out content in rows and columns at the same time. You'll use it for page layouts, galleries and anything that needs a two-dimensional structure.
6. 6Responsive DesignPeople will view your site on phones, tablets and large monitors. You'll learn how media queries and flexible units let one layout adapt to all of them.
7. 7Animations & TransitionsYou'll learn how to animate changes with transitions and keyframe animations. Used with restraint, motion helps guide attention and gives users feedback.
8. 8Mini Project: Card ComponentYou'll build a responsive card component, one of the most common patterns in web interfaces, using what you've learned about the box model, Flexbox and Grid.
9. 9CSS CheatsheetSelectors, box model, flexbox, grid, and responsive patterns on one page.

Install it on your own computer

All you need is a text editor and a web browser. Create a .css file, link it from your HTML page, and open the page in your browser to see the styles applied. You do not need this to follow the lessons: the examples run in your browser.

# Same as HTML — just a text editor + browser
# VS Code with these extensions helps enormously:
# - CSS Peek
# - IntelliSense for CSS
# - Live Server

# Create style.css, link it in your HTML:
# <link rel="stylesheet" href="style.css">

What people build with CSS

Learn the basics first, then pick up these tools when a project needs them.