Webflow Course

Lesson 1 • Setting Up Your Webflow Account

Walks through account creation, plan selection, and workspace configuration. Establishes the environment students use throughout the entire course.

Lesson 2 • Pages, Folders, and Project Structure

Explains how to create and organise pages, set page settings, and plan site architecture. Proper structure prevents rework when projects scale in later chapters.

Lesson 3 • Understanding the Box Model in Webflow

Teaches margin, padding, border, and sizing as Webflow exposes them visually. Directly underpins every layout and spacing decision made in later chapters.

Lesson 4 • Navigating the Designer Interface

Maps every panel, toolbar, and canvas area in the Designer. Students gain the spatial fluency needed to work efficiently in all later chapters.

Lesson 1 • Building a Type Scale

Teaches creating a harmonious hierarchy of heading and body sizes using Webflow's tag-level styles. A defined type scale accelerates consistent styling across all pages.

Lesson 2 • Webflow's Global Colour System

Introduces the colour picker, swatches panel, and global colour variables. Global colours enable one-click brand updates across the entire site.

Lesson 3 • Styling Text Elements on the Canvas

Applies font and colour knowledge to headings, paragraphs, links, and rich text blocks. Connects abstract settings to real page components students will reuse.

Lesson 1 • Building a Full Page Layout

Applies Flexbox, Grid, and positioning together to construct a complete multi-section page. This capstone section consolidates all layout skills before moving to responsiveness.

Lesson 2 • Flexbox Layouts in Webflow

Covers enabling Flexbox on a Div Block and controlling direction, alignment, wrapping, and gap. Flexbox is the primary tool for one-dimensional component layouts.

Lesson 3 • Div Blocks and Containers

Explains the Div Block as Webflow's primary structural element and the Container as a max-width wrapper. These are the building blocks for every layout technique that follows.

Lesson 4 • Positioning: Relative, Absolute, and Fixed

Explains CSS positioning modes as Webflow exposes them and when to use each. Positioning enables overlapping elements, sticky headers, and floating UI components.

Lesson 1 • Optimising for Mobile Devices

Teaches mobile landscape and portrait adjustments including stacked layouts, larger tap targets, and font scaling. Mobile optimisation is critical for user experience and search ranking.

Lesson 2 • Fluid Typography and Spacing

Introduces viewport-relative units and clamp-based fluid sizing for type and spacing. Fluid values reduce the number of breakpoint overrides needed across a project.

Lesson 3 • Adapting Layouts for Tablet

Covers switching to the tablet breakpoint and adjusting Flexbox direction, grid columns, and spacing. Tablet is often the most complex breakpoint due to intermediate screen widths.

Lesson 4 • Testing and Debugging Responsiveness

Covers using Webflow's canvas resize, browser DevTools, and real-device testing to catch layout issues. Systematic testing prevents regressions when styles are updated.

Lesson 1 • Webflow's Class System Explained

Covers how classes, tags, and the all-elements selector interact in Webflow's style panel. A solid class strategy is the foundation of every maintainable Webflow project.

Lesson 2 • Building Reusable Component Classes

Teaches creating button, card, and badge classes that can be applied across the site. Reusable classes reduce redundant styling and enforce visual consistency.

Lesson 3 • Style Guide Page as a Living Reference

Guides students in building an internal style guide page that documents all classes and components. A style guide page speeds onboarding and prevents class duplication over time.

Lesson 1 • Scroll-Triggered Animations

Teaches fade-in, slide-in, and stagger animations that fire as elements enter the viewport. Scroll animations increase perceived quality and guide user attention down the page.

Lesson 2 • Interactions Panel Overview

Maps the Interactions panel, trigger types, and animation timeline. Understanding the panel structure is prerequisite to building any interaction in Webflow.

Lesson 3 • Page Scroll and Parallax Effects

Explains the page scroll trigger and how to map element properties to scroll position. Parallax and progress-based effects add depth to hero and storytelling sections.

Lesson 4 • Lottie and Custom Code Animations

Covers embedding Lottie JSON animations and triggering them via Webflow Interactions. Lottie extends animation capability beyond CSS transforms for complex illustrations.

Lesson 1 • Designing CMS Collections

Covers creating Collections, defining field types, and planning data architecture. Good Collection design prevents costly restructuring as content grows.

Lesson 2 • Building CMS Template Pages

Covers designing the Collection Template page that auto-generates one page per CMS item. Template pages power blogs, case studies, team profiles, and product detail pages.

Lesson 3 • Adding and Managing CMS Content

Teaches adding items via the CMS Editor, importing CSV data, and using the Editor for client handoff. Content management workflows determine how maintainable a site is post-launch.

Lesson 4 • Nested Collection Lists and Workarounds

Addresses Webflow's nested Collection List limitation and practical workarounds using references and custom code. Advanced CMS patterns unlock complex directory and filtering use cases.

Lesson 1 • Webflow Hosting and Publishing

Covers Webflow's CDN-based hosting, publishing to the staging subdomain, and publishing to a custom domain. Understanding hosting tiers prevents plan mismatches at launch.

Lesson 2 • On-Page SEO in Webflow

Covers setting meta titles, descriptions, Open Graph images, and canonical tags per page. Proper on-page SEO ensures pages are indexed and shared correctly from day one.

Lesson 3 • Site Performance Optimisation

Teaches image compression, lazy loading, font subsetting, and Webflow's built-in minification. Performance directly affects search ranking and user retention.

Lesson 4 • 301 Redirects and Launch Checklist

Covers setting up 301 redirects for migrated URLs and running a pre-launch audit. A structured launch checklist prevents broken links, missing pages, and indexing errors.