Designers are turning to Webflow to build responsive sites faster. This guide shows you exactly how to use Webflow’s visual interface, add real code when needed, and publish a polished website. Follow the steps, use the screenshots, and start creating.
1. Log in to Webflow. 2. Click “+ New Site”. 3. Name it “Portfolio” and choose a blank template. 4. Click “Create Site”.
The workspace has three main panels: Designer (canvas), Navigator (hierarchy), and Style (CSS). Use the Navigator to see all elements.
Set base fonts, colors, and margins in the Style Settings panel. This creates consistency.
body {font-family: 'Helvetica Neue', sans-serif; font-size: 18px; line-height: 1.6; color: #333;}
a {color: #0066cc; text-decoration: none;}
a:hover {text-decoration: underline;}
Drag a Section onto the canvas. Inside, add a Container. Place a Nav element with links: Home, About, Projects, Contact.
Insert a new Section. Inside, add a Div Block with a background image. Add a Heading and Paragraph with your tagline.
Drag another Section to the bottom. Inside, create a Grid with three columns: Social, Contact, Copyright.
Open the Style panel, click “Create New Text Style”. Name it “Heading 1”. Set font size 48px, weight 700, color #222.
Click a heading, select “Heading 1” from the style picker. This ensures consistency across the site.
Webflow auto‑generates responsive styles. For custom tweaks, add a Custom Code block in the page settings.
@media (max-width: 768px) {
.hero-heading {font-size: 32px;}
}
Select a button, go to the Interactions panel. Add “Hover” trigger. Animate scale to 1.1 and change background to #ff6600.
Create a timeline that fades in the hero section on page load. Set opacity from 0 to 1 over 0.8s.
For the project cards, use the “While scrolling in view” trigger. Animate from translateY(50px) to 0.
Go to CMS → Add New Collection: “Projects”. Add fields: Title (plain text), Description (rich text), Image (media), URL (plain text).
Drag a Collection List onto a section. Inside, add an Image bound to the Project Image field, a Heading bound to Title, and a Link to the URL.
Set a 3‑column grid. Add consistent padding and hover effects on cards. The CMS handles content updates automatically.
In the Designer, click “Export Code”. Download a ZIP containing clean HTML, CSS, JS.
Click “Publish” > “Publish to webflow.io”. Your site goes live instantly. For a custom domain, add it in Project Settings → Hosting.
In Page Settings, add meta title, description, and Open Graph tags. Use Webflow’s SEO panel to set canonical URLs.
By following these steps, you’ll build a professional, responsive website in Webflow. Practice the workflow, experiment with interactions, and keep your CSS clean. Happy designing!