What designers should learn before using Webflow

Published in

UX Collective

3 min readApr 30, 2020

illustration of a guy holding a webflow puzzle piece — via Flowcraft.com

So you want to build your sweet new portfolio you’ve been working on for weeks. Your friend told you about this website that you can use to build websites without any code. Is it actually as good as it sounds? Can anyone build websites on Webflow without knowing a single line of code?

Webflow is without a doubt one of the most ground-breaking or even disruptive products in the recent past. It simply revolutionized the web development business. It's not Wordpress, and it’s not Wix. You can build actual fully-fledged websites without writing a single line of code.

I’ve been hearing about Webflow for a few years now. I know a lot of designers use it for their portfolio. The websites aren’t basic or watered down. In fact, they looked great. They’re responsive and anything but watered-down.

Do I really have to not know a single line of code?

No, you don’t.

I know what you might be thinking. You were expecting me to say something like “well it's yes and no”. It's actually not that complicated. You really don’t have to know any code and you certainly never have to write any.

But you do need to know how CSS works. The “cascading” part of it and the theory behind HTML and CSS.

What do I need to know about HTML and CSS?

“Cascading style sheets”

“Cascading” means that the styles will fall (cascade) from one style sheet to another. This enables multiple style sheets to be used on one HTML document.

Don’t worry if that sounds too technical. Let’s look at what this means in Webflow’s context.

Screenshot of the Webflow controls showing different device sizes

In Webflow’s UI, you can switch between devices using the bar above. The way “cascading” works is, the styles you apply to the leftmost device size will apply or cascade to all the device sized on the right.

For example, if you make any style changes (CSS changes) to the main desktop view the changes will affect all the devices on the right. Likewise, if you make a change on the tablet view (second tab) changes will apply to the devices on the right of it but not the desktop.

The Box model

The “box model” in CSS describes the layout of your design. By definition, it's a box that wraps around every HTML element. It consists of margins, borders, padding, and content.

That is what defines the amount of space between elements and the alignments of them.

How sections and containers work

If you know a bit about front-end development, you’d know how elements on your HTML page is laid out.

Basically you need to know what sections, containers, and divs, etc are.

As a best practice, we usually have a section laid out first. Followed by a container inside it and then we add our divs inside that. You need to know what these words mean and how they are used in laying down your HTML.

Next steps

These are the very basics you need to know in order to build a site with Webflow. If you want to build more sophisticated websites with stuff like animations and 3D models, its better to learn more about that.

You don’t need the coding knowledge, but you need to know the “what” and “why” behind the things you do. Because we are guaranteed to run into problems in your design and you need to have that knowledge to solve those problems.

I have listed the stuff that I used to learn everything I needed for Webflow below. Good luck with your journey.

Some important resources

I started out with Webflow when I decided to build my portfolio with it. To be honest I knew a bit about HTML and CSS. It wasn’t much, I just knew the basics covered.

Here are some resources I used to learn HTML and CSS.