1. Web Design

Webflow for Beginners (Full Webflow Tutorial)

Scroll to top
Read Time: 6 min
Duration: 1 hour 7 mins | Lessons: 10

In this epic free Webflow tutorial, you’ll learn everything you need to know to get started with Webflow. Throughout these lessons, you’ll go from understanding the basics to launching your first website. 

In just over an hour’s time, you’ll learn the fundamentals of this tool, from its interface to working with classes to even creating responsive website designs. This course doesn’t waste any time so you’re looking for your "in" to Webflow, here’s your chance. 

Introduction to Webflow

1. Welcome to this Webflow Tutorial! 

Watch video lesson [0:00] ↗

In this introductory lesson, you’ll learn all about what what Webflow is and a bit about how it generally works. Webflow is a content management system that has an amazing visual designer. And the best part? It’s code-free. So anyone can use it to create a wide-range of website types from blogs to online stores. The rest of the lessons in the course are designed take total beginners on a journey from their first introduction to Webflow through publishing their first website. 

However, the course isn’t all-encompassing and instead focuses on just the essentials to help you get started, as Webflow can be a tad complex. The course is split into three key areas: 

  • An introduction into how websites are built in general, with an explanation of the box model. 
  • The Webflow designer and how to use it.
  • How to publish a website with Webflow with details about pricing.

2. How Websites are Built

Watch video lesson [2:30] ↗

The first order of business here is to learn how websites are built in general. You need this foundational information in order to understand how Webflow works. The focus here is on the "holy trinity" of frontend web development: 

  • HTML
  • CSS
  • JavaScript

3. The Box Model

Watch video lesson [7:56] ↗

Continuing the ideas from Lesson 2, this lesson focuses on the “box model” which discusses how every element on a web page sits in a box and how understanding this concept can help you better conceptualize how web designer works in general -- as well as prep you for using Webflow.

box modelbox modelbox model
Everything is surrounded by a box in CSS.

Webflow’s Designer

4. The User Interface

Watch video lesson [12:48] ↗

Webflow is a CMS, which stands for content management system. So, it is very literally, a system for managing content. And while there are many CMSs out there, Webflow is one of the best because of the Designer. 

The Designer provides a way to visually manipulate the HTML and CSS of a webpage. But before you can jump right into designing your first web masterpiece, you need to get familiar with Webflow’s user interface. The discussion in this lesson revolves around four key sections: 

  • Left toolbar: This area includes things like the main menu, “add” panel, symbols, and pages.
  • Top toolbar: This area includes features like a preview button and responsive options.
  • The Canvas: This area is where your work is displayed. 
  • The Inspector: And lastly, this area allows you to inspect the various properties of any selected object within the Canvas.

5. Adding and Editing Elements

Watch video lesson [20:54] ↗

Building layouts with Webflow is super simple because there are tons of elements you can drag and drop into the Canvas. This the primary focus of this lesson will be adding and editing elements within Webflow.

6. Working with Classes and Inheritance

Watch video lesson [26:25] ↗

In CSS, a class represents an identifier. It’s like a name, and based on that name you can style multiple elements the exact same way. In this lesson, you’ll learn how to create a class, how to style elements based on their tag, and get an overview of inheritance. 

In Webflow, Classes are displayed directly beneath the Selector in the Inspector: 

classes in Webflowclasses in Webflowclasses in Webflow

7. Reusing Elements With Symbols

Watch video lesson [38:42] ↗

In Webflow, symbols allow you to reuse content. If you make a change to a symbol then all the other instances will be automatically updated. And you can even create an override for a specific instance where only that one is affected. 

Here, you’ll get a thorough rundown of the following: 

  • How to create a symbol 
  • How to create overrides 
  • How to unlink a symbol

8. Creating Responsive Websites

Watch video lesson [47:43] ↗

Creating responsive websites nowadays is simply a must because they need to display properly on whatever devices people are using. Thankfully, this is really easy to do in Webflow. The focus of this lesson will be on how to switch between different breakpoints, how to add new breakpoints, and also how the changes you make cascade between different breakpoints. 

Getting Your Website Live

9. Publishing with Webflow

Watch video lesson [1:00:12] ↗

Every website you build with Webflow can be published with Webflow as well. And that’s precisely what this lesson covers: the different ways to publish your website, how to export code and assets to upload to a server manually, as well as what you can expect to pay for Webflow. 

You can get started with Webflow for free and even build your first website without paying a dime. However, you plan on building more than a website or two, a paid plan will be your best bet here. Paid plans start at $19 per month when paid annually.

10. Conclusion

Watch video lesson [1:04:38] ↗

All in all, Webflow is pretty awesome. Even those who are adverse to visual builders will likely find this one to be great because it’s easy to use and actually generates legible, clean code. And since it embeds the principles of using a HTML and CSS within a visual tool, you get a better understanding of how everything goes together code-wise -- even if you’re not manually coding the site yourself. 

Learn More About Webflow and Web Design with These Helpful Tutorials

Below you’ll find a bunch of tutorials to help you with Webflow and web design in general. You’ll also see another free course of ours on Squarespace—one of the other top players in the website builder space.

1.5 Hours

Squarespace Tutorial for Beginners

In this course you’ll learn how to use Squarespace for creating professional looking websites without writing a single line of code. 

    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.