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
SECTION: 29
Custom Embed Code
10:15
SECTION: 30
Ecommerce
3:11:45
SECTION: 31
What next
14:24
Class project 04 - Interactions
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
SECTION: 29
Custom Embed Code
10:15
SECTION: 30
Ecommerce
3:11:45
SECTION: 31
What next
14:24
Questions
1
1
2
2
2
1
1
1
1
2
1
1
1
1
2
1
3
1
0
1
0
0
0
1
Stephen B
2 years ago
1
0
0
0
0
0
1
1
1
0
Trent W
2 years ago
1
1
1
2
4
3
1
2
0
0
3
2
Student class projects
Course info
Overview
Hi, my name is Dan Scott and together, you and I are going to learn Webflow.
You can get Webflow by clicking here.
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
Founder of Bring Your Own Laptop & Chief Instructor
instructorI 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.
- Powered by Marvin
- Terms of use
- Privacy policy
-
- © Bring your Own Laptop Ltd 2025