Skip to main content
WBF
Quick Start 20-30 minutes

Webflow

Website Builders Intermediate
Want the full picture? Read the complete guide for strengths, pricing, and comparisons.

Create Your Account

Visit https://webflow.com and click Get Started for Free. Enter your email, create a password, and verify your account. Webflow offers a free Starter plan that includes two unhosted projects, perfect for learning the platform. Once inside, you’ll see the dashboard where all your projects live. Take a moment to explore the interface: the left sidebar holds your project list, and the top navigation provides access to University (tutorials), Templates, and Community resources.

Set Up Your First Project

Click New Project in your dashboard. You can start from a blank canvas or choose from hundreds of pre-built templates. For your first project, select a template that matches your goal: portfolio, business site, or landing page. Name your project something descriptive like “My Business Site”. Webflow will clone the template into your workspace. You’ll land in the Designer, the visual interface where all building happens. The left panel shows your page structure, the center canvas displays your design, and the right panel contains styling controls.

Build Your First Page

Click any element on the canvas to select it. The right panel reveals styling options: layout, typography, spacing, and effects. Webflow uses a box model similar to CSS, so every element is a container with margin, padding, and border controls. Add new elements by clicking the Plus icon in the left toolbar: drag text blocks, images, buttons, or entire sections onto your canvas. Edit text by double-clicking. Change colors, fonts, and spacing using the right panel. Webflow’s power comes from its class-based styling: assign a class name to an element, style it once, and reuse that style across your site.

Connect and Publish

Before publishing, add your content and test responsiveness. Click the device icons at the top to preview tablet and mobile layouts. Webflow is fully responsive by default, but you can customize styles per breakpoint. When ready, click Publish in the top-right corner. On the free plan, your site publishes to a webflow.io subdomain. For custom domains, upgrade to a paid site plan, then navigate to Project Settings > Hosting > Custom Domains and follow the DNS setup instructions. Webflow hosts everything on a global CDN with automatic SSL.

Next Steps

You’ve launched your first Webflow site. Next, explore the CMS for dynamic content, interactions for animations, and Webflow University for in-depth tutorials. For the complete guide covering advanced features, integrations, and workflows, visit the full resource at /nocode-tools/webflow.

Stay sharp. New guides and playbooks as they drop.