Website design training

Lesson 1 • Anatomy of a Web Page

Breaks down HTML structure, the DOM tree, and how CSS and JavaScript layer onto markup. Connects code structure to visual output.

Lesson 2 • Design vs. Development Roles

Clarifies the boundaries between UX design, UI design, and front-end development. Helps students position their skills within a professional team.

Lesson 3 • Setting Up Your Workspace

Configures a professional local development environment with a code editor, browser dev tools, and version control. Enables efficient workflow from day one.

Lesson 4 • How the Web Works

Covers browsers, servers, HTTP requests, and rendering pipelines. Establishes the technical context every design decision operates within.

Lesson 1 • Tables and Data Markup

Teaches proper table structure with thead, tbody, and caption elements. Distinguishes data tables from layout tables to avoid accessibility errors.

Lesson 2 • Essential HTML Elements

Covers headings, paragraphs, lists, links, and images as the building blocks of every page. Establishes correct syntax habits early.

Lesson 3 • Forms and Input Elements

Builds functional HTML forms using labels, inputs, selects, and buttons. Connects form structure to usability and data collection goals.

Lesson 4 • HTML Validation and Accessibility Basics

Validates markup against web standards and introduces ARIA roles and landmark labels. Ensures pages meet baseline accessibility requirements.

Lesson 1 • The Box Model and Spacing

Teaches content, padding, border, and margin as the four layers of every element. Enables precise control over element sizing and spacing.

Lesson 2 • The Cascade, Specificity, and Inheritance

Explains how browsers resolve conflicting styles using cascade order, specificity scores, and inherited values. Prevents common styling bugs.

Lesson 3 • CSS Syntax and Selectors

Covers rule sets, declarations, and selector types from element to attribute selectors. Builds the syntax fluency needed for all subsequent styling work.

Lesson 4 • Typography and Colour

Controls font families, sizes, weights, line height, and colour values. Establishes visual hierarchy and brand consistency across pages.

Lesson 1 • Grid Systems and Alignment

Applies column grids, gutters, and baseline grids to organise page content. Creates visual consistency and professional polish across layouts.

Lesson 2 • Iconography and Imagery

Selects and optimises icons and images to reinforce meaning without adding visual noise. Covers icon systems, image style consistency, and file formats.

Lesson 3 • Visual Hierarchy and Gestalt Principles

Applies proximity, similarity, contrast, and figure-ground to direct user attention. Translates psychological principles into actionable layout decisions.

Lesson 4 • Typography as Visual Hierarchy

Uses type scale, weight, and spacing to establish clear information hierarchy. Connects typographic choices to readability and user comprehension.

Lesson 1 • Responsive Images and Media

Implements srcset, sizes, and the picture element to serve appropriately sized images. Balances visual quality with page performance.

Lesson 2 • Fluid Typography and Spacing

Uses relative units, viewport units, and CSS clamp() to scale text and spacing proportionally. Reduces the number of breakpoints needed.

Lesson 3 • Flexbox Layout System

Covers flex containers, flex items, alignment axes, and wrapping behaviour. Solves common one-dimensional layout challenges efficiently.

Lesson 4 • Media Queries and Breakpoints

Writes conditional CSS rules triggered by viewport width, height, and orientation. Establishes a mobile-first breakpoint strategy.

Lesson 1 • Usability Testing and Iteration

Conducts moderated and unmoderated usability tests to identify friction points. Closes the design loop by translating findings into concrete improvements.

Lesson 2 • Wireframing and Low-Fidelity Prototyping

Creates skeletal page layouts to test structure before visual design begins. Separates layout decisions from aesthetic choices for faster iteration.

Lesson 3 • Information Architecture

Organises content through site maps, card sorting, and navigation patterns. Ensures users can find information quickly and intuitively.

Lesson 4 • UX Research Methods

Introduces user interviews, surveys, and competitive analysis as inputs to design decisions. Grounds design choices in evidence rather than assumption.

Lesson 1 • JavaScript Fundamentals

Covers variables, data types, operators, conditionals, and loops as the language core. Provides the syntax foundation for all interactive scripting.

Lesson 2 • Event Handling

Attaches event listeners for clicks, keyboard input, and form submissions. Enables user-driven interactivity across all page components.

Lesson 3 • Functions and Scope

Defines reusable functions, explains scope chains, and introduces arrow functions. Enables modular, maintainable interactive code.

Lesson 4 • DOM Selection and Manipulation

Selects elements, reads and writes attributes, and modifies content and classes dynamically. Connects JavaScript logic to visible page changes.

Lesson 1 • Deployment and Launch Checklist

Covers domain setup, hosting options, SSL certificates, and a pre-launch quality checklist. Prepares students to confidently ship production websites.

Lesson 2 • Core Web Vitals

Targets Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint metrics. Aligns technical improvements with search ranking factors.

Lesson 3 • Accessibility Compliance

Audits pages against WCAG success criteria for perceivability, operability, and understandability. Ensures the site is usable by people with disabilities.

Lesson 4 • Web Performance Optimisation

Reduces page weight and render-blocking resources to improve load times. Directly impacts user retention and search ranking scores.