CodeBlanks Logo Icon CodeBlanks
Login Register
Free 4 levels HTML

HTML

Learn to write modern, semantic web pages with HTML Living Standard, from scratch to advanced.

The HTML course starts from scratch: document skeleton, text, links, lists, images, tables, forms and semantic tags. Intermediate level covers accessibility; advanced level covers performance, SEO, structured data and the HTML side of web components. All examples follow HTML Living Standard (HTML5).

  • 230 lessons
  • 19 h 55 min
  • 12 projects
Start for free View curriculum

No account needed, you can start right away. To save your progress, create a free account

Levels

The HTML course goes from zero to expert in four levels. Start at any level you like.
Not sure of your level? Take the placement test
Beginner

Learn HTML from scratch: document skeleton, text, links, lists, images, tables, forms and semantic tags.

  • Document basics
  • Text content
  • Links and navigation
  • Lists
68 lessons · 5 h 29 min See lessons →
Intermediate

Learn advanced text elements, complex tables, form validation, semantic layout and accessibility basics.

  • Advanced text elements
  • Advanced links
  • Advanced tables
  • Advanced form elements
67 lessons · 5 h 41 min See lessons →
Advanced

Learn responsive images, accessible video, complex forms, SEO, structured data, templates and the HTML side of web components.

  • Advanced media
  • Picture and responsive images
  • Complex forms
  • Metadata and SEO
56 lessons · 4 h 46 min See lessons →
Expert

Learn WCAG, advanced ARIA patterns, performance, internationalization, security and advanced web components.

  • Advanced accessibility
  • Advanced ARIA patterns
  • Internationalization
  • Advanced web components
39 lessons · 3 h 59 min See lessons →

Projects you will build

At every level you combine what you learned into a real page.
About me page Beginner · 5 lessons Business card page Beginner · 5 lessons Recipe page Beginner · 5 lessons Landing page Intermediate · 5 lessons Data table Intermediate · 5 lessons Contact form Intermediate · 5 lessons Site skeleton Intermediate · 5 lessons Video player Advanced · 5 lessons Schema.org markup Advanced · 5 lessons Dashboard widget Advanced · 5 lessons High-performance page Expert · 5 lessons Secure page Expert · 5 lessons

How does it work?

Short explanation

Each lesson explains one concept in a few short cards; no long videos or walls of text.

Try it right away

Multiple choice, fill-in-the-blank and matching exercises lock in what you just learned.

Write it yourself

You write real code in the in-browser editor; it is checked instantly and you see the result live.

Curriculum

41 groups · 230 lessons · 19 h 55 min

Learn HTML from scratch: document skeleton, text, links, lists, images, tables, forms and semantic tags.

1
Document basics
6 lessons · 26 min
  1. 1 What is HTML? Learn what HTML is, what it does, and the basic building blocks of a web page. 4 min
  2. 2 The document skeleton Build the skeleton of an HTML document with <!DOCTYPE>, <html>, <head> and <body>. 5 min
  3. 3 Head and meta tags Learn the role of meta tags like charset, viewport and description. 4 min
  4. 4 Title and language Learn what the <title> element and lang attribute do. 4 min
  5. 5 Comments and readability Learn HTML comments and how to write readable code with indentation. 4 min
  6. 6 Summary - My first HTML page Combine the document skeleton, meta tags and comments to write your first full HTML page. 5 min
2
Text content
6 lessons · 27 min
  1. 1 Headings: h1–h6 Learn the six heading levels and the rules of heading hierarchy. 4 min
  2. 2 Paragraphs Learn to write paragraphs with <p> and how text flows. 4 min
  3. 3 Line break and horizontal rule Learn when to use <br> and <hr>. 4 min
  4. 4 Emphasis and important text Add meaning to text with <strong>, <em>, <mark> and <small>. 5 min
  5. 5 Quotations and sources Learn the difference between <blockquote>, <q> and <cite>. 5 min
  6. 6 Summary - Article page Combine headings, paragraphs and quotes to build an article page. 5 min
3
Project: About me pageProject
5 lessons · 25 min
  1. 1 Project: About me page Overview of the 5-lesson project: you'll build a personal about page. 4 min
  2. 2 Skeleton and title Add the document skeleton and the page title. 5 min
  3. 3 Introductory text Write the self-introduction text with headings and paragraphs. 5 min
  4. 4 Emphasis and separation Highlight key parts and separate sections with a horizontal rule. 5 min
  5. 5 Project final - About me Combine everything and document the page with comments. 6 min
4
Links and navigation
6 lessons · 28 min
  1. 1 Anchor links Learn to link to other pages with <a> and the href attribute. 4 min
  2. 2 Absolute and relative URLs Learn the difference between absolute and relative URLs. 4 min
  3. 3 In-page links Learn to link to sections within the same page. 5 min
  4. 4 Link targets Control where a link opens with the target and rel attributes. 5 min
  5. 5 Email and phone links Create links with the mailto: and tel: schemes. 5 min
  6. 6 Summary - Navigation menu Build a simple navigation menu with internal and external links. 5 min
5
Lists
6 lessons · 27 min
  1. 1 Unordered lists Create unordered lists with <ul> and <li>. 4 min
  2. 2 Ordered lists Build ordered lists with <ol> and the start and type attributes. 4 min
  3. 3 Description lists Create term–description lists with <dl>, <dt> and <dd>. 4 min
  4. 4 Nested lists Nest lists to build hierarchical structures. 5 min
  5. 5 Links in list items Place links inside <li> to build menus and content lists. 5 min
  6. 6 Summary - Table of contents Build a table of contents with nested ordered and unordered lists. 5 min
6
Project: Business card pageProject
5 lessons · 25 min
  1. 1 Project: Business card page Overview of the 5-lesson project: a personal business card page with links and lists. 4 min
  2. 2 Name and title Add the page skeleton and the name–title headings. 5 min
  3. 3 Contact list List contact info with an unordered list and mailto/tel links. 5 min
  4. 4 Skills and links Add skills as an ordered list and social links as external links. 5 min
  5. 5 Project final - Business card Combine all sections and finalize the business card page. 6 min
7
Images and media
6 lessons · 29 min
  1. 1 Adding images Add images with <img> and the src and alt attributes. 4 min
  2. 2 Image dimensions Learn the width and height attributes and their benefits. 5 min
  3. 3 Figure and figcaption Add captions to images with <figure> and <figcaption>. 5 min
  4. 4 Audio and video Add media with <audio> and <video>. 5 min
  5. 5 Alternative sources Provide different media formats with <source> and the type attribute. 5 min
  6. 6 Summary - Media gallery Combine images, figcaption and video elements into a gallery page. 5 min
8
Intro to tables
6 lessons · 28 min
  1. 1 Table skeleton Build a simple table with <table>, <tr> and <td>. 4 min
  2. 2 Header cells Create accessible table headers with <th> and the scope attribute. 4 min
  3. 3 Table sections Split a table into logical sections with <thead>, <tbody> and <tfoot>. 5 min
  4. 4 Caption and title Add a title to a table with <caption> to improve accessibility. 5 min
  5. 5 Cell spanning Merge cells with the colspan and rowspan attributes. 5 min
  6. 6 Summary - Class schedule table Build a weekly class schedule table using all table elements. 5 min
9
Project: Recipe pageProject
5 lessons · 25 min
  1. 1 Project: Recipe page Overview of the 5-lesson project: a recipe page with lists and tables. 4 min
  2. 2 Recipe title and summary Add the title, a short summary and the servings info. 5 min
  3. 3 Ingredient list List ingredients as an unordered list and highlight quantities. 5 min
  4. 4 Steps and baking table Add steps as an ordered list and baking time/temperature as a table. 5 min
  5. 5 Project final - Recipe page Combine all sections and finalize the recipe page. 6 min
10
Intro to forms
6 lessons · 29 min
  1. 1 Form skeleton Build a form skeleton with <form> and the action/method attributes. 4 min
  2. 2 Labelled input Learn how to pair <label> and <input> elements. 5 min
  3. 3 Input types Learn input types like text, email, password, number and date. 5 min
  4. 4 Textarea and button Learn to use <textarea> and <button>. 5 min
  5. 5 Selection fields Build selection fields with <select>, <option> and checkbox/radio inputs. 5 min
  6. 6 Summary - Feedback form Combine all form elements into a feedback form. 5 min
11
Intro to semantic tags
6 lessons · 29 min
  1. 1 Why semantic tags matter Learn why semantic tags matter for accessibility and SEO. 4 min
  2. 2 Header and footer Learn to use <header> and <footer>. 5 min
  3. 3 Nav and main Mark the main page areas with <nav> and <main>. 5 min
  4. 4 Article and section Learn the difference between <article> and <section>. 5 min
  5. 5 Aside and address Learn when to use <aside> and <address>. 5 min
  6. 6 Summary - Semantic blog skeleton Build a blog page skeleton using all semantic elements. 5 min
12
Beginner finalFinal
5 lessons · 31 min
  1. 1 Challenge - Document skeleton Test the basics by writing a full HTML document skeleton from scratch. 6 min
  2. 2 Challenge - Text and links Write a page combining headings, paragraphs, emphasis and links. 6 min
  3. 3 Challenge - Lists and tables Write a page with nested lists and a schedule table. 6 min
  4. 4 Challenge - Form and semantic structure Write a feedback form page wrapped in semantic landmarks. 6 min
  5. 5 Challenge - Beginner capstone Write a personal home page that combines all beginner topics. 7 min

Learn advanced text elements, complex tables, form validation, semantic layout and accessibility basics.

1
Advanced text elements
6 lessons · 30 min
  1. 1 Abbr, cite and time Add fine-grained meaning with <abbr>, <cite> and <time>. 5 min
  2. 2 Code, kbd and samp Learn <code>, <kbd>, <samp> and <var>. 5 min
  3. 3 Sub and sup Write subscripts and superscripts with <sub> and <sup>. 5 min
  4. 4 Pre and code block Write a preformatted code block with <pre><code>. 5 min
  5. 5 Wbr, bdi, bdo Learn line break opportunities and bidirectional text control. 5 min
  6. 6 Summary - Technical doc Write a technical reference page using all text-level elements. 5 min
2
Advanced links
6 lessons · 30 min
  1. 1 Download links Create downloadable file links with the download attribute. 5 min
  2. 2 Ping and rel types Learn rel types like noopener, noreferrer, license and bookmark. 5 min
  3. 3 Hreflang and canonical Learn hreflang and link relations for multilingual pages. 5 min
  4. 4 Link accessibility Learn to use meaningful link text and aria-label. 5 min
  5. 5 Button vs link Learn when to use <button> vs <a>. 5 min
  6. 6 Summary - Multilingual menu Build a menu with download, external and language links. 5 min
3
Project: Landing pageProject
5 lessons · 25 min
  1. 1 Project: Product landing page Overview of the 5-lesson project: a product landing page. 4 min
  2. 2 Hero section Write the hero section with main heading, subheading and CTA button. 5 min
  3. 3 Feature list Add product features with semantic tags and lists. 5 min
  4. 4 Pricing table Write a table section comparing three pricing tiers. 5 min
  5. 5 Project final - Landing Combine all sections, finalize and document the landing page. 6 min
4
Advanced tables
6 lessons · 30 min
  1. 1 Col and colgroup Bridge styling to columns with <col> and <colgroup>. 5 min
  2. 2 Scope and headers Provide complex table accessibility with scope, headers and id. 5 min
  3. 3 Table accessibility Learn caption and aria-* for tables (summary attribute is deprecated). 5 min
  4. 4 Responsive tables Make tables scrollable on small screens. 5 min
  5. 5 Table visual structure Clarify table structure with helper markup. 5 min
  6. 6 Summary - Comparison table Write a product comparison table applying all table techniques. 5 min
5
Project: Data tableProject
5 lessons · 25 min
  1. 1 Project: Data table Overview of the 5-lesson project: an accessible data table. 4 min
  2. 2 Header and caption Set up the skeleton, header row and caption. 5 min
  3. 3 Body data Add data rows inside tbody in a logical order. 5 min
  4. 4 Summary row Add a totals/summary row inside tfoot. 5 min
  5. 5 Project final - Data table Complete the table with colgroup and accessibility, then document it. 6 min
6
Advanced form elements
6 lessons · 30 min
  1. 1 Fieldset and legend Group form fields with <fieldset> and <legend>. 5 min
  2. 2 Datalist and output Learn <datalist> and <output>. 5 min
  3. 3 Progress and meter Learn the difference between <progress> and <meter>. 5 min
  4. 4 Input attributes Learn attributes like placeholder, required, pattern, min/max and step. 5 min
  5. 5 Autocomplete and inputmode Improve mobile UX with autocomplete and inputmode. 5 min
  6. 6 Summary - Survey form Build a survey form with all advanced form elements. 5 min
7
Form validation
6 lessons · 30 min
  1. 1 Required and pattern Use required and pattern for browser-side validation. 5 min
  2. 2 Min, max and step Bound and step numeric inputs with min, max and step. 5 min
  3. 3 Minlength and maxlength Learn to limit text length with minlength and maxlength. 5 min
  4. 4 Type-based validation Learn automatic validation of email, url and date inputs. 5 min
  5. 5 Novalidate and formnovalidate Learn to disable validation with novalidate and formnovalidate. 5 min
  6. 6 Summary - Registration validation Write a registration form full of validation rules. 5 min
8
Project: Contact formProject
5 lessons · 25 min
  1. 1 Project: Contact form Overview of the 5-lesson project: a contact form with validation. 4 min
  2. 2 Form skeleton Set up form, fieldset, legend and labels. 5 min
  3. 3 Person fields Add name, email and phone fields with correct types. 5 min
  4. 4 Message and subject Add a subject select and a message textarea. 5 min
  5. 5 Project final - Contact form Add validation, submit button and accessibility attributes, finalize and document. 6 min
9
Semantic layout
6 lessons · 30 min
  1. 1 Header structure Structure the site <header> with nav and logo. 5 min
  2. 2 Main content Learn to use article and section inside <main>. 5 min
  3. 3 Sidebar and aside Build side content sections with <aside>. 5 min
  4. 4 Footer structure Add copyright, links and address inside <footer>. 5 min
  5. 5 Sectioning rules Learn to build the correct hierarchy of semantic sections. 5 min
  6. 6 Summary - Magazine page Build a magazine home page skeleton with all landmarks. 5 min
10
Accessibility basics
6 lessons · 30 min
  1. 1 ARIA basics Use role, aria-label, aria-labelledby and aria-describedby. 5 min
  2. 2 Visually hidden heading Learn to write headings and text only for screen readers. 5 min
  3. 3 Skip link Add a skip-to-content link at the top of the page. 5 min
  4. 4 Form accessibility Use label, aria-required and aria-invalid. 5 min
  5. 5 Table accessibility Provide table accessibility with scope, headers and caption. 5 min
  6. 6 Summary - Accessible card Write an accessible profile card applying all ARIA techniques. 5 min
11
Project: Site skeletonProject
5 lessons · 25 min
  1. 1 Project: Multi-page site skeleton Overview of the 5-lesson project: a multi-page site skeleton with consistent landmarks. 4 min
  2. 2 Consistent header/footer Write the header and footer repeated across all pages. 5 min
  3. 3 Home page Write the hero and summary content sections for the home page. 5 min
  4. 4 About and contact Build the skeletons for the about and contact pages. 5 min
  5. 5 Project final - Site skeleton Link all pages to each other and document the structure. 6 min
12
Intermediate finalFinal
5 lessons · 31 min
  1. 1 Challenge - Advanced text Write a technical doc using all advanced text elements. 6 min
  2. 2 Challenge - Accessible table Write a finance table with colgroup, scope and headers. 6 min
  3. 3 Challenge - Validated form Write a booking form with all validation attributes. 6 min
  4. 4 Challenge - Semantic layout Write a news home page with semantic landmarks. 6 min
  5. 5 Challenge - Intermediate capstone Write a docs site that combines all intermediate topics. 7 min

Learn responsive images, accessible video, complex forms, SEO, structured data, templates and the HTML side of web components.

1
Advanced media
6 lessons · 30 min
  1. 1 Lazy loading Learn to lazy-load images with loading="lazy". 5 min
  2. 2 Decoding async Control image decoding with decoding="async". 5 min
  3. 3 Srcset and sizes Use srcset and sizes for different screen sizes. 5 min
  4. 4 Width/height and CLS Reduce cumulative layout shift with image dimensions. 5 min
  5. 5 Preload and prefetch Preload critical resources with <link rel="preload">. 5 min
  6. 6 Summary - Performance gallery Write an image gallery with all performance techniques. 5 min
2
Picture and responsive images
6 lessons · 30 min
  1. 1 Picture and source Learn image selection with <picture> and <source>. 5 min
  2. 2 Media attribute Switch images per screen with <source media="...">. 5 min
  3. 3 Type attribute Serve modern formats like AVIF/WebP progressively. 5 min
  4. 4 Aspect ratio Preserve ratio with CSS aspect-ratio and width/height. 5 min
  5. 5 Background vs img Learn the <img alt=""> rule for decorative images. 5 min
  6. 6 Summary - Responsive hero Write a hero image that changes per screen with <picture>. 5 min
3
Project: Video playerProject
5 lessons · 25 min
  1. 1 Project: Accessible video player Overview of the 5-lesson project: a video page with subtitles. 4 min
  2. 2 Video skeleton Set up the video with <video> and multiple <source> elements. 5 min
  3. 3 Track and captions Add captions and chapters with <track>. 5 min
  4. 4 Poster and preview Set preview behavior with the poster attribute and preload. 5 min
  5. 5 Project final - Video player Combine all video techniques and document the accessible player. 6 min
4
Complex forms
6 lessons · 30 min
  1. 1 Form autocomplete Learn autocomplete tokens like email, tel, address-line1. 5 min
  2. 2 Hidden input Send form metadata with <input type="hidden">. 5 min
  3. 3 File upload Use <input type="file">, multiple and accept. 5 min
  4. 4 Range and color Use <input type="range"> and <input type="color">. 5 min
  5. 5 Output and form events Show calculations with <output> and the form attribute. 5 min
  6. 6 Summary - Settings panel Write a settings panel with all advanced input types. 5 min
5
Metadata and SEO
6 lessons · 30 min
  1. 1 Meta description Learn description, author and robots meta tags. 5 min
  2. 2 Open Graph Build social share metadata with og:title, og:image, og:type. 5 min
  3. 3 Twitter card Use twitter:card, twitter:title and twitter:image. 5 min
  4. 4 Canonical and hreflang Solve duplicate content with <link rel="canonical"> and hreflang. 5 min
  5. 5 Title and slug strategy Learn SEO-friendly title and slug writing rules. 5 min
  6. 6 Summary - SEO package Write a full SEO meta package for a blog post. 5 min
6
Project: Schema.org markupProject
5 lessons · 25 min
  1. 1 Project: Schema.org markup Overview of the 5-lesson project: structured data markup. 4 min
  2. 2 Itemtype and itemid Start an Article markup with itemscope and itemtype. 5 min
  3. 3 Itemprop Use headline, datePublished and author itemprops. 5 min
  4. 4 Nested itemtype Use nested types like Person and Organization. 5 min
  5. 5 Project final - Structured data Add full Schema.org markup to an article and document it. 6 min
7
Web components HTML
6 lessons · 30 min
  1. 1 Template element Write reusable HTML templates with <template>. 5 min
  2. 2 Slot element Create flexible content insertion points with <slot>. 5 min
  3. 3 Custom element names Learn element naming rules and fallback content. 5 min
  4. 4 Shadow DOM skeleton Learn the HTML side of Shadow DOM (slot, template). 5 min
  5. 5 Declarative shadow DOM Write declarative shadow DOM with <template shadowrootmode>. 5 min
  6. 6 Summary - Card template Write a reusable card template with template and slot. 5 min
8
Templates and partials
6 lessons · 30 min
  1. 1 Server-rendered vs client Learn templating approaches and the role of HTML. 5 min
  2. 2 Partial HTML Learn to design reusable HTML partials. 5 min
  3. 3 Data attributes Carry component data with data-* attributes. 5 min
  4. 4 Hydration hooks Write id and data-* hooks for client-side frameworks. 5 min
  5. 5 Noscript and progressive Write fallback content with <noscript>. 5 min
  6. 6 Summary - Component skeleton Write a component skeleton with all templating techniques. 5 min
9
Project: Dashboard widgetProject
5 lessons · 25 min
  1. 1 Project: Dashboard widget Overview of the 5-lesson project: a widget skeleton with templates. 4 min
  2. 2 Widget skeleton Build the widget skeleton with semantic tags. 5 min
  3. 3 Visual data structure Structure data with a table and figure. 5 min
  4. 4 Template and slot Write a reusable partial with <template> and <slot>. 5 min
  5. 5 Project final - Widget Combine all parts, add noscript fallback and data-* hooks, then document. 6 min
10
Advanced finalFinal
5 lessons · 31 min
  1. 1 Challenge - Responsive image Write a hero with <picture> that changes per screen and format. 6 min
  2. 2 Challenge - Accessible video Write a video with captions, poster and preload control. 6 min
  3. 3 Challenge - Complex form Write a form with hidden, file, range, color and output. 6 min
  4. 4 Challenge - SEO and structured data Write a full SEO + Schema.org markup package for a product. 6 min
  5. 5 Challenge - Advanced capstone Write a dashboard page that combines all advanced topics. 7 min

Learn WCAG, advanced ARIA patterns, performance, internationalization, security and advanced web components.

1
Advanced accessibility
6 lessons · 36 min
  1. 1 WCAG principles Learn the POUR principles (Perceivable, Operable, Understandable, Robust). 6 min
  2. 2 Keyboard navigation Learn tab order, tabindex and focus management. 6 min
  3. 3 Live regions Announce dynamic content with aria-live and aria-atomic. 6 min
  4. 4 Dialog and modal Learn the <dialog> element and ARIA dialog pattern. 6 min
  5. 5 Heading outline Learn document heading hierarchy and the outline algorithm. 6 min
  6. 6 Summary - Accessible widget Write an accessible widget skeleton with all ARIA techniques. 6 min
2
Advanced ARIA patterns
6 lessons · 36 min
  1. 1 ARIA roles Learn role types: widget, document, landmark, abstract. 6 min
  2. 2 States and properties Use aria-* states and properties correctly. 6 min
  3. 3 Grid and tree Learn ARIA grid, tree and treegrid patterns. 6 min
  4. 4 Tabs and accordion Apply ARIA tabs and accordion patterns. 6 min
  5. 5 Menu and menubar Learn ARIA menu and menubar patterns. 6 min
  6. 6 Summary - Accessible tabpanel Write a tabpanel component skeleton with all ARIA patterns. 6 min
3
Project: High-performance pageProject
5 lessons · 29 min
  1. 1 Project: High-performance page Overview of the 5-lesson project: a CLS- and LCP-focused page. 5 min
  2. 2 Critical resource order Order <head> resources and use preload. 5 min
  3. 3 Image optimization Write optimized images with srcset, sizes, loading, decoding and width/height. 6 min
  4. 4 Template and noscript Set up progressive enhancement with <template> and <noscript>. 6 min
  5. 5 Project final - Performance page Combine all performance techniques and document the page. 7 min
4
Internationalization
6 lessons · 36 min
  1. 1 Lang and dir Build bidirectional and multilingual structures with lang and dir. 6 min
  2. 2 Hreflang strategy Build a multilingual page set with <link rel="alternate" hreflang>. 6 min
  3. 3 Bidi and bdo Control mixed-direction text with <bdi> and <bdo>. 6 min
  4. 4 RTL-aware markup Learn to write RTL-aware tables, forms and landmarks. 6 min
  5. 5 Multilingual SEO Learn canonical + hreflang together on multilingual pages. 6 min
  6. 6 Summary - Multilingual page Write a bilingual page skeleton with all i18n techniques. 6 min
5
Project: Secure pageProject
5 lessons · 30 min
  1. 1 Project: Secure form page Overview of the 5-lesson project: a security-focused form page. 5 min
  2. 2 Rel noopener Learn to pair target="_blank" with rel="noopener noreferrer". 6 min
  3. 3 CSP meta Learn basic <meta http-equiv="Content-Security-Policy"> usage. 6 min
  4. 4 Referrer policy Control referrer with <meta name="referrer">. 6 min
  5. 5 Project final - Secure page Combine all security techniques and document the page. 7 min
6
Advanced web components
6 lessons · 36 min
  1. 1 Custom element registry Learn the HTML side of the customElements API (naming, fallback). 6 min
  2. 2 Slot and shadow boundary Learn the shadow boundary and slot distribution. 6 min
  3. 3 Declarative shadow DOM Write SSR-friendly shadow DOM with <template shadowrootmode>. 6 min
  4. 4 Form-associated custom element Learn form association with ElementInternals and the form attribute. 6 min
  5. 5 AOM and accessibility tree Learn how elements affect the accessibility tree. 6 min
  6. 6 Summary - Component library skeleton Write a card and modal skeleton with all web component techniques. 6 min
7
Expert finalFinal
5 lessons · 36 min
  1. 1 Challenge - Accessible dialog Write a fully accessible modal with <dialog> and ARIA. 7 min
  2. 2 Challenge - ARIA tabpanel Write a tabbed interface with the full ARIA tabpanel pattern. 7 min
  3. 3 Challenge - Multilingual RTL Write a bilingual RTL page with hreflang, dir and bidi. 7 min
  4. 4 Challenge - Security package Write a secure page with CSP, referrer policy and noopener. 7 min
  5. 5 Challenge - Expert capstone Write an app skeleton that combines all expert topics. 8 min

Lessons are free, an account keeps your progress

You do not have to sign up. If you do, you continue where you left off and never lose your work.

  • Progress saved on every device
  • Earn XP and badges
  • Keep your daily streak
  • Get a certificate when you finish
create a free account

Frequently asked questions

Are the HTML lessons free?

Yes. All 230 lessons of the HTML course are free and you can start without an account.

Do I need any prior knowledge?

No. The beginner level starts from zero; a browser is all you need. If you already know the basics, start at a higher level.

How long does the course take?

Lessons take 2–8 minutes. The whole course is about 20 hours; with 15–20 minutes a day you can finish in a few months.

Do I get a certificate?

Yes. When you complete the course with a free account, a verifiable certificate is issued in your name.

Will I lose my progress without an account?

Without an account your progress is kept only in your current browser. When you create a free account it is moved to your account.

Next step CSS

Learn to style web pages with CSS3 and modern CSS.