loading...

5 things to know before you start learning Webflow

mirelaprifti profile image Mirela Prifti Originally published at Medium on ・4 min read

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

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

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 like 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 allows 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
Box 2 has a left-padding of 40 px

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

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 thedisplay 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
Container Display: inline

Flexbox

This is where 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
Container Display: horizontal, align-stretch, justify-start

webflow display flexbox
Container Display: vertical, align-center, justify-start

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 — 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.

If you enjoyed this article, you may start exploring Webflow using my affiliate link to create your account.

If you want to introduce Webflow to your company workflow or just need to improve your design skills, get in touch and we can sort it out together.

Discussion

pic
Editor guide