Curriculum
Module 1Getting Started with WebflowRead moreShow less
- What is Webflow? ○ Topics: Overview, no-code philosophy, comparison to other platforms (e.g., WordPress, Squarespace)
- Webflow Pricing & Plans (Optional) ○ Topics: Site vs. Workspace plans, hosting costs, free tier limitations
- Interface Tour: Webflow Designer Introduction ○ Topics: Navigator, Style panel, Assets panel, basic element hierarchy
- Setting Up Your First Project ○ Topics: Creating a project, uploading fonts, setting a favicon, basic site settings
- Class Project 01: Create Your Webflow Brief ● Task: Draft a website brief (purpose, audience, pages)
Module 2Building the Website StructureRead moreShow less
- Pages, Sections, and Containers ○ Topics: Page setup, sections vs. containers, nesting elements
- Layouts & Positioning Basics ○ Topics: Box model, display settings (block, inline), position (relative, absolute, sticky)
- Flexbox and Grid ○ Topics: Flexbox layouts, Grid layouts, Flex vs. Grid use cases
- Components and Symbols ○ Topics: Creating reusable components (symbols), variants
- Class Project 02: Build a Club Page Layout ● Task: Create a single-page layout with a header, section, and footer using Flexbox or Grid
Module 3Styling EssentialsRead moreShow less
- Typography ○ Topics: Font settings, line height, letter spacing, text shadows
- Colors and Backgrounds ○ Topics: Global swatches, gradients (linear, conic), background images/videos
- CSS Classes and Style Manager ○ Topics: Classes, combo classes, global classes, cleaning up unused styles
- Units and Responsiveness ○ Topics: Px, Rem, Em, VH/VW, breakpoints, responsive design principles
- Class Project 03: Style a Responsive Grid Section ● Task: Design a grid-based section with styled typography and colors, optimized for mobile
Frequently Asked Questions
Course Brochure
Get the Course Brochure in your Inbox.


