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.

Webflow has a new UI, so visuals may vary slightly, but the course content is still relevant.

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 the Webflow CMS

Intro to the Webflow CMS

Coming soon

18

Build, manage, & publish CMS content

Build, manage, & publish CMS content

Coming soon

19

Designing with dynamic content

Coming soon

19

Collection lists

Collection lists

Coming soon

19

Collection pages

Collection pages

Coming soon

Progress

0%

Details

Beginner - Intermediate

5h 57m

79

Lessons

Assets & links

Assessment

Test your knowledge

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.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Build & structure your site

Learn how to add different types of HTML elements to structure pages on your site.

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.

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.

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.

Welcome to Optimize

Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and the power of AI.

Landing page generator for Ryan Reynolds

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

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.

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.

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.

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

Webflow 101

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

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.

Design systems in Webflow

Learn how to create a design system in Webflow for consistent and scalable site building.

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.

Accessibility on the web

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

Getting started with Webflow Enterprise

Get familiar with Webflow’s website experience platform and Enterprise features.

Design & manage CMS content in Webflow

Learn how to create, manage, and style dynamic content and collections on your site using Webflow’s CMS.

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.

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.

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.