Do I need to know code to use Webflow?

No. Webflow's visual designer generates clean HTML, CSS, and JavaScript without you writing any code. However, understanding basic CSS concepts (margin, padding, flexbox, grid) helps enormously because Webflow's styling panel maps directly to CSS properties. You're not writing code, but you're thinking in code. Freelancers who learn CSS basics alongside Webflow build better sites faster. That said, you can add custom code (HTML embed, custom CSS, JavaScript) when needed — Webflow supports it in all paid plans.

Webflow vs WordPress — which should I choose?

Choose Webflow if: you want pixel-perfect design control without code, you're building a marketing site or portfolio, you don't want to manage hosting/plugins/updates, or you're a designer who thinks visually. Choose WordPress if: you need extensive e-commerce (WooCommerce), you want thousands of plugin options, your client needs to edit content frequently with a simple interface, or you need the cheapest possible hosting ($5/month shared hosting). The key difference: Webflow gives you more design control; WordPress gives you more extensibility. For freelancer portfolios and small business sites, Webflow is often the better choice.

Web Design

How to Create a Webflow Site From Scratch (Step-by-Step)

Q: Is Webflow free to use?

Webflow has a free Starter plan that lets you build and publish 1 site on a webflow.io subdomain with up to 1 GB bandwidth, 50 CMS items, and 2 pages. For a custom domain, you need at least the Basic plan at $14/month (billed annually). The free plan is enough to learn the platform and build a prototype, but you'll need to upgrade for any client or business site. Compared to other website builders, Webflow's pricing is mid-range — more than Carrd ($19/year) but less than Squarespace ($16/month) for comparable features, and you get far more design control.

Q: Can I use Webflow for client projects?

Yes, and it's a popular choice for freelance web designers. Webflow's Agency/Freelancer workspace lets you build sites and transfer them to client billing. The workflow: (1) Build the site in your workspace. (2) Transfer the project to the client's own Webflow account. (3) The client pays Webflow directly for hosting. You can also use Webflow's Editor to give clients a simple content editing interface without access to the full Designer. This lets clients update text and images without breaking the design. Many freelancers charge $2,000-10,000+ for Webflow sites and deliver faster than they would with WordPress.

Updated March 27, 2026 · 16 min read

Webflow lets you build professional, responsive websites visually — no code, no WordPress plugins, no hosting headaches. Whether you're building a portfolio, a client site, or a landing page, here's the complete walkthrough from blank canvas to published site.

Before You Start

You'll need:

A free Webflow account (sign up at webflow.com)
A modern browser (Chrome or Edge recommended for the Designer)
Basic understanding of layout concepts (sections, containers, columns)
Your content ready: copy, images, and a rough idea of the page structure

Tip: Sketch your layout on paper first. Even a rough wireframe of header → hero → features → testimonials → CTA → footer saves you from redesigning mid-build.

Step 1: Create Your Project

1Start a New Site

From your Webflow dashboard, click "New Site." Choose "Blank Site" to learn the fundamentals (templates hide how things work). Name your project and open the Designer.

The Designer has 4 key panels: Elements (left — drag in components), Style (right — CSS properties), Navigator (element tree), and Settings (element-specific options).

Step 2: Build Your Layout Structure

2Add Sections and Containers

Every Webflow page is built with Sections (full-width horizontal bands) containing Containers (centered, max-width content areas). Think of sections as rows and containers as the content within them.

Drag a Section from the Elements panel onto the canvas
Inside it, add a Container (this constrains content to ~940px center)
Inside the container, add Div Blocks, Headings, Paragraphs, and Buttons

Build your page top to bottom: Navbar → Hero Section → Features → Testimonials → CTA → Footer. Each is its own Section.

Step 3: Style Your Elements

3Use Classes for Styling

Select any element, then use the Style panel on the right. Webflow uses classes (like CSS classes) to style elements. Name your class descriptively: "hero-heading" not "Heading 3."

Typography: font family, size, weight, line height, color
Spacing: margin (outside) and padding (inside)
Layout: Display (flex, grid, block), alignment, gap
Backgrounds: color, gradient, or image
Borders: width, radius (for rounded corners), shadow

Pro tip: Use Flexbox for most layouts. Set a parent div to Display: Flex, then control direction (row/column), alignment, and gap. This handles 90% of layout needs.

Step 4: Make It Responsive

4Design for All Screen Sizes

Webflow uses a desktop-first approach with breakpoints. Click the device icons at the top of the Designer to switch between: Desktop (base) → Tablet (991px) → Mobile Landscape (767px) → Mobile Portrait (478px).

Styles cascade downward — desktop styles apply to all smaller screens unless overridden
At each breakpoint, adjust font sizes, padding, and layout direction
Common pattern: a 3-column flex row on desktop becomes a single column on mobile (change flex-direction to column)
Test every breakpoint before publishing — resize the canvas to check between breakpoints too

Common mistake: Adding large padding/margin values on desktop that look broken on mobile. Use relative units (vh, %) or adjust at each breakpoint.

Step 5: Add Interactions & Animations

5Bring Your Site to Life

Webflow's Interactions panel lets you add animations without code. Start simple:

Scroll animations: Fade elements in as users scroll down (set initial opacity to 0, animate to 1 on scroll into view)
Hover effects: Button color changes, card lifts (translateY -4px + shadow)
Page load: Staggered hero text appearance (move from bottom + fade in, with delays)

Keep animations subtle. A 200-400ms ease transition is professional. A 2-second bouncing animation is not.

Step 6: Set Up the CMS (Optional)

6Dynamic Content with Collections

If your site has repeating content (blog posts, portfolio items, team members), use CMS Collections:

Create a Collection (e.g., "Blog Posts") with fields: Title, Slug, Body, Thumbnail, Category, Date
Add items to the Collection
Create a Collection List on your page that pulls from this Collection
Design one item — all items inherit the same layout
Create a Collection Template for individual post pages

The CMS is what separates Webflow from basic page builders. It's a real content management system with relationships, filters, and dynamic pages.

Launch Faster

Freelancer Business Kit

Built your site? Now get the business templates to match — contracts, proposals, invoices, and client onboarding documents.

Get the Kit — $19

Step 7: SEO Settings

7Optimize for Search Engines

Before publishing, configure SEO for every page:

Page Settings → SEO: Title tag (under 60 chars), meta description (under 155 chars). Use ToolKit.dev's Meta Tag Generator to craft these.
Open Graph: Set OG title, description, and image for social sharing
Custom Code: Add Google Analytics, Schema markup, or other tracking scripts in Project Settings → Custom Code
Sitemap: Webflow auto-generates a sitemap.xml at yourdomain.com/sitemap.xml
301 Redirects: Set up in Project Settings → Hosting if you're migrating from another platform

Step 8: Publish Your Site

8Go Live

Click the "Publish" button in the top right. On the free plan, you'll publish to yoursite.webflow.io. For a custom domain:

Upgrade to at least the Basic plan ($14/mo)
Go to Project Settings → Hosting → Custom Domains
Add your domain and update DNS records (Webflow provides the exact records)
Enable SSL (automatic and free)
Publish again — your site is now live on your custom domain

Webflow Tips From Experience

Use global classes. Create reusable classes like "section-padding" (80px top/bottom) and "container-narrow" (680px max-width) that you apply everywhere. Consistency + easy global changes.
Name everything. In the Navigator, rename divs to descriptive names: "hero-wrapper," "features-grid," "cta-section." Future you will thank present you.
Use the Style Guide page. Create a hidden page with all your typography, colors, buttons, and components. This is your design system reference.
Optimize images before upload. Webflow charges for bandwidth. Compress images with ToolKit.dev's Image Compressor before uploading.
Back up with exports. Periodically export your site code (paid feature) as a backup. Webflow's version history also helps, but having a local copy is smart.

Frequently Asked Questions

Is Webflow free to use?

The Starter plan is free: 1 site on webflow.io, 1 GB bandwidth, 50 CMS items. For a custom domain, you need the Basic plan at $14/month. The free plan is enough to learn and prototype.

Do I need to know code?

No. Webflow generates clean HTML/CSS visually. Understanding CSS concepts (margin, padding, flexbox) helps because the Style panel maps to CSS properties, but you never write code unless you want to.

Webflow vs WordPress?

Webflow for design control and zero-maintenance hosting. WordPress for plugin extensibility and cheap hosting. Webflow wins for portfolios and marketing sites; WordPress wins for blogs and e-commerce at scale.

Can I use Webflow for client projects?

Yes. Build in your workspace, transfer to client billing. Clients use the Editor (simpler interface) to update content without breaking design. Many freelancers charge $2,000–$10,000+ for Webflow builds.

Build Your Freelance Business

Your Webflow site brings in leads. These templates close them.

$11

One-time purchase • Instant download

10+ proposal templates with pricing frameworks
Scope of work documents
Client onboarding checklists
Follow-up email sequences

Get the Client Proposal Toolkit