β1/ First: how websites are structured:
Normally, you need code to turn this into website.
Webflow does it for you, visually! π―
β
β
2/ To understand Webflow:
You need to understand the box model. Itβs the key to putting things where you want them to be.
β
3/ Webflow lets you build visually π, without code. Simply drag in components to build your site. Components include:
β
4/ After dragging in a component, check the navigator. This is where the box model comes in.
You can see which components are within other components (inside other boxes) with indentations.
You can put as many components inside other components that youβd like.
β
5/ Let's talk design! When you select a component, you can style it ποΈ
First add a class name, which is used for style settings. Classes are reuseable throughout your site. This saves you a TON of time later on.
Class settings include font, background, border, and MUCH more.
β
6/ Moving on to position π
The Layout settings lets you position your content within a div on the page.
Flex is my favorite, because it makes it super easy to position things how you want.
β
7/ The CMS is what really makes Webflow β¨magicalβ¨
You can store lots of data in the backend, and display it on your site automatically.
β
8/ Use a Collection List component to display all the items in your collection (all the blog posts, for example).
When you update your CMS, your site content updates automatically
When you style one item, all items will use the same style. This saves a TON of time.
β
9/ Let's talk about collection pages.
An example is an individual recipe page on a recipe blog.
If you have 100 recipes, Webflow will create 100 webpages, with the same design, AUTOMATICALLY.
It's magical
β
10/ Responsive design is about making your site work on every screen size.
Webflow makes this super easy!
Just click the device on the top, and adjust your styles.
Any adjustments on a larger size are automatically applied to smaller, but not the other way around.
β
/Bonus
That's it! If you understand these fundamentals, you'll be building Webflow sites in no time.
π Want to watch a tutorial walking you through each point?
Check out this beginner Webflow tutorial, building a fully functioning recipe blog π nocode.mba/preview-webflow
β