Advanced Web Design Course

Lesson 1 • Typography Fundamentals

Covers typeface selection, scale, and web font loading. Connects typographic choices to readability and brand identity.

Lesson 2 • How the Web Works

Covers HTTP, DNS, browsers, and the client-server model. Grounds all future design decisions in technical reality.

Lesson 3 • Colour Theory for Web

Teaches colour models, palettes, and psychological impact. Enables designers to create emotionally resonant, accessible colour schemes.

Lesson 4 • Design Principles and Visual Hierarchy

Introduces contrast, alignment, proximity, and repetition. Applies these principles to web layouts for clear communication.

Lesson 1 • Semantic HTML5 Elements

Introduces header, nav, main, article, section, and footer. Demonstrates how semantic tags improve accessibility and search indexing.

Lesson 2 • HTML Accessibility Essentials

Applies ARIA labels, roles, and keyboard navigation patterns. Ensures all HTML output meets baseline accessibility standards.

Lesson 3 • HTML Document Architecture

Explains DOCTYPE, head, body, and metadata tags. Establishes the structural skeleton every web page requires.

Lesson 4 • Media and Embedded Content

Teaches img, video, audio, and iframe elements with proper attributes. Ensures media is performant, accessible, and correctly embedded.

Lesson 1 • CSS Grid Layout System

Introduces two-dimensional grid layouts with tracks, areas, and gaps. Enables complex page structures without nested hacks.

Lesson 2 • Transitions and Animations

Teaches CSS transitions, keyframes, and timing functions. Adds motion that enhances UX without harming performance.

Lesson 3 • CSS Custom Properties and Variables

Covers declaring and consuming CSS variables for theming. Enables scalable, maintainable style systems across large projects.

Lesson 4 • Flexbox Layout System

Teaches flex container and item properties for one-dimensional layouts. Solves common alignment and distribution challenges efficiently.

Lesson 5 • Box Model and Spacing

Explains margin, padding, border, and box-sizing. Enables precise control over element dimensions and spacing.

Lesson 1 • Fluid Typography and Spacing

Teaches clamp(), viewport units, and relative sizing for scalable text. Eliminates rigid breakpoints for type and spacing.

Lesson 2 • Mobile-First Design Philosophy

Establishes why designing for small screens first improves performance and UX. Reframes the design process from constraint to advantage.

Lesson 3 • Responsive Images and Media

Covers srcset, sizes, and picture element for adaptive media delivery. Reduces bandwidth waste on small devices.

Lesson 4 • Testing Across Devices and Browsers

Introduces browser dev tools, emulators, and real-device testing. Ensures designs render correctly across the target device spectrum.

Lesson 1 • Wireframing and Prototyping

Introduces low-fidelity wireframes and interactive prototypes. Validates structure and flow before visual design investment.

Lesson 2 • Information Architecture

Covers site mapping, card sorting, and navigation taxonomy. Ensures users find content intuitively without cognitive overload.

Lesson 3 • User Personas and Journey Mapping

Teaches creating data-driven personas and mapping end-to-end user journeys. Aligns design decisions with real user goals and pain points.

Lesson 4 • Usability Testing and Iteration

Teaches moderated and unmoderated usability testing methods. Closes the design loop by translating findings into actionable improvements.

Lesson 1 • Asynchronous JavaScript and APIs

Introduces fetch, promises, and async/await for external data. Enables live data integration into static web pages.

Lesson 2 • DOM Manipulation

Teaches selecting, modifying, and creating DOM elements. Enables dynamic content updates without page reloads.

Lesson 3 • JavaScript Core Concepts

Covers variables, data types, functions, and control flow. Provides the programming foundation required for all DOM manipulation.

Lesson 4 • Interactive UI Patterns

Builds modals, accordions, tabs, and carousels with vanilla JS. Applies event and DOM skills to real-world UI components.

Lesson 1 • Documentation and Handoff

Covers writing component specs, usage guidelines, and design-to-dev handoff. Bridges the gap between design and engineering teams.

Lesson 2 • Design System Fundamentals

Defines design systems, their components, and business value. Establishes why consistency at scale requires systematic thinking.

Lesson 3 • Building Reusable Components

Teaches creating buttons, cards, inputs, and navigation components. Ensures components are flexible, accessible, and well-documented.

Lesson 4 • CSS Architecture Methodologies

Introduces BEM, ITCSS, and utility-first approaches. Prevents CSS bloat and naming conflicts in large codebases.

Lesson 1 • Image and Media Optimisation

Covers modern formats, compression, and lazy loading strategies. Reduces the largest contributor to page weight.

Lesson 2 • Caching and Delivery Strategies

Covers browser caching, CDN usage, and cache-control headers. Ensures repeat visitors experience near-instant load times.

Lesson 3 • Performance Metrics and Measurement

Introduces LCP, FID, CLS, and TTFB as key performance indicators. Establishes baselines before optimisation work begins.

Lesson 4 • CSS and JavaScript Optimisation

Teaches minification, code splitting, and critical CSS extraction. Eliminates render-blocking resources that delay first paint.