Why order matters more in Webflow than in simpler builders
Webflow exposes the underlying HTML and CSS model rather than hiding it. Its University course Webflow 101 starts with the box model, HTML and CSS before it opens the Designer interface, and its styling course puts classes before layout. Skipping ahead to animations or CMS before classes usually produces sites where changing one button breaks five others. [1][5]
The box model is the foundation: every element is a box of content, padding, border and margin. Webflow's lesson notes that Webflow elements use border-box sizing by default, so the width you set already includes padding and border, unlike the plain CSS default of content-box. Knowing that one fact explains most early spacing surprises. [2]
The first-week plan with real course lengths
The durations below are the lengths Webflow University lists for each beginner course. Budget extra time to build alongside them; the video length is the floor, not the total. [1][5][6][7][9]
| Day | Topic | Webflow University material | Listed length |
|---|---|---|---|
| 1 | Box model, HTML and CSS basics, the Designer UI | Webflow 101, Getting started section (6 lessons) | About 25 minutes of the 2h 30m course |
| 2 | Classes and combo classes | Lay out and style your site, Style selectors section | Part of a 49-minute course |
| 3 | Flexbox, grid and CSS layout | Lay out and style your site, Layout and display settings section; Intro to flexbox lesson | Part of a 49-minute course |
| 4 | Build a page end to end | Webflow 101, Site build lessons (hero to footer) | About 1h 2m |
| 5 | Responsive breakpoints | Make your site responsive (7 lessons) | 22 minutes |
| 6 | CMS collections, lists and template pages | Design and manage CMS content (8 lessons) | 29 minutes |
| 7 | Publish to the Webflow subdomain and review | Webflow 101: Publishing the site | 6 minutes 19 seconds |
Days 2 and 3: classes, then layout
Every style you set in Webflow's Style panel is saved to a class, and classes are shared: change the background of a Button class and every element using it changes. Combo classes add variations on a base class, such as an outlined button, by overriding only specific styles. Webflow's styling course ends with a short lesson on class naming conventions, which is worth watching before your project has fifty classes. [3][5]
For layout, Webflow's lesson describes flexbox as best for one-dimensional layouts and recommends CSS grid for layouts that need both rows and columns. You enable flex by setting display to Flex in the Style panel's Layout section, then control direction, justify along the main axis and align on the cross axis. [4]
- Name classes for what they are (button, card, section-hero), not how they look (blue-box).
- Build one card with a class, duplicate it, and change the class once to prove the sharing works.
- Use flex for nav bars and rows of buttons; use grid for card walls and image galleries.
Days 5 to 7: responsive, CMS and publishing
The responsive course covers previewing at different widths, a review of Webflow breakpoints, designing across breakpoints and best practices. Do it after you have one finished desktop page so you have something real to adapt. [6]
Webflow describes the CMS as a content database. A collection works like a content type, fields define the structure, and each item is one entry. Collection pages are templates that generate one page per item, so 20 blog posts produce 20 pages from one template, while collection lists pull several items into a grid, feed or index. [7][8]
Publishing comes last. Webflow's staging lesson explains that staging is reachable on a Webflow subdomain and lets you preview changes without affecting the public site, while production is the live custom domain. The Starter plan includes a webflow.io domain, so a beginner can publish and share a real URL without paying. [9][10]
When you will need a Site plan
Webflow's pricing page lists the free Starter site with a webflow.io domain, 2 static pages, limited CMS (50 CMS items across up to 20 collections), 1 GB of bandwidth and 50 form submissions. The same page notes that on a Starter site, sitemap controls, crawler access controls, robots.txt and schema markup need a paid Workspace plan, and it does not list 301 redirects for Starter. Starter is enough to learn; it is not enough for most real launches. [10]
- Trigger 1: you need a third static page. Starter stops at 2.
- Trigger 2: you want your own domain. Basic is the lowest Site plan that lists it.
- Trigger 3: your live site needs a blog or any CMS collection. Basic is described as for sites that don't need a CMS, so the jump is to Premium.
| Site plan | Listed price | Key additions | Fits |
|---|---|---|---|
| Starter | Free | webflow.io domain, 2 static pages, 50 CMS items, 50 form submissions, 1 GB bandwidth | Learning and sharing a draft |
| Basic | $15 a month billed yearly | Custom domain, 300 static pages, 10 GB bandwidth, unlimited form submissions, password protection; no CMS | A brochure site with no blog |
| Premium | $25 a month billed yearly | Everything in Basic plus Webflow CMS (20,000 items, 40 collections), bandwidth from 50 GB, site search, form file upload | Blogs, case studies, listings |
Realistic expectations and who should skip Webflow
Webflow 101 alone is 20 lessons and 2 hours 30 minutes, and the University notes that some interface details in it may be outdated because the product changes quickly. Expect the first week to produce one solid page and a working CMS test, not a finished multi-page site. [1]
Webflow suits people who want to understand web layout and will maintain sites over time, including freelancers building for clients. It is a poor fit for someone who needs a site live by tomorrow with no interest in classes and the box model; a template-first builder will get them there faster. [1][2][3]
Questions before you decide
How long does it take to learn Webflow basics?
Webflow University's Webflow 101 course is 20 lessons and 2 hours 30 minutes. Adding the layout and styling, responsive and CMS courses brings beginner video time to roughly 4 hours 10 minutes before practice time.
Can I publish a Webflow site for free?
Yes. The Starter site plan is free and includes a webflow.io domain, limited to 2 static pages, 50 CMS items, 50 form submissions and 1 GB of bandwidth.
Which Webflow plan do I need for a custom domain?
Basic, listed at $15 a month billed yearly, is the lowest Site plan with a custom domain. It does not include the CMS; Premium at $25 a month billed yearly adds Webflow CMS.
What should a Webflow beginner learn first?
The box model. Webflow 101 teaches it before HTML, CSS and the Designer, and Webflow's lesson notes that Webflow elements use border-box sizing by default.
Sources & verification
Product details and prices can change. Check the linked provider before buying.
- Webflow University: Webflow 101 course Accessed 30 Oct 2026
- Webflow University: Intro to the box model Accessed 30 Oct 2026
- Webflow University: Working with classes Accessed 30 Oct 2026
- Webflow University: Flexbox Accessed 30 Oct 2026
- Webflow University: Lay out and style your site Accessed 30 Oct 2026
- Webflow University: Make your site responsive Accessed 30 Oct 2026
- Webflow University: Design and manage CMS content Accessed 30 Oct 2026
- Webflow University: Intro to the Webflow CMS Accessed 30 Oct 2026
- Webflow University: Publishing to staging and production Accessed 30 Oct 2026
- Webflow pricing Accessed 30 Oct 2026
Sources link directly to providers. Product buttons may use separately labeled affiliate links. Read our disclosure.