Guided Project
Black Swan Bistro
A guided restaurant-site build that grows from a single HTML page into a deployed multi-page project.
View ProjectDesign to Code
Learn how to read a design, build reusable CSS systems, and grow a homepage into a consistent multi-page project, with optional late-stage modern CSS extensions.
How to use this section
Work through the builder-path lessons in order to move from design thinking into layout, reusable CSS patterns, component-style structures, responsive refinement, and the Black Swan Bistro project build. After the core sequence, optional modern CSS lessons extend that foundation with newer layout and architecture techniques.
Projects in this section
Use these guided, reference, and practice projects to connect the lessons to real site work.
Guided Project
Rotto Rocks
A capstone-style tourism website build that brings together HTML, CSS, responsive design, accessibility, SEO, and deployment planning.
View ProjectLessons in this section
How to Think About Layouts (Before You Write Any Code)
A mental model for breaking a design into rows, columns, and sections.
Start tutorial →How to Read a Design
Learn to extract spacing, colours, typography, and structure from a mockup.
Start tutorial →Breaking Layouts into Sections
Divide a full-page design into header, hero, content sections, and footer.
Start tutorial →Project
Black Swan Bistro (BSB) Part 2: Build the Homepage Wireframe Layout with CSS
Turn the Part 1 homepage into a low-fidelity wireframe using reusable CSS layout patterns, shared classes, and a simple colour system.
Start project →Recommended next
CSS Systems for Reusable Sections
Build a small CSS system with spacing, naming, and shared section patterns that scale beyond one page.
Start tutorial →Flexbox for Real Layouts
Deepen Flexbox skills for navigation, cards, split sections, and other one-dimensional layout decisions.
Start tutorial →Building Reusable Components
Create cards, buttons, and navbars you can reuse across pages.
Start tutorial →Project
Black Swan Bistro — Part 3: Refactor Repeated Patterns into Components
Turn repeated bistro patterns into reusable navigation, menu card, CTA, and footer components with plain HTML and CSS.
Start project →CSS Grid for Repeated Layouts
Use Grid for galleries, card collections, and page regions where rows and columns matter together.
Start tutorial →Responsive Refinement for Reusable Components
Refine reusable sections and components across breakpoints with better rhythm, sizing, and content-driven decisions.
Start tutorial →Multi-page Structure
Organise a website with multiple linked pages, shared navigation, and consistent styles.
Start tutorial →Project
Black Swan Bistro — Part 4 (Multi-page Site)
Expand the bistro into a multi-page site with menu, about, and contact pages.
Start project →Cascade, Specificity, and Debugging CSS
Understand why styles win, lose, inherit, or collide, then use that knowledge to debug CSS with more confidence.
Start tutorial →Styling Details: Selectors, Pseudo-elements, and Motion
Add finishing detail with practical selectors, pseudo-elements, transitions, transforms, and restrained animation.
Start tutorial →Modern CSS Layout Extensions
Extend Flexbox and Grid with intrinsic grids, fluid CSS, :has(), subgrid, and layout stress testing for resilient card grids.
Start tutorial →Project
BSB Part 4B: Polish and Refine
Apply cascade cleanup, detail selectors, pseudo-elements, and restrained motion to bring the Black Swan Bistro site to a polished finish.
Start project →Container Queries for Reusable Components
Build reusable components that respond to the space they live in with container-type, @container, named containers, and container query units.
Start tutorial →Coming Soon
Modern CSS Architecture
Planned optional extension on :has(), :where(), logical properties as defaults, and cascade layers for cleaner large-site CSS.
Pre-launch
Test and Validate Your Site
Build a practical pre-launch QA workflow with validation, Lighthouse, browser testing, accessibility checks, and content review.
Start tutorial →