Custom HTML/CSS to Webflow

If your website is hand-coded in HTML and CSS, moving to Webflow means rebuilding it visually rather than importing it. Webflow has no “upload my site” button, and tools that auto-convert HTML tend to produce messy class structures that are harder to maintain than a clean rebuild. The upside is that a hand-coded site is usually the simplest kind to migrate: there is no database, no plugin layer, and the structure is already in files you control.

This guide walks through the whole process: auditing what you have, rebuilding the design, moving content into the CMS, carrying over your URLs and SEO, and launching.

Custom HTML/CSS to Webflow at a Glance

• Typical timeline: a few days to two weeks for a small marketing site. Larger sites with a lot of repeating content (a blog, case studies, a directory) take longer, mostly because of the CMS setup.
• Biggest SEO risks: file-extension URLs (/about.html) that change, redirects living in an .htaccess or server config file that nobody carries over, and dropped titles, descriptions and structured data.
• What moves over: your text, images, metadata and URL map. Your CSS does not move over as code. The design is rebuilt in Webflow using classes and variables.
• What changes for the better: non-developers can edit the site, forms are built in, hosting, SSL and backups are included, and responsive behaviour is handled visually.

Why Migrate from Custom HTML/CSS?

Hand-coded sites give you total control, but that control has a running cost. Every content change needs someone comfortable in the code, repeated elements (headers, footers, cards) have to be updated on every page, and anything dynamic, such as a blog or a resources section, needs extra tooling. Teams usually move to Webflow because they want:

• Self-serve editing. Marketing can change copy, publish blog posts and update landing pages without a developer.
• Reusable structure. Components and CMS collections replace copy-pasted markup.
• Less maintenance. Hosting, SSL, backups and security patches are handled for you.
• Faster iteration. New pages and layout tests take hours instead of a developer sprint.

Custom HTML/CSS vs Webflow

What you give up

• Server-side logic. Webflow hosts front-end sites, so any PHP, Node or other backend code (contact scripts, search, user accounts) needs a replacement.
• Arbitrary markup control. Webflow generates the HTML, so you work with its elements and custom attributes instead of hand-writing every tag.

What you keep

• Full visual control over layout, typography, spacing and animation, down to individual breakpoints.
• Custom code where you need it: embeds, site-wide and page-level scripts, and custom attributes.
• Clean, semantic output when the project is built carefully.

Step 1: Audit Your Existing Site

Before you open Webflow, take stock of everything the current site does. A migration goes wrong when something nobody remembered stops working on launch day.

1. List every URL. If you have an XML sitemap, start there. If not, crawl the site with a tool like Screaming Frog, or list the .html files in your project folder, and check the result against Google Search Console’s list of indexed pages.
2. Record page titles, meta descriptions, H1s, canonical tags and structured data for each page. A crawler can export all of this into one spreadsheet.
3. Note every redirect already in place. Redirects are often defined in an .htaccess file, an nginx config or a hosting dashboard. If you don’t carry them over, old links that currently work will start returning 404s.
4. Inventory scripts and integrations: analytics, tag managers, chat widgets, cookie banners, embedded forms and third-party fonts.
5. Find the backend bits: contact form handlers, newsletter sign-ups, search, login areas, anything that talks to a server.
6. Benchmark performance and rankings in Search Console and your analytics, so you can compare after launch.

Step 2: Plan the Structure in Webflow

The key planning decision is what becomes a static page and what becomes a CMS collection.

• Static pages: home, about, pricing, contact and other one-off pages.
• CMS collections: anything with many similar pages, such as blog posts, case studies, team members, testimonials, job listings or product pages. Each collection gets a template page that is designed once.
• Components: repeated sections like the navbar, footer and calls to action become Webflow components, so a change is made once and applies everywhere.

Decide your class naming convention before you start building. A consistent system (for example a documented naming convention such as Client-First) keeps the project easy to hand over, and it is far easier to set up on day one than to retrofit later.

Step 3: Export Your Content and Assets

1. Copy page content into a spreadsheet or document organised by page, keeping headings, links and image references.
2. Gather media assets from your images folder: photos, icons, SVGs, videos and downloadable files. Rename them sensibly and compress oversized images before uploading.
3. Prepare CMS data as CSV. For repeating content, create one row per item with columns that match the fields you plan to create in Webflow (title, slug, date, summary, body, image URL, category). Rich text fields can hold HTML, so body content can usually be pasted in as markup.
4. Collect fonts and brand assets. Upload custom font files to Webflow before building so text renders correctly from the start.

Step 4: Rebuild the Design in Webflow

This is where most of the work happens. A sensible order is:

1. Set up variables first. Move your CSS custom properties (colours, font sizes, spacing, border radius) into Webflow variables. This is the closest equivalent to a design-token file, and it makes later restyling quick.
2. Build the global elements: navbar, footer and any repeating sections, as components.
3. Rebuild each page layout using sections, containers, grids and flexbox. Webflow’s layout tools map closely to modern CSS, so a layout built with Grid or Flexbox translates directly.
4. Handle responsiveness. Webflow is desktop-first, with tablet, mobile landscape and mobile portrait breakpoints that cascade downwards. If your CSS uses min-width media queries, expect to adjust how styles are layered rather than copying them across one-for-one.
5. Recreate interactions. Hover effects, transitions and scroll animations can usually be rebuilt with Webflow interactions instead of custom JavaScript.
6. Check accessibility: heading order, alt text, visible focus states, form labels and colour contrast carry over only if you rebuild them deliberately.

Step 5: Replace Backend Features

• Contact and enquiry forms: use Webflow Forms, then send submissions to your inbox, CRM or a workflow tool such as Zapier or Make.
• Newsletter sign-ups: connect a Webflow form to your email platform.
• Embedded third-party tools: booking widgets, chat and calculators can usually be re-added with an embed element or site-wide custom code.
• Anything needing a server: user accounts, dashboards or custom APIs can’t run on Webflow. Keep that part as a separate app (often on a subdomain) and link to it from the Webflow site.

Step 6: Import Content into the CMS

1. Create each collection and its fields, matching your CSV columns.
2. Import the CSV through the collection’s import option, then spot-check a sample of items for broken formatting.
3. Upload images to the Assets panel and attach them to items, or reference them in your import.
4. Style the collection template page, then add collection lists wherever the content should appear.

Step 7: Preserve Your SEO and Set Up Redirects

This is the step that protects your rankings.

1. Keep URLs identical wherever possible. A page at /pricing can stay at /pricing.
2. Redirect every URL that changes. Hand-coded sites often use extensions or folder indexes, such as /about.html or /about/index.html. Webflow pages have no extension, so these need 301 redirects to /about. Build the full old-to-new list in a spreadsheet and import it as a CSV; see my Webflow 301 redirects guide for the syntax, wildcard rules and import steps.
3. Carry over the redirects you already had in .htaccess or your server config, so existing links keep working.
4. Copy metadata. Set the title tag and meta description for every page from your audit spreadsheet, and carry over canonical tags, Open Graph tags and image alt text.
5. Re-add structured data (JSON-LD) to the pages that had it.
6. Check the sitemap and robots settings. Webflow generates an XML sitemap automatically. Confirm it lists only the pages you want indexed, and that your robots settings aren’t blocking anything important.
7. Keep the staging version out of search results while you build.

Step 8: Test Before You Launch

• Click through every page at desktop, tablet and mobile widths.
• Submit every form and confirm it reaches the right place.
• Check analytics and tag manager fire correctly.
• Test page speed and fix oversized images or heavy third-party scripts.
• Test a sample of your redirects, and run your full old URL list through a crawler once the site is live.

Step 9: Launch

1. Lower your DNS TTL a day before so the switch propagates quickly.
2. Connect your custom domain in your Webflow site’s publishing settings and publish. Webflow provides SSL automatically.
3. Import your redirects and publish again, because redirects only take effect after publishing.
4. Submit the new sitemap in Google Search Console and keep your old hosting active for a few days until everything is confirmed.
5. Monitor Search Console for new 404s and crawl errors for the first few weeks, and keep your redirects in place for at least a year.

Common Problems to Avoid

• Forgetting the .html URLs. If your old site used extensions, every indexed URL needs a redirect.
• Losing hidden redirects from .htaccess or server configuration.
• Rebuilding too literally. Don’t copy-paste a hundred bespoke CSS classes. Use a small, consistent class system and variables.
• Skipping the backend audit. A contact script that quietly stopped working can go unnoticed for weeks.
• Changing too much at once. If you redesign, rewrite and migrate all at once, you can’t tell what caused a ranking change.

Need Help Migrating a Custom-Coded Site to Webflow?

I’m Nikolai, a Webflow Premium Partner who builds and migrates websites for SaaS companies. I handle the audit, redirect map, rebuild and SEO checks so you keep your rankings through the move. Get in touch to talk about your site, or read more about my Webflow migration services. Moving from another platform? See the guides for WordPress, Squarespace and Wix.

Frequently Asked Questions

How long does migrating from custom HTML/CSS to Webflow typically take?

For a small marketing site, a migration can often be done in a few days to a couple of weeks. The main time cost is rebuilding custom interactions and recreating your design system as reusable Webflow classes and variables, not the content itself.

Can I import my HTML and CSS files directly into Webflow?

No. Webflow doesn’t import a hand-coded site as-is. You rebuild the layout visually and import repeating content through the CMS. Automated converters exist, but they usually produce messy class structures that are harder to maintain than a clean rebuild.

Will migrating from custom HTML/CSS hurt my SEO rankings?

Not if it’s done carefully. The main risks are broken URLs and missing redirects, dropped meta titles and descriptions, and slower page speed from an unoptimised rebuild. Matching your old URL structure, redirecting every changed URL with a 301 and re-adding your existing SEO metadata avoids most ranking loss.

What happens to my .html URLs?

Webflow URLs don’t have file extensions, so /about.html becomes /about. Each old URL that changes needs a 301 redirect to the new one, which you can add one at a time or import in bulk as a CSV.

Can I keep my custom JavaScript when moving to Webflow?

Yes. Webflow supports custom code embeds at the page and site level, so most custom scripts from a hand-coded site can be ported over rather than needing a full rebuild. Anything that depends on your own server will need a replacement or a separate app.

What about my contact form and other backend features?

Webflow has built-in forms that can send submissions to email or connect to your CRM and automation tools. Features that need server code, such as user logins or custom APIs, can’t run on Webflow and are usually kept as a separate app.

Do I need a developer to migrate a custom-coded site to Webflow?

It helps, especially for complex interactions or non-standard layouts, but Webflow’s visual builder means straightforward sites can often be rebuilt by a designer without writing code.