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

Columns

2:22

Div block

3:37

Buttons & Links

Button

2:44

Advanced Button Styling

5:43

Link Block

1:23

Text Link

1:16

Typography

3:20

Heading

2:02

Paragraph

4:42

Rich Text

3:52

Text Block

0:56

Block Quote

0:42

List

2:31

Media

Image

3:39

Image File Types

2:22

Image Resolution

3:28

Assets Panel

3:08

Video

1:20

Background Video

3:15

Components

Intro to Forms

4:55

Styling Forms

2:55

Navbar

5:10

Styling a Navbar

4:34

Navbar Menu Button

4:51

Slider

4:56

Tabs

4:38

Lightbox

3:44

Map

2:58

Dropdown

4:38

Social Media Buttons

2:13

Custom Code Embed

1:24

Symbols

3:47

Styling Basics

Intro to Style Panel

2:48

HTML Tags

3:59

Classes

2:46

Combo Classes

4:05

Text Style Inheritance

3:18

Style Manager

1:56

States

2:47

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

Z-Index

1:49

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

3:06

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

Opacity

1:44

Filters

2:59

Cursors

1:45

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

More courses

Ultimate web design course

About this course

Assets

Requirements

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