(This is a sponsored video I worked on between us at CSS-Tricks and Webflow. I think Webflow is a fascinating product for building websites that is, in my opinion, in a category all to itself at the moment. It takes a little bit to wrap your mind around, so I hope that’s what this video can help you do.)
Already know how to build websites with code? That’s awesome. It doesn’t mean Webflow is beneath your ability. Webflow is all the same abstractions as HTML and CSS, but exposes those interfaces on a visual canvas.
The CSS developer in you probably is yearning to make everything into classes. A class is CSS’s ultimate tool for reusability. Good news, everything you style in Webflow is literally through a selector that is a class. Not even “like” a class. It’s a real class under the hood. Webflow doesn’t fake the web, it is the web.
Working with flexbox and grid on a visual canvas without having to think about the syntax is very satisfying. Rather than remembering the property names and values, you are clicking buttons to deal with spacing and alignment, or using tools directly on the canvas itself.
Concerned about responsive design? Webflow has this covered entirely. As you resize and change breakpoints, the canvas itself changes sizes, and the styles you set flow downward from large to small.
When you’re done with designing the site in Webflow, you don’t then hand it off to someone else to build elsewhere. You’re already done, you’ve built the site. You can hit the publish button and have it live at a URL in seconds. You can then map any other domain to it and you’ve got your hosting and deployment situation settled. No SFTP. no security problems. No software updates you have to handle yourself.
Webflow has a built-in CMS that is as powerful as any other. You configure exactly the kind of content model you need (obviously no coding required) and you’ve got it. Like a form builder, in a sense. Then those fields become usable in your templates just as easily as static content is.
Perhaps the best part is that then creating and editing that data becomes possible through a minimal interface right on the site itself. Every field that is in the CMS (and that you’ve allowed) can be edited directly on front-end of the live site. There is also a bar along the bottom for creating and editing content through an admin interface. It’s the best of both worlds, on-page editing and form-style editing.
It’s possible the first time you heard of Webflow was through looking at sites it had built with incredible interaction design. Fun fact, all of Webflow’s own marketing pages are build with Webflow. Check out the designer page for a taste.
Scroll-based animations like parallax, animations on events like clicks and hovers, all made possible through an interaction panel where you attach them to changes in things like opacity, movements, and rotations. There are classy presets to help you along, as well as next-level stuff like integrating mind-bending Lottie animations.
Learning Webflow isn’t some good luck I hope you find some blog posts or YouTube videos thing. Webflow University is entirely free and absolutely packed with everything you could ever want to know about building websites with Webflow. This could be your bootcamp.