HTML Learning Guide
Learn semantic HTML through the full Vibe Learning loop: understand, predict, build, test, explain, and reflect.
Explore guide : HTML Learning GuideExplore a learning path
Web development tutorials
built for practice.
Build semantic pages, responsive layouts and accessible browser experiences. Begin with HTML and CSS, then connect JavaScript, APIs and practical application projects.
A suggested route
Start here. Build from there.
Try these resources in order, or choose the one that matches your experience.
CSS Learning Guide
Learn modern CSS by styling real interfaces, predicting how the browser will resolve rules, testing layouts at different sizes, and explaining the design choices you make.
Explore guide : CSS Learning GuideHTML & CSS 100 — Interactive Build Lab
Build real pages through 100 interactive HTML and CSS lessons, live previews, browser checks and visual experiments.
Explore guide : HTML & CSS 100 — Interactive Build LabSkills you can practice
- Semantic HTML and accessible structure
- CSS layout and responsive design
- Browser APIs, Canvas and interactions
- Testing, performance and debugging
Before you begin
Begin with a modern browser and a text editor. Start with HTML before CSS and JavaScript. Advanced Node or React projects describe their own setup requirements.
Choose a guide for its specific experience level. Test with sample data, inspect the result, and keep a copy of any work you want to reuse.
Go deeper
Explore Web development guides
Choose a focused skill or a larger project.
JavaScript Engineering Academy Pro
Investigate JavaScript with 15 engineering tickets, an execution microscope, 50 prediction experiments and tested project milestones.
Explore guide : JavaScript Engineering Academy ProAI Mastery Learning Engine
Investigate real interfaces with a 15-lesson JavaScript pathway, transfer challenges, an evolving project and transparent learning evidence.
Explore guide : AI Mastery Learning EngineJavaScript DOM 100 — Interactive Interface Lab
Build living interfaces through 100 DOM lessons, editable JavaScript, live page experiments and practical projects.
Explore guide : JavaScript DOM 100 — Interactive Interface LabHTML & CSS 100 — Interactive Build Lab
Build real pages through 100 interactive HTML and CSS lessons, live previews, browser checks and visual experiments.
Explore guide : HTML & CSS 100 — Interactive Build LabJavaScript 100 — Interactive Learning Studio
Learn JavaScript through 100 runnable lessons, 210 behavior checks, visual experiments and five project challenges.
Explore guide : JavaScript 100 — Interactive Learning StudioClaude Code Launchpad — 50 Interactive Lessons
Get started with Claude Code through a guided practice project, 50 lessons, a safe terminal trainer and hands-on review challenges.
Explore guide : Claude Code Launchpad — 50 Interactive LessonsAI Workflow Architect & Agent Orchestrator
Design, simulate, debug and evaluate AI workflows with visual nodes, approvals and ten runnable templates.
Explore guide : AI Workflow Architect & Agent OrchestratorHTML5 Canvas Maze Workshop
Build a turn-based maze adventure through 50 lessons, a visual tile editor, keys, gates and patrolling enemies.
Explore guide : HTML5 Canvas Maze WorkshopJavaScript Game Workshop
Create playable JavaScript games through 50 interactive lessons, editable rules and five mini projects.
Explore guide : JavaScript Game WorkshopJavaScript DOM Discovery Studio
Make pages come alive with 50 interactive DOM lessons, a live code workspace and five mini projects.
Explore guide : JavaScript DOM Discovery StudioVibe Coding Academy
Build with AI and understand your work through 50 self-guided lessons and five learning paths.
Explore guide : Vibe Coding AcademyJSON Learning Studio
Learn JSON through 16 hands-on lessons with real syntax validation, a data tree, JSON Pointer inspection and repair exercises.
Explore guide : JSON Learning StudioVibe Coding Build Studio
Learn to plan, build, debug and review AI-assisted apps through 24 practical lessons and a hands-on project-brief workbench.
Explore guide : Vibe Coding Build StudioJavaScript Build Studio
Learn JavaScript through 24 guided builds with editable code, real execution, changeable input data and practical project views.
Explore guide : JavaScript Build StudioHTML & CSS Build Studio
Build four real websites through 24 guided HTML and CSS missions with editable code, live previews and checks of the actual browser output.
Explore guide : HTML & CSS Build StudioWeb Accessibility Rescue
Rescue a fictional festival website through ten interactive accessibility repairs, real browser checks and short knowledge challenges.
Explore guide : Web Accessibility RescueCSS Motion Lab
Learn web animation with a visual keyframe studio, scrubbable timeline, easing comparisons, 12 lessons and six hands-on missions.
Explore guide : CSS Motion LabWeb Debugging Escape Room
Restore a miniature web city through twelve real-browser repair challenges covering layout, accessibility and JavaScript logic.
Explore guide : Web Debugging Escape RoomBranching Scenario Studio
Build interactive learning journeys with a visual story map, images, quizzes, feedback and multiple endings.
Explore guide : Branching Scenario StudioVibe App Builder Studio
Turn an idea into a blueprint, customize a working starter, edit real source and export a browser application.
Explore guide : Vibe App Builder StudioDebugging Detective Lab
Follow evidence, test hypotheses and verify real JavaScript fixes through twelve guided debugging cases.
Explore guide : Debugging Detective LabCanvas Game Academy
Learn Canvas and build a complete platformer through 50 lessons, visual drawing, collision and animation labs, and playable exports.
Explore guide : Canvas Game AcademyWeb Performance Lab
Explore loading timelines, image budgets and render dependencies through interactive performance experiments.
Explore guide : Web Performance LabRegex Learning Lab
Find, extract and transform text with real JavaScript regex, visible matches and guided pattern challenges.
Explore guide : Regex Learning LabCSS Layout Playground
Learn Flexbox, Grid and responsive layout through a live visual studio, 16 lessons and eight design challenges.
Explore guide : CSS Layout PlaygroundNode.js Backend Lab
Build backend intuition with 24 lessons, eight API missions, a visual event-loop explorer and a runnable Node.js task server.
Explore guide : Node.js Backend LabTypeScript Confidence Lab
Repair real type errors, inspect inferred types and build runtime data validators with a local TypeScript compiler.
Explore guide : TypeScript Confidence LabReact App Builder Lab
Build a real React task board and discover how components, state, keys and Effects work through hands-on experiments.
Explore guide : React App Builder LabSkybound Game Development Studio
Build and export your own platformer with a visual level designer, physics playground and guided game-development course.
Explore guide : Skybound Game Development StudioGame Creation Lab
Build a playable browser game, design levels and discover what makes games engaging.
Explore guide : Game Creation LabHTML5 & Canvas Beginner Lab
Learn canvas from HTML setup to animation and interactive charts with 24 lessons, editable previews and a visual shape explorer.
Explore guide : HTML5 & Canvas Beginner LabJavaScript Quest — Beginner Coding Adventure
Help Pip restore an island lighthouse through 15 beginner coding missions, real JavaScript checks and friendly hints.
Explore guide : JavaScript Quest — Beginner Coding AdventureJavaScript DOM & Events Lab
Build buttons, forms, live search and dynamic lists through 20 real-browser workshops and a visual event-flow explorer.
Explore guide : JavaScript DOM & Events LabJavaScript Async Lab
Master promises and async/await with 20 runnable challenges, a request timeline and event-loop prediction puzzles.
Explore guide : JavaScript Async LabJavaScript Array & Object Lab
Run real JavaScript through 20 data challenges, custom JSON inputs, visual pipelines and a copy detective experiment.
Explore guide : JavaScript Array & Object LabGit & Version Control Lab — 24 Missions
See exactly what staging, branching, stashing and recovery change through a visual single-file Git practice model.
Explore guide : Git & Version Control Lab — 24 MissionsSQL & Database Explorer
Run real SQL through 30 guided workshops, four connected tables, visual joins and practical revenue-reporting challenges.
Explore guide : SQL & Database ExplorerPython Mastery Lab — 50 Lessons
Run real Python through 50 guided exercises, five projects, prediction questions, debugging missions and visual data experiments.
Explore guide : Python Mastery Lab — 50 LessonsWeb Developer Mastery Lab — 50 Workshops
Build real HTML, CSS and JavaScript interfaces through 50 workshops with editable previews, responsive viewport controls and page checks.
Explore guide : Web Developer Mastery Lab — 50 WorkshopsJavaScript Mastery Lab — 50 Lessons
Write and run real JavaScript through 50 guided lessons, visible test cases, useful projects and a step-by-step loop visualizer.
Explore guide : JavaScript Mastery Lab — 50 LessonsMCP for Beginners: AI Tool Lab
Understand how AI applications connect to tools through 12 lessons, six practical challenges and a visual tool-call simulator.
Explore guide : MCP for Beginners: AI Tool LabAPI Request Lab
Learn how requests become responses through a working local API simulator, 16 lessons and eight practical missions.
Explore guide : API Request LabNode.js Studio
JavaScript beyond the browser.
Explore guide : Node.js StudioDebugging Studio
Find the cause. Fix with confidence.
Explore guide : Debugging StudioWebsite Testing Guide & Launch Lab
Go beyond “it works on my screen.” Learn a repeatable testing process and turn your website’s features into a practical test plan.
Explore guide : Website Testing Guide & Launch LabWeb Design Guide & Studio
Create a website that works for its visitors. Learn the design process and turn your decisions into a practical website brief and reusable styles.
Explore guide : Web Design Guide & StudioVibe Coding for Beginners — Guide V4
Go from your first idea to a small app you understand, with a complete beginner learning path and practical tools for writing professional prompts.
Explore guide : Vibe Coding for Beginners — Guide V4Vibe Coding Learning Guide V1
Learn how to collaborate with AI while keeping your goals, reasoning, testing, and understanding at the centre of the development process.
Explore guide : Vibe Coding Learning Guide V1Vibe Coding Field Guide V2
A complete, practical learning experience for anyone who wants to use AI to create better software without giving up understanding, quality, or control.
Explore guide : Vibe Coding Field Guide V2Vibe Coding Guide V3
A complete interactive Vibe Learning lab that brings your lessons, review, prompt library, and capstone project together in one connected workspace.
Explore guide : Vibe Coding Guide V3JavaScript Learning Guide
Learn modern JavaScript by building browser applications, predicting results, testing behavior, explaining decisions, and improving with evidence.
Explore guide : JavaScript Learning GuideCSS Learning Guide
Learn modern CSS by styling real interfaces, predicting how the browser will resolve rules, testing layouts at different sizes, and explaining the design choices you make.
Explore guide : CSS Learning GuideHTML Learning Guide
Learn semantic HTML through the full Vibe Learning loop: understand, predict, build, test, explain, and reflect.
Explore guide : HTML Learning GuideWeb Design Learning Guide
Learn web design from planning to publishing through interactive lessons, live design labs, critique challenges, and accessibility checks.
Explore guide : Web Design Learning Guide