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.

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.

118
 Video Lessons
Intermediate — Advanced
5hr 10min

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.

Requirements

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

Course outline

Intro to the Designer

New

2:48

Intro to HTML & CSS

New

3:38

HTML Structure

New

1:55

WEB STRUCTURE

New

Element Hierarchy

New

3:57

Navigator Panel

New

2:45

ELEMENTS

New

Buttons & Links

New

Advanced Button Styling

New

5:43

Image File Types

New

2:22

Image Resolution

New

3:28

Background Video

New

3:15

Components

New

Intro to Forms

New

4:55

Styling a Navbar

New

4:34

Navbar Menu Button

New

4:51

Social Media Buttons

New

2:13

Custom Code Embed

New

1:24

Styling Basics

New

Intro to Style Panel

New

3:15

Text Style Inheritance

New

3:18

Color Picker & Swatches

New

3:51

Layout Basics

New

Intro to Web Layout

New

2:27

Display Settings

New

2:54

Padding & Margin

New

2:48

Width & Height Units

New

3:59

Floats & Clears

New

1:52

Flexbox & Grid

New

Intro to Flexbox

New

2:27

Centering elements with Flexbox

New

1:20

Equal height layouts with Flexbox

New

1:47

Grid layouts overview

New

4:18

Flexbox vs. Grid

New

4:00

Advanced Layout

New

Positioning Overview

New

1:48

Relative Positioning

New

1:43

Absolute Positioning

New

1:43

Fixed Positioning

New

1:27

Styling Typography

New

Intro to Web Typography

New

3:20

Typography Units

New

2:43

Advanced Typography Styles

New

3:01

Background & Border Styles

New

Background Styles Overview

New

2:20

Background Image

New

2:04

Background Gradient

New

3:02

3D Styles

New

3D Perspective

New

4:01

2D & 3D Transforms

New

4:53

EFFECTS

New

Responsive Design

Intro to Responsive Design

2:21

Intro to Breakpoints

4:22

Styling Across Breakpoints

3:03

INTERACTIONS CORE CONCEPTS

Intro to Interactions

1:22

Triggers & animations

4:31

Interpolation, easing, & smoothing

2:58

CMS & Dynamic Content

Intro to Dynamic Content

1:36

Intro to Webflow CMS

2:02

CMS Collections

2:05

Importing Collection Items

1:48

Collection List

3:33

Collection Page

3:01

Modifying a Collection

2:05

Intro to the Editor

2:22

CMS Collection Fields

Plain Text Field

0:51

Rich Text Field

1:16

Image Field

1:24

Video Field

0:39

Email Field

0:47

Link Field

1:26

Number Field

1:27

Date/Time Field

1:38

Switch Field

0:58

Option Field

1:25

Color Field

0:38

Reference Field

1:11

Multi-reference Field

2:31

Advanced Dynamic Content

Filtering Collection Lists

2:47

Conditional Visibility

2:43

SEO

Intro to 301 Redirects

2:39

Google Site Verification

Setting up Google Analytics

1:56

Intro to Paid vs. Organic Search

1:34

118
 video lessons
Intermediate — Advanced
5hr 10min

Requirements

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

Get started

Lottie features

Centering elements with Flexbox (Ultimate)

Learn how to build this
Download assets
Open in Webflow

Equal height layouts with Flexbox (Ultimate)

Learn how to build this
Download assets
Open in Webflow

BACKGROUND & BORDER STYLES (Ultimate)

Learn how to build this
Download assets
Open in Webflow

Background Styles Overview (Ultimate)

Learn how to build this
Download assets
Open in Webflow

Intro to Responsive Design (Ultimate)

Learn how to build this
Download assets
Open in Webflow

Styling Across Breakpoints (Ultimate)

Learn how to build this
Download assets
Open in Webflow