I built my first website in Webflow: here are my biggest tips + resources
In the past, I had heard about the Webflow learning curve — and it’s no joke. But I also heard about the exhilarating feeling of making it past the curve — and it feels infinitely better than I expected. I feel like I’ve entered a new realm for my creativity and found my new favorite design platform.
I just finished the MVP of a personal website (can you tell I work in Product Design), but I set my mind to learning Webflow in early November of 2021.
In that time, I watched countless tutorials, filled my Notion with tons of notes, and built + nixxed 4 sites before completing a fully responsive website (with animation!) that I am quite proud of. And to this day, I am still learning so much.
This journey into learning Webflow has been such a meaningful experience for me. The no-code movement has so many pros for the design community, so I want to take a moment to share some important bits and pieces I learned during the process!
Leverage your learning style to synthesize the information in the best way possible.
If you don’t already know, truly ask yourself: “What is my learning style?”. Webflow might be a heavy platform to learn and you’ll want to position yourself properly to tackle it best.
Some people learn best through reading + note taking. Some like learning separate pieces of a concept and putting them together — alone. Some prefer a mentor/teacher. And some love learning through the support of community (reddit, Discord, Slack, etc)
I know that my learning personality is “learn by doing”. Therefore, I found it so beneficial to watch tutorials where I could build alongside the video while taking notes. Whenever I felt like I was missing a “why”, I paused to watch smaller tutorials on specific topics.
I owe all of my skills to the countless folks who put their long-form tutorials + process videos on the internet. I’ll link some of my favorites down below:
👉🏼 Webflow for Beginners – A Webflow Tutorial by Sam Harrison on Skillshare
👉🏼 Webflow: 21 Day Portfolio Course by Webflow on YouTube
👉🏼 Intro to WebFlow for Beginners (Complete guide to building a fully responsive lander) by Timothy Ricks on YouTube
Master the development foundations. Seriously.
In the past, I had dived into some Adobe platforms or Figma and tinkered around successfully before learning the ins and outs. But I took one look at Webflow’s interface and understood immediately that this will not work.
Despite my graphic/product design background, I had some basic HTML/CSS knowledge before starting — but not enough to truly understand the nuances of the Webflow builder.
Unless your front-end dev knowledge is deep, I highly suggest saving hours of agony by spending some time upfront to build your foundation.
To build an awesome site, it is absolutely imperative to understand foundations such as positioning/display (block, flex box, grid, inline), units (px, vh, vw, em, rem), responsiveness, breakpoints, the difference between margin and padding, and div blocks.
This really isn’t as intimidating as it looks! Over time, you will know how to utilize these to bring your creativity to life. You’ll be so thankful for the development foundations later (and will feel like a total boss once it becomes second nature)
I support the no-code movement — with a caveat of building properly and thinking a little more like a developer to design in Webflow efficiently and strategically.
Class naming — so important that it deserves it’s own section
As designers, we often times don’t have a habit of naming our layers. I myself generally only name structurally when animating in After Effects, exporting Illustrator to After Effects, using prototyping tools, or working on a project cross-collaboratively.
In Webflow, however, the close equivalent of a layer is “class” and learning how to name + organize those will make or quite literally break your Webflow experience and final output.
Classes and their properties can be (and should be) shared strategically across your website, so a naming method will uplift your own experience and keep the final code neat and tidy. And once you have a div within a div, within 2 more divs…trust me. Class naming will be your savior.
To me, class naming is a development foundation so important that it needs its own section. Here are some resources on class naming:
👉🏼 BEM Class Naming Convention in Webflow by Timothy Ricks
👉🏼 Web design using classes, combo classes, and Rob Lowe global classes by Webflow
Accept that you will make mistakes. Learn from them. And don’t get too attached to your work at first.
One night, I somehow managed to build exactly what I wanted — in the wrong breakpoint. It was a huge accident and I was forced to rebuild it at the base Desktop breakpoint — but in doing so, I reenforced my skills and promised to confirm my breakpoint in Webflow as often as I CMD+S in Illustrator (basically, very often).
I am telling you now, you will make mistakes while using Webflow for the first time. At some point, you might design in the wrong breakpoint, or find that you accidentally messed up a precious layout via shared class styling. Even though you know that you know better, these mistakes will happen in the moment.
View these mistakes as huge learning opportunities. What we do and what we know are not always aligned — but learning from mistakes beautifully bridges that gap and ultimately creates what we know as second nature.
Also, you may have to delete some of the work you create while learning. There were times when I successfully managed to build a layout or a web page, and a voice in my head said “Saloni. This looks good, but you know that the backend is a mess”. So I sadly deleted it but happily rebuilt it –better and faster.
Learn from cloneables — don’t take from them
Cloneables are open source Webflow projects that you can copy and subsequently modify or use in your own projects. You can even copy + paste specific sections/divs from a cloned project into your own!
There are some killer cloneables out there. And the temptation can rise to just take the bits and pieces that you need to save the time and the trouble.
However, I highly suggest squashing the temptation. I do have some personal opinions on this related to pride + morals, but today I will speak to another reason — to me, cloneables are an absolutely gold mine for learning opportunities.
I learned a wealth of my Webflow knowledge — particularly the “cool” animations/interactions, by studying cloneables in depth and utilizing the findings to build out final products with my own flair and style.
Here are some of my favorite cloneables:
👉🏼 RYTHM Cloneable CMS Template by tycreated
👉🏼 Pitch Webflow Rebuild by andreea
👉🏼 iPhone 11 Pro Website by moritzpetersen
👉🏼 AOline bags by DarioStefanutto
👉🏼 SkinLabs — Sticky on Scroll by thepapestielliz
👉🏼 Sticky four-way scrollbar by Sam Pilgrim
QA, QA, QA. And then do it again.
Sometimes your view of a site in Webflow is not the same as a live site. Or a component might not work the way you expect on certain browsers. Or a tweak on one part of a site might affect the styling on another part due to shared classes.
Develop habits around QA-ing as often as you can, in the following areas:
- Responsiveness: Webflow has some incredibly useful and intuitive responsiveness tools. Learn how to use them and double check your design across multiple screen sizes as you go. I personally like to design 1–2 sections of a page at a time in Desktop. Then, I style for all other screen sizes before proceeding forward.
- Within Webflow: Double check the pages/sections on your site across all screen sizes from time to time. You’re much better off catching any accidents early on.
- Outside of Webflow Finally, ask your friends and family to take a look at your published site, ideally across various screen sizes, devices, and browsers. My network helped me identify many areas of opportunity on my site. And if you run across any issues that you truly cannot solution, Webflow Support is quite helpful from my experience!
Summary
- Webflow is fun but can be challenging at times — so leverage your ideal learning style.
- Learn the fundamental dev foundations. Then, you can actually make those cool sites and animations you have in your head.
- NAME YOUR CLASSES PROPERLY. I cannot stress this enough!
- You will make mistakes and that is 10000000% a great thing.
- Use cloneables as learning tools and not as copy/pasted quick fixes.
- QA as often (and as much) as you can!
By building a solid foundation and learning accurately, you will eventually gain the skills and confidence to create a process that works for you.
Good luck, I hope this helps. Message me if you want to connect more about this and feel free to share additional words of wisdom in the comments!
