Choose your learning path
Practical, project-based tutorials that take you from zero to a live website one step at a time.
Learning Pathways
Where are you in your learning journey?
Curriculum Roadmap
Core concepts every web developer should understand before writing code.
How the Web Actually Works
Understand browsers, servers, HTTP, and what happens when you type a URL.
Start tutorial →Web Development Basics
HTML, CSS, and JavaScript — what each language does and how they work together.
Start tutorial →Text Editors & VS Code
Choose the right editor, install VS Code, and learn essential shortcuts and extensions.
Start tutorial →Setting Up Your Development Environment
Install Node.js, set up your terminal, and configure your machine for web development.
Start tutorial →Browser Development Tools
Use Chrome DevTools to inspect elements, debug CSS, and monitor network requests.
Start tutorial →Domains, DNS, and Hosting
Learn how domain names, DNS records, and web hosting work together.
Start tutorial →Files, Folders, and Project Structure
How to organise files, name them properly, and set up a project folder.
Start tutorial →Your first lines of code — HTML, CSS, JavaScript, and your first real project.
HTML Essentials
8 lessons covering elements, text, links, images, forms, and document structure.
Start tutorial →CSS Essentials
9 lessons covering selectors, the box model, colours, typography, layout, responsiveness, and Flexbox.
Start tutorial →Why Your CSS Isn't Working (And How to Fix It)
Common CSS pitfalls — specificity, inheritance, typos — and how to debug them.
Start tutorial →JavaScript Essentials
6 lessons covering variables, operators, conditionals, loops, and functions.
Start tutorial →DOM & Interactive JavaScript
7 lessons covering DOM selection, manipulation, traversal, event handling, advanced events, dynamic content, and arrays.
Start tutorial →From Idea to Live Website: The Full Journey Explained
A high-level walkthrough of the entire process from concept to deployment.
Start tutorial →Black Swan Bistro — Part 1 (Build Your First Web Page)
Create a real restaurant homepage from scratch using HTML and CSS.
Start project →Layouts, components, multi-page sites, and professional workflows.
Git & GitHub Basics
9 lessons covering setup, commits, branching, remotes, workflows, and a final wrap-up.
Start tutorial →Design to Code Builder Path
14 lessons covering layout thinking, reusable CSS systems, component patterns, responsive refinement, and the Black Swan Bistro build from wireframe to multi-page site.
Start tutorial →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 →CSS Systems for Reusable Sections
Build a small CSS system with spacing, naming, and shared section patterns that scale beyond one page.
Start tutorial →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 →Black Swan Bistro — Part 4 (Multi-page Site)
Expand the bistro into a multi-page site with menu, about, and contact pages.
Start 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 →How to Debug a Broken Web Page (Step-by-Step)
A systematic approach to finding and fixing HTML, CSS, and JS bugs.
Start tutorial →Applied JavaScript
8 lessons on state, rendering, validation, events, debugging, and maintainable JavaScript for real interfaces.
Start tutorial →Working with Data
5 lessons on async JavaScript, fetch(), JSON, async/await, and rendering live API data into a real interface.
Start tutorial →Frameworks 101
5 lessons introducing JavaScript and CSS frameworks, what they solve, and how to evaluate them responsibly.
Start tutorial →How to Evaluate a Framework Without Panic
Use a calm decision-making checklist to judge whether a framework fits your project, team, and current skill level.
Start tutorial →Deployment, domains, SEO, accessibility, and long-term site care.
Black Swan Bistro — Part 5 (Prepare for Deployment)
Optimise assets, add meta tags, and prepare the bistro site for production.
Start project →Black Swan Bistro — Part 6 (Deploy the Site)
Push the bistro project to GitHub and deploy it live on the web.
Start project →Domains, DNS, and Going Live
Point a custom domain to your hosted site and go live.
Start tutorial →Do You Actually Need a CMS?
Understand when a CMS makes sense — and when static HTML is just fine.
Start tutorial →Black Swan Bistro — Part 7 (Maintain & Improve)
Add analytics, update content, improve performance, and keep the site healthy.
Start project →Recommended Starting Points
Start here
How the Web Actually Works
Understand browsers, servers, HTTP, and what happens when you type a URL.
Start tutorial →Most practical
Black Swan Bistro — Part 1 (Build Your First Web Page)
Create a real restaurant homepage from scratch using HTML and CSS.
Start project →Best for DIY site owners
Hosting and Deployment
Deploy to Netlify, Vercel, GitHub Pages, or similar hosts with a practical comparison of the tradeoffs.
Start tutorial →Guided Projects
Follow a real-world project from start to finish across multiple pathways.
Black Swan Bistro Website
- Part 1First Page
Create a real restaurant homepage from scratch using HTML and CSS.
- Part 2Homepage 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.
- Part 3Refactor Repeated Patterns into Components
Turn repeated bistro patterns into reusable navigation, menu card, CTA, and footer components with plain HTML and CSS.
- Part 4Multi-page Site
Expand the bistro into a multi-page site with menu, about, and contact pages.
- Part 4BPolish and Refine
Apply cascade cleanup, detail selectors, pseudo-elements, and restrained motion to bring the Black Swan Bistro site to a polished finish.
- Part 5Prepare for Deployment
Optimise assets, add meta tags, and prepare the bistro site for production.
- Part 6Deploy the Site
Push the bistro project to GitHub and deploy it live on the web.
- Part 7Maintain & Improve
Add analytics, update content, improve performance, and keep the site healthy.