Any new platform is intimidating the first time and even NoCode apps can be pretty scary, but taking one step at a time will get you there eventually.
It is not the only tool that exists but Webflow has come with a lot of possibilities few competitors can match. Â It allows anyone with some basic design knowledge to pick up the tool and in a matter of days create their own site. It takes a bit of practice to understand it as it does with any other software, but after some time it will prove your efforts worth.
Why Webflow and not a different platform?
Well this is one of the main questions that come up when choosing the tool you’ll use to work or to make a project with and to understand why it is a good option we can look at their competitors for a moment.
First of all we have Wordpress which became popular around 2010 due to its huge flexibility and the gigantic amount of plugins it offered. The only issue with it was that to cofigure the template and fully customize it to your liking you’d have to either hire a front end developer or teach your self some coding which is not appealing for everyone.
Now I know what you’re going to say. “There are other big platforms that allow you to do things without needing to know any of this” and sure you’re right but the issue with this comes to the customization possibilities and such is the case of platforms like Wix and Squarespace which again don’t take me wrong they are good platforms, just not quite as advanced as Webflow is.
‍
‍
Preparation
‍
There are multiple ways to start using this tool but I’d say it totally depends on your current knowledge about web development and your ability to take on new skills, so if you are anywhere from familiar with web development and design to a seasoned developer/designer you’re probably good to go to the “Setting things up” section and skip the first steps. However if you’re either just starting or not confident enough on your skills you can totally start here.
‍
1- Get familiarized with UI and Web Design Principles
If you already know how to design mockups, wireframes or sketches or you just don’t care about it? well then you can feel free to skip this, but , if you aren’t familiar with this basic principles I’d really encourage you to consider it since they’ll lay the foundations of whichever site you build and it could make a difference between having a great time building something or making it a complete failure having you without knowing what to do.
My recommendation for this would be get familiar with some design applications that can help you plan your site, here are some cool options you can use:
- Figma
- Adobe XD
- Sketch.
Now that is for tools to help you plan, for learning some principles. here are some blogs and courses about it:
- How to design a website
- 20 web design principles to follow
- 10 effective web design principles every designer should know
Well this are only some examples but there are tons of information and courses you can take in order to become an amazing web designer or if that’s not what you’re looking for just to get to know about it.
2- Learn the basics for HTML and CSS
This point I would argue is the most important one, in the end you’d be building a website so knowing the basics of web development is at least a most. My recommendation if you’re not up for spending too much in it would be try with online development platforms like the following:
This are some of the platforms I’ve used throughout the years and I’ve been a software developer for over a decade now, but they really help to get up to date with the latest changes in software in general.
3- Try building a couple of sites with HTML and CSS first
Definitely not  a must but as mentioned in the last point, learning how to work in the web is definitely going to improve the speed on which you learn how to use webflow since you’ll already know the dos and don’ts of web development, plus you may pick up a thing or two on the way.
4- Learn about Responsive Designs
Responsive design is a MUST now a days but this has a simple explanation. Now a days most people consume online content from their phones or tablets making this the main device most sites should be pointing to, hence why the mobile first design strategy has become as strong as it is lately. This being said learning about responsive design will greatly improve your experience with webflow, specially since Webflow already hands the user with some default breakpoints for desktop, tablet and mobile which will prove useful during your development process.
5- Create a Webflow account.
Time to start your first Webflow site. When you sign up to Webflow for the first time, you can create a couple of websites under the webflow.io subdomain which is enough to start working with this platform!
‍
Start learning
Now after you spent a bit of time with the “getting started” steps you can finally start learning about the platform and work on your first couple of sites BUT… I’d recommend one thing before you jump to development on your own. enter the Webflow University and start learning!
There are for sure more places you can get information and knowledge from for this platform but the webflow university is more than definitely a great place to start specially because who better than the platform’s devs to tell you how to get started.
Create!
Now you’re ready to start working on projects and getting used to working on webflow! a couple of recommendations are as follows:
Get templates and tweak them around
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.
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.
Creeate and Polish
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.
Upgrade your site later on
Start using things like the Webflow CMS, Components 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 but in their own individual 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 Blog Posts Collection to update and edit them through the CMS interface.
‍
And last but not least Stay focused and positive about your journey! no matter how many projects you make there’ll always be space for improvement so keep it up and continue working on your sites in order to get them better every time.
‍
