🧪 My secret to learn Webflow in 4 weeks · The Bunker #61

One of the questions I've been receiving a lot lately is: How can I learn Webflow as quickly as possible?

This what I’d to to learn Webflow if I had to start again.

Webflow is an incredible tool, but unfortunately, it can be a bit tedious to learn, especially at the beginning. This, I believe, is what frustrates people the most.

Fortunately, there are many resources out there to learn Webflow, but if you don't organize yourself correctly, it can become a bit overwhelming.

Let's say that the learning curve of Webflow is a bit steep.

Well, the first thing I recommend to anyone interested in learning something new is to start a project.

It's important to work with something in mind, not just aimlessly. Choosing a project will map out your path to learning.

Basically, learning Webflow is somewhat on-the-fly, when you find yourself in situations where you need to solve certain things, is when you start learning step by step how Webflow works. You won’t learn the tool overnight, you’ll need situatios that force you to search for X things, and then learn from those.

Having a project will force you to make mistakes and put you in situations where you need to search online for solutions.

For example, let's say we're creating an e-commerce website, and for the design we have, we want to add an info icon so that when you hover over it, a tooltip with extra information appears:

So, the first situation has already arisen. How do you create tooltips in Webflow?

Instead of spending evenings watching videos, courses, and more generic stuff, your next search will be "Webflow tooltips," and as you search, you'll see that:

• You can create them manually with native animations → You'll learn to handle native panel animations, hovers, delays, speed, breakpoints, etc.
• You can import libraries. Importing libraries is not easy at first, so you'll have an excuse to learn how GitHub works and how to import scripts.

In the end, this is just one example, but for the next project when you need to install tooltips, you'll already know how to do it.

Another example, imagine you have a button, and when you click it, you want a modal with a login to appear. Well, that opens the door to learning how to create modals, positioning, cookies maybe, click animations, and so on.

The important thing for learning is to have a clear path. If you sit down and say, "I have a free afternoon today, I'm going to watch Webflow videos," all you'll do is waste your time.

Choose a project that excites you, start it, and as you progress, you'll find that you'll encounter problems that you'll solve over time.

This, on one hand. On the other hand, let's talk about audiovisual resources. It's clear that no matter how many problems you encounter, if you don't consult the right sources, you won't be able to solve anything. One of my secrets for learning Webflow quickly is finding the right sources for every situation.

Webflow University

This program is designed by Webflow, and it's surprisingly good; they explain everything very well.

In my opinion, this program has one issue, which is that it doesn't follow the layer organization structure that Finsweet follows, but that's okay; it's just a detail. Webflow will teach you the basics, and then you can take it from there.

But, again, Webflow University is massive; it has too many chapters. Refer to these chapters when you have something specific to solve.

Start from the beginning

What I would recommend is to watch the "best practices" or generic structure videos, basic learning, etc. It's true that before you can install tooltips or start looking for information about tooltips, you'll have to learn how to use the tool or take your first steps.

So, yes, it's worth starting from the beginning by watching videos on organization, structure, getting to know the interface, and so on. Afterward, you can move on to more advanced things.

Made in Webflow

One of the things that has been most helpful for me in learning quickly is seeing the work of others. Made in Webflow is a page where people can upload their work, and others can see the editable version of the project, meaning you can see how things are done. This is truly important because you can search for literally anything, and there are 100 results for every search. Everyone does things their own way, and you can dive in and see how each person has done the same thing.

This gives you a comprehensive view of the tool, and you'll see how some achieve the same results using native methods, code, and so on.

There's nothing more useful than having a question, finding the answer to that question, and being able to see how it was executed or done.

Webflow Templates

This is closely related to the above. Templates are pre-made products uploaded to the Webflow marketplace. This gives you a clue that if it's content made for sale, it has an acceptance procedure, exams to pass, etc. You know that if there are guidelines to follow, the product uploaded is well made. If it's there, it's perfect or very well done.

Just like Made in Webflow, fortunately, we can see inside the templates, and you can see in detail how the template was created.

Made in Webflow is a public library, and anyone can publish anything. Templates, on the other hand, can't be just anything. So, this helps you know that what you see inside is genuinely good, and it's a good way to do things.

Every time I see a cool, well-made template with interesting layouts, the first thing I do is go in and see how things are done. And that's where the magical moments of "ahhh... I see how it's done, what a genius" come in, and that's when you learn something new.

Inspect Element

In the end, when creating a website in Webflow, there are two things:

1. Knowing how to use the tool.
2. Understanding how to structure a website.

Learning the tool is a matter of time, and engaging in projects will help you navigate the interface repeatedly until you become familiar with it.

On the other hand, you can be well-versed in the interface, but if you don't know that when you use "overflow: hidden," "position: sticky" won't work, then you won't get very far.

One of my best pieces of advice is this: Every time you come across a website you like or find interesting, try to figure out how it's made. Right-click, inspect element, and study its structure. See how other professionals have solved certain situations.

This is very similar to everything we've discussed regarding "Made in Webflow" and templates, but it applies to public websites for which we technically don't have access through Webflow. This is because these websites might even be using custom code.

YouTube

Be careful with YouTube; there's a lot of junk. Try to find quality channels like Finsweet, Relume, Timothy... over time, you'll find that the videos recommended to you are always from the same people.

In summary

1. Start a project.
2. Check out Made in Webflow and templates.

With this, you've already done 90% of the work.

Pro tip: In the end, using Webflow is learning CSS and HTML, but instead of writing, it's a drag-and-drop system. Since it's ultimately about learning CSS and HTML, a very good piece of advice I can give you is to learn the fundamentals and best practices of CSS and HTML.

Even if you use Webflow, in the end, it's the same thing and will save you A LOT of time.

Until next time! 👋🏻

Cheers, Jordi Espinosa.