All Blogs
6 tips for front-end developers looking to switch to Webflow
Jan 23, 2023
|
3
min read
Webflow, with its no-code approach to website development, has empowered designers to take their designs to the next level and ship actual websites to clients rather than just design files. With its increasing popularity, even traditional front-end developers have started switching to Webflow.
Recently, while interviewing them, I noticed that developers from these backgrounds approach the process differently. Some common patterns show that it is not a direct, easy switch.
If you are a front-end developer looking to master Webflow, these tips will help you get started and avoid common mistakes.
What you can do with code will always be more than what you can do on a no-code platform. But for most commercial websites, you do not need those advanced capabilities. You can create high-quality websites with all the bells and whistles on Webflow. Sometimes, it is not that obvious, but with more practice and better knowledge of the tool, you can find ways.
The reason is that the fundamentals of HTML and CSS still apply. (More on that in the next point). It’s not a restrictive set of layouts and templates like some other website builders. In most cases, you can create anything you like.
So understand Webflow’s capabilities. Focus on how you can build the layouts you want rather than how limiting it is versus traditional development, and ideas will start flowing. You can check out Webflow University to see the possibilities.
It is a no-code tool, so it must be a piece of cake, right? Wrong.
It is easy if you use a template. Stick to its layouts and change the colours, fonts and content, and you will be fine. But if you wish to create something unique, start from scratch without a template. You’ll realize that you can mess it up pretty quickly if you don’t adhere to the fundamentals.
The box model still applies. Proper class naming is necessary. Modularity, reusability of components, inheritance, correct use of the ‘H’ tags, efficient div structure, small-sized images, etc., are all essential for a great website. The only difference is that you’ll select these options through a GUI rather than writing code.
Webflow allows you to add custom code to enhance the functionality of your website. And since it doesn’t check what you add, you can even define the styling of your body text by writing a small CSS custom code. But why do that? Webflow has easy controls for it.
It may be a trivial example, but I have seen developers write code for anything they can’t find controls for in the UI easily. A force of habit? Yes, but this defeats the purpose of using Webflow and makes your project harder to read for a non-coder.
As a general rule, try to use custom code for scripts that add functionality to your site. In some cases, if Webflow doesn’t support some styling options, you can use code for them. But be sure that what you’re trying to add code for can’t be done in Webflow natively. When in doubt, google!
Now that you are free from worrying about the correctness of your syntax, you can focus your efforts on better understanding the layouts and how efficiently you can structure them so that they are responsive.
Try to enhance your visual sense. Read about negative space and typography fundamentals like line height, character spacing, etc.
Modern-day websites have to be interactive. You cannot have static sites anymore. The best thing about using a no-code platform like Webflow is the time it saves to create animations and interactions. It’s versatile and fun! Master them and see the difference in your projects!
Javascript can add functionality to your sites. Build the base HTML and CSS using Webflow Designer and add scripts via custom code for things like countdown timers, advanced multi-step forms, etc. It is the best of both worlds.
A big part of this process involves unlearning the old ways of doing things. It is befitting because we have entered a new age of website development. With Webflow taking care of HTML, CSS and basic Javascript, you can hone other supporting skills and provide more value to clients. Happy (no) coding!
Hey Nitrous! is our attempt to answer some of the most common questions about Design, Website Development, Branding and Project Management that people in the community ask us. If you have any questions, write to us at hello@nitrousdesign.com.
