If you’re a front-end developer diving into Webflow for the first time, this Webflow For Pros guide is for you.
TL;DR: Skip to the good stuff.
I started learning Webflow very recently. I’m a UX Designer with a background in front-end development and plenty of experience creating custom PHP, WordPress, and CraftCMS sites. Craft was my jam! However, Webflow seems like the new trendy thing due to its no-code approach and accessibility for designers and other non-developers. We even use it here at Atomic, and it has supercharged our marketing team—enabling them to quickly create and update content that educates our clients about our capabilities.
So, I finally decided to try it — albeit a bit late to the game. Webflow is 12 years old now… so it’s not that new anymore. Like anyone would, I sped through the Webflow 101 and Webflow Experts courses.
Winnowing the Info
Webflow has an extensive library of videos to help you get started, which you can find at Webflow University. The problem is that these courses are very in-depth and take a “square one” approach, primarily geared toward designers and entrepreneurs who have never created a website. There were a few videos worth watching. You can pick out what applies to you by scanning the titles.
While some nuances in these videos are important, they can feel repetitive if you have experience with other visual editors. You might want to skip them — unless you’re looking for a thorough refresher on positioning or flexbox, you should be familiar with most of these concepts by now. Once you start using Webflow, the drag-and-drop interface is intuitive, and it’s easy to locate where to set properties on components. Toolbars are arranged similarly to Figma.
IMHO, Webflow really needs a ‘Webflow for Pros’ course (Webflow Experts isn’t it). But, since they haven’t created one, I decided to write this article. Ain’t no shame in the game — they haven’t created videos for pros because it’s intentional. The platform was designed for a different audience. Webflow’s goal was to create a tool that allows anyone to create a professional-caliber website without needing to code. All that said, this article covers all the essentials you need to know before diving in as an experienced developer.
And, if Webflow wants to take a cue, I wouldn’t mind… just saying! 😉 I’m sure I still have a lot to learn.
The Essentials
There are a few key differences between Webflow and other visual editors to keep in mind before you start creating:
Plan Your Class Strategy
When you apply properties to a component in Webflow, it creates a unique class for that element. To avoid repetitive code and disconnected components that are hard to edit later, develop a clear strategy for creating utility classes before you start building. For example, I created class selectors for spacing, background colors, and border radiuses similar to Tailwind CSS, using variables for color and size (XXS, XS, S, M, L, XL, XXL). This approach allows for easy global updates later.
Editing Classes in Webflow
Webflow doesn’t have a traditional stylesheet for editing classes. To modify a class, select an element using that class and make your changes; these changes will apply to all elements with that class. Be cautious when using combo classes, as editing can become tricky. I often find it helpful to create an empty div, apply the class, and make changes there to ensure accuracy. This will make more sense once you start building.
Managing Unintended Classes
You may unintentionally create extra classes when adding elements without applying existing ones, leading to a cluttered project. To clean up unused selectors, open the Style Selectors panel (shortcut: G) and click the broom icon in the top right corner to see and delete all unused selectors at once. To prevent accidental deletions, create a style sheet page that includes all the classes you want to keep. This approach not only helps you or others remember which classes are available and their purposes, but also allows you to easily copy and reuse styled elements across different pages, much like using a sticker sheet.
Global vs. Specific Element Styling
To style all instances of a particular element, add an instance to your page and use the selectors dropdown. For example, create an “H1” class for specific styling, or remove the class and choose the “All H1 Headings” tag for global styles. This allows you to maintain semantic structure while customizing your design.
Responsive Design and Understanding Style Cascade
Styles in Webflow cascade from the Desktop viewport. Changes made on Desktop will apply to all layouts for Desktop and below. Changes on Tablet will also affect Mobile Landscape and Mobile Portrait. Additional breakpoints above Desktop can be added, but make sure to understand how they interact before proceeding. If that all sounds confusing, check out this intro to responsive design in Webflow.
IMPORTANT NOTE: Please pay attention to which device or viewport is active. It’s super easy to accidentally style the wrong viewport, especially when you have your sidebars open and the viewport is narrow. I made the mistake of laying out and styling an entire section of typography styles while unknowingly set to the Mobile view, only to realize I needed to reset all those styles and start over from Desktop. Always double-check your selected device before making changes to avoid extra work!
Web Icons
Icons are an essential part of web design, and I was surprised to find that Webflow doesn’t include a built-in icon library. However, you can easily import your own icon set via the Assets panel. If you’re already using icons in your design tool, just export whatever image format you prefer and import them directly into Webflow. Additionally, Relume offers several SVG icon libraries, including Material, Feather Icons, and Tabler, that you can easily copy into your project. They even have a tool to “transform your SVG into a friendly format for Webflow development”.
Now Let’s Build A Website!
1. Plan Your Design First
Start by planning your site styles, components, and sections using your preferred design tool. Designing directly in Webflow can be tedious, so have your typography, colors, button styles, icons, and content sections planned out beforehand.
2. Start from Scratch in Webflow
Create a blank project in Webflow and add a new page to build out a style guide. To see what others have built or check out available libraries, check out Made In Webflow.
3. Set Up Project Variables
In the same way you’d create a style library in Figma, Webflow allows you to define variables for color properties, font families, and sizes in the Variables panel. There are three types of variables you can set: Size, Color, and Font Family. How you use these variables in your project is up to you, but it’s essential to have a plan.
I found this video tutorial by Timothy Ricks helpful for understanding how to use variables effectively. While some parts may be more detailed than necessary for your needs, the tutorial provides a solid foundation.
I struggled initially with making responsive fonts work, so I created a separate variable for each heading and paragraph style at every breakpoint I wanted to adjust. For example, I created a “font-size” and “font-size-mobile” variable for each font style in my variables list. When styling the All H1 Headers class, I set the size property to “font-size” for Desktop, then changed it to “font-size-mobile” for the Mobile Landscape breakpoint and below.
4. Build Your Style Guide
Create your style guide with typography and colors. If you prefer not to start from scratch, use Webflow’s quickstart template. When styling elements like headers, text, and color swatches, use the variables you created. Treat your style guide as a living document, updating it with new examples as you add styles and components. Learn more about building a living style guide here.
5. Create Reusable Components
With your basic styles set, set up foundational components like buttons, form fields, lists, cards, and navigation elements. Learn how to create components and nest them effectively. Use utility classes wherever possible to speed up your workflow.
6. Add Interactions And Animations
After creating your components, enhance your site with Webflow’s extensive tutorials on interactions and animations—from simple button transitions to advanced parallax effects and 3D animations.
- Simple Interactions: https://university.webflow.com/course-lesson/site-build-interactions
- Advanced Animation: https://university.webflow.com/courses/interactions-and-animations-course
6. Incorporate Dynamic Content
When you’re ready to set up dynamic content like blog posts and index pages, check out Webflow’s Guide to Dynamic Content and the Fundamentals of Forms in Webflow.
7. Design Systems & Component Libraries
If you’re like me, by this point, you’re itching to start building a design system. I was eager to create a library of reusable page sections to drag and drop onto my pages. After searching high and low for a tutorial or course in Webflow University, I found some bad news: unfortunately, creating layout libraries isn’t a supported feature in Webflow yet — but it looks like they’re working on it. In the meantime, there are a few workarounds until it becomes available.
- Create a Webflow page or separate project with all your layouts and copy-paste as needed.
- Save your layouts as symbols using this hack.
- Use Relume to create and share your Webflow components.
- Join the Library Creator waitlist for access to community-created libraries currently in beta. If you’re interested in contributing content to the Webflow Marketplace, check out this guide to showcase your site or create and sell templates. Contribute to the Webflow Marketplace.
Webflow also has its own Starter Library of Layouts you can build out pages with, and more Libraries can be installed to your project from the Webflow Libraries marketplace.
Wrapping Up
Transitioning to Webflow from a traditional code editor can feel frustrating at first, especially for developers used to writing code directly. A no-code environment might seem like a step back. However, if you’re excited about learning a new tool, the effort is worth it. With the right foundation and workflow, you’ll quickly find yourself in a groove.
How Webflow Stands Out from Other Platforms
When comparing Webflow to other no-code and traditional web development platforms, its advantages are clear:
- Squarespace: Squarespace offers a simple, no-code option but lacks flexibility, locking you into pre-made templates that make every website look the same. Webflow, however, allows you to customize every CSS property through an intuitive dropdown interface, giving you complete control over everything.
- WordPress: While WordPress is powerful and widely used, it often requires a developer to set up or configure a pre-built template or a plugin like Elementor for building components. Even with these tools, a lot of customization is typically needed. There’s also the risk that your chosen template or plugins will become outdated and unsupported. Additionally, pushing updates to a live WordPress site can be risky—one small mistake could take the entire site down.
- Craft CMS: Craft CMS is a different beast altogether. It’s essentially a blank slate out of the box, designed for completely custom CMS solutions. This flexibility can be great for building CMS components for web applications or integrating with other APIs, and clients generally cannot make changes without a developer’s help unless a very flexible component system has been created.
Webflow strikes a balance between these platforms by offering the flexibility of custom development without the need for extensive coding or reliance on developers. It provides a powerful visual interface that allows for complete customization while still being accessible to non-developers, making it ideal for teams looking for both flexibility and ease of use. Non-developers can iterate faster, and make content updates or design tweaks independently.
By setting up a solid foundation and embracing its capabilities, you can quickly add a new capability to your dev toolkit, and deliver dynamic websites that improve adoption, and meet your clients’ or team’s evolving needs.
Now that you’ve got the essentials — and I’ve saved you from a Webflow video marathon—jump in and start building. Who knows? It might just become your new favorite tool!