Stage 2 of 8 · 7 lessons · ~6 weeks

Webflow: Designer, classes and CMS

Learn the Designer and Navigator, the box model and layout, a clean class system, components, CMS collections and how site plans and Workspaces work.

Start: The Designer and Navigator

Lessons· one lesson for each topic, in this order

Do this

Finish the Webflow 101 course before building your own project.
Choose a class naming system and write it down.
Build a four-page site with flexbox and grid, designing the base breakpoint first.
Turn the navbar and footer into components with properties.
Create a CMS collection such as Projects, with a collection list and a template page.
Compare Site plans for a small business and note CMS item limits.

Start with

CourseFree
Webflow University
Webflow · Beginner
Free official video courses; start with Webflow 101, then the CMS and layout lessons

Keep handy

MDN Web Docs
Every Style panel control is a CSS property; look up what flex, grid and units really do

Before moving on: A Webflow marketing site of at least four pages built with a consistent class system, a navbar and footer as components, a CMS collection with a collection list and template page, and working layouts on all breakpoints.

Tauseef's advice

Webflow rewards people who know CSS and punishes people who drag boxes around. Decide your class naming before the first section, build the base breakpoint first, and use components for anything that repeats. A tidy project is what makes handover easy.