Building a Landing Page with Webflow, a No-Code Tool
Tags: webdev, nocode, webflow, learning
Published: 2023-03-17 05:51:13

It was a wonderful Wednesday morning when my manager notified me that I had to take on an urgent landing page project. I only had seven days, including the weekend, to complete the landing page using Webflow, a no-code tool that I had heard of but never used before.

Some context about my experience: I had been primarily working as a developer in the JavaScript and React ecosystem. I had some design background and a good knowledge of design tools like the Adobe Suite and Figma, so I thought it would be easy (spoiler: it wasn't).

However, I had some restrictions to consider, including copying an existing template from React to Webflow. Here are my thoughts on the positives and negatives of Webflow:

## Negatives

### Restrictive Design

Webflow may not be suitable for those who prefer to design their own sites from scratch with CSS. You may not always be able to recreate designs pixel-perfectly, and you won't have the same level of fine-grained control you get with CSS and JavaScript. One significant restriction I encountered was with dropdowns. The dropdown element/component is specific to Webflow and may not function well as an accordion in the FAQ section of the site. The text kept breaking out, and there was no way to make it wrap to the next line. I did a lot of research on the forums and discovered that there was no workaround. While I understand that they may have been created for another purpose, they look like accordions, so it's understandable that someone would use them that way. An accordion element would be useful if Webflow doesn't plan on fixing the dropdown element to be more versatile.

### No Multi-Select Tool

It's frustrating that Webflow, a software that looks like a design software, can't multi-select elements on the page like Adobe Suite and Figma can.

### Expensive Plans

Webflow's starting plan is expensive if you want to get it hosted and use their forms on collections as storage. While I don't mind paying for a tool, the starting plan is too steep for me. It's more cost-effective to hire a developer and pay them once with lower monthly hosting costs than to pay for Webflow's monthly plans at the moment.

## Positives

### Templates

Webflow has a vast selection of templates, both free and paid, which are beneficial for both developers and non-coders. These templates can get you from 0 to 100 in just a few clicks.

### Responsiveness and Positioning
Webflow excels in handling the annoying responsiveness and positioning issues that can be a pain to deal with for developers. With Webflow, you don't have to worry about manually adjusting the layout of your website for different screen sizes or devices. The platform offers intuitive and flexible options for responsive design, allowing you to create a website that adapts seamlessly to different screen sizes. The positioning tools are also easy to use and give you a lot of control over the layout of your site. Overall, if you want to create a responsive and well-designed website without having to worry about the technical details, Webflow is a great option.

### Tutorials and Documentation

Webflow University's tutorials are clear and humor-filled, and their documentation is very well done, making it one of the best in the business.

It was a frustrating experience, the deadline didn't help, but I'm glad I tried it and would be opening to using it again.