Guided Project
Black Swan Bistro
A guided restaurant-site build that grows from a single HTML page into a deployed multi-page project.
View ProjectCSS Basics
Learn how to style pages with selectors, layout, colour, and responsive design.
How to use this section
Work through the core styling tools that make a page readable, usable, and visually clear.
Projects in this section
Use these guided, reference, and practice projects to connect the lessons to real site work.
Reference Project
Rotto Rocks
A pathway-linked reference project that reinforces structure, navigation, images, and styling across beginner lessons.
View ProjectPractice Project
Selector Challenge
Strengthen CSS selector fluency with a focused styling challenge.
View ProjectPractice Project
Card Components
Create reusable card patterns with layout, spacing, and visual hierarchy.
View ProjectPractice Project
Color Palette
Explore colour systems and typography choices for a simple design exercise.
View ProjectPractice Project
Enhanced Photo Gallery
Upgrade a basic gallery with responsive layout and stronger CSS composition.
View ProjectPractice Project
Enhanced Personal Profile
Turn a simple profile into a more polished layout with stronger presentation.
View ProjectPractice Project
Enhanced Todo List
Expand a todo app with richer styling, motion, and interaction states.
View ProjectPractice Project
CSS Debug Practice
Work through broken styles and layout issues in a guided debugging exercise.
View ProjectLessons in this section
Introduction to CSS
Understand what CSS is, how it works with HTML, and why every website relies on it.
Start tutorial →Selectors & Properties
Learn how to target elements with selectors and style them with core CSS properties.
Start tutorial →Colors & Typography
Work with colour systems, fonts, and readable type choices for polished pages.
Start tutorial →Box Model
Control spacing with margin, padding, borders, and sizing to shape layout clearly.
Start tutorial →Layout Fundamentals
Build page layouts with positioning, columns, and modern layout thinking.
Start tutorial →Flexbox Basics
Use Flexbox utilities to align, distribute, and reorder content responsively.
Start tutorial →Responsive Design
Combine media queries and modern units to make layouts adapt to different screens.
Start tutorial →Modern CSS Features
Explore CSS variables, logical properties, and modern styling tools for cleaner code.
Start tutorial →