Learn the Box Model

1_T9PFj7v8hFovBOR2qW0JYg 1.png


Understanding the box model was a crucial step in becoming proficient with Webflow and web design. The rule of thumb is this: every element on the page is a box or a box nested in another box. In Webflow (and web development in general) Div Blocks are your boxes you have to work with to create your layout. Understanding the box model will help you with being able to design from a development perspective + allow you to build much faster in Webflow

The resources:

Intro to the box model | Webflow University

The CSS Box Model Explained by Living in a Boring Suburban Neighborhood

The Ultimate Web Design Course by Webflow

Screen Shot 2021-08-15 at 3.47.31 PM.png


Webflow University in itself is an amazing resource that I still use as a reference on all of my projects. I was able to quickly learn how to use Webflow and build basic sites before ever writing a line of code or even knowing what HTML/CSS was.

It's gotten even better over the years, and with this new web design course, you'll be able to quickly learn the fundamentals of Webflow all the way through to complex layouts and animations that can really set you apart from other sites.

The resource:

Ultimate web design course | Webflow University

Learn from Cloneables

Screen Shot 2021-08-15 at 3.51.00 PM.png


Another great way to learn and see what's possible is by viewing the Webflow Showcase. This is where you will find a collection of Webflow projects from the community. The best part about the showcase is being able to open any of the projects in Webflow and have the ability to reverse engineer how a specific site or element was built.

Also, most of these projects are cloneable, meaning you can clone a copy of the project into your Webflow account. This will allow you to edit a copied version of the site to get an even closer view to how things are built and related to one another.