🇬🇧 Limited Time — UK Only·🎓 Free Learning for 1 Month·🤖 Free AI Training Included·📚 4,000+ Lessons · 35,000+ Quizzes·🏆 GCSE Mocks · Olympiad Papers·⚡ Selected Students Only · Limited Places·🎁 Free Value Worth £2,000·🇬🇧 Limited Time — UK Only·🎓 Free Learning for 1 Month·🤖 Free AI Training Included·📚 4,000+ Lessons · 35,000+ Quizzes·🏆 GCSE Mocks · Olympiad Papers·⚡ Selected Students Only · Limited Places·🎁 Free Value Worth £2,000·🇬🇧 Limited Time — UK Only·🎓 Free Learning for 1 Month·🤖 Free AI Training Included·📚 4,000+ Lessons · 35,000+ Quizzes·🏆 GCSE Mocks · Olympiad Papers·⚡ Selected Students Only · Limited Places·🎁 Free Value Worth £2,000·
🌐Free Course

Web (HTML & CSS)

Build your first websites with HTML and style them beautifully with CSS.

26 Lessonsbeginner

Lessons

1

Headings and paragraphs

HTML uses tags to structure the page. <h1> is the biggest heading, <h2> smaller, and <p> is a paragraph. Every tag has an opening and closing part.

Only one <code>&lt;h1&gt;</code> per page — this is an SEO and accessibility ruleWCAG accessibility guidelines require a logical heading hierarchyHeading text is a key signal Google uses to index page content
2

Links and images

<a href="url">text</a> makes a link. <img src="url" alt="description"> shows an image. Links can go to other pages or to a place on the same page.

Always include <code>alt</code> on images — it's legally required in many countries for accessibilityUsing <code>target="_blank"</code> without <code>rel="noopener"</code> is a security vulnerability (tab-napping)Lazy loading: <code>&lt;img loading="lazy"&gt;</code> defers off-screen images — speeds up page load
3

div and span

<div> is a block container (starts on a new line); <span> is inline (stays in the same line). Use them to group elements and apply CSS or JavaScript.

'Div soup' — deeply nested divs with no semantic meaning — hurts accessibility and readabilityScreen readers cannot tell what a div means; prefer semantic tags for meaningful contentSpans are great for CSS animations on individual characters or words
4

Semantic HTML

Semantic tags describe meaning: <header>, <nav>, <main>, <section>, <article>, <footer>. They help accessibility and SEO, and make the structure clear.

There are 100+ semantic HTML5 elements — most developers know about 20 of themARIA (Accessible Rich Internet Applications) extends semantics for complex componentsGoogle's Lighthouse accessibility audit checks for semantic HTML usage
5

Tables

Tables organize data in rows and columns. Use <table>, <tr> (row), <th> (header cell), <td> (data cell). Add <thead> and <tbody> for structure.

Tables are NOT for page layout — that's what CSS Grid and Flexbox are for<code>&lt;th scope="col"&gt;</code> tells screen readers whether a header applies to a column or rowCSS <code>table-layout: fixed</code> makes column widths equal regardless of content
6

Forms and inputs

Forms collect user input. Use <form>, <input> (text, number, checkbox, submit), <label>, and <button>. The name attribute identifies the field when the form is submitted.

<code>&lt;input type="email"&gt;</code> adds built-in email format validation on mobile devices it shows the email keyboardLabels are mandatory for accessibility — always use <code>&lt;label for="inputId"&gt;</code>The <code>required</code> attribute prevents submission if the field is empty
7

Forms: Submit and action

A form can have action="url" (where to send data) and method="GET" or "POST". On submit, the browser sends the input names and values. Use JavaScript or a server to handle the submission.

GET form data appears in the URL — never use GET for passwords or sensitive infoWithout <code>name</code> attributes, input values are NOT included in form submissionHTML5 validation: <code>required</code>, <code>minlength</code>, <code>pattern</code>, <code>type='email'</code> validate before submission
8

Head and meta tags

The <head> contains metadata: <title> (browser tab), <meta charset="utf-8"> (character encoding), <meta name="viewport" content="width=device-width"> for mobile. Link to CSS with <link rel="stylesheet" href="style.css">.

The <code>charset</code> meta MUST be the first tag in <code>&lt;head&gt;</code> — otherwise encoding issues can corrupt the pageOpen Graph was created by Facebook but is now the standard for social previews across all platformsGoogle ignores the <code>keywords</code> meta tag — don't waste time on it
9

Accessibility basics

Use semantic HTML (header, nav, main). Add alt text to images. Use <label> for inputs. Ensure good contrast and that keyboard navigation works. aria-label can describe elements for screen readers.

WCAG (Web Content Accessibility Guidelines) is the international standard — level AA is the legal minimum in most countriesScreen readers like NVDA (Windows) and VoiceOver (Mac/iPhone) read web pages aloudKeyboard-only navigation is used not just by people with motor disabilities but also by power users
10

HTML entities

Special characters use entities: &lt; for <, &gt; for >, &amp; for &, &nbsp; for non-breaking space, &copy; for ©. Use them when you need to show the character, not use it as code.

There are over 2,000 named HTML entities, but you only need ~10 in practiceModern HTML5 with UTF-8 encoding means you can type most symbols directly — entities are mainly for reserved charsFailing to escape &lt; and &gt; in user content can cause XSS (cross-site scripting) attacks
11

What is CSS?

CSS stands for Cascading Style Sheets. It's the language that styles your web pages — colors, fonts, spacing, and layout. HTML is the skeleton, CSS is the skin and clothes! You write CSS rules that say: 'target this element, apply these styles'. One CSS file can control the look of an entire websit…

12

CSS: colours and fonts

CSS styles your HTML. You can set color, font-size, font-family, and background-color. Use a <style> tag or a separate .css file. Selectors like h1 or .class name pick which elements to style.

CSS stands for <strong>Cascading</strong> Style Sheets — 'cascading' means rules flow from parent to childThere are over <strong>550 CSS properties</strong> — you'll use about 50 regularlyCSS is not a programming language — it has no variables in its original form (but custom properties fix this)
13

Selectors & Properties

A CSS rule has two parts: a selector (what to target) and declarations (what to change). You can select by tag name (h1), class (.my-class), or ID (#my-id). Classes are the most common — add a class in HTML and style it in CSS. Properties like color, font-size, and background control appearance.

14

Colors & Backgrounds

CSS gives you many ways to set colors: named colors (red, blue), hex codes (#ff5733), rgb(), or hsl(). Backgrounds can be solid colors, images, or gradients. The linear-gradient() function creates smooth transitions between colors — great for hero sections and buttons.

15

Text & Fonts

Typography is huge in design! CSS lets you control font-family (typeface), font-size, font-weight (bold), line-height (spacing between lines), text-align, and text-decoration (underline, strikethrough). Use Google Fonts by adding a link in HTML, then reference the font name in CSS.

16

CSS: Units (px, em, rem, %)

px is pixels (fixed). em is relative to the element's font size. rem is relative to the root font size. % is percentage of the parent. Use rem for scalable typography.

17

The Box Model

Every HTML element is a box! The CSS box model has four layers: content (the actual text/image), padding (space inside the border), border (the line around it), and margin (space outside the border). Understanding this is key to spacing elements correctly. Use box-sizing: border-box so padding does…

The original CSS box model (<code>content-box</code>) is considered a design flaw — <code>border-box</code> is the modern standard<strong>Margin collapse</strong>: vertical margins between block elements merge — the larger one wins (not both added)Inline elements (like <code>&lt;span&gt;</code>) ignore <code>width/height</code> and vertical margin
18

CSS: layout and boxes

Every element is a box. You can set width, height, margin (space outside), and padding (space inside). display: flex; on a parent arranges children in a row or column. Use class and id to target specific elements.

Flexbox is supported in 99%+ of browsers — safe to use everywhereFlexbox is one-dimensional (one axis at a time); CSS Grid is two-dimensionalThe visual order of flex items can differ from DOM order via <code>order</code> property
19

Flexbox Layouts

Flexbox makes it easy to arrange items in a row or column. Set display: flex on a container, then control direction, alignment, and spacing. justify-content aligns items along the main axis; align-items aligns along the cross axis. gap adds space between items without needing margins.

20

CSS: Flexbox deep dive

Flexbox: justify-content (main axis), align-items (cross axis), flex-wrap, flex-grow, flex-shrink. Use flex: 1 to let items share space. gap adds space between items.

21

CSS: Pseudo-classes

Pseudo-classes style elements in a certain state. :hover when the mouse is over, :focus when focused, :first-child for the first child. Example: a:hover { color: red; }

22

CSS: Transitions

Transitions animate a property change over time. Use transition: property duration; e.g. transition: background 0.3s; Then change the property (e.g. on hover) and it animates.

23

CSS Grid

CSS Grid is perfect for two-dimensional layouts (rows AND columns at once). Define grid columns with grid-template-columns. Use fr units to share available space. gap controls gutters between cells. Grid is ideal for card galleries, page layouts, and dashboards.

24

Responsive Design & Media Queries

A responsive website looks great on phones, tablets, and desktops. Use media queries to apply different styles at different screen widths. The mobile-first approach starts with small screen styles, then adds @media (min-width) for larger screens. Relative units like %, vw, and rem help elements sca…

Google uses mobile-first indexing — your mobile site is what gets ranked<code>clamp(min, preferred, max)</code> creates fluid sizing without media queriesCSS Container Queries (new!) let you style based on the parent container's width, not the viewport
25

CSS Variables & Mini Project

CSS variables (custom properties) let you store values and reuse them everywhere. Define them on :root and use them with var(). Changing one variable instantly updates everything that uses it — great for themes! Let's put everything together and style a mini landing page.

26

Animations & Transitions

CSS can animate elements without JavaScript! transition smoothly changes properties when they change (like on hover). @keyframes defines an animation sequence with from/to or percentage steps. animation: then applies it. Animations make UIs feel alive and fun.

Start learning Web (HTML & CSS) free today

AI tutoring · quizzes · projects · works on any device

Start free on Applaa →Download Applaa