Ultimate web design course

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

115
 Video Lessons
Intermediate — Advanced
4hr 50min

About this course

Everything you've ever wanted to know about Webflow and web design (and probably a bit more). Every video in 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.

Assets

Looking for the assets used in this course? We put all the magic inside a zip file, and you can find it 

right here
.

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

Intro to Flexbox

2:27

Centering elements with Flexbox

1:20

Equal height layouts with Flexbox

1:47

Advanced Layout

Positioning Overview

1:48

Relative Positioning

1:43

Absolute Positioning

1:43

Fixed Positioning

1:27

Overflow

1:49

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

Adobe Typekit Fonts

2:59

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

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

115
 video lessons
Intermediate — Advanced
4hr 50min