Fundamentals Hub

A focused gateway into the core skills that underpin every modern web project: structure, presentation, behaviour and backend basics.

HTML CSS JS UI A11y Dev

MODULE 01

HTML Fundamentals

Semantic structure, document flow, forms, media, accessibility patterns and best practices.

SemanticFormsA11y

MODULE 02

CSS Layout & Styling

Cascade mastery, box model, Flexbox + Grid, responsive strategies, theming and performance hints.

LayoutGridFlex

MODULE 03

JavaScript Essentials

Variables, DOM APIs, events, fetch, async/await and integration patterns for dynamic UX.

DOMEventsAsync

MODULE 04

Bootstrap & Components

Grid system, utility-first workflows, accessible components and customisation with tokens.

UIGridUtilities

MODULE 05

PHP & MySQL (Intro)

Server-side scripting, database connectivity, CRUD patterns, security & deployment basics.

ServerSQLCRUD

MODULE 06

Next Steps & Tooling

Package managers, build pipelines, version control and deployment workflows (coming soon).

ToolingGitDeploy

How to Use This Hub

Start at HTML and move sequentially for a structured curriculum or cherry-pick modules as a refresher. Each lesson page includes interactive examples, accessibility guidance and progressive depth.

Skim the hero for a mental model & scope
Work through sections in order (watch the TOC highlight)
Recreate code blocks & tweak values
Run accessibility + performance audits (Lighthouse/Axe)
Apply concepts in an exercise or minor project

// Learning Loop
Read → Tinker → Validate → Explain

function learn(topic){
  explore(topic)
  build(example)
  test(accessibility)
  teach(peer)
}