I will show you how to learn and become a professional Webflow developer, in a few steps. With the help of the online design and development platform Webflow, anyone can build responsive websites without having to know how to code.
The next step is to study the fundamentals of HTML, CSS, and JavaScript, in order, to personalize and improve Webflow projects.
Developers can hone their skills and keep current on the newest Webflow trends and approaches by using resources like online tutorials, classes, and community forums. Practising and working on actual projects can also help developers hone their skills and create a portfolio of their work.
The first step is to create a Webflow account. Then manage your project and the learning path. I do it with a to-do app and the one I use is Todoist. It is simple and efficient.
Webflow has great resources to start your journey. Your goal is to become a power user and to achieve it starts with mastering the basics. Here is the Webflow University.
Achieve the four "Featured Courses":
- 21-day design Portfolio course
- Webflow 101
- Landing Page generator
- Figma to Webflow
To go further you might do the other advanced courses. The four previous ones are core to starting your Webflow learning.
Now that you have the basics you need to know how to properly build your HTML structure and CSS. With Finsweet's Client-First system, you will learn it. It is important for technical SEO, fast build and respect standards across the development industry, with the specification for Webflow.
Do not learn everything at once, it will be overwhelming. They have a 7-day learning path to make it easier to digest. No worries if it is hard the first time. You don't have to be perfect. Just keep the docs in an open tab when you build each of your projects. You will improve your builds one project at a time.
Learning needs practice. The best practice is to build. But how to do it?
It is very simple. Find free Figma templates and replicate them in Webflow.
I will not give you resources. Search and find on your own so you will have unique websites to show in your portfolio.
Thirdly you will learn to build even faster with one of the most useful resources in the Webflow universe. These are the component libraries:
- Relume Libraries
- Flowbase
- Webflow Libraries
You have to know how to exploit those tools. Use them when you build a website. One thing to keep in mind and particularly take care of it is the class names of the libraries. Each library is using its naming convention, so stick to one. Look at which will correspond the most to your project then stick to it. Or you will know a hell of having dozens of different class names for the same things and duplicates.
Now you can have a foot in code without coding... Does it make sense?
Finsweet and Refokus created amazing low-code tools for Webflow to expand the possibilities with ease. It is called "attributes". At this step, you surely know what it is about. Nothing hard but very powerful.
With one line of code and adding attributes in your CSS panel to the element in Webflow's designer dashboard you will have superpowers. Like filtering, sorting, cookies and more.
Check it out here:
- Finsweet's attributes
- Refokus attributes
Webflow has limited possibilities with the vanilla slider, unfortunately. So it is crucial to know how to implement the magic tool with Swiper.js. With knowing anything about code I assure you it is super easy to implement in your project.
To have no limitations, and not be stuck by the designs clients give you, you must learn Swiper.js. Plus, now they have a visual editor to generate and copy-paste the code to build amazing sliders.
People think Webflow is a page builder like the bad Wix and co. But it is not. It is a visual development tool and knowing front-end coding will greatly separate you from the mass with greater and more profound skills when it comes to building websites.
HTML, CSS and Javascript are required. More than improving your Webflow capabilities, you will learn future-proof skills that can open a lot of doors and career opportunities. At least making the process a lot easier. Everyone should learn to code.
I never expected to learn it and finally building with that tool brought me to appreciate and understand code.
The great news is that is now a lot more comprehensible for you at this stage, and fast to learn to do it each day.
I think you don't need more than the following courses to learn, it is exercise based so you will enjoy the results. Think in the order to learn: HTML to CSS to vanilla Javascript.
1. Openclassrooms HTML/CSS and/or Odin Project
2. Openclassrooms Javascript and/or Odin Project
Congratulations! You are learning fast, no-code tools can be learned fast, basics of coding too. But we can do more. I present you important tools you have to experiment with and keep under your belt to become truly a Webflow specialist.
Please play with them with at least one fake project.
Follow the order below to experiment.
Multi-language tools:
- Weglot
- Polyflow
Membership:
- Memberstack
Front to back-end and automation in a snap:
- Wized (Better to wait for 2.0 in my opinion)
- Xano
- Make
You have learned a lot! You can be proud of yourself.
If creative development is now your cup of tea and you are addicted to it. You can go on the following courses your eye closed.
- Awwwards, in order pick those ones: Creative Website, Scripted animation with Javascript.
- Timothyricks
- Flux Academy's Webflow course
I hope you will keep this page in your favorites and that will help you become an awesome Webflow expert.
Below you will find some other interesting articles that might interest you and our products.
I wish you the best in your adventure!
