21-day design portfolio course

Login with your Webflow account to track your progress

21-day design portfolio course

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

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

Build and visually design a full portfolio website within the span of 21 days. Covering everything from the basics of grid and flexbox to advanced interactions and accessibility work, this course takes us through each and every step of building and launching a site in Webflow.

Table of contents

1

Getting started

Getting started

Getting started

Coming soon

1

Introduction

Coming soon

2

Homepage

Coming soon

2

Recent updates to the Webflow Designer

Recent updates to the Webflow Designer

Coming soon

2

Homepage: hero section

Homepage: hero section

Coming soon

2

Homepage: navigation

Homepage: navigation

Coming soon

2

Homepage: client projects

Homepage: client projects

Coming soon

2

Homepage: contact form

Homepage: contact form

Coming soon

2

Homepage: footer

Homepage: footer

Coming soon

2

Homepage: responsiveness

Homepage: responsiveness

Coming soon

3

Project pages

Coming soon

3

Project pages: main page

Project pages: main page

Coming soon

3

Project pages: responsiveness

Project pages: responsiveness

Coming soon

4

Contact page

Coming soon

4

Contact page: main page

Contact page: main page

Coming soon

4

Contact page: responsiveness & reCAPTCHA

Contact page: responsiveness & reCAPTCHA

Coming soon

5

Site enhancements

Coming soon

5

SEO & Open graph settings

SEO & Open graph settings

Coming soon

5

Dark to light redesign

Dark to light redesign

Coming soon

5

Custom 2D & 3D interactions

Custom 2D & 3D interactions

Coming soon

5

Custom 404 page

Custom 404 page

Coming soon

5

3D parallax password page

3D parallax password page

Coming soon

5

Accessibility audit

Accessibility audit

Coming soon

6

Launch & manage

Coming soon

6

Design review

Coming soon

6

Publish and launch

Publish and launch

Coming soon

6

Verify your site and track analytics

Verify your site and track analytics

Coming soon

6

Advanced CMS filtering

Advanced CMS filtering

Coming soon

6

Final thoughts & portfolio showcase

Final thoughts & portfolio showcase

Coming soon

7

Additional layout learning

Additional layout learning

Additional layout learning

Coming soon

7

Quick Stack

Coming soon

7

V Flex and H Flex

V Flex and H Flex

Coming soon

Progress

0%

Details

Beginner - Advanced

4h 51m

25

Lessons

Assets & links

Continue learning

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.

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.

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 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.

Webflow 101

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

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.

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.

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.

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.

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.

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.

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.

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.

Web elements

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

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.

SEO fundamentals

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