Pause the background video

Yes, this course is from the future.

Clone this project
Use this version to clone
the completed project
Clone this project
Blank pages without hitting page limits

Our goal is simple: we want to empower designers and agencies from all disciplines (UX, brand, product, graphic, fashion, industrial, and short track speed skating) to build a CMS-driven portfolio that starts off 2021 with something that will generate leads — and potentially tear a hole in the very fabric of space and time.

We included everything we learned about content strategy, information architecture, and quantum mechanics to create a course unlike any other course in the past, present, or future. That’s because this course was developed in December of 2021, and brought back in time using proprietary Webflow technology.


Lessons in this course

Homepage
Project pages
Contact page
Site enhancements
Launch & manage

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0
%

Completed

0
of
21

Lessons done

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.

Open the completed project
Open the project with
blank pages

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Intro
Homepage
Project pages
Contact page
Site enhancements
Launch & manage

Related courses

2021 design portfolio course

21
Lessons
Intro
Intro
Homepage
Homepage
Project pages
Project pages
Contact page
Contact page
Site enhancements
Site enhancements
Launch & manage
Launch & manage
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Introduction

Kick off your 2021 with a 21-day course that follows the full build of a design portfolio website. Start from a blank canvas to a completely responsive, CMS-driven portfolio that will generate leads — and potentially tear a hole in the very fabric of space and time.

Transcript
Read the full article

Homepage: hero section

Create an eye-catching hero section to draw the attention of your site visitors. 

Transcript
Read the full article

Homepage: navigation

Configure and style your navigation bar. Convert it to a Symbol to reuse it and keep it consistent throughout your project.

Transcript
Read the full article

Homepage: client projects

Display your CMS items on your homepage in a beautiful and consistent layout using magic (which we also brought back from the future).

Transcript
Read the full article

Homepage: contact form

Create an engaging call-to-action and generate leads with a contact form front and center on your portfolio's homepage.

Transcript
Read the full article

Homepage: footer

Design a footer to wrap up your homepage's content and act as a second navigation — this footer will be used for every page on your portfolio for consistency.

Transcript
Read the full article

Homepage: responsiveness

With your portfolio's homepage complete, it's time to make it responsive. Learn how to make your homepage responsive on tablet, mobile devices and even larger displays, like the screens at Regal Cinema.

Transcript
Read the full article

Project pages: main page

Now's the time — the time to go into more detail with your projects in your portfolio. We're going to use CMS Collections to generate all of our pages by building one page. With magic.

Transcript
Read the full article

Project pages: responsiveness

Another page, another thing to make responsive. With your portfolio's project pages complete, it's time to make it responsive. Learn how to make your homepage responsive on tablet, mobile devices and even larger displays. The magic is changing one page will affect all pages, so you only have to do the work once.

Transcript
Read the full article

Contact page: main page

The last main page in our portfolio will be the contact page, a static page with a sticky footer. And we'll ensure that footer stays on the bottom of the page.

Transcript
Read the full article

Contact page: responsiveness & reCAPTCHA

In this lesson, we'll add Google's reCAPTCHA validation to reduce the amount of spam received in Megan's contact form. In addition, we'll check responsiveness and fluidity on Desktop, Tablet, Mobile landscape, Mobile portrait, and the larger 1920px breakpoint.

Transcript
Read the full article

SEO & Open graph settings

This lesson covers setting static and dynamic SEO titles and meta descriptions, as well as configuring Open Graph settings which will show up in embedded links in services like Twitter.

Transcript
Read the full article

Dark to light redesign

In this lesson, we’ll visually edit our CSS to redesign the portfolio to take it from dark to light. As we do this, we’ll explore cascading and inheritance as they relate to our homepage, our project pages, and our contact page. Remember to download the most recent project assets from the course page!

Transcript
Read the full article

Custom 2D & 3D interactions

In this lesson, we’ll visually animate our elements directly on our page and create mind-melting 2D and 3D interactions that are triggered by mouse hover, page scroll position and page load.

Transcript
Read the full article

Custom 404 page

In this lesson, we'll create a custom 404 page for when your visitors encounter an unavailable page on your portfolio. Keep your visitors engaged with a mouse follow interaction to keep them on your portfolio.

Custom code for frosted glass effect: https://frosted-glass-code.webflow.io/

Transcript
Read the full article

3D parallax password page

Protect your pages with a password page that is both secure and engaging.

Transcript
Read the full article

Accessibility audit

In this lesson, we'll go through an accessibility audit session to explore how we can improve parts of our design to create better experiences for both humans and search engines.

Transcript
Read the full article

Design review

Sara Lundberg runs design for Webflow University, and today, she’ll be walking through dozens of design notes on Megan’s portfolio site — from spacing to interactions (and everything in between).

Transcript
Read the full article

Publish and launch

We'll publish our portfolio to the Webflow staging domain and then we'll connect a custom domain using Google Domains for a more professional and personalized look.

Transcript
Read the full article

Verify your site and track analytics

Now that you've built your entire portfolio, it's time to own it by verifying your site. Get ownership of your site and understand how visitors interact with your portfolio site to optimize performance and search engine settings.

Transcript
Read the full article

Advanced CMS filtering

In this lesson, we'll update our projects CMS Collection by adding a new client project and we'll filter our CMS layouts for a more advanced and curated showcase.

Transcript
Read the full article

Final thoughts & portfolio showcase

In this lesson, we’ll recap our progress and cover focusing on the kinds of work we want to feature in our portfolios. We’ll also show how to add your own portfolio to the Webflow Showcase for increased visibility throughout the community.

Transcript
Read the full article

Requirements

Our goal is simple: we want to empower designers and agencies from all disciplines (UX, brand, product, graphic, fashion, industrial, and short track speed skating) to build a CMS-driven portfolio that starts off 2021 with something that will generate leads — and potentially tear a hole in the very fabric of space and time.

We included everything we learned about content strategy, information architecture, and quantum mechanics to create a course unlike any other course in the past, present, or future. That’s because this course was developed in December of 2021, and brought back in time using proprietary Webflow technology.


Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Related courses

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

Shoot, something didn't work. Try again later, bud.