The Easiest Guide to Webflow for Beginners

What’s Webflow

Source: https://webflow.com/designer (Sorry for the Crappy gif that's all I was able to upload here)

Why should you care?

0. Where it all starts

1. The Box Model — The ONLY tech thing you need to know

2. The Designer — Deep-dive Into The Main Interface

01 — Navigator, 02+03 — Pages & Page and SEO Settings, 04 — Assets Manager, 05 — Style Panel (The full right sidebar), 06 — Elements Settings, 07 — Interactions, 08 — Break Points + Device Check, 09 — CMS/Collections, 10+11 — Project Settings & Editor (Separate pages)
Navigator panel — Panel showing the whole page hierarchy
Pages overview — Place to add a new page or add folders to give your project a better structure
Hover over a page in the Pages panel click on the settings to open the second panel
Assets panel, a place to manage all of your icons and images
How to get a link to a particular asset (settings icon — click on the export icon or right-click to copy URL)
Style Panel — The whole 1st tab in the right sidebar — Place to style your elements
Element settings — in this case, you can see settings for one particular button which will take the user to a page within our project called Internships
Interactions Tab
Break Points — Desktop, Tablet, Mobile Landscape, Mobile Portrait
Always test your site on all of the viewports, to avoid some surprises on various devices.
Project Settings main view
Separate interface accessible via the logo in the left corner of the designer or via /?edit=1 on any live site.
Undo Redo | Cloud Status | Code Export | Read-only link | Publishing of your project!

3. Elements Panel — Overview Of The Most Important Elements And Little Tricks Around!

Section for outside padding when you’re shrinking site down, Content for 100% width and Max. width of the size of your design (usually 1040, 1100, 1140 or 960px) and then put everything inside! 📦

4. Kick-off Your First Project

And from here it’s on you! 🎉

5. Smart Resources

Portfolio, Business or Ecommerce/Store
Showcase filtered by Clonable / Most Liked — When on the detail you can check the whole project via link Open in Webflow. Once you're ready to put it on your profile — Click Clone Project in the top bar!
Part of a promotional video for Cards 2.0 — https://www.youtube.com/watch?v=4Co3k3QhHjI

6. Courses

7. Additional links

Webflow Forum — Homepage

The End

--

--

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
Jan Losert

Jan Losert

Webflow/No-Code Enthusiast, Product Designer & Product Maker. Tweets as @janlosert. Pixels on http://dribbble.com/JanLosert.