HTML Foundations

Semantic HTML, forms & accessibility 10h

Start from a completely blank page and learn how to structure real, multi-page websites using semantic HTML, accessible forms, and clean document outlines. You will go line by line through actual pages, understand what every tag does, and practice building small sections until you can design a full site skeleton without copying from a tutorial.

▶ Start this training

Self-paced. Work through each module at your own speed.

Who this is for

True beginners and self-taught developers who want a solid, modern foundation in HTML before moving into CSS, JavaScript, and Django. If you have ever edited a web page in a CMS, blog platform, or low-code tool and wished you really knew what was happening under the hood, this training is designed for you.

Prerequisites

Basic computer skills (copy/paste, creating folders, installing apps), comfort using a web browser, and the ability to follow step-by-step written instructions. No prior coding experience is required—every tag, attribute, and file you create is explained in plain language as you go.

By the end you will be able to:

4 outcomes

Structure marketing pages, blog layouts, and simple app UIs with semantic tags instead of random <div> elements, so your HTML reads like a logical outline rather than a pile of boxes.
Create accessible forms with clearly associated labels, inline error messages, and helpful hints that guide users to enter valid data on the first try.
Use landmarks (header, nav, main, footer), a consistent heading hierarchy, and skip links so screen readers and keyboard users can move around your pages as efficiently as mouse users.
Validate your HTML with browser devtools and online validators, recognize common issues (unclosed tags, invalid nesting, missing alt text), and fix them without guessing or relying on trial and error.

Training highlights

4 key themes

Semantic tags & document outline that scale from one-page sites to multi-page projects, including home, about, and contact flows.
Forms, validation, and inputs with labels, helper text, and error handling that match how real users actually submit information.
Accessible labels, landmarks, and ARIA basics baked in from day one so you do not have to “bolt on” accessibility later.
Hands-on practice building a complete mini-website that passes basic HTML and accessibility checks instead of staying at the theory level.

Syllabus

3 sections

Week 1

Set up PyCharm & Live Server, learn the HTML document structure, and build a small multi-section page. You will practice headings, paragraphs, links, images, lists, and semantic layout with header/nav/main/section/article/footer until you can rebuild the same layout from scratch without looking at the notes.

Week 2

Build real forms with text inputs, selects, radio buttons, and checkboxes, and connect them to proper labels and helper text. You will add placeholders, required fields, custom error messages, and run basic accessibility checks so your forms are usable with a keyboard and screen reader.

Capstone Project

Create a multi-page website (home, about, contact) that uses a consistent semantic structure across all pages and includes a fully accessible contact form. You will run the site through an HTML validator, fix all reported issues, and document what you changed and why.

Training plan

5 modules

Follow these modules step by step. Each one included concrete tasks so you actually learn and ship something real. You could have treated each module as one focused work session or spread the steps across several days.

Module 1: Environment Setup & First Page

Install PyCharm (or your preferred editor) and a simple Live Server extension, then create a dedicated folder named 'html-foundations' so all your practice files stay organized in one place.
Inside that folder, create index.html and add the basic HTML5 skeleton: <!doctype html>, <html>, <head>, and <body>. Add a simple page title and a main heading so you immediately see the connection between code and output.
Use Live Server (or a manual browser refresh) to load index.html in a browser, and repeat a small change–refresh cycle several times to get comfortable with editing and checking your work.
Add a short introductory paragraph that explains what this page is about, and practice formatting words with <strong> and <em> to see how inline elements behave inside text.

Module 2: Text, Links, Images, and Lists

Add a logical heading structure (h1, then h2 and h3 where needed) that would make sense even if the page were read out loud without any styling.
Create a simple navigation area using <nav> with a list of links (<a>) pointing between index.html and a new about.html page that you create.
Include at least two images using <img>, provide meaningful alt text for each image, and experiment with both local image files and a remote image URL.
Build ordered (<ol>) and unordered (<ul>) lists for things like course modules, features, or steps in a process, and nest a list inside another to see how the browser renders multi-level outlines.

Module 3: Semantic Layout and Landmarks

Replace generic layout <div> elements with semantic tags such as <header>, <nav>, <main>, <section>, <article>, and <footer>, and explain in comments why you chose each tag for its content.
Reorganize your headings so there is a single h1 per page and subtopics are introduced with h2 and, if needed, h3. Check that the outline would still make sense if you removed all visual styles.
Add a 'Skip to main content' link at the very top of the page that jumps to your <main> element, then test it using only the keyboard (Tab + Enter).
Open the Elements panel in your browser devtools and expand the DOM tree to verify that your semantic structure matches the sections you intended to build.

Module 4: Forms and Validation

Create a contact form using <form> that includes name, email, and message fields, as well as a submit button. Start with simple text inputs and a <textarea> for the message.
Connect each input to a <label> using matching for and id attributes so that clicking the label focuses the corresponding field. Test this with the mouse and with the keyboard.
Mark appropriate fields as required and observe the browser’s built-in validation messages. Adjust your input types (for example, type='email') and see how that changes validation behavior.
Add short helper text below at least one field to explain what to enter, and simulate an error by leaving a required field empty so you can see how users experience mistakes in real time.

Practice & Assessment

Build a small 3-page site: Home, About, Contact. Use a <nav> element on each page so users can move between them without using the back button.
Ensure every image has descriptive alt text and every form field has a label. Use your browser’s accessibility tools or a screen reader demo to verify that labels are announced correctly.
Run your pages through an HTML validator (such as the W3C validator), record every error or warning, and fix each one while keeping notes about what you learned from the fix.
Ask a friend or colleague to navigate the site using only the keyboard. Observe where they get stuck or confused, and make at least two improvements based on their feedback.