Ultimate web design course

More than 100 of our free web design tutorial videos in one comprehensive course, from basic web concepts for beginners to the most Webflow-specific how-tos.

About this course

Everything you've ever wanted to know to get started with Webflow including basic web concepts. More than 100 videos from our education library in a single stream means that by the time you finish this course, you'll be able to build some pretty amazing stuff.

Clone this project Download project assets

Requirements

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

Course outline

INTRO

INTRO

Intro to the Designer

Intro to the Designer

2:48

Intro to HTML & CSS

Intro to HTML & CSS

3:38

HTML Structure

HTML Structure

1:55

WEB STRUCTURE

WEB STRUCTURE

The Box Model

The Box Model

1:54

Element Hierarchy

Element Hierarchy

3:57

Navigator Panel

Navigator Panel

2:45

ELEMENTS

ELEMENTS

Element Panel

Element Panel

1:49

Section

Section

4:14

Container

Container

2:44

Columns

Columns

2:22

Div block

Div block

3:37

Buttons & Links

Buttons & Links

Button

Button

2:44

Advanced Button Styling

Advanced Button Styling

5:43

Link Block

Link Block

1:23

Text Link

Text Link

1:16

Typography

Typography

3:20

Heading

Heading

2:02

Paragraph

Paragraph

4:42

Rich Text

Rich Text

3:52

Text Block

Text Block

0:56

Block Quote

Block Quote

0:42

List

List

2:31

Media

Media

Image

Image

3:39

Image File Types

Image File Types

2:22

Image Resolution

Image Resolution

3:28

Assets Panel

Assets Panel

3:08

Video

Video

1:20

Background Video

Background Video

3:15

Components

Components

Intro to Forms

Intro to Forms

4:55

Styling Forms

Styling Forms

2:55

Navbar

Navbar

5:10

Styling a Navbar

Styling a Navbar

4:34

Navbar Menu Button

Navbar Menu Button

4:51

Slider

Slider

4:56

Tabs

Tabs

4:38

Lightbox

Lightbox

3:44

Map

Map

2:58

Dropdown

Dropdown

4:38

Social Media Buttons

Social Media Buttons

2:13

Custom Code Embed

Custom Code Embed

1:24

Symbols

Symbols

3:47

Styling Basics

Styling Basics

Intro to Style Panel

Intro to Style Panel

3:15

HTML Tags

HTML Tags

3:59

Classes

Classes

2:46

Combo Classes

Combo Classes

4:05

Text Style Inheritance

Text Style Inheritance

3:18

Style Manager

Style Manager

1:56

States

States

2:47

Transitions

Transitions

2:40

Color Picker & Swatches

Color Picker & Swatches

3:51

Color Values

Color Values

3:22

Layout Basics

Layout Basics

Intro to Web Layout

Intro to Web Layout

2:27

Display Settings

Display Settings

2:54

Padding & Margin

Padding & Margin

2:48

Width & Height Units

Width & Height Units

3:59

Floats & Clears

Floats & Clears

1:52

Flexbox & Grid

Flexbox & Grid

Intro to Flexbox

Intro to Flexbox

2:27

Centering elements with Flexbox

Centering elements with Flexbox

1:20

Equal height layouts with Flexbox

Equal height layouts with Flexbox

1:47

Grid layouts overview

Grid layouts overview

2:42

Flexbox vs. Grid

Flexbox vs. Grid

4:00

Advanced Layout

Advanced Layout

Positioning Overview

Positioning Overview

1:48

Relative Positioning

Relative Positioning

1:43

Absolute Positioning

Absolute Positioning

1:43

Fixed Positioning

Fixed Positioning

1:27

Z-Index

Z-Index

1:49

Overflow

Overflow

1:49

Styling Typography

Styling Typography

Intro to Web Typography

Intro to Web Typography

3:20

Typography Units

Typography Units

2:43

Line Height

Line Height

1:38

Advanced Typography Styles

Advanced Typography Styles

3:01

Google Fonts

Google Fonts

1:18

Custom Fonts

Custom Fonts

1:27

Text Shadow

Text Shadow

2:36

Background & Border Styles

Background & Border Styles

Background Styles Overview

Background Styles Overview

2:20

Background Image

Background Image

2:04

Background Gradient

Background Gradient

3:02

Border

Border

3:07

Border Radius

Border Radius

3:22

Box Shadow

Box Shadow

3:34

3D Styles

3D Styles

Intro to 3D

Intro to 3D

2:25

3D Perspective

3D Perspective

4:01

2D & 3D Transforms

2D & 3D Transforms

4:53

EFFECTS

EFFECTS

Opacity

Opacity

1:44

Filters

Filters

2:59

Cursors

Cursors

1:45

Responsive Design

Responsive Design

Intro to Responsive Design

Intro to Responsive Design

2:21

Intro to Breakpoints

Intro to Breakpoints

4:22

Styling Across Breakpoints

Styling Across Breakpoints

3:03

INTERACTIONS CORE CONCEPTS

INTERACTIONS CORE CONCEPTS

Intro to Interactions

Intro to Interactions

1:22

Triggers & animations

Triggers & animations

4:31

Interpolation, easing, & smoothing

Interpolation, easing, & smoothing

2:58

CMS & Dynamic Content

CMS & Dynamic Content

Intro to Dynamic Content

Intro to Dynamic Content

1:36

Intro to Webflow CMS

Intro to Webflow CMS

2:02

CMS Collections

CMS Collections

2:05

Importing Collection Items

Importing Collection Items

1:48

Collection List

Collection List

3:33

Collection Page

Collection Page

3:01

Modifying a Collection

Modifying a Collection

2:05

Intro to the Editor

Intro to the Editor

2:22

CMS Collection Fields

CMS Collection Fields

Plain Text Field

Plain Text Field

0:51

Rich Text Field

Rich Text Field

1:16

Image Field

Image Field

1:24

Video Field

Video Field

0:39

Email Field

Email Field

0:47

Link Field

Link Field

1:26

Number Field

Number Field

1:27

Date/Time Field

Date/Time Field

1:38

Switch Field

Switch Field

0:58

Option Field

Option Field

1:25

Color Field

Color Field

0:38

Reference Field

Reference Field

1:11

Multi-reference Field

Multi-reference Field

2:31

Advanced Dynamic Content

Advanced Dynamic Content

Filtering Collection Lists

Filtering Collection Lists

2:47

Conditional Visibility

Conditional Visibility

2:43

SEO

SEO

Intro to 301 Redirects

Intro to 301 Redirects

2:39

Google Site Verification

Google Site Verification

1:07

Fetch as Google

Fetch as Google

2:38

Setting up Google Analytics

Setting up Google Analytics

1:56

Intro to Paid vs. Organic Search

Intro to Paid vs. Organic Search

1:34

More courses

Webflow 101 crash course

Getting started with Webflow Ecommerce

Building a landing page with CSS grid

Building grid layouts in Webflow

Client's Editor guide

Creating a custom portfolio

Building a business website

Intro to web design

Web elements

CSS styling

CSS layout and positioning

Interactions and animations

CMS and dynamic content

SEO fundamentals

Community Forum

Share your creations and get help from our active community.

Contact Support

We're available Monday–Friday, 6 a.m.–6 p.m. PT.