Advanced Search
Search Results
108 total results found
Connecting a CSS Stylesheet
CSS controls presentation while HTML provides structure. Connect the file Create css/style.css, then add this inside the page’s <head>: <link rel="stylesheet" href="css/style.css"> A relative path is interpreted from the current page. A PHP page in a subfold...
CSS Selectors, Classes and Reusable Rules
Selectors identify the HTML elements a rule styles. body { margin: 0; } h1 { color: #123f73; } .card { border: 1px solid #cbd5e1; } #main-search { max-width: 40rem; } nav a:hover, nav a:focus-visible { text-decoration: underline; } Use element selectors for br...
CSS Box Model and Spacing
Every element is a box made from content, padding, border and margin. *, *::before, *::after { box-sizing: border-box; } .card { max-width: 42rem; padding: 1rem; border: 1px solid #cbd5e1; margin-block: 1rem; } With border-box, declared width includ...
Responsive Layouts with Flexbox and Grid
Responsive layouts adapt to available space rather than one device size. Flexbox navigation .navigation { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } Grid cards .card-grid { display: grid; grid-template-columns: repeat(auto...
Accessible Colour, Typography and Focus
Accessible styling supports perception, reading and keyboard use. body { color: #1f2933; background: #ffffff; font-family: system-ui, sans-serif; line-height: 1.6; } a { color: #075985; } :focus-visible { outline: 3px solid #f59e0b; outline-offset:...
Styling Forms and Validation Messages
Form styling should make labels, controls, instructions and errors easy to identify. .form-group { display: grid; gap: 0.35rem; margin-block: 1rem; } input, select, button { font: inherit; min-height: 2.75rem; } input { border: 1px solid #64748b; ...
Styling Tables, Navigation and Data Displays
Data interfaces should prioritise interpretation over decoration. .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.65rem; border: 1px solid #cbd5e1; text-align: left; } th { background: #123f73; ...
Connecting JavaScript and Selecting Elements
JavaScript can add interaction to an HTML interface. Keep the page usable when supporting scripts fail. Connect a script Place this before the closing body tag: <script src="js/app.js"></script> Or use defer in the page head: <script src="js/app.js" defer></...
Handling Events and User Input
Events allow a script to respond to user actions. <label for="team-filter">Filter teams</label> <input id="team-filter" type="search"> <p id="filter-status" role="status"></p> const filter = document.querySelector("#team-filter"); const status = document.query...
Filtering and Sorting Displayed Data
Client-side filtering can help users explore data already present in the browser. Database filtering remains preferable for large or permission-sensitive datasets. const rows = [...document.querySelectorAll("[data-team-row]")]; const search = document.querySel...
Updating Interfaces Accessibly
Dynamic interfaces must communicate changes without removing keyboard access or context. Status message <p id="save-status" role="status" aria-live="polite"></p> const status = document.querySelector("#save-status"); status.textContent = "Changes saved."; Use ...
Presenting PHP Data with JavaScript Charts
PHP can query and process database data, then pass a small prepared result to JavaScript for presentation. <?php $labels = array_column($rows, "team_name"); $points = array_map("intval", array_column($rows, "points")); ?> <script> const labels = <?= json_encod...
GameMaker LTS 2026
Pseudocode and algorithm reasoning
 Inputs, processes and outputs Icon: OpenMoji, CC BY-SA 4.0 Most algorithms can be understood by identifying what data enters, what happens to it and what result is produced. Input: What data enters the algorithm? Process: What calculations, decis...
Cybersecurity and the CIA triad
 Threats, vulnerabilities and risks Icon: OpenMoji, CC BY-SA 4.0 Cybersecurity protects digital systems, networks and data from harm. The harm may be deliberate, such as stealing records, or accidental, such as deleting a shared file. A power failure, f...
Security strategies and their appropriate uses
 Start with the vulnerability A security strategy is appropriate when it addresses a particular weakness or threat. Naming a powerful-sounding technology is not enough. Useful reasoning chain: vulnerability or threat → possible event → affected CIA propert...
Data-flow diagrams and exchange-system relationships
 What a data-flow diagram shows A data-flow diagram (DFD) represents where data comes from, how a system transforms it, where it is stored and where it goes. It focuses on logical data relationships rather than screen layout, program-control order or network ...
User interfaces, useability and annotated mock-ups
 User interface and user experience A user interface (UI) is the point where a person interacts with a digital solution: screens, controls, labels, messages, sound and other inputs or outputs. User experience (UX) is the broader experience produced while usin...