Ultimate web design course

Login with your Webflow account to track your progress

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos.

The Ultimate web design course includes over 100 videos. It starts with everything you need to know to get started with Webflow and eases into more advanced design concepts. You'll learn the basics of HTML, how CSS classes and subclasses function, how to construct a page design with elements like containers, divs, flexboxes, and grids. And of course, we'll take you through how to use one of our most powerful features — Webflow CMS. By the time you finish this course, you'll be able to build some pretty amazing stuff.

Table of contents

1

Getting started

Coming soon

1

Intro to HTML

Coming soon

1

HTML structure

Coming soon

2

Web structure

Coming soon

2

Intro to the box model

Intro to the box model

Coming soon

2

Welcome to the Webflow UI

Welcome to the Webflow UI

Coming soon

2

Navigator panel

Navigator panel

Coming soon

3

Buttons & links

Coming soon

3

Navbar menu button

Navbar menu button

Coming soon

3

Link block

Coming soon

3

Text link

Coming soon

4

Elements

Coming soon

4

Use text columns in Webflow

Use text columns in Webflow

Coming soon

5

Typography

Coming soon

5

Heading

Coming soon

5

Paragraph

Coming soon

5

Rich text

Coming soon

5

Use text blocks in Webflow

Use text blocks in Webflow

Coming soon

6

Media

Coming soon

6

Image

Coming soon

6

Image file types

Image file types

Coming soon

6

Image resolution

Image resolution

Coming soon

6

YouTube video

Coming soon

7

Components

Coming soon

7

Forms

Coming soon

7

Style forms

Coming soon

7

Navbar

Coming soon

7

Slider

Coming soon

7

Tabs

Coming soon

7

Lightbox

Coming soon

7

Map

Coming soon

7

Social media

Coming soon

8

Styling basics

Coming soon

8

Style panel overview

Style panel overview

Coming soon

8

HTML tags

Coming soon

8

Text style inheritance overview

Text style inheritance overview

Coming soon

8

Style Manager

Coming soon

8

States

Coming soon

8

Transitions

Coming soon

8

Color values

Coming soon

9

Layout basics

Coming soon

9

Spacing

Coming soon

9

Size

Coming soon

9

Position

Coming soon

10

Flexbox & grid

Coming soon

10

Flexbox

Coming soon

10

Grid

Coming soon

11

Advanced layout

Coming soon

11

Enable relative position

Enable relative position

Coming soon

11

Apply a z-index value

Apply a z-index value

Coming soon

11

Hide overflowing content

Hide overflowing content

Coming soon

12

Styling typography

Coming soon

12

Typography

Coming soon

12

Add Google Fonts

Add Google Fonts

Coming soon

12

Text shadow

Coming soon

13

Background & border styles

Coming soon

13

Backgrounds

Coming soon

13

Borders

Coming soon

14

3D styles

Coming soon

14

Parallax movement on scroll

Parallax movement on scroll

Coming soon

14

3D perspective

Coming soon

14

Transforms

Coming soon

15

Effects

Coming soon

15

Opacity

Coming soon

16

Responsive design

Coming soon

16

Intro to responsive design

Intro to responsive design

Coming soon

16

Breakpoints

Coming soon

17

Interactions core concepts

Coming soon

17

Intro to Interactions

Intro to Interactions

Coming soon

17

Triggers and animations

Triggers and animations

Coming soon

17

Interpolation, easing, and smoothing

Interpolation, easing, and smoothing

Coming soon

18

CMS & dynamic content

Coming soon

18

Intro to dynamic content

Intro to dynamic content

Coming soon

18

Intro to the Webflow CMS

Intro to the Webflow CMS

Coming soon

18

Intro to the CMS Editor

Intro to the CMS Editor

Coming soon

18

Import/export CMS content

Import/export CMS content

Coming soon

18

Modify a Collection

Modify a Collection

Coming soon

19

CMS Collection fields

Coming soon

19

Plain text field overview

Plain text field overview

Coming soon

19

Rich text field

Rich text field

Coming soon

19

Image field

Coming soon

19

Video field

Coming soon

19

Link field

Coming soon

19

Number field overview

Number field overview

Coming soon

19

Switch field

Coming soon

19

Option field overview

Option field overview

Coming soon

19

Reference field

Reference field

Coming soon

19

Multi-reference field

Multi-reference field

Coming soon

20

Advanced dynamic content

Coming soon

20

Advanced CMS filtering

Advanced CMS filtering

Coming soon

20

Google site verification

Google site verification

Coming soon

20

Google Analytics

Google Analytics

Coming soon

20

Paid vs. organic search

Paid vs. organic search

Coming soon

20

301 redirects

Coming soon

Progress

0%

Details

Beginner - Intermediate

5h 34m

74

Lessons

Assets & links

Continue learning

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

SEO fundamentals

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

CMS & dynamic content

Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content's structure and style.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.