Earlier this week I did something I've been wanting to do for a long time—I watched all of Webflow's video tutorials. If you login to any Webflow account, you'll see a small camera icon in the bottom left hand corner of the screen. This links to a series of 40 tutorial videos that introduce how to work with Webflow. These videos are regularly lauded as the gold standard for tutorial videos—rightfully so. They are informative, funny, and the production quality is just crazy good.
I took me all day—about 6 hours—to watch all of the videos and really digest the content. By the end of the day, I was fried. Watching the videos mostly confirmed what I already knew about Webflow—this post will share both my raw notes and high level learnings. I hope this post is helpful to other builders who are trying to get up to speed on Webflow!
Before I dive into sharing what I learned, it's important to have some context on my own skill set—this will give you a sense of the lens through which I've experienced Webflow.
When we first started building Outseta 5 years ago, I built the first version of our website on Squarespace. I chose Squarespace very specifically because I knew that it would allow me as a relatively non-technical marketer to build an attractive looking website without bothering our development team. I wanted to be self sufficient, and Squarespace provided that.
However, I later decided to migrate our website to Webflow. As Outseta grew up, we hit some limitations with Squarespace and I knew we needed a website with better performance and fewer limitations. You can read more about that decision here. For the last 18 months or so, I've been managing our own website on Webflow and have learned a good deal about the product through trial and error. Outseta's website aside, I spend most of my days logging into our customers' websites and helping them bring new sites to life with Outseta and Webflow.
The point being, I'm not totally new to this!
Like most start-up founders, I wear many hats—but I will always self-describe as a marketer. I don't write code whatsoever and I have no formal training in design. It's worth mention that I have a pretty strong understanding of user experience design—I can create a mean mock-up and generally have a good sense what a good user experience looks like. As many marketers do, I look at designs heavily through the lens of their ability to drive "conversions" or at least to get the user through a specific task successfully. But when it comes to the fundamentals of creating pixel perfect designs myself, my own skill set it quite weak.
The terms "non-technical" and "no-code" can both be a bit problematic, as ultimately they're relative and not very specific. I self describe as relatively non-technical, so let me further explain what I mean by that.
Webflow has latched on to the phrase "no-code," and it's accurate in the sense that you don't need to know how to write code to build sites in Webflow. I don't write code—I guess that makes me a "no-coder." Without question, tools like Webflow and Outseta have given me the ability to build all sorts of websites and products that I never could have imagined just a few years ago. That's pretty amazing.
But the phrase "no-code" is often misleading—it's too often interpreted as "anyone can do this without any technical skills." No-code is a blessing in the sense that it enables many people to build products in a way that they couldn't before, but it's also a curse in that it often leads non-technical people to try to build stuff without any understanding of fundamental concepts that are really needed to be successful.
In many ways, I am technical—I work with software all day long. I've built websites before. Heck, I'm building a software company! I'm certainly more comfortable than most as a user of technology, but both coding and design are areas where I have no formal training.
I mention this context up front because if you're a designer or a developer you'll likely feel very comfortable in Webflow quite quickly. But it you're a no-coder without those skill sets, there's a significant learning curve. My hope is this post accelerates your own learning as you dive into the Wonderful World of Webflow.
Let's start with my major takeaways having watched all of the tutorial videos!
Let me state this very directly—you don't need to know how to write code to use Webflow. But the flip side of that is if you don't have a background in design, you're going to struggle—you basically need to learn the fundamentals of design to be successful.
Without question, Webflow is a website builder built for designers.
This has definitely been reinforced by our own team's use of Webflow. I've learned quite a bit through trial and error, but Webflow is still overwhelming to me at times. Contrast that with James our design lead—James had never used Webflow before he built our site on the platform, and while he had to familiarize himself with the designer he was comfortable in Webflow very quickly. All of which is to say I think the term "no-code" can often create a false sense of security that leads to many users without a background in design struggling when they first start out.
This is not a knock on Webflow—it's an important point to consider as your evaluate website platforms. There is enormous benefit to Webflow making designers self sufficient, without requiring reliance on a developer. I started my career building websites on Wordpress, and have led countless website projects where I hired both a designer and a developer to build websites. Webflow has completely cut out the need for a developer, which previously was far and away the most expensive aspect of building a website. And even in the context of our team today, it means that James is self reliant when working on our website and doesn't need to pull our developers in to help with site updates. That alone is huge!
Perhaps my biggest takeaway from watching all of the tutorial videos in their totality was how powerful the Webflow designer is—I was left with the impression that you can create almost any design you can dream up in Webflow. While I suspected this before, I simply hadn't been exposed to the full breadth of features and all the different ways the designer can be leveraged. It's pretty amazing the see firsthand.
This sentiment reflects why designers love Webflow so much—it gives them massive amount of control and the freedom to bring their ideas to life. It also struck me that the designer itself is almost being undersold as just a tool for designing websites—I could see it being leveraged to design all kinds of front-end, digital experiences.
It's worth note that I was also left with a strong sense that Webflow provides almost too much control for someone like me. The feature set has so much depth and opens up so many possibilities that I feel like I'll never be able to learn or fully take advantage of half of it.
Without question one of the benefits of watching all the tutorials is I already feel more comfortable in the product. I better understand it's layout, it's terminology, and generally more of what it's capable of. This benefit is hard to quantify, but the tool feeling more familiar is definitely a good thing.
While that's the case, I don't really feel like I'm suddenly more capable in the product. The tutorials helped me understand the feature set at a conceptual level, but the real learning comes from knowing how and when to leverage each feature. As with most things, I think that can only really come with experience. One thing the video tutorials do extremely well is share real world examples of how each feature is used—for example, things like using "sticky" positioning for a nav bar.
I felt like most of what I learned by watching the video tutorials had to do with learning the fundamentals of design than learning Webflow specifically. I'm sure any designer that's reading this is unimpressed with my feedback, as this stuff is rudimentary to them. But that's exactly my point—as a marketer without a design background, these are the things that make learning Webflow somewhat daunting. Just as a developer might scoff at a designer who doesn't understand their code, a designer can scoff at me for not understanding some of these concepts. But I think it's an important point that you're not really going to learn Webflow unless you first learn the fundamentals of design.
Like anything, there's a time and place for any tool. I get asked constantly my no-coders for recommendation on which website builder they should use. My overarching feedback is:
Here are some of the design concepts I struggled a bit to grasp.
I was hoping to come out of watching the tutorials with a better sense of the difference between Sections, Containers, and Divs—and when to use each. I understand that these are ways of organizing content on a page—containers bound your content within a section, and divs often live within containers acting as a further...container?... for your content?
I understand that this is largely a matter of hierarchy and also dictates some rules of how styles are applied, but I didn't leave with a strong understanding of when to leverage each. This was something I was hoping to get out of the tutorials going in—one of the most common issues I'm asked to help troubleshoot on Webflow sites is when a class or custom attribute is applied to the wrong element, section, container, or div. I see this constantly, usually by mistake. I know how to identify and fix those issues, but I still feel a little uncertain in terms of things like when I need to use a container versus a div.
I've long understood that CSS classes allow you to define a common styles in a way that is reusable—applying a class to an element will give it predefined styling so you don't need to style every element individually. This is obviously a huge time saver as well as a key to delivering consistent designs.
That said, as a noob to design knowing how and when to use all the different types of classes is a lot to take in. There's regular classes, combo classes, global classes, and body (all pages) HTML tags that all offer a means of applying defined styles. Beyond understanding which one to use in any given situation, these different classes often override each other which can make it tough to understand what's actually applying styling to any individual element on a page. Webflow provides some visual indicators to help sort this out, but this is another area where it's really easy to get tripped up—or to just spiral out of control with class chaos—if you're not pretty fluent in CSS.
Class chaos is real, just as SaaS chaos is real!
Below you'll find my raw, unedited notes—this is what I jotted down as I watched each of the videos specifically.
The notes that you find below are what I jotted down after watching each of Webflow's video tutorials. They are in sequential order and I've added a bit of commentary after each section. This is very much my stream-of-consciousness as I watched each video.
I knew going in that a basic understanding of HTML and CSS is really needed to use Webflow successfully, so I wasn't surprised that the tutorials started by introducing these concepts. How both are introduced mirrored my own understanding of each. While I know the very little HTML or CSS, all of the good designers I've worked with are fluent in both.
This is helpful context in getting your bearings in the designer.
I had a basic understanding of the box model going in, but this was helpful in learning how styling can be inherited based on the box content is in.
This is all pretty logical—I've always thought of the "body" as the main content on a page, then we're just breaking that down into "sections."
This was really useful for me. I'd always selected elements directly on the canvas rather than using the navigator. I can now see how the navigator is really useful in selecting a very specific element on the page.
Good to know but not sure that this will change my own behavior. I've always just dragged and dropped elements onto the page. Something about making those changes visually appeals to me over relying on the hierarchy and relationships shown in the navigator.
I learned what a combo class is in this section. I understand the relationship between a section and a container, but it's not immediately apparent to me why both are necessary aside from just a level of hierarchy. For example, why not put content directly into a "section" and then add padding on the sides? What's the benefit to using a "container" over this approach?
Back to my previous comments—I understand the difference between sections, containers, and divs from a theoretical perspective, but what's not entirely clear to me is when you would use each in practice. I suspect that will only really come with experience.
Webflow offers a really nice form building tool. Maybe we should make Outseta's sign-up and login forms compatible with Webflow forms?
This video was really clear and informative on how to build nav bars.
I was basically unaware of symbols prior to watching these videos—I'd seen them in Webflow and wondered "what is that?" They are basically just reusable elements with predefined styles.
I was totally unaware of this—I don't think I ever even noticed it within the designer. I'm not sure that practically I'll use this much... classes overriding classes hurts my head.
I know this is basic HTML and CSS stuff, but as someone new this this I'm kinda like "why are tags setting styles when that's what classes are for?" This has nothing to do with Webflow specifically, but was my reaction to learning about the Body (all pages) tag.
Immediately understand why classes are useful and time saving (you don't need to style each individual element) as well as how the role they plan in delivering consistent designs. How and when to use classes, combo classes, duplicate classes, and global classes is certainly easy enough to understand at a theoretical level, but putting it into practice effectively seems daunting.
This is cool—these are the little design details that not only help the user, but also just add such a nice level of polish to a site.
No notes here.
This all makes sense. Knowing how much padding and margin to add really comes down to experience / having a designer's eye.
This is probably the single area of all the video tutorials I struggled with most. Again, this stuff isn't hard to understand at a conceptual level but how / when to use each of these display settings is still mostly a mystery to me.
I get that flexbox is a big deal and that align and justify are useful in centering content, still just unclear on when I have an obvious need for a flexbox.
I understand how this can be leveraged to position content in a grid format. But if grid blocks aren't actual containers, what are they? Just a framework for holding containers (divs)? Again I think this all comes down to hierarchy and the rules of how classes get applied to sections / containers / divs—but that's clearly one of the concepts I'm struggling to make use of practically.
I'd always kind of wondered why when you add an element (like a button) to a page in Webflow it's always positioned all the way at the top left hand border of the page—"static" explains that. "Relative" positioning is kind of a mind-blowing thing to me—I never even considered how to do that from a design perspective—I sort of just imagined one image was cropped / cut off by another rather than thinking about the images being layered on the z-axis. This stuff is cool and immediately useful to me—for some reason I can grasp and apply the positioning stuff more easily than the display settings.
In all the tutorials responsive design is probably the area I was most familiar with going in. Nothing earth shattering here and the concept of breakpoints makes perfect sense to me. One thing I wasn't totally clear on—say you reduce the size of some font for smaller device sizes. Because the text was made smaller specifically, does that mean all smaller screen sizes automatically inherit that change (but larger screen sizes don't)? Is it simply that any changes made to a smaller screen size automatically affect all of the screens sizes that are even smaller than it (and vice versa)? I think so, but I'm not totally sure.
This was introduced a bit differently than I expected—"content is built out automatically leveraging your design" sounds like some sort of magic to me. I guess I think of dynamic content / CMS collections more as just a templated design that gets reused for blog posts, profile pages, etc.
Didn't take any notes here—I work with CMS collections a lot so none of this was new to me.
I've spent a lot of time working with collection pages, but not much with collection lists. This is a useful feature to familiarize myself with more.
So is Jetboost simply offering much more sophisticated filtering and sorting options for collection lists? In addition to favoriting, etc.
I get it conceptually, but I think the tutorials kind of skipped over the notion of binding more than they should have.
This was really helpful. This made the use cases for reference fields and multi-reference fields in particular much more clear to me.
Welp, that was a look inside my brain as I embarked on learning Webflow with some rigor beyond just trial and error. I'm looking forward to learning that much more!
We send two emails per month—that's it. One is a monthly company update, the other provides tips on growing early stage SaaS businesses.