Pause the background video

Webflow Experts Course

Start off the year with a 21-day portfolio challenge

Beginning - advanced
4HR 39MIN

You know Webflow better than most, but are you truly an expert? This course covers the fundamentals every Webflow Expert should know inside and out, ranging from basic layout and styles to advanced interactions and SEO settings. Refine your expertise, and maybe learn a few new things along the way. 

Please note: Achieving your Webflow Expert certificate is the first step in being accepted to the Webflow Expert program and does not guarantee access to the program.


Learn more about the Webflow Experts program here.

The skills you need to become a certified Webflow Expert and the first step toward building a successful Webflow business.

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

Lessons in this course

Webflow 101
Interactions
CMS Collections
Webflow Ecommerce
Project settings
Hosting & SEO
Webflow Editor

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
70

Lessons done

You know Webflow better than most, but are you truly an expert? This course covers the fundamentals every Webflow Expert should know inside and out, ranging from basic layout and styles to advanced interactions and SEO settings. Refine your expertise, and maybe learn a few new things along the way. 

Please note: Achieving your Webflow Expert certificate is the first step in being accepted to the Webflow Expert program and does not guarantee access to the program.


Learn more about the Webflow Experts program here.

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

Webflow 101
Interactions
CMS Collections
Webflow Ecommerce
Project settings
Hosting & SEO
Webflow Editor

Related courses

Webflow Experts Course

70
Lessons
Webflow 101
Webflow 101
Interactions
Interactions
CMS Collections
CMS Collections
Webflow Ecommerce
Webflow Ecommerce
Project settings
Project settings
Hosting & SEO
Hosting & SEO
Webflow Editor
Webflow Editor

Section

Transcript
Read the full article

Style panel overview

Transcript
Read the full article

HTML tags

In Webflow, HTML tags give us an easy way to control the default styling for a particular element, without creating a unique class. For example, you can define the default styles for all paragraphs by editing the All Paragraphs tag. Adding a class with styles will override these default styles.

Transcript
Read the full article

Classes

Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values one by one can be frustrating. Classes save styling information that you can apply to as many elements as you want throughout your project.

Transcript
Read the full article

States

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.

In this video, we'll explain the four states you can style for any element:

  1. None
  2. ‍Hover
  3. ‍Pressed
  4. ‍Focused

Then show you how to style those states to indicate interactivity. Then we'll dig into applying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.

Transcript
Read the full article

Flexbox

Flexbox, also known as flex or flexible box layout, allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.

Transcript
Read the full article

Grid

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Transcript
Read the full article

Spacing

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

Transcript
Read the full article

Position

The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.

Transcript
Read the full article

Overview dynamic content

In this video, we'll explain the differences between static and dynamic content, and learn why the latter is so useful for some of the most popular content types on the web, from blog posts to product pages.

Transcript
Read the full article

Intro to Webflow CMS

A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly.

The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code.

In this video, we'll introduce some basic concepts behind the CMS, including:

  1. ‍Structuring content
  2. ‍Referencing content
  3. ‍Editing content
Transcript
Read the full article

Collection list

Collection lists are one of two ways to add and design dynamic content from a CMS collection or an Ecommerce Collection. You can add Collection lists to any type of page. The other way to add dynamic content is with Collection pages.

Transcript
Read the full article

Collection pages

Whenever you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will apply to every Collection item's page.

That means Collection Pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.

In this video, we'll show you how to:

  1. Create a Collection Page
  2. Add and connect content
  3. Preview Collection Pages
  4. Link to a Collection Page

Plus, we'll show you the settings you can adjust for Collection Pages.

Transcript
Read the full article

Intro to the CMS Editor

The Webflow Editor makes editing the website, and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, and the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page.

Transcript
Read the full article

Overview Ecommerce Collections

In the Webflow Designer, you can use the Ecommerce panel to build your store database adding, organizing and managing products and categories. Fully customize the look and organization of your store database by adding custom fields.

Transcript
Read the full article

Customize the Cart button

Customize and style your Cart and Cart button.

Transcript
Read the full article

Duplicate, transfer, or delete a project

In this lesson we'll cover how to: 

  1. Duplicate (or copy) a project 
  2. Transfer a project out of any dashboard
  3. Transfer a project from one of your teams to your personal dashboard
  4. Transfer a project to another team dashboard
  5. Transfer a hosted project with an active site plan
  6. Transfer a showcased project
  7. Transfer an ecommerce store from one account to another
  8. Delete a project from your dashboard
Transcript
Read the full article

Google site verification

Verifying your site with Google is a key early step in your SEO efforts as it allows you to verify ownership of a website, so you can use the Google Search Console tools like indexing. In this video, we'll show you how to quickly verify your site with Google.

Transcript
Read the full article

Google Analytics

Google Analytics gives you valuable information about user behavior on and interaction with your website. It includes powerful metrics like how many users and pageviews a site is getting, where your traffic is coming from, how long people stay on the site, and how many of them are leaving the page without clicking other links (bounce rate).

This helps many businesses figure out where to invest marketing dollars and measure the effectiveness of marketing campaigns.

In this video, we'll show you how to set up Google Analytics for your Webflow sites so you can take advantage of these powerful tools.

Transcript
Read the full article

301 redirects

301 redirects allow you to permanently route traffic from an old to a new URL and avoid the dreaded 404.

Transcript
Read the full article

Client's guide to the Editor: Introduction

A brief overview of the Webflow Editor — log in and change or add content at any time.

Transcript
Read the full article

Client's guide to the Editor: Pages tab

Use the Pages tab to edit each page, optimize site search settings, and set passwords for specific pages.

Transcript
Read the full article

Client's guide to the Editor: Collections tab

Collections are like databases — use them to organize team members, blogs, and other content types.

Transcript
Read the full article

Client's guide to the Editor: Ecommerce tab

The Ecommerce tab in the Webflow Editor is where you or your clients can create, access, and manage products and product categories.

Transcript
Read the full article

Client's guide to the Editor: Ecommerce settings

Once your store is built and designed, add the finishing touches in the Ecommerce settings before launching your store.

Transcript
Read the full article

Client's guide to the Editor: Orders tab

An overview of the Orders tab, and how to fulfill, unfulfill, and refund Webflow Ecommerce orders.

Transcript
Read the full article

Requirements

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.