Webflow Essentials Training

Class project 03 - Grid & Responsive Website

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
0
0
0
2
1
2
2
2
2
2
1
1
1
1
1
1
1
2
2
2
0
1
1
1
1
2
6
2
1
0
1
0
1
0
0
0
0
0
0
0
0
2
2
1
1
1
1
4
0

Student class projects

1 0
Avatar

Emmalese Nuerge

@emmaleseNuerge

Desktop
3 0
Avatar

Michael Mayer

@michaelMayer
1 0
Avatar

Helen Mowbray

@helenMowbray
1 0
Avatar

Corita Akinyemi

@Corita
1 0
Avatar

Koen van der Bliek

@koenvanDerBliek
1 0
Avatar

Narapat Jutamas

@narapatJutamas
2 2
Avatar

Frank Miskar

@frankMiskar
0 0
Avatar

Josefine Kleespies

@josefine125
1 0
Avatar

Heather Tyson

@heatherTyson
1 0
Avatar

Eduard Wolf

@eduardWolf
1 0
Avatar

Trisha Catt

@trishaCatt

Desktop responsive view
3 0
Avatar

Amaya Gamage

@amayaGamage
1 0
Avatar

Teresa M Aaron

@teresaMAaron

Just the smaller versions. I can not for the life of me get the hamburger menu to stay visible without the main nav inserting itself somewhere else. I've asked for help on the Facebook page. Hoping for some guidance.
1 0
Avatar

Haleigh Lamoreux

@haleighLamoreux
1 0
Avatar

Eliasib Leija

@eliasibLeija

I thought a GIF demonstrating the different breakpoints might be easier.
1 0
Avatar

Dana Atwood

@danaAtwood

Class Project 03 - Grid & Responsive Website OMG I suck at this. I was trying to do something fancy with the Events section and it does not respond well when scaling. Also I tried every image I had of bears, resized them, fiddled with them and the Grid was just a mess so had to use the ones from the course folder :(

0 0
Avatar

Jack Parker

@jackParker
0 0
Avatar

Gawain Atwater

@gawainAtwater

On the smallest mobile screens I switched it to horizontal scroll. I wanted to learn that since I'm needing to use it in an upcoming site job.
3 1
Avatar

Helen Reeves-Howard

@helenReevesHoward
0 0
Avatar

April Choitz

@april
0 0
Avatar

Sarah Tebbutt

@sarahTebbutt

Really getting a feel for it now. Really enjoyed this section.
0 0
Avatar

L Lucien

@lLucien
2 0
Avatar

Bob Lux

@bobLux

Left to right: Desktop, tablet, Mobile (L), Mobile.
1 0
Avatar

Kenneth A. Mora

@Kenneth
0 0
Avatar

Paige Klein

@PaigeKlein

For some reason I expected responsive design in Webflow to be more complicated than it was. Happy to be wrong!

1 0
Avatar

Lucie Harmackova

@lucieHar

Thank you
1 0
Avatar

Buhari Azeez

@buhariAzeez
0 0
Avatar

Dylan Anderson

@dylanAnderson
1 0
Avatar

Viktoriia Kanakova

@Viktoriia
1 0
Avatar

Andrea Incardona

@andreaIncardona

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