Track Your Progress

Create a free account to mark chapters complete and track your learning streak.

HTML & SEO Mastery

beginner free

Learn every HTML tag with SEO built-in from day one. Document structure, semantic layout, Open Graph, Schema.org, and full accessibility.

Course Materials

Reference Course

Full chapter-by-chapter reference

↗

Projects & Exercises

Capstone + chapter exercises

↗

Practical & Project

Try Your Hands On A Project

↗

Live Playground

Practice with live preview

↗

Video Lessons

Watch the lesson, then pass the knowledge check to mark it complete.

01 Document Structure

0/1 ▼

▶

The Basics of HTML

0:05 ○ Video ○ Quiz FREE

▶ Watch

Guided Tasks

Step-by-step coding challenges with AI-powered feedback. Build real things, prompt by prompt.

Build a responsive card component

You are building a responsive click me card

HTML Beginner 5 steps

▶ Start Task

Build a Blog Article Page

Structure a complete blog post using proper HTML document structure and text tags.

HTML Beginner 5 steps

▶ Start Task

Build a Page Head & Meta Tags

Master the HTML <head> element by adding all the essential meta tags every page needs.

HTML Beginner 5 steps

▶ Start Task

Build a Navigation Bar

Build a semantic site navigation with internal links, a skip link, and proper landmark elements.

HTML Beginner 5 steps

▶ Start Task

Build a Photo Gallery Page

Build a structured image gallery using figure, figcaption, and lists to organise media properly.

HTML Beginner 5 steps

▶ Start Task

Build a Product Comparison Table

Build an accessible HTML table with proper headers, captions, scope attributes, and a summary section.

HTML Intermediate 5 steps

▶ Start Task

Build a Contact Form

Build a fully accessible HTML form with proper labels, input types, validation attributes, and a fieldset.

HTML Intermediate 5 steps

▶ Start Task

Build an SEO-Ready Page

Add all the essential on-page SEO elements: title, meta description, canonical URL, heading hierarchy, and image optimisation.

HTML Intermediate 5 steps

▶ Start Task

Build a Multimedia Page

Embed video, audio, and responsive images using modern HTML multimedia elements with proper accessibility attributes.

HTML Intermediate 5 steps

▶ Start Task

Build a Schema & Open Graph Page

Add Open Graph tags, Twitter Card meta, and Schema.org JSON-LD structured data so your page is fully optimised for social sharing and rich search results.

HTML Advanced 5 steps

🔒 Upgrade to Unlock

Build a Fully Accessible Page

Apply ARIA roles, live regions, focus management, and semantic HTML to build a page that works for everyone including screen reader and keyboard-only users.

HTML Advanced 5 steps

🔒 Upgrade to Unlock

How to use this course

Open the Reference Course in a new tab — study each chapter carefully
Open the Projects & Exercises — complete the exercise for each chapter you finish
Use the Playground to practice and test your code live
Tick off chapters above as you complete them — your progress is saved automatically
Once all chapters are done, build the capstone project and submit your GitHub link below

🏗️ Capstone Project

🔒

Sign up to submit your project

Create a free account to track your progress, mark chapters complete, and submit your capstone project for review.

Create Free Account →