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
  2. Display
  3. Responsiveness
  4. Position
  5. Classes
webflow university
Webflow University Homepage

1. Box model

webflow box model

Margins, paddings & borders

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
inspect element on browser

2. Display

Inline

webflow display inline
Container Display: inline

Flexbox

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

3. Responsiveness

webflow canvas breakpoints
Webflow Canvas — Breakpoint View

4. Position

5. Classes

“Container” is the class assigned to the black box with display:inline
A combo class “Flex” to make the black box with display:flex

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store