This content originally appeared on Envato Tuts+ Tutorials and was authored by Brenda Barron
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.
Who is This Course For?
- Anyone who’s interested in learning new skills
- Beginner web designers
- People curious about website builders in general
- Hands-on business owners
Watch the Full Webflow Course
Introduction to Webflow
1. Welcome to this Webflow Tutorial!
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
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
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.
Webflow’s Designer
4. The User Interface
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
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
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:
7. Reusing Elements With Symbols
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
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.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Brenda Barron
Brenda Barron | Sciencx (2022-09-26T19:24:37+00:00) Webflow for Beginners (Full Webflow Tutorial). Retrieved from https://www.scien.cx/2022/09/26/webflow-for-beginners-full-webflow-tutorial/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.