Advanced Search
Search Results
114 total results found
HTML, CSS and JavaScript Basics
Standalone references for building structured, responsive and accessible web interfaces with HTML, CSS and supporting JavaScript.
New Page
HTML Reference
Standalone HTML references for structuring text, links, images, lists, tables, forms and embedded content.
HTML Text and Headings
HTML provides elements for displaying text, headings and page structure. Headings Headings are used to organise content on a webpage. HTML provides six heading levels. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Result: Heading 1 Heading 2 Head...
HTML Links and Images
Links support navigation and images communicate visual information. Both need meaningful text alternatives. Links <a href="results.php">View tournament results</a> Link text should describe the destination without relying on “click here”. For an external link ...
HTML Lists and Tables
Lists organise related items. Tables represent information with meaningful row and column relationships. Unordered and ordered lists <ul> <li>Team registration</li> <li>Match results</li> <li>Leaderboard</li> </ul> <ol> <li>Choose a fictional dataset.<...
HTML Forms
Forms collect user input. Accessible forms connect every control to a visible label and provide instructions and errors that do not rely on placeholders or colour. Basic form <form action="register.php" method="post"> <div class="form-group"> <label for=...
HTML Embeds and Comments
HTML can be used to embed videos, maps and other content into a webpage. Comments can also be added to help explain code without displaying anything on the page. HTML Comments Comments are ignored by the browser. They are useful for explaining code and leaving...
CSS Reference
Style responsive and accessible interfaces using reusable CSS rules, layout systems and clear visual states.
JavaScript Reference
Use supporting JavaScript for interaction, filtering, accessible updates and data presentation.
New Page
Helper Tools
Classroom tools for checking HTML and CSS and generating fictional test password hashes.
HTML & CSS Fixer
The HTML & CSS Fixer helps identify common mistakes in HTML and CSS code. The tool highlights problems and suggests fixes using comments so you can correct the code yourself. The Tool Can Help Find Missing closing tags Incorrect nesting Missing quotation marks...
PHP Password Hasher
The PHP Password Hasher generates secure password hashes for use in PHP login systems. This tool is useful when: Adding users directly in phpMyAdmin. Resetting passwords during development. Testing login systems. Verifying that a password matches a stored hash...
Data Visualisation with Google Charts
Present processed SQL data as pie, bar and line charts using Google Charts.
Creating Charts with Google Charts
Google Charts is a free JavaScript library that can create professional graphs and charts using your data. Google Charts can display: Pie Charts Bar Charts Column Charts Line Charts Area Charts In this tutorial you will create your first chart using sample dat...
Pie Charts from SQL Data
In this tutorial, the chart data will come directly from a MySQL database. The example below uses the cyber_security_events table. Step 1 - Create the SQL Query The following query counts how many events belong to each risk level. SELECT risk_level, C...
Bar Charts from SQL Data
Bar charts are useful for comparing values between categories. In this tutorial, the number of security events at each risk level will be displayed as a bar chart. Step 1 - Create the SQL Query SELECT risk_level, COUNT(*) AS total FROM cyber_security_e...