Beginner's Guide to Webflow: Getting Started in 2026
If you have ever wondered how to get started with Webflow for beginners, the honest answer is simpler than the marketing suggests: make a free account, learn four panels in the Designer, build one page, then publish. This guide walks that path in order, using only Webflow’s own documentation, pricing page and release notes as sources.
How This Guide Was Built
This guide is desk research, not a hands-on build. Every fact comes from official Webflow sources: the pricing page, the product updates feed, the MCP developer reference and the Webflow University catalogue. We verified free tier limits, plan pricing, MCP capabilities and its documented limits, and the free course list. We did not build a site ourselves, so treat this as a map rather than a trip report. Last verified: September 2026.
What is Webflow?
Webflow is a visual website builder where you design on a canvas and the platform writes the underlying HTML, CSS and JavaScript for you. It combines a visual Designer, a built-in content management system described on the CMS feature page, and hosting on Webflow’s site plans, so design, content and publishing live in one place rather than across separate tools.
How do I get started with Webflow for beginners?
Getting started with Webflow for beginners follows eight steps: create a free account, pick a starting point, learn the Designer, build a page, add a CMS collection, check breakpoints, publish to a webflow.io subdomain, then connect a custom domain. Each step below names the result you should expect before moving on, based on Webflow University and Webflow’s pricing page.
Step 1: Create a free Webflow account
Sign up at Webflow and you land on the Starter plan, which Webflow’s pricing page lists as free and limited to publishing on a webflow.io subdomain. Expected result: a workspace, one Starter site and access to the Designer, with no card required.
Step 2: Choose your starting point (blank canvas, template, or an AI prompt build)
You can start from a blank canvas, from a pre-built design in the template marketplace, or by describing what you want and letting Webflow AI generate a starting structure. Expected result: a project with a homepage you can edit, whichever route you pick.
Step 3: Learn the Designer (canvas, navigator, style panel, breakpoints)
Four areas matter first: the canvas where you see the page, the navigator showing element hierarchy, the style panel controlling spacing, type and colour, and the breakpoint switcher for screen sizes. The free Getting Started with Webflow course covers this in 23 minutes with no prior experience needed. Expected result: you can select any element and change how it looks.
Step 4: Build your first page (sections, layout, typography, images)
Stack sections vertically, use flex or grid inside them for layout, set typography once at the body level, then let headings inherit, and drag in images from the assets panel. Expected result: a single scrolling page with real content rather than empty dummy blocks.
Step 5: Add a CMS collection
A CMS collection is a structured content type, such as blog posts or team members, that feeds dynamic pages. The Webflow CMS feature page explains how collections connect to dynamic templates, and the CMS and dynamic content course runs 29 minutes at beginner level. Expected result: one collection with a few items and a template page that renders them.
Step 6: Check your responsive breakpoints
Webflow lets you style each breakpoint separately, and since September 2026 you can see every breakpoint side by side while editing. Expected result: your page reads cleanly on desktop, tablet and both mobile widths without horizontal scrolling. Check this before you publish rather than after, because repairing a layout across four breakpoints later costs far more time than reviewing each one as you build.
Step 7: Publish to a webflow.io subdomain
Publishing on Starter gives you a free webflow.io address, per Webflow’s pricing page. Expected result: a live URL you can share, with the Webflow badge on the site. Starter is capped at two static pages, so if your site will grow beyond that, budget for the Basic plan before you sink time into the build.
Step 8: Connect a custom domain (Basic and above)
Custom domains start at the Basic plan, listed at $15/mo billed yearly on Webflow’s pricing page. Expected result: your own domain resolving to the site, with SSL handled by Webflow. If you would rather compare tools before committing, our Framer getting started guide covers the alternative.
What does Webflow cost?
Webflow’s site plans run from a free Starter tier to Premium at $25/mo billed yearly, with custom domains starting at Basic and the CMS arriving only at Premium, according to Webflow’s pricing page. All figures below are per site, in USD, billed yearly.
| Plan | Price | Custom domain | CMS allowance | Bandwidth | Form submissions | Cloud apps |
|---|---|---|---|---|---|---|
| Starter | Free | No (webflow.io only) | 50 items, 20 collections | 1 GB/month | 50 per site | 5 |
| Basic | $15/mo | Yes | None | 10 GB/month | Unlimited | 5 |
| Premium | $25/mo | Yes | 20,000 items, 40 collections | 50 GB up to 2.5 TB/month | Unlimited | 15 |
Above the site plans sits the Team platform plan at $2,500/mo on an annual contract, with Enterprise priced on request. Prices exclude tax. Two consecutive months over your bandwidth limit triggers an automatic upgrade, so watch the usage meter.
Webflow AI and the MCP server in 2026
Webflow’s 2026 releases centre on agents: MCP 2.0 shipped free for all users on 21 July 2026, per Webflow’s announcement, and the September 2026 update round added AI Edit for visually editing generated code components, components inside CMS rich-text fields, side-by-side breakpoints, and Agent Instructions generated from your own site. The MCP server connects tools like Claude Code, ChatGPT, Codex, Cursor, Postman, Slack and Windsurf directly to a project so agents can import designs, create pages and work with the CMS, all within your existing permissions. MCP 2.0 removed the Bridge App for most cases and added branch-based iteration, so agents work in an isolated branch before anything goes live.
It is not unlimited, though. The official overview is refreshingly specific about what the server cannot do:
| Limitation | What it means for you |
|---|---|
| No IX3 Interactions | Agents cannot create or apply interactions; you build those in the Designer |
| Fonts | Only uploaded custom font files are managed; Google and Adobe fonts stay in site settings |
| Localized CMS items | Agents can read and update existing localized items but cannot create new ones |
| Access settings | Site and workspace roles and permissions cannot be changed by an agent |
Two more practical notes: each authorization grants access to one workspace, so switching workspaces means re-authenticating, and a few capabilities such as reading the current selection, page, mode, branch, canvas and breakpoints still require the Designer open with the Bridge App connected. If you want the strategic view, our post on Webflow, AEO and the no-code answer to AI search picks up where this leaves off.
Common mistakes beginners make
- Choosing Basic for a content site and then discovering it has no CMS at all, when the pricing page shows CMS starts at Premium.
- Ignoring breakpoints until launch, then rebuilding every section for mobile.
- Blowing through the 1 GB monthly Starter bandwidth, since two consecutive over-limit months trigger an automatic plan upgrade.
- Expecting MCP to do everything, when the developer docs list real gaps around interactions, fonts, localization and access settings.
- Skipping the free courses, when the Webflow University catalogue covers the basics in under half an hour.
- Assuming AI features are free everywhere: on Starter, copy generation, SEO and AEO audits, and sitemap or crawler controls need a paid Workspace plan.
FAQ
Is Webflow really free to start?
Yes. The Starter plan costs nothing and lets you publish to a webflow.io subdomain with two static pages, 1 GB/month bandwidth, 50 form submissions per site, limited CMS access, Webflow AI, the MCP server and five Cloud apps, according to Webflow’s pricing page. You only pay when you need a custom domain, more pages or the full CMS.
Can I use Webflow without knowing how to code?
Yes. The Designer produces the HTML, CSS and JavaScript as you work visually, and the free Getting Started course needs no prior experience. Code components exist for people who want them, but they are optional rather than required for a normal marketing site or blog.
What is the difference between Webflow’s Basic and Premium plans?
Basic, at $15/mo billed yearly, adds a custom domain, 300 static pages, 10 GB/month bandwidth, unlimited form submissions and password protection, but no CMS. Premium, at $25/mo, adds the CMS with 20,000 items across 40 collections, selectable bandwidth and code components, per Webflow’s pricing page.
Where to go next
Work through the official free courses in this order: Getting Started with Webflow for the Designer, Build and structure your site for layout, CMS and dynamic content for collections, then Get started with Webflow MCP once you want agents involved. Keep Webflow’s help centre open for reference, and browse the template marketplace when you want a head start. For more tool comparisons and workflow guides, see our guides hub, and if you are weighing agent-driven builds, read our breakdown of Webflow MCP 2.0 and AI agents that build sites.
📖 Related Reads
- ToolBrain — tool reviews, LLM comparisons, and AI workflow guides
- Hermes Tutorials — Hermes Agent setup, configuration, and advanced workflows
- NiteAgent — AI agent development, frameworks, and production patterns
Cross-links automatically generated from NoCode Insider.