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.

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

1

1

2

Web structure

2

Intro to the box model

2

Intro to Webflow

2

Navigator panel

3

Buttons & links

3

Navbar menu button

3

3

4

Elements

4

Use text columns in Webflow

5

Typography

5

5

5

5

Use text blocks in Webflow

6

Media

6

Image file types

6

Image resolution

6

7

Components

7

7

7

7

7

7

7

7

8

Styling basics

8

Style panel overview

8

8

Text style inheritance overview

8

8

8

8

9

Layout basics

9

9

9

10

Flexbox & grid

10

10

11

Advanced layout

11

Enable relative position

11

Apply a z-index value

11

Hide overflowing content

12

Styling typography

12

12

Add Google Fonts

12

13

Background & border styles

13

13

14

3D styles

14

Parallax movement on scroll

14

14

15

Effects

15

16

Responsive design

16

Intro to responsive design

16

17

Interactions core concepts

17

Intro to Interactions

17

Triggers and animations

17

Interpolation, easing, and smoothing

18

CMS & dynamic content

18

Intro to dynamic content

18

Intro to the Webflow CMS

18

Intro to the CMS Editor

18

Import/export CMS content

18

Modify a Collection

19

CMS Collection fields

19

Plain text field overview

19

Rich text field

19

19

19

19

Number field overview

19

19

Option field overview

19

Reference field

19

Multi-reference field

20

Advanced dynamic content

20

Advanced CMS filtering

20

Google site verification

20

Google Analytics

20

Paid vs. organic search

20

Progress

0%

Details

Beginner - Intermediate

5h 31m

73

Lessons

Assets & links

Continue learning

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.

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.

Landing page generator for Ryan Reynolds

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

Accessibility on the web

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

21-day design portfolio course

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

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.

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.

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.

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.

Webflow 101

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

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.

Web elements

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

SEO fundamentals

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

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.

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.

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.

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.

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.