Welcome! I'm HTMLOnline.

Begin before the code: learn every new word, assemble tags piece by piece and build a complete first page.

Section outcome: Build a personal introduction page with headings, paragraphs and lists.

1. What HTML means

   Start at the true beginning: discover what H-T-M-L stands for and what each word means.

2. Code and the browser

   Learn the difference between the code editor, an HTML file and the browser preview.

3. Tags, opening and closing

   Build an element one piece at a time: opening tag, content and closing tag.

4. Elements inside elements

   Understand nesting and indentation before a complete document introduces several layers at once.

5. Tags without closing pairs

   Meet void elements such as images and line breaks that do not wrap content or use closing tags.

6. DOCTYPE, html and body

   Build the outer structure slowly and understand what every unfamiliar line is doing.

7. Head, title and page information

   Separate information about the page from the content shown inside the page.

8. Headings and paragraphs

   Create a clear reading order with one main heading, smaller headings and useful paragraphs.

9. Lists for steps and choices

   Organize ingredients, goals, instructions and menus with ordered and unordered lists.

10. Project: My first profile pageProject

    Combine the complete document, headings, paragraphs and lists into something worth sharing.

Connect pages, add media, collect information and write HTML that works for more people.

Section outcome: Build an accessible community event page with links, images and a form.

1. Links and web addresses

   Connect visitors to another page, phone number or email address with the anchor element.

2. Images and helpful alt text

   Add images while keeping the page useful when an image is unavailable or cannot be seen.

3. Semantic page landmarks

   Use header, nav, main, section and footer so people and assistive technology understand the page.

4. Tables for real data

   Present timetables, prices and comparisons with proper rows and headings.

5. Forms, inputs and labels

   Collect a visitor’s name and message using controls that are properly labelled.

6. Project: Community event pageProject

   Build a clear event page that someone can understand and register for on a phone.

Go beyond headings: emphasis, definitions, quotations, dates, contact details, technical text and readable article structure.

Section outcome: Publish a correctly marked-up formal letter and a complete community article.

1. Emphasis, importance, bold and italic

   Use em for stress, strong for importance, and b or i only when their narrower meaning is appropriate.

2. Definitions, code and scientific notation

   Use dl/dt/dd for definitions and code/pre/kbd/samp/sub/sup for technical or scientific content.

3. Quotes, citations, dates, addresses and abbreviations

   Represent quoted words, cited works, machine-readable dates, relevant contact details and expanded abbreviations.

4. Mini project: Formal workshop letterProject

   Combine addresses, dates, headings, paragraphs, emphasis, abbreviations and links in a realistic formal letter.

5. Practice lab: Repair meaningless text

   Replace visual-only markup with headings, paragraphs, emphasis, definitions and quotations that retain meaning.

6. Unit project: Community news articleProject

   Build a self-contained article with publication details, quotations, a glossary and a logical heading outline.

Master href destinations, folder paths, page fragments, downloads, phone/email actions and accessible navigation.

Section outcome: Create a dependable resource hub and a connected multi-page website.

1. Link anatomy and file paths

   Write useful anchor text and distinguish absolute URLs, same-folder paths, child folders and parent folders.

2. Fragments, downloads, email and telephone links

   Jump to page sections and create links for files, email addresses and telephone numbers.

3. Navigation menus and the current page

   Group major links in nav, label multiple navigation regions and communicate the current page.

4. Mini project: Personal resource hubProject

   Organise external, internal, download, phone and email links into clearly named groups.

5. Practice lab: Diagnose broken links

   Repair missing href values, mismatched fragments, unsafe blank targets and incorrect relative paths.

6. Unit project: Connected three-page websiteProject

   Plan Home, About and Contact pages, then write navigation paths that work from each location.

Add media with useful alternatives, responsive sources, captions, controls, transcripts and responsible loading.

Section outcome: Create a responsive gallery and an accessible multimedia story.

1. Image anatomy, dimensions, figures and captions

   Use src, useful alt, width/height, figure and figcaption so media remains understandable and stable.

2. Responsive images, picture and lazy loading

   Offer image candidates with srcset/sizes, use picture for art direction and defer appropriate off-screen media.

3. Audio, video, sources, posters, captions and transcripts

   Use native media controls, multiple source formats, video posters, WebVTT caption tracks and nearby transcripts.

4. Mini project: Responsive community galleryProject

   Create several captioned figures with meaningful alternatives, dimensions, candidate images and sensible loading.

5. Practice lab: Repair inaccessible media

   Diagnose missing alt text, absent controls, autoplay, missing captions, layout shifts and vague transcript links.

6. Unit project: Accessible multimedia storyProject

   Combine responsive images, audio, video, captions, transcripts and written context in one coherent article.

Present related data and collect information using captions, headers, labels, input types, groups and constraints.

Section outcome: Create an accessible timetable and a complete event registration form.

1. Tables from first cell to accessible structure

   Use table, caption, thead, tbody, tfoot, tr, th, td, scope, colspan and rowspan for genuine tabular data.

2. Forms, actions, methods, labels and input types

   Understand form submission and create named, visibly labelled controls with suitable types and autocomplete purposes.

3. Choices, fieldsets, select, textarea and validation

   Create radio and checkbox choices, group them with fieldset/legend, collect longer text and apply honest native constraints.

4. Mini project: Accessible training timetableProject

   Build a realistic schedule with caption, table groups, column headings, row headings and a spanning event.

5. Practice lab: Repair a difficult form

   Fix placeholder-only labels, unnamed controls, incorrect button types, weak grouping and unnecessary requested information.

6. Unit project: Workshop registration systemProject

   Build a realistic form with personal details, dates, grouped choices, validation, a message field, consent and clear actions.

Master landmarks, source order, metadata, native interactive elements, validation, global attributes and final quality checks.

Section outcome: Audit a weak page and complete a search-friendly, accessible HTML information site.

1. Landmarks, articles, sections and source order

   Plan header, nav, main, article, section, aside and footer so the unstyled document has a logical heading outline.

2. Head metadata, search previews, canonical URLs and favicons

   Write unique titles and descriptions, set language and viewport, link icons and identify a preferred canonical URL.

3. Details, summary, progress, meter and dialog

   Use native interactive and measurement elements before recreating their behaviour with scripts.

4. Validation, comments, entities and global attributes

   Validate markup, write useful non-secret comments, encode reserved characters and understand id, class, hidden, lang and data-*.

5. Mini project: Repair an inaccessible page

   Audit missing language, metadata, headings, landmarks, alternatives, labels, button semantics and invalid nesting.

6. HTML grand project: Community information websiteProject

   Combine document metadata, navigation, semantic articles, responsive media, data tables and forms into a complete HTML-only site.

Learn how selectors and properties control colour, typography, spacing and the box model.

Section outcome: Turn plain HTML into a polished personal card using readable, reusable CSS.

1. How CSS rules work

   Understand selectors, properties and values—the three parts of a CSS rule.

2. Classes and reusable selectors

   Use classes to style several related elements without changing every element of that type.

3. Colour and readable contrast

   Choose text and background colours that work together and remain readable.

4. Typography people can read

   Control font family, size, line height and weight without making the page tiring to read.

5. The box model and spacing

   Understand content, padding, border and margin so layouts stop feeling mysterious.

6. Project: Personal profile cardProject

   Apply selectors, colour, typography and spacing to make your first polished component.

Use flexible units, Flexbox, Grid and media queries to design for phones first.

Section outcome: Build a responsive local-business page that works on a small phone and a laptop.

1. Flexible widths and useful units

   Choose percentages, rem, px, min(), max-width and viewport units with confidence.

2. Display and position

   See how block, inline, inline-block, relative and absolute positioning affect layout.

3. Flexbox for rows and columns

   Arrange navigation, cards and aligned controls along one main direction.

4. Grid for page sections

   Create two-dimensional card layouts that adapt cleanly to available width.

5. Mobile-first media queries

   Start with a simple phone layout, then add roomier arrangements when the screen allows.

6. Project: Responsive business pageProject

   Build a trustworthy mobile-first page for a real local service or small business.

Choose elements precisely and understand why one declaration wins when rules compete.

Section outcome: Build a reusable card collection and repair real selector, inheritance and specificity problems.

1. Combinators and attribute selectors

   Target children, descendants, siblings and elements with particular attributes without adding unnecessary classes.

2. States and generated parts

   Use pseudo-classes for states and pseudo-elements for selectable parts without replacing meaningful HTML.

3. Cascade, specificity and inheritance

   Resolve competing declarations by considering importance, origin, specificity and source order, then use inheritance deliberately.

4. Mini project: Interactive resource listProject

   Combine structural selectors, attributes and accessible states in a compact resource directory.

5. Practice lab: Solve a cascade mystery

   Use DevTools-style reasoning to identify an over-specific selector, inheritance surprise and unsafe focus reset.

6. Unit project: Reusable card collectionProject

   Create shared component rules plus small variants without copying an entire block of CSS.

Create readable rhythm, deliberate colour, reusable design tokens and polished surfaces.

Section outcome: Design a complete, accessible visual identity for a community organisation.

1. Font families, stacks and loading

   Choose resilient font stacks and understand web-font fallbacks, weights and rendering cost.

2. Readable rhythm and a type scale

   Use rem, line-height, readable line length and clamp() to make text comfortable from phone to desktop.

3. Colour formats, tokens and surfaces

   Use custom properties to organise accessible text, background, accent, border and status colours.

4. Mini project: Readable mobile articleProject

   Combine font stacks, a type scale, line length, spacing and restrained colour in a real article.

5. Practice lab: Repair weak hierarchy

   Fix cramped text, low contrast, inconsistent spacing and a palette that gives every element equal importance.

6. Unit project: Community brand pageProject

   Turn typography, colour tokens, surfaces and component states into a coherent one-page identity.

Master axes, wrapping, alignment, flexible sizing and dependable one-dimensional patterns.

Section outcome: Build and debug navigation, media objects, toolbars and a responsive dashboard shell.

1. Main axis, cross axis and wrapping

   Understand how flex-direction changes the axes and how wrapping protects content when space runs out.

2. Alignment, grow, shrink and basis

   Distribute space with justify-content and align-items, then control how individual items grow and shrink.

3. Navigation, media objects and safe ordering

   Apply Flexbox to common interface patterns while keeping visual order consistent with document and keyboard order.

4. Mini project: Responsive navigation barProject

   Build a brand, wrapping link group and action that remain usable without JavaScript.

5. Practice lab: Repair a broken toolbar

   Diagnose overflow, wrong-axis alignment, oversized children and disappearing controls in a realistic toolbar.

6. Unit project: Flexible dashboard shellProject

   Combine a header, metric cards, content feed and action panel using nested one-dimensional layouts.

Build two-dimensional systems with tracks, placement, areas, responsive repetition and subgrid.

Section outcome: Create a responsive gallery and an editorial magazine layout without fragile positioning.

1. Tracks, fr, repeat and minmax

   Define explicit rows and columns with flexible tracks that respect useful minimum sizes.

2. Placement lines and named areas

   Place content by grid lines or readable area names while preserving a logical document order.

3. Auto-placement, auto-fit and subgrid

   Let Grid create responsive tracks from available space and align nested content with a parent grid.

4. Mini project: Responsive project galleryProject

   Create an intrinsically responsive gallery with featured cards, consistent gaps and sensible image cropping.

5. Practice lab: Repair an overflowing grid

   Fix rigid tracks, accidental implicit columns and content that refuses to shrink.

6. Unit project: Responsive magazine front pageProject

   Use named areas, responsive tracks, spans and consistent card internals for an editorial layout.

Finish production-ready pages with intrinsic sizing, container queries, motion preferences, print styles and maintainable architecture.

Section outcome: Audit and build a polished site that adapts to phones, large screens, print and user preferences.

1. Intrinsic sizing and container queries

   Build components around their own available space using min(), max(), clamp(), aspect-ratio and container queries.

2. Overflow, logical properties and print

   Prevent accidental scrolling, support different writing directions and create paper-friendly output.

3. Transitions, transforms and motion preferences

   Add purposeful motion with transform and opacity while respecting reduced-motion preferences and performance.

4. Mini project: Adaptive service cardProject

   Combine intrinsic size, container queries, responsive media and user preferences in one reusable component.

5. Practice lab: Accessibility and performance audit

   Repair tiny text, hidden focus, motion, overflow, oversized background images and overly broad transitions.

6. Unit project: Production-ready community siteProject

   Apply the complete CSS pathway to a readable, responsive, accessible and printable real-world landing page.

Learn values, variables, decisions, arrays and loops through useful everyday calculations.

Section outcome: Build a small budget helper that calculates totals and gives clear advice.

1. What JavaScript does

   Understand how JavaScript adds behaviour and how a script connects to a page.

2. Variables and types of values

   Store text, numbers and true/false values using clear variable names.

3. Calculations and useful strings

   Calculate totals and build friendly messages from several values.

4. Decisions with if and else

   Make code choose a message based on a condition.

5. Arrays and loops

   Store a collection and repeat work without copying the same code many times.

6. Project: Weekly budget helperProject

   Combine variables, calculations and conditions into a small practical program.

Work confidently with strings, arrays, array methods, loops and everyday data transformations.

Section outcome: Build a searchable, summarised market-price board from a collection of records.

1. Strings and useful text methods

   Create, combine, inspect and normalise text with template literals and string methods.

2. Arrays, indexes and changing collections

   Read array positions and add or remove values with push, pop, shift and unshift.

3. Map, filter, find and reduce

   Transform, select, locate and summarise array values without manually managing counters.

4. Mini project: Interactive shopping listProject

   Use an array, input events and rendering to add and remove shopping items.

5. Practice lab: Fix collection mistakes

   Repair wrong indexes, accidental mutation, missing returns and string-number confusion.

6. Unit project: Searchable market-price boardProject

   Render object records, search names, filter categories and calculate a useful average.

Write reusable functions, understand scope, handle failures and debug programs methodically.

Section outcome: Build a tested grade calculator and learn how to explain and recover from common errors.

1. Parameters, arguments and return values

   Separate function inputs from the value a function calculates and returns.

2. Global, function and block scope

   Know where let and const bindings exist and use closures to preserve private state.

3. Callbacks, timers and higher-order functions

   Pass functions as values and schedule work without calling callbacks too early.

4. Mini project: Grade calculatorProject

   Turn validation, calculation and classification into small named functions.

5. Practice lab: Read and repair errors

   Distinguish syntax, reference and type errors, use console evidence and add defensive checks.

6. Unit project: Tested fare engineProject

   Build pure fare functions, boundary checks and a tiny browser test report.

Model records, create safe page content and build dependable keyboard and pointer interactions.

Section outcome: Build an accessible task board whose interface is generated from structured data.

1. Objects, methods and destructuring

   Model one meaningful record with properties, methods, nested values and concise destructuring.

2. Finding and creating DOM nodes

   Use querySelector, createElement, textContent and append to construct page content safely.

3. Event objects, delegation and defaults

   Inspect event targets, delegate repeated controls and prevent defaults only when replacing them thoughtfully.

4. Mini project: Accessible information tabsProject

   Coordinate buttons, panels, ARIA state and keyboard navigation without losing semantic controls.

5. Practice lab: Repair an unreliable interface

   Fix null selectors, duplicate listeners, unsafe HTML insertion and mouse-only interaction.

6. Unit project: Accessible task boardProject

   Model tasks as objects and render add, complete, filter and delete interactions with useful status messages.

Understand promises, async/await, network states, HTTP failures and structured JSON data.

Section outcome: Build a resilient data dashboard with loading, success, empty and error experiences.

1. Asynchronous work and promises

   Understand that slow work completes later and a promise represents its future success or failure.

2. Async, await and try/catch

   Write readable asynchronous sequences and keep failure handling beside the work that may fail.

3. Fetch, HTTP responses and JSON

   Fetch structured data, check response.ok and parse JSON before using it.

4. Mini project: Resilient quote loaderProject

   Build loading, success, empty and error states around asynchronous data.

5. Practice lab: Fix asynchronous mistakes

   Repair missing await, unchecked statuses, swallowed errors and race-prone repeated requests.

6. Unit project: Data dashboard with request statesProject

   Fetch structured records, validate their shape, render summaries and recover gracefully.

Persist structured state, organise modules, protect accessibility and test complete user journeys.

Section outcome: Build a polished habit tracker with saved state, validation, accessible updates and a test checklist.

1. localStorage and JSON state

   Serialise structured data safely, restore defaults and understand device-local storage limits.

2. URLs, history and native browser interfaces

   Use URLSearchParams, History and native dialog elements while preserving normal navigation.

3. Modules and separation of concerns

   Organise data, calculations and interface work into small responsibilities with import and export.

4. Mini project: Saved study notesProject

   Build a small notes tool with browser persistence, deletion and a clear empty state.

5. Practice lab: Test a complete interaction

   Audit keyboard use, focus, names, live updates, validation, empty states and motion before calling an app finished.

6. Unit project: Polished habit trackerProject

   Combine structured state, persistence, rendering, boundaries, status announcements and a complete test plan.

Plan, build, test and explain increasingly independent applications for real community needs.

Section outcome: Finish two portfolio-ready applications and document the decisions behind them.

1. Plan state, events and screen states

   Translate a problem into data, user actions, derived values and loading, empty, success and error screens.

2. Progressive enhancement and resilient forms

   Begin with meaningful HTML behaviour, then use JavaScript to improve feedback without making the task fragile.

3. Performance and security basics

   Avoid blocking work, unsafe HTML, excessive listeners and unnecessary third-party code.

4. Mini project: Community clinic queueProject

   Build a saved queue with add, serve-next, priority filtering and clear status announcements.

5. Practice lab: Review a project like a developer

   Use a repeatable checklist for purpose, semantics, responsiveness, keyboard use, data, failures and code clarity.

6. Unit project: Learning resource finderProject

   Build a complete searchable, filterable, saved and resilient resource application suitable for a portfolio.

Use functions, the DOM, events, forms and browser storage to build a complete useful app.

Section outcome: Finish a mobile-friendly service directory and earn your course certificate.

1. Functions: reusable instructions

   Group steps into named functions that accept information and return useful results.

2. Objects for meaningful records

   Keep related facts together as named properties.

3. The DOM and click events

   Select an element and update it when a visitor clicks a button.

4. Interactive forms and validation

   Read a form value, prevent an unwanted refresh and give kind feedback.

5. Save progress in the browser

   Use localStorage for small device-local preferences without requiring an account.

6. Capstone: Community service directoryProject

   Plan and build a responsive app that helps people find useful local services.