The short version
Use Relume for quick layouts, follow Client-First for organization, and switch to REM units for better responsiveness. You'll save yourself a lot of headaches.
1. Use the Relume library
Relume created a massive collection of Webflow components. Instead of starting from scratch, you can copy sections and customize them. This speeds up projects, especially when you're just starting out and might not be familiar with basic web layouts.
The library follows WCAG 2.0 best practices, and once you get familiar with the components, you'll start recognizing them everywhere on the web. Basically, all major websites use at least one of the base layouts provided in Relume's Library.
2. Client-First naming system
Finsweet's Client-First is a naming convention for Webflow that keeps your classes organized. Instead of random class names like div-block-73, you get clear, structured names. This makes updating your site a breeze later on.
It's a must-have for finding work. Companies often list it as a requirement for new hires. There are other naming systems worth exploring, but start with Client-First. It's the industry standard and will give you a solid foundation.
3. Use REM units, not pixels
Webflow defaults to pixels, but REM (relative to the root font size) is better for responsive design. It scales better across devices, and your site doesn't break when users change their font settings.
Think about your grandpa with 200% font size on his phone. Without REMs, your site will look like a mess.
Why this matters
When I discovered Webflow back in 2017, it felt like a breath of fresh air. They had an amazing interface, great YouTube videos, and a whole library of community-built projects you could explore and learn from. A big shoutout to the Webflow Showcase.
Now, with 8 years of Webflow under my belt as my go-to website builder, these three things are what I wish someone had told me when I first started. They would have saved me months of trial and error.