Start with a blank file and finish with a real website. Learn HTML from your very first page, then add accessible forms, responsive images, SVG, and the performance habits professional teams use. No prior experience needed.
Free, self-paced, and open to complete beginners. No account needed.You do not need to be a programmer, install anything, or pass a test to begin. HTML is the language that gives every web page its structure, and you can write your first real page in the next five minutes. This guide shows you exactly where to start, what you will learn, and what you need.
HTML stands for HyperText Markup Language. It labels content so the browser knows what it is looking at: this is a heading, this is a paragraph, this is a link, this is an image. HTML is not a programming language — there are no loops or variables — which makes it a friendly first step into web development.
Think of a page like a house. HTML is the frame, walls, and rooms. CSS is the paint and furniture. JavaScript is the electricity and plumbing.
You do not need a server, an account, or a code editor to start. A plain text file and a browser are enough.
Open Notepad (Windows), TextEdit (Mac), or a free editor such as VS Code. Save a new file called index.html. Make sure the ending is .html, not .txt.
Copy the code below. Do not worry about memorising it yet — the first lesson explains every line.
Double-click index.html, or drag it into Chrome, Firefox, Safari, or Edge. You should see a real web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>I built this page with HTML.</p>
<a href="https://developer.mozilla.org/">Learn more on MDN</a>
</body>
</html>A large heading, a paragraph, and a working link. That is a complete web page — and you just built it.
Open the first lessonThese are the practical skills you will leave with. Each one is built through a short lesson, a hands-on exercise, and a project you can review.
Use headings, paragraphs, lists, links, images, and semantic landmarks so content makes sense to people, browsers, and search engines.
Create labelled inputs, fieldsets, validation messages, and keyboard-friendly controls that work for everyone.
Serve the right image for every screen with srcset and picture, embed video and audio, and keep layouts stable.
Create scalable vector graphics, animate strokes, and provide accessible fallbacks for complex visuals.
Apply contrast, focus, target-size, ARIA, and live-region guidance, then test with a keyboard and a screen reader.
Write metadata, Open Graph tags, canonical URLs, and performance-friendly markup that passes Core Web Vitals.
At 3 hours a week, most learners finish in 10–12 weeks. At 7 hours a week, closer to 5–6 weeks. Every lesson is self-paced.
New to web development? Begin with stage one and the first lesson. Already comfortable with HTML? Choose a stage and check its entry skills.
Build your first complete page, then master document anatomy, semantic landmarks, and accessible forms.
Start here ifNo prior web development experience required. Start with the first lesson, "Start Here: Build Your First Web Page".
Suggested entry points, not a placement test. Every lesson is open; move back whenever you need a refresher.
8 modules across 3 stages. Each module shows what you need, what you will learn, and a practical self-check before moving on.
Build your first complete page, then master document anatomy, semantic landmarks, and accessible forms.
No prior experience. A browser and a text editor are enough. Start with the first lesson; the later lessons go under the hood and can be revisited.
Build your first complete page, then understand <!DOCTYPE html> standards mode, character encoding, the critical rendering path, and asynchronous script loading.
Build a valid HTML5 page with UTF-8, a responsive viewport, and a deferred script that passes W3C validation.
Open the module self-checkHTML document anatomy fundamentals.
Eliminate div soup using semantic HTML5 landmarks (<header>, <nav>, <main>, <article>, <section>, <footer>) and heading outlines.
Construct a semantic document outline verified via accessibility inspection tools.
Open the module self-checkSemantic HTML structure.
Design accessible forms with fieldsets, legends, specialized mobile input types, autocomplete attributes, and client-side Constraint Validation.
Implement a production e-commerce checkout form with accessible error announcements and focus management.
Open the module self-checkEngineer accessible data tables, native disclosure widgets, responsive picture elements with AVIF/WebP, and inline SVG vector dashboards.
Semantic HTML and form foundations.
Structure tabular datasets using <caption>, <thead>, and <th scope>, and implement native disclosures and modal dialogs.
Create an accessible data table with column/row scoping and a native modal confirmation dialog.
Open the module self-checkHTML layout fundamentals.
Deliver bandwidth-optimized responsive media using <picture>, srcset/sizes, next-gen AVIF/WebP compression, and WebVTT captions.
Deploy a responsive hero banner with multi-format fallbacks and zero layout shift.
Open the module self-checkResponsive image concepts.
Construct scalable vector graphics with viewBox coordinate spaces, cubic bezier paths, CSS stroke animations, and accessible SVGs.
Engineer an interactive vector telemetry gauge with self-drawing stroke keyframes and an accessible table fallback.
Open the module self-checkEnforce WCAG 2.2 Level AA compliance, ARIA live region orchestration, Open Graph protocols, canonical crawl hierarchies, and Core Web Vitals performance.
Intermediate semantic web structures.
Enforce WCAG 2.2 Level AA guidelines, keyboard focus rings, the First Rule of ARIA, and live region announcements.
Audit an interface with screen readers and keyboard navigation, achieving zero accessibility violations.
Open the module self-checkFull accessibility and media architecture.
Optimize Open Graph social cards, canonical indexation hierarchies, and Google Core Web Vitals (LCP, INP, CLS).
Deliver a production enterprise documentation portal with 100/100 Lighthouse performance and accessibility scores.
Open the module self-checkTimes estimate reading only. Make room for coding, practice, and projects at your own pace.
Connect the lessons in 3 guided builds. Use the acceptance checks to review your own implementation, then compare it with the worked example.
A fully accessible, multi-section e-commerce checkout form adhering strictly to WCAG 2.2 Level AA standards.
An interactive, responsive SVG performance telemetry dashboard with animated metrics and accessible fallback data.
An enterprise-grade, production marketing and documentation portal synthesizing all 8 curriculum modules.
A computer, a modern web browser, and a free text editor. No prior coding experience is needed.
Read one example and guess what the browser will show before you open it.
Type the example yourself, then change one tag or attribute and explain the difference.
Attempt the exercises before opening the solution. Use the quiz to find gaps.
Complete the module self-check, then review your page with a keyboard and a narrow browser window.
Create a file called index.html, open it in any modern browser, and refresh after each change. No server, package manager, or build step is required.
Try the five-minute first pageYes. The course starts with a complete page you can build in five minutes. The first module explains the document line by line, and every new idea comes with an example and an exercise.
No. A browser and a text editor are enough. You will not need Node.js, a package manager, or a local server for this course.
No. HTML is the first layer. CSS and JavaScript appear only where they help you understand the page; you can study them properly afterwards.
The material is about 40 hours including reading, exercises, and projects. At 3 hours a week, plan for 10–12 weeks. At 7 hours a week, 5–6 weeks.
Yes. Every website, web app, email template, and many mobile interfaces still rely on HTML. Frameworks change; the document model underneath them does not.
It gives you a strong foundation, not a complete job-ready portfolio. Pair it with CSS, JavaScript, and real projects; the final capstone is designed to be a portfolio piece.
Reread the example, change one thing at a time, and use the worked solutions. MDN is the reference linked at the end of every lesson. The module self-check helps you find what to revisit.
If you are new, follow the sequence. If you already know some HTML, use the stage entry guidance and jump to the topic you need.
Progress and notes stay in this browser on this device. They do not sync between devices. You can clear them through Privacy & local data.