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.

119
 Video Lessons
Intermediate — Advanced
5hr 13min

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

Intro to the Designer

2:48

Intro to HTML & CSS

3:38

HTML Structure

1:55

WEB STRUCTURE

The Box Model

1:54

Element Hierarchy

3:57

Navigator Panel

2:45

ELEMENTS

Element Panel

1:49

Section

4:14

Container

2:44

Div block

3:37

Buttons & Links

Advanced Button Styling

5:43

Link Block

1:23

Text Link

1:16

Typography

3:20

Paragraph

4:42

Rich Text

3:52

Text Block

0:56

Block Quote

0:42

Media

Image File Types

2:22

Image Resolution

3:28

Assets Panel

3:08

Background Video

3:15

Components

Intro to Forms

4:55

Styling Forms

2:55

Styling a Navbar

4:34

Navbar Menu Button

4:51

Lightbox

3:44

Dropdown

4:38

Social Media Buttons

2:13

Custom Code Embed

1:24

Styling Basics

Intro to Style Panel

2:48

HTML Tags

3:59

Combo Classes

4:05

Text Style Inheritance

3:18

Style Manager

1:56

Transitions

2:40

Color Picker & Swatches

3:51

Color Values

3:22

Layout Basics

Intro to Web Layout

2:27

Display Settings

2:54

Padding & Margin

2:48

Width & Height Units

3:59

Floats & Clears

1:52

Flexbox & Grid

Intro to Flexbox

2:27

Centering elements with Flexbox

1:20

Equal height layouts with Flexbox

1:47

Grid layouts overview

2:42

Flexbox vs. Grid

4:00

Advanced Layout

Positioning Overview

1:48

Relative Positioning

1:43

Absolute Positioning

1:43

Fixed Positioning

1:27

Overflow

1:49

Styling Typography

Intro to Web Typography

3:20

Typography Units

2:43

Line Height

1:38

Advanced Typography Styles

3:01

Google Fonts

1:18

Custom Fonts

1:27

Text Shadow

2:36

Background & Border Styles

Background Styles Overview

2:20

Background Image

2:04

Background Gradient

3:02

Border Radius

3:22

Box Shadow

3:34

3D Styles

Intro to 3D

2:25

3D Perspective

4:01

2D & 3D Transforms

4:53

EFFECTS

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

1:07

Fetch as Google

2:38

Setting up Google Analytics

1:56

Intro to Paid vs. Organic Search

1:34

119
 video lessons
Intermediate — Advanced
5hr 13min