How to Start with Webflow Today
Development
Separator
12.15.2020
Separator
BY SENSIMAL

Webflow has taken the world by storm with its advanced capabilities. Anyone with basic web design knowledge can pick up Webflow in a day or two and create their own website. As with any software, it takes hours of practice to become a real expert. However, you can create a decent website in Webflow in a fairly short time, and it won’t break the bank.

WordPress was popular in the early 2010s because of its amazing flexibility and the number of plugins it offered. However, to configure a template and customize it to your liking, you'd have to hire a front-end developer or teach yourself coding.

Other platforms, such as Squarespace and Wix, do exist, but their customization possibilities don't come close to those of Webflow. You need CSS to configure Squarespace templates. And while Wix's new EditorX seems promising, Webflow is simply more advanced and mature.

If you’re looking to start with Webflow, here’s a rough path.

Familiarize yourself with UI and Web Design Principles

Already know how to design mockups and wireframes in Figma, Sketch, or Adobe XD? If so, you can skip this step.

However, if you are not familiar with the basics of creating assets for the web, I highly recommend you learn about applying the box model concept of website design. You can start by learning HTML and CSS right away, but more often than not, you’ll be expected to think like a developer as well as a designer. If you’re contemplating doing Webflow as a full-time or part-time freelancer, make sure you learn at least some design principles, as clients will occasionally want you to work with their in-house designer or design contractor. Some basic design knowledge will give you a leg up because you’ll easily be able to communicate with the designer and insert yourself seamlessly into the collaboration process.

Learn Basic HTML and CSS

If you’re already a front-end developer, feel free to skip this step. However, if you don't have any exposure to basic front-end development principles or feel your skills are rusty, you should seriously consider self-studying before diving into Webflow. I recommend using free resources such as tutorials on platforms like Youtube, Team Treehouse, or Codeacademy. Although you won't necessarily need to write code for any Webflow site, you will need to know how to build a website from scratch. Even if you are just going to tweak Webflow templates, it's a good idea to nail down the front-end development concepts. When you are self-studying, it’s advisable to structure the layout of a website using tools like grid and flexbox. Believe it or not, when working on Webflow sites, knowledge of grid and flexbox will come in very handy. I have been using Webflow for nearly three years, and I still implement certain elements of any website using standard layout principles.

Try Building a Couple Sites with HTML and CSS

Before you create an account on Webflow, try out your newly acquired front-end development knowledge by building simple websites on your own. You can use CodePen or simply go into any code editor and create basic websites. The idea here is not to become an expert front-end developer but rather to test your understanding of the principles you just acquired before you take a stab at Webflow. If you’re already feeling confident about your skill set, you can skip this step and move on to the next.

Learn How to Make a Site Responsive

Most tutorials are geared towards teaching you how to create a site for desktop devices. It's often later in the process that the creator shows you how to make the site responsive on mobile and tablet devices, and you'll usually have to use media queries to do the optimizing. Although you won't have to write code in Webflow most of the time, you should learn the thought process behind site optimization. For example, in mobile and tablet devices, the font sizes are smaller. Paddings and margins also shrink. Regardless of the site you create, you would, at some point, have to make your Webflow site responsive on smaller devices. Thankfully, Webflow has default breakpoints for the most common devices: small iPad (at 768 px), mobile landscape (at 568 px), and mobile portrait (at 320 px). In Webflow, you adjust the font sizes and layout without having to write code, but learning the theory of responsiveness will come in very handy for your personal and professional projects. 

Create a Webflow Account and Start Playing Around

Time to start your first Webflow site. When you sign up to Webflow for the first time, you can create ten websites without having to purchase a site plan.

Tweak Templates

The good thing about Webflow is that there are hundreds of thousands of creators out there who have already contributed to Webflow Showcase. Under Webflow Showcase, you’ll find cloneable websites that you can easily transfer to your account. I recommend you start cloning a basic website with a few pages. Once you see the cloned website in your account, you can go ahead and investigate the classes in the navigator on the left-hand side. This is going to give you some idea of how the creator built the Webflow site. Once you feel comfortable with Navigator, go back to the Dashboard, create a blank site, and rebuilding the previously cloned site (or a few pages) from scratch. It's a good idea not to peek but simply copy-paste the classes you saw in the Navigator. If you’re struggling, you can go into Webflow Forums or simply search on Google to figure out the solution. If you find tweaking templates helpful, you can probably start cloning more sites then rebuilding them on your own. These exercises are going to reinforce your understanding of Webflow and later help you stand on your own two feet.

Create Simple Sites

If you don't want to bother finding cloneable Webflow sites, you can go ahead and create your own personal projects. If you are a UX/UI or a graphic designer and familiar with tools like Figma, Sketch, and Adobe XD, you can create mockups for your personal projects. They don't have to be super fancy or polished, as you’re only going to use them for practice purposes. However, if you feel ambitious, why not create a prototype and build that out in Webflow? A portfolio site to present your best design work is a great idea, for example.

If you don't have the design chops, go into sites like Dribbble and Uplabs to find inspiration. But keep in mind that publishing sites based on someone else's designs are probably not the greatest idea since you can land yourself in hot water. Treat the site like a personal or side project for your learning purposes. Using someone else's designs and publishing the site with a domain will not reflect well on your professional ethics. Another idea is to look into UI kits on sites and perhaps base your website on mockups from those kits.

Follow Webflow Academy and Create a Full Website

Webflow Academy has excellent resources for getting started with Webflow. If you have no ideas of your own or dread going into Webflow Showcase to clone sites, try following a free tutorial from Webflow Academy. I highly recommend that you finish those tutorials, even if they might seem overwhelming at first. Webflow's education team breaks down steps, and if you feel stuck, someone else might have the answer for you in the comments. If you’re still feeling unsure about how to move forward, Webflow Forum is the best avenue. The last resort would be to email Webflow Support directly, but I doubt you'd end up doing that. Another recommendation is to retrace your steps when executing more complex layouts or structures. These tutorials sometimes go into more intermediate concepts such as Webflow CMS (Content Management System), so if you think those are beyond your skill level, you could just watch the video without following the steps on your own. Another excellent exercise is to slightly tweak the site layout. For example, once you finish a good chunk of a tutorial, try  going into a new page and implementing a slightly reworked version of the page the Webflow Educator built in the video. 

Create and Polish Your Own Site

I can't emphasize enough that you need to learn how to stand on your feet before you start walking. Once you’ve learned how to create classes in Webflow, start working on a personal project. This project can be more ambiguous and involve multiple pages. For creatives, it’s a great idea to create your own portfolio site from scratch in Webflow. That's how I started to learn Webflow. I’ve created many portfolios with Webflow since then. And every single time, each one was an improvement on the one before because I practiced more and felt more comfortable experimenting with Webflow.

Keep one thing in mind:  don't fret if the site is not perfect when it comes to design or interactions. As long as you can build a decent Webflow site that you can show to your peers and network, it's okay. The website will never be perfect the first time around.

Improve Webflow Site with More Complexity Later

It's great that you are all set up with your first Webflow site. Now is perhaps a good time to add more complexity. When I say complexity, I mean using the Webflow CMS or Interactions. Webflow CMS is an excellent system for a blog or case studies. For example, it might be that when you first created your Webflow site, your blog posts were not in CMS. You created each blog post like you created a regular page. Webflow CMS makes it very convenient to populate content with the same layout and fields (i.e., title, date, author). It is also excellent because it is a single source, called a Collection of your posts in the same place. If you write blog posts regularly, you can easily create a Collection called Blog Posts and update and edit them through the CMS interface.

If you’ve used WordPress before, it is very similar but more powerful. You can even create a Collection for Team Members, Case Studies, or Features.

Creating a Collection itself is not difficult at all, but linking it to the front-end from Navigator is. I highly recommend that you watch either Webflow Educators or independent Webflow Developers the CMS and link it to a specific section from the Navigator. It may seem overwhelming at first, but once you learn how to do it, it will be a lifesaver on multiple occasions.

Another way to add complexity is through Webflow Interactions. Webflow has overhauled the Interactions interface  in the past year or so to make it easier to implement simple or advanced interactions. If you'd like to implement a specific interaction, chances are there is a tutorial out there. The most critical part of implementing interactions is to set up your classes and structure carefully. That's why it is really important to be very familiar with front-end development and Navigator before even dabbling with Webflow Interactions. It's highly likely that Webflow Interactions won't work properly if it’s not set up correctly.

Stay on Top of Webflow Trends and News

Webflow has exploded in popularity because of its excellent platform, great customer service, and friendly community over the years. It is not surprising, therefore, that many independent Webflow designers and developers consistently write and talk about Webflow on several platforms. The Webflow Team also makes constant updates to its software so that it’s easier for different audiences to use. Every now and then, Webflow will announce new features and publish content guides to demonstrate the feature in context.

Stay Positive About Your Webflow Journey

There will be times when you'll run into challenges. So just remember that the Webflow creator you admire or idolize has run into challenges before. If you are ever struggling with a concept, you can always sleep on it and come back to it later. Webflow community is also welcoming and helpful, and there are many resources to help you with your questions.

Register for the newsletter
Sent every 2 weeks
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
You might be
interested in