What I’d do if I started learning Webflow today

Website and software development over the last 5 to 10 years has shifted dramatically. Growth in technology and tooling has gradually lowered the barrier to entry for people who want to build on the web. We now have terms like “no-code”, “low-code”, and “visual development” — all ideas built around, empowering more people to create and solve problems with software.

Among the many new platforms and tools, Webflow has continued to grow in popularity for designers and developers alike. One of the biggest reasons for its success in my opinion, is that it uses less abstraction from the underlying technologies compared to other tools like it. People building on Webflow can directly manipulate the HTML, CSS, and JavaScript makes up their published site. This characteristic brings with it tons of flexibility and customization power, but also creates a larger learning curve for those who are newer to building on the web.

This learning curve can be intimidating, especially for people who are not used to building on the web. If I were to start learning web for today, or if I were to teach someone, here are the steps I might take:

Learn the basic concepts for building on the web

Although Webflow is considered a “no-code” tool, it allows creators to directly manipulate the actual technologies that websites are built on. Because of that, it’s to your advantage to learn some of the basics of how the web works. I don’t think you need to become a master at these things to start building with Webflow, however I know you’ll find more creative freedom in Webflow if you have a basic understanding of these principles.

These topics should give you a solid foundation to jump from:

1. Box model → a foundational concept from which everything on the web is built

Every HTML element on the web has 3 distinct presentation attributes: Padding, Border, and Margin. A quick search will give you tons of articles and videos walking through what each of these are and how they relate to each other.

2. HTML basics → how web pages are constructed

Hypertext Markup Language (HTML), is the foundation for all pages on the web. Every page on the internet is made up of HTML elements like div blocks, h1 headings, p paragraphs, img images, and the occasional button. Here’s a quick lesson similar to the one I learned HTML with from Codecademy that will get you started (I am not affiliated with Codecademy).

3. CSS basics → how to use classes to style your site

Without CSS, websites would be boring! Every HTML element on a page is styled with CSS. Things like text color, border radius, spacing, and pretty much any other visual property you can think of are controlled by CSS. Check out a quick lesson on a course platform or a YouTube video to gain a basic understanding.

4. Basic concept of/use cases for JavaScript

JavaScript is a powerful scripting language that allows you to build functionality and interactivity into your websites. You don’t need to learn how to write JavaScript to use Webflow, but you should at least understand where JavaScript might come into play in a website project.

Complete the Webflow 101 course on Webflow University

Check it out here.

This will integrate your basic understanding for how the web works with how to build in Webflow.

Courses are a great way to quickly consolidate information and accelerate your learning. After you take Webflow 101, don’t hesitate to jump into other courses on building in Webflow. They will only help.

Take one. Take ten. You should never stop learning!

Create something!

The fastest way to learn most things is by doing and it's no different for building on the web with Webflow. Create a very basic website with your new knowledge for anything you'd like. This could be a passion of yours, a personal portfolio, or anything else that is interesting to you — just make sure to have fun!

This exercise will help to cement all concepts that you’ve learned thus far, and will likely spark some creativity in your mind for what else you can begin to make.

Don't be afraid to return to any tutorials or other resources during this exercise. It’s also fun to look at some of your favorite sites on the web and begin to think about how the developers built them. Your goal in this time should be to gain some confidence in the basics of creating a website in Webflow.

Learn a style system / class naming convention

In a similar way that Webflow and other visual development tools package up underlying technologies in a visual interface, class naming conventions (or style systems) allow you to speed up development in Webflow by taking care of some of the repeated, manual work of styling elements on a page.

There is no right or wrong way to name your classes in Webflow, but picking up one of these systems will definitely help you to introduce scalability and consistency to your projects, not to mention make it easier to work with other people in the same project.

There are several popular class naming conventions available as I’m writing this article (mid 2023), including:‍

• Client-First (by Finsweet) → Created by a leading Webflow development agency, this system is my personal favorite and makes building in Webflow quick and organized.
• MAST (by Corey Moen, NoCode Supply Co.) → A newer system to the game, MAST is a “lightweight, developer-first framework of essential classes and strategies to help you build efficiently for any brand and scale”.
• Knockout (by Edgar Allen) → Created by another leading Webflow agency, Knockout helps teams streamline their workflow of taking a design from Figma and executing it in Webflow.
• BEM (generally known) → A concept that comes from the traditional development world. Webflow has an in-depth article on how to use this system.

This is by no means a comprehensive list, and you are most definitely not limited to learning just one of these systems. Try out a few and lean into the one that works best for you and the type of projects you like to build.

Connect with the Webflow community

One of my favorite things about Webflow is getting to meet the amazing people that use it. This community is so generous and supportive. You’ll be able to meet other people who are just getting started like you, as well as seasoned experts who you can learn from.

One of the best places to find other Webflow developers is on Twitter. Just search “webflow” and you’ll be sure to find other people to follow and connect with. Share a little bit of what you are learning and don’t be afraid to ask for help.

As you connect with people, you’ll probably find one of the many groups within the Webflow community where you can get more individualized support and also stay in-the-know about upcoming in-person events. Here are the groups that I am a part of right now:

• FS Community → Finsweet’s free community of designers and developers passionate about Webflow
• Finsweet+ → A paid community from Finsweet for exclusive content, priority support, and more.
• State of Flow → A group of no-code enthusiasts led by Raymmar and Colleen.
• Webflow Global Leaders → A group of Webflow enthusiasts who lead and create events to bring the Webflow community together.
• Relume Library → Community and support around Relume’s component library and the Relume Design League.

Never stop learning

I hope this info helps kickstart your journey with Webflow! As the tech industry is, Webflow is always growing as a platform, and so is the web in general. There are new standards being developed, new protocols to follow, and new mediums to create for.

So never stop learning! This should just be the beginning of a long career of learning and growing in your craft.