5 things to know before you start learning Webflow
Tags: learnwebdesign, webflowdesign, webflow, webdesign
Published: 2020-10-03 18:58:53

---
title: 5 things to know before you start learning Webflow
published: true
date: 2020-08-30 22:59:06 UTC
tags: learnwebdesign,webflowdesign,webflow,webdesign
canonical_url: https://medium.com/@mirelaprifti/5-things-to-know-before-you-start-learning-webflow-e6b94dff39cf
---

#### 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](https://cdn-images-1.medium.com/max/1024/1*dMwhI5-wa_cv1v8eyWlVvg.png)<figcaption>Webflow University Homepage</figcaption>

I immersed myself in the Designer canvas and consumed all the [University](https://university.webflow.com/) 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](https://university.webflow.com/lesson/intro-to-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](https://cdn-images-1.medium.com/max/1024/0*bFj8jVYz2kaDkr2e)

#### **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](https://cdn-images-1.medium.com/max/1024/0*FKmGcO034yau1Snh)<figcaption>Box 2 has a left-padding of 40 px</figcaption>

![webflow box model margin](https://cdn-images-1.medium.com/max/1024/0*RFqPrcIDE8nwCtjD)<figcaption>Box 2 has a left-margin of 60 px</figcaption>

[By inspecting the element above on the browser(https://mirelaprifti.webflow.io/webflow-box-model-web-design), we can see the margin, padding and border displayed as below and expressed in pixels.

![inspect element on browser](https://cdn-images-1.medium.com/max/434/0*Vpaa4KDPP_nzf9Dz)

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](https://university.webflow.com/lesson/display-settings).

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](https://cdn-images-1.medium.com/max/1024/0*1S87BoW-LgRinj53)<figcaption>Container Display: inline</figcaption>

#### **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](https://cdn-images-1.medium.com/max/1024/0*KoftCB13EDkLf2mH)<figcaption>Container Display: horizontal, align-stretch, justify-start</figcaption>

![webflow display flexbox](https://cdn-images-1.medium.com/max/1024/0*MkB0m1RS-2viUbX9)<figcaption>Container Display: vertical, align-center, justify-start</figcaption>

![webflow display flexbox](https://cdn-images-1.medium.com/max/1024/0*dw631IFlpFojKmym)<figcaption>Container Display: horizontal, align-stretch, justify-space between</figcaption>

### **3. Responsiveness**

[Responsive design](https://university.webflow.com/lesson/intro-to-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](https://cdn-images-1.medium.com/max/902/0*gq2iG5cDCGDY2kBL)<figcaption>Webflow Canvas — Breakpoint View</figcaption>

### **4. Position**

There are 5 different [positioning properties](https://university.webflow.com/lesson/position-floats-and-clear-settings) 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](https://university.webflow.com/lesson/use-classes-to-style-elements). 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_”.

![](https://cdn-images-1.medium.com/max/1024/1*JFOmBl4-2NLYlUNS8VmJ7g.png)

![](https://cdn-images-1.medium.com/max/476/1*1YFIyUKyM9pBilrwZ-G2cg.png)<figcaption>“Container” is the class assigned to the black box with display:inline</figcaption>

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_”.

![](https://cdn-images-1.medium.com/max/1024/1*cnzq4tZwY7TKnY6tSxF7kw.png)

![](https://cdn-images-1.medium.com/max/478/1*Ydz6sDq-I2GzJl34r4Ie3A.png)<figcaption>A combo class “Flex” to make the black box with display:flex</figcaption>

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](https://webflow.com/?rfsn=4841417.782bc8&utm_medium=affiliate).

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