The Complete Guide to Webflow

Webflow Development Essentials From Design to Fully Functional Website

Intro

01:51
Setting up your workspace

02:32
Getting to know the web

06:32
The box model

02:33
Dev prep from Figma

11:22
New UI overview

03:32
Setting up a style guide

16:19
Navigation

26:16
Navigation animation

10:20
Hero section

10:57
Creating a logo carousel

11:20
Building out sections

16:03
Testimonial slider

21:29
Form building and responsive clean up

28:06
Footer

09:39
Interactions

20:55
Final project settings

11:34
SEO and accessibility

08:11
Quality assurance

15:50
Publishing

05:08
Time to review

01:11

Webflow Development Essentials Building a Blog with the CMS

Build a paid membership site in Webflow and Memberstack

Build a job board site like Indeed in Webflow

Build an upvote site like Product Hunt in Webflow

Set up the CMS and build initial page

08:05
Add Upvote Buttons using Jetboost + set up Memberstack

15:10
Configure Memberstack so only signed in users can upvote.

04:46
Design a product page with an upvote button

05:38
Create a navbar as a symbol in Webflow

02:43
Create a login/logout button using Memberstack

01:59
Build a workflow and approval process for when users submit products to push to your Webflow CMS

18:34
Styling the home page and product page

22:23
More styling on the product page + adding a related products section

23:29
Add a my upvotes page on Webflow using Jetboost

06:03
Update zap in Zapier after adding Airtable fields

06:55
Add a unique comment section to each Webflow CMS collection page using Disqus

05:04

Integrate Circle with Webflow and Memberstack

Build a Substack clone in Webflow and Memberstack

Build a landing page to collect emails

12:31
Connect your landing page to Mailchimp

03:44
Create a blog in the Webflow CMS and build blog home page

18:35
Create blog post page

07:43
Add nav bar as a symbol on all pages

06:37
Summary of our progress so far

02:19
Add Memberstack and create first membership

04:48
Build page to subscribe to membership using Webflow’s tab component

11:46
Make the subscribe email form a symbol on all pages

03:15
Hide and show blog content based on if user has premium membership

08:29
Use Zapier to add tags in Mailchimp to subscribers when they purchase or cancel a subscription

06:37
Review of our progress so far

02:09
Optimize your site’s design for all screen sizes

06:26
Use Memberstack to add login/logout buttons

01:50
Add premium icon to article if its for paid users using visibility settings

02:34

Course Content

Webflow Development Essentials From Design to Fully Functional Website

Intro

Setting up your workspace

Getting to know the web

The box model

Dev prep from Figma

New UI overview

Setting up a style guide

Navigation

Navigation animation

Hero section

Creating a logo carousel

Building out sections

Testimonial slider

Form building and responsive clean up

Footer

Interactions

Final project settings

SEO and accessibility

Quality assurance

Publishing

Time to review

Webflow Development Essentials Building a Blog with the CMS

Introduction

Adding Collection Items

Creating a Page Showing All Blogs

Creating a CMS Page Template

Add custom filtering and search

Build a paid membership site in Webflow and Memberstack

Set up your sign up page in Webflow

Add login and logout buttons to nav bar

Set up membership and add sign up link to Webflow

Build a job board site like Indeed in Webflow

Create your first CMS collections, add sample jobs to your CMS, and start building your site

Build out the structure of your job board site

Add global styles to your Webflow site

Set up images so they scale proportionally

Integrate Jetboost into Webflow to add real time search and filtering

Add styling to your job board

Learn how to add custom style to checkboxes, add reusable symbols, and finish your site!

Build an upvote site like Product Hunt in Webflow

Set up the CMS and build initial page

Add Upvote Buttons using Jetboost + set up Memberstack

Configure Memberstack so only signed in users can upvote.

Design a product page with an upvote button

Create a navbar as a symbol in Webflow

Create a login/logout button using Memberstack

Build a workflow and approval process for when users submit products to push to your Webflow CMS

Styling the home page and product page

More styling on the product page + adding a related products section

Add a my upvotes page on Webflow using Jetboost

Update zap in Zapier after adding Airtable fields

Add a unique comment section to each Webflow CMS collection page using Disqus

Integrate Circle with Webflow and Memberstack

Embed Circle topics on Webflow CMS pages so each page has it’s own comment seection.

Enable SSO (single sign on) so users use the same login on both Circle and Memberstack.

Build a Substack clone in Webflow and Memberstack

Build a landing page to collect emails

Connect your landing page to Mailchimp

Create a blog in the Webflow CMS and build blog home page

Create blog post page

Add nav bar as a symbol on all pages

Summary of our progress so far

Add Memberstack and create first membership

Build page to subscribe to membership using Webflow’s tab component

Make the subscribe email form a symbol on all pages

Hide and show blog content based on if user has premium membership

Use Zapier to add tags in Mailchimp to subscribers when they purchase or cancel a subscription

Review of our progress so far

Optimize your site’s design for all screen sizes

Use Memberstack to add login/logout buttons

Add premium icon to article if its for paid users using visibility settings

Build a client dashboard in Webflow

Set up initial Webflow site & Memberstack login for clients

Use Zapier to sync members between Memberstack and Webflow for member-specific page

Build the dashboard in Webflow

Set up a messaging system to leave updates for clients

Real Time Search Bar on Webflow

Set up Webflow site with 2 collections to search