Webflow Essentials Training

Class project 01 - Create your own Webflow brief

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 37:55
SECTION: 2
The Brief 2:27
SECTION: 3
Layout Level 1 9:11
SECTION: 4
CSS Classes - Level 1 17:02
SECTION: 5
Images Level 1 13:45
SECTION: 6
Buttons & Navigation - Level 1 58:22
SECTION: 7
Links 13:53
SECTION: 8
CSS Classes - Level 2 6:55
SECTION: 9
Layout Level 2 19:55
SECTION: 10
Responsive Design 27:54
SECTION: 11
Interactions & Animations Level 1 15:42
SECTION: 12
Publishing Level 1 11:04
SECTION: 13
Workflow 14:57
SECTION: 14
CSS Level 3 1:02:20
SECTION: 15
Connecting with other software 12:03
SECTION: 16
Fonts 37:42
SECTION: 17
Color 22:49
SECTION: 18
Layout Level 3 2:09:43
SECTION: 19
Units 19:40
SECTION: 20
Navigation 29:48
SECTION: 21
Symbols 11:59
SECTION: 22
Forms 23:58
SECTION: 23
Images Level 2 22:09
SECTION: 24
Footer 6:27
SECTION: 25
Interactions & Animations Level 2 54:03
SECTION: 26
SEO Level 1 22:39
SECTION: 27
Publishing Level 2 37:20
SECTION: 28
Dynamic content / CMS / Collections 1:25:51
1. What are Static vs Dynamic CMS Collection in Webflow
3:37
2. Creating a CMS Collection in Webflow
6:52
3. Adding the CMS collection list via CSV Webflow
5:29
4. Adding the CMS Collection List to the webpage in Webflow
9:21
5. Quiz question 30
6. Reorganizing what is shown from the Webflow collection list
4:36
7. Quiz question 31
8. Styling our collection list with grid & flex in Webflow
7:10
9. Class project 07 - Kitchen Collection
2:03
10. Allowing your client to update the website in Webflow editor FREE
7:18
11. Quiz question 32
12. How to create blog using CMS Collection Pages in Webflow
7:33
13. Quiz question 33
14. Linking to a collection page from the homepage in Webflow
6:38
15. Manually linking to a collection page in Webflow
4:14
16. How does my client add a blog post in the CMS collection in Webflow
2:24
17. How to use rich text elements in Webflow
7:34
18. Styling rich text in a Webflow CMS
6:56
19. Class project 08 - Blog CMS
4:06
SECTION: 29
Custom Embed Code 10:15
SECTION: 30
Ecommerce 3:11:45
SECTION: 31
What next 14:24

Questions

1
1
0
1
2
2
2
2
2
1
1
2
1
1
1
1
1
1
1
1
0
1
0
1
2
2
0
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0

Student class projects

1 0
Avatar

Enermeet .co

@Enermeet

Excited to get started in Figma and Webflow.
1 0
Avatar

Corita Akinyemi

@Corita
2 3
Avatar

Sibylle Roche

@SibylleRoche

I will change the target audience; I don't think a pillow fight club and people in their 60s are realistic. I will add a Senior Day or something, though. lol. The general target audience will be younger, though. I can make it wittier that way.
1 0
Avatar

Emmalese Nuerge

@emmaleseNuerge
1 0
Avatar

Helen Mowbray

@helenMowbray
1 0
Avatar

Richael Lucero

@richaelLucero
1 0
Avatar

Julia Nicholls

@juliaNicholls
3 1
Avatar

Michael Mayer

@michaelMayer
1 0
Avatar

Sheena Thomas

@sheenaThomas
1 0
Avatar

Frank Miskar

@frankMiskar
1 0
Avatar

Kayla Poulin

@kaylaPoulin
1 0
Avatar

Narapat Jutamas

@narapatJutamas
0 0
Avatar

Josefine Kleespies

@josefine125
2 0
Avatar

Mark Sherwin Maestro

@MMM
1 0
Avatar

Farissan Rahadian Danery

@farissanRahadianDanery
0 0
Avatar

Eduard Wolf

@eduardWolf
0 0
Avatar

Josh Warren

@joshuaWarren
0 0
Avatar

Haleigh Lamoreux

@haleighLamoreux
1 0
Avatar

Eliasib Leija

@eliasibLeija
0 0
Avatar

Jack Parker

@jackParker
2 0
Avatar

Amaya Gamage

@amayaGamage
1 0
Avatar

Dzsenifer Szökőné Gindele

@SZGindeleYenny
0 0
Avatar

Charlotte Le Roy

@charlotteLeRoy
1 0
Avatar

Bob Lux

@bobLux
1 0
Avatar

Lucie Harmackova

@lucieHar
1 0
Avatar

Kenneth A. Mora

@Kenneth
0 0
Avatar

Max Erickson

@maxErickson
0 0
Avatar

April Choitz

@april
0 0
Avatar

Cristian Paulino

@cristianPaulino
1 0
Avatar

Helen Reeves-Howard

@helenReevesHoward

Course info

114 lessons / 17 hours 35 quiz questions 10 projects Certificate of achievement

Overview

Hi, my name is Dan Scott and together, you and I are going to learn Webflow.

You can get Webflow by clicking here.

Webflow will enable you to create responsive, accessible websites using intuitive design techniques without the need for complex coding.

This course is aimed at people who are new to Webflow and to web design in general.
We will start by creating a simple single page site, learning basic layout techniques and using simple animations. 

Webflow software is visual and does not require you to learn coding. You will learn how to ensure your website is consistent across desktop, laptop and mobile devices. We learn about CSS Classes for layout and font styling and also the importance of Class naming conventions.

If you have already tried using Webflow and are now wondering whether you should be using grids, flex, columns or divs and why…do not fear. By the end of this course you will know which to use and why!
We will learn how to build your own portfolio website and we will incorporate some exciting animations too. 

Together we will learn to create and style forms and incorporate those into your website.
Some of you may have already started to use Figma or Adobe XD. I will show you how you can convert the files you have created and incorporate them into a Webflow site. 

Previous experience using Figma or Adobe XD is not essential when using Webflow. 

We will learn about Sticky Navs, SEO’s, Symbols, REM’s, Floats, Gradients and Fonts.

We will create a CMS website and a blog and will learn how to hand over responsibility for these to clients or colleagues, hand over the site so that someone other than you can then login and manage all of the content themselves.

We will look at , create and style an E-Commerce Site, creating and styling Shopping Carts, Order Forms and Shopping Gateways. We will learn how to sell both digital and physical products and services. 

If some of the terminology such as Global, Flex, Grid, Nav all sounds too hard - remember we will start from scratch and work through techniques step by step. This course is aimed at anybody who wants to build websites using Webflow. 

You may only need to design a single website for yourself, you may want to become a fulltime web designer, you might be a freelancer already and wanting to expand the type of work you are able to offer your clients. This course is for you! 

I set assignments throughout this course which will enable you to practice your skills and to use what you create within your very own portfolio. 

You are about to go from Website Zero to Webflow Hero! 
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

No transcription available for this video.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025