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
Start with the systems behind websites: browsers, servers, files, domains, tools, and responsible asset use.
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 →Copyright, Licensing, and Attribution
Learn how copyright, Creative Commons licences, and attribution apply to beginner web projects.
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 →Build your first real foundations with HTML, CSS, JavaScript syntax, and the first Black Swan Bistro page.
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 →JavaScript Essentials
6 lessons covering variables, operators, conditionals, loops, and functions.
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 →Move from language basics into DOM behaviour, interface state, reusable JavaScript, async code, JSON, and live data.
DOM & Interactive JavaScript
7 lessons covering DOM selection, manipulation, traversal, event handling, advanced events, dynamic content, and arrays.
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 →Turn design thinking, layout systems, reusable CSS, responsive refinement, debugging, validation, and Black Swan Bistro Parts 2-4B into a real site.
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 →Add Git, frameworks literacy, Vite, Vue, and Bulma after the fundamentals are already visible.
Git & GitHub Basics
9 lessons covering setup, commits, branching, remotes, workflows, and a final wrap-up.
Start tutorial →Frameworks 101
5 lessons introducing JavaScript and CSS frameworks before the pathway moves into Vite, Vue, and Bulma.
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 →Working with Vite
Learn how Vite handles the dev server and build workflow around modern frontend projects after your JavaScript and framework foundations are in place.
Start tutorial →First Vue App with Vite
Use the familiar Todo List project to understand Vue single-file components, reactive state, template rendering, and how a small Vite + Vue app fits together.
Start tutorial →Using Bulma in a Vue Project
Restyle the familiar Todo List project with Bulma inside Vue so learners can see where framework classes help and where custom CSS still matters.
Start tutorial →Prepare, test, deploy, troubleshoot, connect domains, and understand how publishing changes a project.
Getting a Website Online
Start the full deployment module: hosting, static publishing, Vite builds, domains, testing, troubleshooting, and continuous improvement.
Start tutorial →Black Swan Bistro — Part 5 (Prepare for Deployment)
Check files, links, images, metadata, accessibility, and browser behaviour before deploying the bistro site.
Start project →Black Swan Bistro — Part 6 (Deploy the Site)
Publish the Bistro through traditional hosting, GitHub Pages, or Vercel, then verify the live site with a deployment checklist.
Start project →Improve live sites with accessibility, SEO, analytics, performance, maintenance habits, and deliberate post-launch project work.
Black Swan Bistro — Part 7 (Audit the Live Website)
Audit the deployed Black Swan Bistro site before changing code: accessibility, responsive behaviour, performance, SEO, content, links, console errors, and maintainability.
Black Swan Bistro — Part 8 (Prioritise and Improve)
Use the Part 7 audit findings to choose deliberate improvements, test before and after, and document the work clearly.
SEO Fundamentals
Learn practical SEO for modern search: helpful content, metadata, headings, structured data, media, and AI search findability.
Start tutorial →Accessibility Essentials
8 lessons on semantic HTML, alt text, keyboard navigation, accessible forms, colour contrast, careful ARIA, and accessibility testing habits.
Start tutorial →Website Care and Feeding
Learn how to keep a website healthy after launch with practical routines for content, links, forms, accessibility, SEO, analytics, backups, and updates.
Start tutorial →Practise judgement: client changes, portfolio proof, AI-assisted workflow, documentation, handover, and choosing suitable technology.
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 9 (Respond to a Client Change)
Maintain the live Bistro site when the client requests Sunday dinner opening, a Wattleseed Creme Brulee dessert, and a Mothers Day lunch promotion.
Professional Practice
A planned bridge from guided tutorials into independent project decisions, portfolio evidence, client communication, AI-assisted workflows, and handover.
Developer Portfolio and Project Case Study
Planned combined lesson on turning finished projects into honest portfolio evidence and practical case studies.
Choosing the Right Technology for a Project
Planned professional judgement lesson that builds on Frameworks 101 instead of duplicating a general frameworks pathway.
Working Effectively With Coding Agents
Planned lesson combining AI-assisted development, coding-agent collaboration, reviewing generated code, testing, and documentation.
Working From a Client Brief
Planned lesson on extracting scope, content, constraints, and acceptance criteria from a project brief before writing code.
Documentation and Handover
Planned lesson on documenting what changed, how to maintain it, and what a future developer or client needs to know.
Use Rotto Rocks to demonstrate independent planning, structure, implementation, testing, deployment, and maintenance decisions from a brief.
Capstone Project
Plan and build a complete website from scratch — applying everything you've learned.
Start tutorial →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
Getting a Website Online
Start the full deployment module: hosting, static publishing, Vite builds, domains, testing, troubleshooting, and continuous improvement.
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
Check files, links, images, metadata, accessibility, and browser behaviour before deploying the bistro site.
- Part 6Deploy the Site
Publish the Bistro through traditional hosting, GitHub Pages, or Vercel, then verify the live site with a deployment checklist.
- Part 7Audit the Live Website
Audit the deployed Black Swan Bistro site before changing code: accessibility, responsive behaviour, performance, SEO, content, links, console errors, and maintainability.
- Part 8Prioritise and Improve
Use the Part 7 audit findings to choose deliberate improvements, test before and after, and document the work clearly.
- Part 9Respond to a Client Change
Maintain the live Bistro site when the client requests Sunday dinner opening, a Wattleseed Creme Brulee dessert, and a Mothers Day lunch promotion.