Website Design and Publishing Course

Lesson 1 • Planning a Website Project

Guides students through defining goals, audience, and site scope before writing a line of code. Produces a project brief used in subsequent chapters.

Lesson 2 • Colour and Typography for the Web

Teaches colour theory, accessible contrast ratios, and web-safe font selection. Equips students to make aesthetic choices that also meet readability standards.

Lesson 3 • Core Visual Design Principles

Introduces contrast, alignment, proximity, repetition, and hierarchy. Applies these principles directly to web layout decisions throughout the course.

Lesson 4 • How the Web Works

Covers browsers, servers, DNS, and HTTP request-response cycles. Establishes the technical context needed to make informed design and publishing decisions.

Lesson 1 • Tables and Structured Data

Covers semantic table markup for presenting data, not layout. Students learn when tables are appropriate and how to make them accessible.

Lesson 2 • HTML Document Structure

Covers the DOCTYPE declaration, head, and body elements that form every valid HTML file. Connects proper structure to browser rendering and accessibility.

Lesson 3 • Forms and User Input

Builds functional HTML forms with inputs, labels, and validation attributes. Forms are the primary mechanism for user interaction on most sites.

Lesson 4 • Links, Images, and Media

Explains anchor tags, image embedding, and media elements. Proper use of alt text and file formats is emphasised for accessibility and performance.

Lesson 1 • Flexbox Layout

Teaches one-dimensional layout using Flexbox for rows and columns. Students build navigation bars, card grids, and centred content blocks.

Lesson 2 • CSS Variables and Reusability

Covers custom properties for storing reusable values like colours and spacing. Consistent use of variables speeds up redesigns and reduces errors.

Lesson 3 • CSS Grid Layout

Introduces two-dimensional layout with CSS Grid for complex page structures. Grid complements Flexbox and handles full-page templates effectively.

Lesson 4 • CSS Syntax and Selectors

Introduces rules, declarations, and the selector types used to target elements. Selector specificity determines which styles win when rules conflict.

Lesson 5 • Transitions and Basic Animations

Adds motion to interactive elements using CSS transitions and keyframe animations. Purposeful animation improves feedback without harming performance.

Lesson 1 • Fluid Typography and Spacing

Replaces fixed pixel values with relative units for scalable text and spacing. Fluid sizing reduces the number of breakpoints needed in a project.

Lesson 2 • Responsive Navigation Patterns

Builds common navigation patterns including hamburger menus and off-canvas drawers. Navigation is the most critical UI component to adapt across breakpoints.

Lesson 3 • Responsive Images and Media

Covers srcset, sizes, and the picture element for serving appropriate images. Correct implementation reduces bandwidth and improves load times on mobile.

Lesson 4 • Mobile-First Design Philosophy

Establishes why designing for small screens first produces better results. Connects mobile-first thinking to performance, accessibility, and user behaviour data.

Lesson 1 • DOM Manipulation

Teaches selecting, modifying, and creating HTML elements via the Document Object Model. DOM manipulation is the core mechanism for dynamic page updates.

Lesson 2 • Working with APIs and JSON

Introduces fetch, promises, and JSON parsing to pull external data into a page. Students display live data from a public API in a project component.

Lesson 3 • JavaScript Syntax Fundamentals

Covers variables, data types, operators, and control flow. These building blocks are required before manipulating the DOM or handling events.

Lesson 4 • Event Handling

Explains how to listen for and respond to user actions like clicks and keystrokes. Event-driven programming is the foundation of all interactive web UI.

Lesson 1 • Usability Testing Methods

Covers task-based testing, think-aloud protocols, and heuristic evaluation. Usability findings feed directly into design revisions in the next chapter.

Lesson 2 • Keyboard and Focus Management

Ensures all interactive elements are reachable and operable via keyboard alone. Focus management is critical for modal dialogs, menus, and single-page apps.

Lesson 3 • Colour, Contrast, and Visual Accessibility

Applies contrast ratio requirements and avoids colour-only information encoding. Visual accessibility overlaps with good design and benefits all users.

Lesson 4 • Accessibility Principles and Standards

Introduces the four WCAG principles: perceivable, operable, understandable, and robust. Understanding the framework guides every technical accessibility decision.

Lesson 1 • Measuring Web Performance

Introduces Core Web Vitals and browser DevTools for profiling pages. Measurement must precede optimisation to avoid wasted effort.

Lesson 2 • Performance Budgets and Monitoring

Sets measurable performance budgets and integrates checks into a publishing workflow. Ongoing monitoring prevents regressions after initial optimisation.

Lesson 3 • CSS and JavaScript Optimisation

Reduces render-blocking resources through minification, deferring, and code splitting. Lean CSS and JS directly improve First Contentful Paint scores.

Lesson 4 • Optimising Images and Media

Covers compression, modern formats, and delivery strategies for images and video. Images are typically the largest contributor to page weight.

Lesson 1 • Deploying with CI/CD Pipelines

Automates build, test, and deploy steps triggered by Git pushes. CI/CD eliminates manual upload errors and enforces quality gates before going live.

Lesson 2 • SSL, HTTPS, and Security Basics

Covers SSL certificate installation, HTTPS enforcement, and common security headers. HTTPS is required for trust, SEO ranking, and browser feature access.

Lesson 3 • Domain Names and DNS Configuration

Explains domain registration, DNS record types, and propagation. Correct DNS setup is the prerequisite for connecting a domain to any hosting provider.

Lesson 4 • Hosting Options and Selection

Compares shared hosting, VPS, managed platforms, and static site hosts. Choosing the right host affects cost, performance, and maintenance burden.