Webflow for beginners: how to build your first website

Step 1

Sign up and prepare a simple layout

Create an account at webflow.com and start on the free Starter plan. As of November 2026 it includes publishing to an address like mysite.webflow.io, up to 2 static pages, a limited CMS, 1 GB of bandwidth and up to 50 form submissions; the site shows a "Made in Webflow" badge. A custom domain and removing the badge are only on paid plans. For a first learning page that's enough. Before opening the editor, prepare one simple layout: a first screen with a heading and a button, a block with three benefits, a block with work or a testimonial, and a footer.

• •the layout can be in Figma, Penpot or even on paper; what matters is knowing what goes where;
• •use your real text, not "Lorem ipsum": the length of the text shapes the whole build;
• •start with one page: a personal card site or a landing page for an imaginary café is a good first brief.

💡 Don't start from a template: it already has dozens of classes and nested blocks, and untangling someone else's structure is harder than building your own from scratch.

Step 2

Understand the box model and half of Webflow becomes obvious

Webflow doesn't draw a picture; it builds a real web page from HTML and CSS. So the core idea here is the box model: every element on the page is a rectangle with four layers. Inside is the content (text or an image), around it padding, then the border, and outside the margin (the space to neighboring elements). In Webflow, elements use box-sizing: border-box by default: the width you set already includes padding and border.

• •the space inside a button between the text and its edge is padding;
• •the distance between two cards is margin or, in flex and grid containers, gap;
• •if a block spills over the edge, first check its width and padding in the Style panel.

💡 Webflow University has a free lesson, Intro to the box model. Watch it before you start building: it will save you hours of trial and error.

Step 3

Build the structure in the Navigator

Open the Navigator panel: it's the tree of every element on the page, in other words its HTML structure. Add elements from the Add panel and stack them in a logical hierarchy: a full-width Section, a Container inside it that limits the content width, and Div Blocks inside that with text, images and buttons. For headings use Heading elements with the right level: one H1 per page, then H2 for sections.

• •each block of your layout from step 1 is a separate Section;
• •put elements that sit in one row into a shared parent block and turn on flex or grid for it;
• •drag elements in the Navigator itself: there you can see what they end up inside.

Step 4

Style with classes and set up breakpoints

In Webflow, styles are set in the Style panel and attached to classes. Create a class such as "card", give it padding, a background and a radius, and every element with that class looks the same. For exceptions there's the combo class: "card is-featured" takes everything from "card" and changes only what's needed. When the desktop version is ready, switch to the tablet and phone breakpoints: styles cascade downward, so a change on desktop applies to all smaller screens, while a change on the phone doesn't touch larger ones.

• •name classes by purpose: "hero-title", "button-primary", not "Div Block 14";
• •set up 2–3 heading sizes and one body text size, not a new size for every block;
• •on the phone, switch the flex direction from row to column and reduce the spacing; often nothing more is needed.

💡 The Webflow University course "Lay out & style your site" explains classes, combo classes and global classes, plus flexbox and grid. Take it alongside your own page.

Step 5

Publish the page and ask for feedback

Click Publish and publish the site to the free webflow.io address. Open the link on your phone, not only in preview mode: that's where you see whether the text is too small, the buttons are easy to tap and nothing runs off the screen. Then send the link to people who will give honest feedback.

• •check text contrast: for normal text, WCAG requires a ratio of at least 4.5:1;
• •add alt text to images in the image settings;
• •write down what was hardest and take that question to the community: a specific question gets a specific answer.

💡 A published page is already a portfolio item: describe the problem you were solving, what came out and what you would do differently.