Summary

Webflow closes the gap between what you can imagine and what you can bring to life. This introductory course is a great place to learn how to design, build, and launch responsive websites — visually. These lessons will give you an overview of Webflow’s UI, basic building blocks, and best practices for building on the web. We're so glad to have you here. Let's get started!

Lessons in this course

Getting started

Coming soon

Intro to the Designer
2:48
Coming soon

Intro to HTML & CSS
3:38
Coming soon

Web structure

Coming soon

Intro to the box model
1:54
Coming soon

Element Hierarchy
3:57
Coming soon

Navigator panel
2:45
Coming soon

Element basics

Coming soon

Add Elements panel
1:49
Coming soon

Section
4:14
Coming soon

Container
2:44
Coming soon

Columns
2:22
Coming soon

Div block
3:37
Coming soon

Components

Coming soon

Forms
4:55
Coming soon

Navbar
9:38
Coming soon

Slider
4:56
Coming soon

Symbols
6:09
Coming soon

Styling basics

Coming soon

Style panel overview
3:15
Coming soon

HTML tags
8:43
Coming soon

Classes
14:57
Coming soon

States
2:47
Coming soon

Layout

Coming soon

Layout settings
3:51
Coming soon

Spacing
6:28
Coming soon

Display settings
9:50
Coming soon

Flexbox
9:00
Coming soon

Grid
21:17
Coming soon

Position
16:51
Coming soon

Responsive design

Coming soon

Intro to responsive design
2:21
Coming soon

Breakpoints
16:00
Coming soon

Interactions core concepts

Coming soon

Intro to Interactions
1:22
Coming soon

Triggers and animations
4:31
Coming soon

CMS & Dynamic content

Coming soon

Overview dynamic content
1:36
Coming soon

Intro to Webflow CMS
2:02
Coming soon

Collection list
3:33
Coming soon

Filter Collection lists
2:47
Coming soon

Collection pages
3:03
Coming soon

Intro to the CMS Editor
2:22
Coming soon

CMS Collection fields

Coming soon

Plain text field overview
0:52
Coming soon

Rich text field
1:16
Coming soon

Image field
1:24
Coming soon

Switch field
0:58
Coming soon

Reference field
1:11
Coming soon

Multi-reference field
2:31
Coming soon

Webflow 101 crash course

42
Lessons
Getting started

Getting started

Coming soon

Coming soon

Coming soon
Web structure

Web structure

Coming soon

Coming soon

Coming soon

Coming soon
Element basics

Element basics

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
Components

Components

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
Styling basics

Styling basics

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
Layout

Layout

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
Responsive design

Responsive design

Coming soon

Coming soon

Coming soon
Interactions core concepts

Interactions core concepts

Coming soon

Coming soon

Coming soon
CMS & Dynamic content

CMS & Dynamic content

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
CMS Collection fields

CMS Collection fields

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Intro to the Designer

Download assets
Clone this project
Transcript
Learn more

Intro to HTML & CSS

Download assets
Clone this project
Transcript
Learn more

Intro to the box model

Download assets
Clone this project
Transcript
Learn more

Style panel overview

Download assets
Clone this project
Transcript
Learn more

HTML tags

In Webflow, HTML tags give us an easy way to control the default styling for a particular element, without creating a unique class. For example, you can define the default styles for all paragraphs by editing the All Paragraphs tag. Adding a class with styles will override these default styles.

Download assets
Clone this project
Transcript
Learn more

Classes

Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values one by one can be frustrating. Classes save styling information that you can apply to as many elements as you want throughout your project.

Download assets
Clone this project
Transcript
Learn more

States

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.

In this video, we'll explain the four states you can style for any element:

  1. None
  2. ‍Hover
  3. ‍Pressed
  4. ‍Focused

Then show you how to style those states to indicate interactivity. Then we'll dig into applying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.

Download assets
Clone this project
Transcript
Learn more

Spacing

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

Download assets
Clone this project
Transcript
Learn more

Flexbox

Flexbox, also known as flex or flexible box layout, allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.

Download assets
Clone this project
Transcript
Learn more

Grid

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Download assets
Clone this project
Transcript
Learn more

Position

The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.

Download assets
Clone this project
Transcript
Learn more

Intro to responsive design

Download assets
Clone this project
Transcript
Learn more

Intro to Interactions

Download assets
Clone this project
Transcript
Learn more

Triggers and animations

Download assets
Clone this project
Transcript
Learn more

Overview dynamic content

In this video, we'll explain the differences between static and dynamic content, and learn why the latter is so useful for some of the most popular content types on the web, from blog posts to product pages.

Download assets
Clone this project
Transcript
Learn more

Intro to Webflow CMS

A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly.

The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code.

In this video, we'll introduce some basic concepts behind the CMS, including:

  1. ‍Structuring content
  2. ‍Referencing content
  3. ‍Editing content
Download assets
Clone this project
Transcript
Learn more

Collection list

Collection lists are one of two ways to add and design dynamic content from a CMS collection or an Ecommerce Collection. You can add Collection lists to any type of page. The other way to add dynamic content is with Collection pages.

Download assets
Clone this project
Transcript
Learn more

Filter Collection lists

Download assets
Clone this project
Transcript
Learn more

Collection pages

Whenever you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will apply to every Collection item's page.

That means Collection Pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.

In this video, we'll show you how to:

  1. Create a Collection Page
  2. Add and connect content
  3. Preview Collection Pages
  4. Link to a Collection Page

Plus, we'll show you the settings you can adjust for Collection Pages.

Download assets
Clone this project
Transcript
Learn more

Intro to the CMS Editor

The Webflow Editor makes editing the website, and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, and the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page.

Download assets
Clone this project
Transcript
Learn more

Plain text field overview

The plain text field is a CMS field you can use in your Collections. This field is best used for basic textual content that doesn't need special formatting like headings, inline styles, or inline media like images or video. In this video, we'll explain how to add and use plain text fields in your Webflow CMS Collections.

Download assets
Clone this project
Transcript
Learn more

Rich text field

The rich text field is a CMS field used in Collections. Us it to give collaborators all the text formatting options they expect from a writing tool, including bold, italics, inline images, links, and more. In this video, we'll explain how to add and use rich text fields in your Webflow CMS Collections.

Download assets
Clone this project
Transcript
Learn more

Image field

The image field is a CMS field used in Collections that allows you and your collaborators to upload an image to your Collection items and use it in your designs. In this video, we'll show you how to use the image field.

Download assets
Clone this project
Transcript
Learn more

Switch field

The switch field is a CMS field used in Collections, usually as a filtering tool. Like any toggle, it has two values: Yes or No. Collaborators can toggle a switch on or off to specify, for example, if a blog post “is featured.”

Download assets
Clone this project
Transcript
Learn more

Reference field

The Reference field is a Collection field that you can add to any of your Collections. This powerful field allows you to link to an item in a different Collection. You can then use the referenced item’s content in Collection Lists and Collection Pages. In this video, we'll discuss some common uses of the Reference field, then show you how to make the most of it in your designs. To reference multiple items from a different Collection, use the Multi-reference field.

Download assets
Clone this project
Transcript
Learn more

Multi-reference field

A multi-reference field is just like a reference field, except it allows you to reference more than one item. This is great for tagging systems, related content, and other instances where you want to connect one item to many others. In this video, we'll show you how to use this powerful field in your CMS-driven websites.

Download assets
Clone this project
Transcript
Learn more

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser

Directed by

McGuire Brannon

Director of Education

Produced by

Stacy Han

Video Producer

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Shannon Fisher

Sr. Technical Writer

Micah Johnson

Webflow educator

Edited by

Stacy Han

Video Producer

Miguel Amezquita

Senior Video Editor

Grímur Grimsson

Video Producer

Dylan Maccarone

Video Editor

Designs by

Sara Lundberg

Education designer

Related courses

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

Shoot, something didn't work. Try again later, bud.