HTML, CSS and JavaScript Basics
Standalone references for building structured, responsive and accessible web interfaces with HTML, CSS and supporting JavaScript.
HTML Reference
Standalone HTML references for structuring text, links, images, lists, tables, forms and embedded...
HTML Text and Headings
HTML provides elements for displaying text, headings and page structure. Headings Headings are us...
HTML Links and Images
Links support navigation and images communicate visual information. Both need meaningful text alt...
HTML Lists and Tables
Lists organise related items. Tables represent information with meaningful row and column relatio...
HTML Forms
Forms collect user input. Accessible forms connect every control to a visible label and provide i...
HTML Embeds and Comments
HTML can be used to embed videos, maps and other content into a webpage. Comments can also be add...
CSS Reference
Style responsive and accessible interfaces using reusable CSS rules, layout systems and clear vis...
Connecting a CSS Stylesheet
CSS controls presentation while HTML provides structure. Connect the file Create css/style.css, ...
CSS Selectors, Classes and Reusable Rules
Selectors identify the HTML elements a rule styles. body { margin: 0; } h1 { color: #123f73; } .c...
CSS Box Model and Spacing
Every element is a box made from content, padding, border and margin. *, *::before, *::after { ...
Responsive Layouts with Flexbox and Grid
Responsive layouts adapt to available space rather than one device size. Flexbox navigation .navi...
Accessible Colour, Typography and Focus
Accessible styling supports perception, reading and keyboard use. body { color: #1f2933; back...
Styling Forms and Validation Messages
Form styling should make labels, controls, instructions and errors easy to identify. .form-group ...
Styling Tables, Navigation and Data Displays
Data interfaces should prioritise interpretation over decoration. .table-wrap { overflow-x: auto;...
JavaScript Reference
Use supporting JavaScript for interaction, filtering, accessible updates and data presentation.
Connecting JavaScript and Selecting Elements
JavaScript can add interaction to an HTML interface. Keep the page usable when supporting scripts...
Handling Events and User Input
Events allow a script to respond to user actions. <label for="team-filter">Filter teams</label> <...
Filtering and Sorting Displayed Data
Client-side filtering can help users explore data already present in the browser. Database filter...
Updating Interfaces Accessibly
Dynamic interfaces must communicate changes without removing keyboard access or context. Status m...
Presenting PHP Data with JavaScript Charts
PHP can query and process database data, then pass a small prepared result to JavaScript for pres...