Guided Project
Black Swan Bistro
A guided restaurant-site build that grows from a single HTML page into a deployed multi-page project.
View ProjectHTML Basics
Learn the fundamentals of HTML structure and elements.
How to use this section
Build confidence with text, links, images, forms, and document structure before moving deeper into styling and interactivity.
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
Personal Profile Page
Create a simple profile page to practise headings, sections, and semantic HTML.
View ProjectPractice Project
Recipe Page
Practise text structure, lists, and semantic grouping with a recipe page.
View ProjectPractice Project
Photo Gallery
Use images, captions, and simple page structure to build a lightweight gallery.
View ProjectPractice Project
Interactive Demo
Build a small interactive page with forms and basic event-driven behaviour.
View ProjectPractice Project
Todo List
Build a list-based app that combines forms, arrays, and DOM updates.
View ProjectLessons in this section
Introduction to HTML
Get started with HTML and understand what it is, how it works, and why it matters.
Start tutorial →Your First HTML Page
Create your very first HTML page and learn the basic structure of a document.
Start tutorial →Working with Text
Use headings, paragraphs, emphasis, and formatting elements to structure readable content.
Start tutorial →Links & Navigation
Learn to create links that connect pages and help users move around a site.
Start tutorial →Working with Images
Add images to your pages with better accessibility, file choices, and page structure.
Start tutorial →Document Structure
Build properly structured HTML documents with semantic elements and a clear hierarchy.
Start tutorial →HTML Forms
Create forms that collect user input with labels, fields, and better structure.
Start tutorial →Emmet Workflow
Speed up HTML authoring with Emmet shortcuts, abbreviations, and editor productivity tools.
Start tutorial →