5 things to know before you start learning Webflow

An intro to five technical aspects to get you started with user interface design for websites and web apps.

  1. Box model

When I first heard about Webflow, I was at a design event in London having a conversation about prototyping tools with another web designer. I was truly impressed with his enthusiasm when talking about “this” Webflow design tool! So I got curious, I signed up that same day, and immediately envisioned a world of opportunities and a strategic change to my career.

webflow university
webflow university
Webflow University Homepage

I immersed myself in the Designer canvas and consumed all the University tutorials. Still, I couldn’t get the order of things and best practices to apply in the process. So I decided to study the basics of HTML & CSS which helped me to learn Webflow faster.

Looking back now I know you can learn how to structure websites with Webflow without going through the HTML & CSS learning process as I did. That’s why I decided to write down what would have helped me in my early days with Webflow. I hope it helps those who are starting the journey of mastering this amazing tool.

1. Box model

The general rule is: everything stands inside a box. In Webflow they are called Div Blocks. Understanding the box model is key in building responsive and complex layouts. Sizing div blocks correctly allow you to display the elements inside the way you want them to.

webflow box model

Margins, paddings & borders

We use margins to define the space around or outside a box and paddings to adjust spaces inside a box. We can also add borders to boxes if the design requires it. The size of a box will be the sum of border + padding + the size of the elements inside the box.

webflow box model padding
webflow box model padding
Box 2 has a left-padding of 40 px
webflow box model margin
webflow box model margin
Box 2 has a left-margin of 60 px

By inspecting the element above on the browser, we can see the margin, padding and border displayed as below and expressed in pixels.

inspect element on browser
inspect element on browser

Width = 5px (left border) + 40px (left padding) + 450px + 5px (right border)

Height = 5px (top border) + 190px + 5px (bottom border)

2. Display

You can add many boxes inside a box that we’ll call a container. You can also choose how to display the boxes inside the container by using the display property.

In the examples below the black box is our container.

Inline

When you use the inline display settings for the container, the elements inside start on a new line and occupy the full width of the container.

webflow display inline
webflow display inline
Container Display: inline

Flexbox

This is where the magic happens! You have the flexibility to apply different rules, display boxes on a horizontal or vertical axis, align and justify as you please.

webflow display flexbox
webflow display flexbox
Container Display: horizontal, align-stretch, justify-start
webflow display flexbox
webflow display flexbox
Container Display: vertical, align-centre, justify-start
webflow display flexbox
webflow display flexbox
Container Display: horizontal, align-stretch, justify-space between

3. Responsiveness

Responsive design is mandatory! Always test your designs and check if they work properly on different devices. Webflow has seven default breakpoints that allow you to adjust your design elements for each of them.

webflow canvas breakpoints
webflow canvas breakpoints
Webflow Canvas — Breakpoint View

4. Position

There are 5 different positioning properties you can apply to your elements and create any kind of layout.

Static: This is the default position of every element.

Relative: Similar to static, it allows you to edit an element’s position and even make it overlap other elements.

Absolute: It positions a child element relative to its closest relative parent.

Fixed: Similar to absolute positioning, it fixes an element relative to the browser window.

Sticky: The element behaves as relative and becomes fixed when you scroll to a certain point that you will specify.

5. Classes

Every element that you use and style gets a class. Elements that share the same class will be styled equally. It’s important to properly name your classes especially when you work on big projects.

In the example below, I have assigned to the black box the class “Container”.

“Container” is the class assigned to the black box with display:inline

You can also create combo classes if you want to apply small changes to a single element without affecting other elements with the same class. By adding the class “flex” below, I changed the display settings of the black box, maintaining the styling elements inherited by the class “Container”.

A combo class “Flex” to make the black box with display:flex

Knowing these basic concepts will make you feel more confident when using Webflow. Everyone has their own learning pace and this is only a starting point. You will go through a lot of trial and error before you’re ready to launch your first project online.