🏗️

HTML

Build the structure of every web page, from your first tag to forms, accessibility and SEO.

All (27) Beginner (15) Intermediate (8) Advanced (4)

🌱 Beginner 15 lessons

Start here. No experience needed.

Lesson 1

What is HTML? — The Skeleton of Every Webpage

HTML is the foundation of every website. Learn what HTML is, how browsers read it, and build your first webpag...

Beginner 2 min

Lesson 2

Setting Up: VS Code and Your First Web Page

Install a free code editor, create your first HTML file and open it in your browser. By the end of this lesson...

Beginner 10 min

Lesson 3

HTML Tags & Elements — How HTML Actually Works

Learn the difference between tags and elements, how nesting works, void elements, and the core tags every begi...

Beginner 3 min

Lesson 4

HTML Attributes — class, id, style and More

Attributes give HTML elements extra information. Learn class, id, style, data attributes, and when to use each...

Beginner 3 min

Lesson 5

HTML Headings, Paragraphs & Links

Master the three most-used HTML elements: headings for structure, paragraphs for body text, and links to conne...

Beginner 3 min

Lesson 6

Text Formatting: Bold, Italic, Highlight and More

Learn strong, b, em, i, mark, small, del, ins, sub and sup, and when to use each one. You will build a medicin...

Beginner 12 min

Lesson 7

HTML Comments: Notes Only Developers Can See

Write HTML comments to leave notes for your team, label sections and switch code off without deleting it. Lear...

Beginner 11 min

Lesson 8

Quotes and Citations: blockquote, q, cite, abbr and address

Use blockquote, q, cite, abbr and address to quote people, name books and explain short forms like ISRO and RB...

Beginner 13 min

Lesson 9

HTML Entities: Showing <, >, ₹, © and Emoji

Show special characters on your page with HTML entities: tags as text, the ampersand, non-breaking spaces, the...

Beginner 12 min

Lesson 10

Images & Media in HTML — Adding Visuals to Your Page

Learn how to add images, write proper alt text, control sizes, use figure captions, and embed YouTube videos i...

Beginner 2 min

Lesson 11

File Paths: Linking Pages, Images and Folders

Write file paths that work: relative paths, ../ to go up a folder, root-relative paths and absolute URLs. Lear...

Beginner 12 min

Lesson 12

HTML Lists & Tables — Organising Data on a Page

Learn bullet lists, numbered lists, nested lists, and data tables in HTML with real-world examples like menus ...

Beginner 3 min

Lesson 13

Div and Span: Block and Inline Elements

Understand block and inline elements, group content with div, style part of a line with span, and know when a ...

Beginner 12 min

Lesson 14

Iframes: Embedding Maps, Videos and Other Pages

Embed Google Maps, YouTube videos and other pages with the iframe tag. Set the size, add a title, load lazily,...

Beginner 12 min

Lesson 15

HTML Forms — Collecting Input from Users

Forms are how websites collect data. Learn text inputs, textareas, dropdowns, checkboxes, radio buttons, and b...

Beginner 4 min

⚙️ Intermediate 8 lessons

You know the basics. Build real skills.

Lesson 16

HTML Head & Meta Tags — SEO and Page Settings

The head section is invisible to users but crucial for SEO, social sharing, and browser settings. Learn the me...

Intermediate 3 min

Lesson 17

Semantic HTML5 — Write Code That Actually Makes Sense

Semantic HTML uses meaningful tags that describe content. Better for SEO, accessibility, and readability. Lear...

Intermediate 3 min

Lesson 18

Input Types in Depth: Date, Number, Email, Range and More

Use the right HTML input type for every field: email, tel, number, date, time, range, color, radio, checkbox, ...

Intermediate 15 min

Lesson 19

HTML Form Validation: required, pattern, min and max

Make the browser check your forms with no JavaScript: required fields, length and number limits, pattern rules...

Intermediate 14 min

Lesson 20

Advanced Tables: colspan, rowspan, caption and Table Groups

Build real exam timetables and marksheets with caption, thead, tbody, tfoot, scope, colspan, rowspan and colgr...

Intermediate 16 min

Lesson 21

Audio and Video in HTML: Players for Lessons and Podcasts

Add video and audio players to your pages with controls, poster, preload, muted autoplay, backup sources, capt...

Intermediate 12 min

Lesson 22

Accessibility Basics: Websites Everyone Can Use

Learn the HTML habits that make a site usable for everyone: alt text, labels, heading order, meaningful links,...

Intermediate 15 min

Lesson 23

HTML for SEO: Structure That Search Engines Understand

Structure your HTML so search engines understand it: clickable titles and descriptions, one h1, semantic tags,...

Intermediate 15 min

🚀 Advanced 4 lessons

Go deeper, write professional code and build projects.

Lesson 24

ARIA: Making Custom Components Accessible

Learn when and how to use ARIA roles, names, states and live regions so that custom FAQs, tabs and status mess...

Advanced 15 min

Lesson 25

Fast Pages: Lazy Loading, Image Sizes and Script Loading

Make pages load fast on slow mobile networks with lazy loading, image sizes, srcset, picture, fetchpriority, d...

Advanced 15 min

Lesson 26

Canvas and SVG: Drawing Graphics in HTML

Learn when to choose SVG or canvas, draw shapes, text and paths, and build a cricket run chart from an array a...

Advanced 13 min

Lesson 27

Project: Build Your Personal Portfolio Page

Build a complete, accessible personal portfolio page step by step with semantic HTML: about, skills, project c...

Advanced 20 min 🔨 Project