Webflow is a visual web development platform loved by designers and marketing teams. These Webflow interview questions cover the Designer, box model, classes and responsive design for beginners, then CMS collections, interactions, client handoff, performance and integrations for experienced Webflow developers.
30 questions · Updated
Fundamentals, definitions and simple scenarios. Good for freshers and warm-ups.
Webflow is a hosted visual builder that writes clean HTML, CSS and JavaScript as you design, using real web concepts such as the box model, flexbox, grid and classes.
It gives designers much more precise control than Wix, without the plugins and server maintenance of WordPress.
It includes hosting, a CMS and e-commerce, and suits marketing and design-led sites.
A class is a reusable set of styles applied to elements, like a CSS class.
A combo class adds a second class on top of a base class to create a variation, for example "button" plus "is-secondary", inheriting the base styles and overriding only what changes.
Good naming systems such as Client-First keep large projects consistent and easy to maintain.
Webflow has breakpoints for desktop, tablet, mobile landscape and mobile portrait, plus larger screens.
Styles cascade down from the base breakpoint, so I design desktop first and adjust only what needs to change on smaller screens.
I use flexbox, grid, relative units such as rem, em and percentages, and max-widths, rather than fixed pixel widths.
The Style panel exposes CSS properties visually: layout (block, flex, grid, none), spacing (margin and padding), size (width, height, min and max), position, typography, backgrounds, borders and effects. Styles apply to the selected class at the current breakpoint and state, such as hover, so you are effectively writing CSS without code.
A section is a full-width band of a page that groups related content.
A container centres content and limits its maximum width on large screens.
A div block is a generic box used to group and lay out elements.
Good structure, such as section > container > content, keeps layouts consistent and responsive.
The Navigator shows the page's element structure as a tree, like the DOM.
It lets you select nested elements easily, drag to reorder or move them into other parents, see which elements are hidden at a breakpoint, and keep the structure clean.
Naming classes clearly makes the Navigator much easier to read.
Every site gets a free webflow.io staging domain where you can publish and review changes.
After connecting a custom domain with a site plan, you choose which domains to publish to, so you can test on staging before going live.
Webflow hosts sites on a global CDN with SSL automatically.
Drag in a form block, add fields and a submit button, and set success and error messages.
Submissions are stored in Webflow and sent by email to chosen addresses, with limits depending on the plan.
Spam protection with reCAPTCHA or Cloudflare Turnstile can be enabled, and submissions can be sent to other tools through integrations, Zapier or webhooks.
Site plans (such as Basic, CMS, Business and Ecommerce) are paid per site and unlock hosting on a custom domain, CMS items, form submissions and bandwidth.
Workspace plans are for teams and freelancers and control the number of seats, unhosted sites, collaboration features and code export.
A client's live site usually needs its own site plan.
Google Fonts and Adobe Fonts can be added in site settings, and custom fonts uploaded as files (preferably WOFF2).
Images, videos and documents are uploaded to the Assets panel, where alt text can be set once and reused.
Webflow automatically creates responsive image sizes and can convert images to WebP or AVIF.
Webflow suits marketing websites, landing pages, portfolios and content sites where designers need pixel-level control and marketers need to edit content without developers, launching quickly with managed hosting. Custom code is better for complex web applications, heavy user logic, very large or highly dynamic data, or when full control of the backend is needed.
Applied problems, trade-offs and questions about your own projects.
A CMS collection is a content type, such as blog posts, case studies or team members, with fields like text, rich text, image, reference and option.
A collection template page designs the page for every item.
A collection list displays items anywhere on the site, with filters, sorting and limits.
Reference and multi-reference fields link collections, for example posts to authors.
Webflow Interactions let you trigger animations on events such as page load, scroll into view, hover, click or scroll progress.
Each interaction is a timeline of actions that change properties such as opacity, position, scale or colour.
I keep animations subtle and performant (transform and opacity), test them on mobile, and respect users who prefer reduced motion.
GSAP is now integrated for more advanced work.
Components, formerly symbols, are reusable groups of elements, such as a navigation bar or footer, that update everywhere when edited once.
Component properties let each instance change certain content, such as text, images or visibility, while keeping the same structure.
They keep a site consistent and much faster to update.
I set up the Editor so the client can edit text, images and CMS items without breaking the design, and lock down structural elements.
I record a short walkthrough or write a guide, give them the right workspace roles, and transfer the project and hosting billing to their account.
Clear naming of CMS fields and help text makes their editing much easier.
On a collection template page or inside a collection list, elements can be bound to CMS fields, such as a heading to the Name field and an image to the Thumbnail field. Collection lists can be filtered (for example only featured posts or a certain category), sorted and limited, and conditional visibility shows or hides elements based on field values, such as showing a "New" badge.
With an Ecommerce site plan you create products with variants, prices, inventory and images, design product, category, cart and checkout pages with the same visual tools, and accept payments through Stripe and PayPal.
You configure shipping, taxes and order emails, and manage orders in the dashboard.
It suits design-led stores with modest catalogues.
Client-First, created by Finsweet, is a popular class naming convention for Webflow.
It uses descriptive class names with folders (such as section_hero, hero_content), utility classes for common styles (padding-global, text-size-large, max-width-medium) and rem units, so any developer or client can understand and maintain the project.
Consistency matters more than the specific system.
Code can be added in site settings (head and footer, applied site-wide), in page settings for one page, or with an Embed element for HTML, CSS or JavaScript inside the layout, such as a third-party widget.
CMS fields can be inserted into embeds for dynamic code.
Custom code requires a paid site plan to run on the published site, and should be kept small and documented.
Localization adds locales to a site, with subdirectory URLs such as /hi/, automatic hreflang tags and localised SEO settings.
Content, CMS items and images can be translated manually or with machine translation, and styles or elements can be adjusted per locale.
Visitors can be routed by browser language, and a locale switcher lets them change language.
Variables store reusable design values such as colours, sizes and fonts, like CSS custom properties.
Changing a variable updates every place it is used, which keeps a design system consistent.
Variable collections and modes support themes such as light and dark, making large sites easier to maintain and rebrand.
Use semantic tags (set elements as header, nav, main, section, article or button), keep a logical heading order, add alt text to images, label form fields, ensure sufficient colour contrast, make interactions keyboard-friendly with visible focus styles, and respect reduced motion. Webflow's Audit panel flags many common accessibility issues.
System design, deep internals, leadership and tough follow-ups.
Plans limit the number of CMS items, collection lists per page, items per list, and nested and multi-reference fields.
Workarounds include restructuring content, using Finsweet attributes for filtering, loading more items and nesting, splitting very large datasets, or using the Webflow API with an external database.
For very large catalogues, a different platform may be more suitable.
I compress images and let Webflow serve responsive WebP images, lazy-load media, limit custom fonts and third-party scripts, and keep interactions light.
For SEO I set titles, meta descriptions and Open Graph data, using CMS fields on templates, add alt text, use proper heading order, set up 301 redirects, and add schema markup through custom code.
Webflow generates the sitemap automatically.
Forms can send submissions to tools like HubSpot or a CRM through native integrations, Zapier, Make or webhooks.
Custom code embeds handle analytics, chat widgets and scripts.
The Webflow Data API lets external systems create and update CMS items, for example syncing products or job listings from another database.
Webflow Apps can extend the Designer itself.
The Data API lets external systems create and update CMS items, products and form data.
The Designer API and Webflow Apps extend the Designer itself.
DevLink syncs Webflow components into React code for use in apps, and code export downloads the site's HTML, CSS and JavaScript (without CMS functionality).
Webhooks notify other systems of events such as form submissions.
Use a consistent class naming system and a style guide page, build reusable components with properties, use variables for design tokens, plan CMS collections and reference fields carefully within plan limits, keep interactions light, organise pages into folders, and document how editors should update content. Regular audits remove unused classes and assets.
Audit the existing pages, content types and URLs, design the CMS structure in Webflow, rebuild templates, and import blog posts and other content through CSV import or the Data API, cleaning HTML and moving images. Then set up 301 redirects from every old URL to its new path, recreate SEO settings and forms, test thoroughly, switch DNS and monitor Search Console for errors.
Bind SEO titles, meta descriptions and Open Graph images on collection template pages to CMS fields, so every item gets unique metadata. Add JSON-LD structured data through custom code using CMS fields, keep clean slugs, use the automatic sitemap and 301 redirects, set canonical URLs, avoid thin auto-generated pages, and link related items with reference fields.
Webflow assigns roles and permissions in workspaces and sites, so designers, developers, content editors and reviewers each get appropriate access. Page branching lets designers work on a copy of a page and merge it after review, backups and the version history allow restoring earlier states, and staging lets changes be checked before publishing to the live domain.
See all WordPress & Shopify Developer interview questions, covering WordPress, WooCommerce, Shopify, Shopify Liquid, Wix and more.