Recently Updated Pages
Displaying JSON Data in a Table
In this tutorial, you will display the device data in an HTML table using JavaScript. Current Pro...
Reading API Data with JavaScript
The API returns JSON data when visited in a browser. In this tutorial, you will use JavaScript to...
Querying Imported Data with SQL
In this tutorial, you will use SQL queries to analyse the imported data. View All Events Open php...
Restoring a XAMPP Project from Backup
Restoring a XAMPP Project from Backup recreates both the website files and the MySQL database. Wo...
Moving a XAMPP Project to Another Computer
Moving a XAMPP project requires a verified backup of both the project files and its database. Pre...
Backing Up a XAMPP Project
A working XAMPP project normally has two separate parts: website files inside htdocs and data st...
HTML Forms
Forms collect user input. Accessible forms connect every control to a visible label and provide i...
HTML Lists and Tables
Lists organise related items. Tables represent information with meaningful row and column relatio...
HTML Links and Images
Links support navigation and images communicate visual information. Both need meaningful text alt...
Presenting PHP Data with JavaScript Charts
PHP can query and process database data, then pass a small prepared result to JavaScript for pres...
Updating Interfaces Accessibly
Dynamic interfaces must communicate changes without removing keyboard access or context. Status m...
Filtering and Sorting Displayed Data
Client-side filtering can help users explore data already present in the browser. Database filter...
Handling Events and User Input
Events allow a script to respond to user actions. <label for="team-filter">Filter teams</label> <...
Connecting JavaScript and Selecting Elements
JavaScript can add interaction to an HTML interface. Keep the page usable when supporting scripts...
Styling Tables, Navigation and Data Displays
Data interfaces should prioritise interpretation over decoration. .table-wrap { overflow-x: auto;...
Styling Forms and Validation Messages
Form styling should make labels, controls, instructions and errors easy to identify. .form-group ...
Accessible Colour, Typography and Focus
Accessible styling supports perception, reading and keyboard use. body { color: #1f2933; back...
Responsive Layouts with Flexbox and Grid
Responsive layouts adapt to available space rather than one device size. Flexbox navigation .navi...
CSS Box Model and Spacing
Every element is a box made from content, padding, border and margin. *, *::before, *::after { ...
CSS Selectors, Classes and Reusable Rules
Selectors identify the HTML elements a rule styles. body { margin: 0; } h1 { color: #123f73; } .c...