Learning Webflow, the definitive guide

A compendium of resources for designers on their webflow learning path
November 20, 2022
Webflow

I decided I wanted to do a one month immersion into Webflow. Before diving into this magical tool, I did the same with Shopify and Wordpress DIVI. And after having done a deep dive on them I choose webflow. But this is not a comparison post. This is about how to make an immersion in webflow.

I would say there are some steps on your process whether you begin from zero or whether you can design and code (or nocode!). So I made this graphics simulating what I consider the appropiate learning path.

If you know nothing, go first to web design, then get familiar with CSS and layouts. Learn something about SEO and interactions and also performance. Next step would be to use some Class naming convention in your workflow. Finally you could dive into CMS, integrations and so on.

The webflow learning path

I rearranged the courses from webflow university with what I consider to be the proper order, going from beginner to advanced. Do not forget about business and freelancing.

Webflow courses

Beginner Courses

  • Webflow 101 crash course: Jump right in to Webflow — get an overview of the basics and get started on building your first website, without learning or writing code.
  • 2021 design portfolio course: Build and visually design a full portfolio website within the span of 21 days. Covering everything from the basics of grid and flexbox to advanced interactions and accessibility work, this course takes us through each and every step of building and launching a site in Webflow.
  • Ultimate web design course: From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.
  • SEO fundamentals: An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.
  • Webflow Ecommerce: Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Advanced

  • CSS layout & positioning: Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.
  • CSS styling: Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.
  • CSS grid in Webflow: An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.
  • Web elements: A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.
  • CMS & dynamic content: Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content’s structure and style.
  • Client’s guide to the Editor: This is the Client’s guide to the Webflow Editor. Share these lessons to get your clients up and running.
  • Full site build: Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

...

Continue Reading