Should you design your desktop or mobile device size first in Webflow?

Course contents

SECTION: 1

Getting Started 37:55

1. Intro to Webflow Tutorial training course FREE

3:10

2. Getting started with Webflow tutorial FREE

3:00

3. How to earn your Webflow certificate FREE

2:28

4. What is Webflow FREE

6:12

5. Webflow FAQs - How much is webflow

14:19

6. How to build your first website in webflow

8:46

SECTION: 2

The Brief 2:27

1. Class project 01 - Create your own Webflow brief

2:27

SECTION: 3

Layout Level 1 9:11

1. What are Container vs Sections in Webflow

9:11

2. Quiz question 1

3. Quiz question 2

SECTION: 4

CSS Classes - Level 1 17:02

1. How to create CSS classes in Webflow

17:02

2. Quiz question 3

SECTION: 5

Images Level 1 13:45

1. How to add images with margin in webflow

6:45

2. Background images how to overlay text on image webflow

7:00

3. Quiz question 4

SECTION: 6

Buttons & Navigation - Level 1 58:22

1. Buttons with a hover color in Webflow

13:21

2. Quiz question 5

3. Making our own custom nav in Webflow

11:41

4. Quiz question 6

5. How to make a mobile friendly burger menu nav bar in Webflow

11:39

6. Production Video 1 - Building Support & Next Event Sections

21:41

SECTION: 7

Links 13:53

1. Hyperlinks & remove underline & color from link in Webflow

5:41

2. Quiz question 7

3. Anchor link to another page section in Webflow

4:06

4. Quiz question 8

5. Class project 02 - Create your club page

4:06

SECTION: 8

CSS Classes - Level 2 6:55

1. Understanding Webflow Combo Classes FREE

6:55

2. Quiz question 9

SECTION: 9

Layout Level 2 19:55

1. Webflow grid

19:55

2. Quiz question 10

SECTION: 10

Responsive Design 27:54

1. What is responsive design in Webflow

2:47

2. How to make webflow responsive

18:12

3. Quiz question 11

4. Responsive Grids in Webflow

5:18

5. Class project 03 - Grid & Responsive Website

1:37

SECTION: 11

Interactions & Animations Level 1 15:42

1. Webflow button hover animation using Element Trigger

7:09

2. Fade in on scroll in Webflow

7:28

3. Quiz question 12

4. Class project 04 - Interactions

1:05

SECTION: 12

Publishing Level 1 11:04

1. Sharing with your design with your client

5:01

2. How much is webflow hosting site vs workspace

6:03

SECTION: 13

Workflow 14:57

1. The best Webflow shortcuts & speed tips & tricks

14:57

SECTION: 14

CSS Level 3 1:02:20

1. How to change the default styles in Webflow

9:18

2. Quiz question 13

3. Combo vs Global Classes in Webflow

9:38

4. Class naming conventions in Webflow FREE

22:05

5. How to use style manager webflow

5:54

6. Production Video 2 - New Portfolio

1:49

7. Minimum Height vs ViewPort Heights in Webflow

13:36

8. Quiz question 14

SECTION: 15

Connecting with other software 12:03

1. Convert Figma to Webflow

5:26

2. Convert XD to Webflow

6:37

SECTION: 16

Fonts 37:42

1. How to add fonts to webflow

4:36

2. Quiz question 15

3. Production Video 3 - Hero Text

15:39

4. Line height space after letter spacing in Webflow

8:19

5. Quiz question 16

6. Text & Box Button Shadows in Webflow

9:08

SECTION: 17

Color 22:49

1. How to create global swatches in Webflow

12:36

2. What is color contrast ratio in Webflow

5:26

3. Quiz question 17

4. Gradient background in Webflow

4:47

SECTION: 18

Layout Level 3 2:09:43

1. Navbar full width container in Webflow FREE

9:17

2. Webflow layout - Columns vs Flex vs Grid vs None vs Inline

3:06

3. Webflow layout Flex vs Grid which should I use

12:20

4. Flex box layout with examples in Webflow

17:17

5. Equal height cards with button on the bottom in Webflow

14:22

6. Position absolute & relative explained in Webflow FREE

9:34

7. Quiz question 18

8. Sticky navbar footer webflow position sticky not working

4:24

9. Quiz question 19

10. Class project 05 - Portfolio Homepage

5:11

11. Class project 05 - Portfolio Homepage - Solution

54:12

SECTION: 19

Units 19:40

1. How to use Px Rem & Em’s in Webflow

11:36

2. Quiz question 20

3. Quiz question 21

4. How to use VH viewport height in Webflow

8:04

SECTION: 20

Navigation 29:48

1. How to style the navbar component in Webflow

12:15

2. Adding & connecting pages in Webflow

10:20

3. Quiz question 22

4. How to make an image a link in Webflow

7:13

SECTION: 21

Symbols 11:59

1. Create a symbol & overrides in Webflow

11:59

2. Quiz question 23

SECTION: 22

Forms 23:58

1. How to make a contact form in Webflow

10:41

2. How to style a form in Webflow

13:17

SECTION: 23

Images Level 2 22:09

1. Image types in Webflow SVG vs PNG vs JPG

8:11

2. What are Hi-DPI & responsive images in Webflow

6:08

3. How to crop images in Webflow using object fit

2:51

4. Quiz question 24

5. What is lazy load in Webflow

2:00

6. Quiz question 25

7. How to change favicon in webflow

2:59

8. Quiz question 26

SECTION: 24

Footer 6:27

1. Footer stick to bottom in Webflow

6:27

2. Quiz question 27

SECTION: 25

Interactions & Animations Level 2 54:03

1. How to create a page load animation in Webflow FREE

20:26

2. Image fade in & get bigger on roll over in Webflow

12:12

3. Parallax background scroll image move in Webflow

21:25

SECTION: 26

SEO Level 1 22:39

1. Is webflow good for SEO

3:35

2. Meta description title tags robots & sitemap explained Webflow FREE

7:29

3. What is Image Alt text in webflow

5:43

4. Quiz question 28

5. SEO Keywords in Headings & URLs in Webflow

5:52

SECTION: 27

Publishing Level 2 37:20

1. Can you export code self hosted Webflow

7:43

2. Quiz question 29

3. What are read only links in Webflow for

2:43

4. Style manager & cleaning up classes

4:42

5. Using your own custom website domain name in Webflow

7:57

6. Manually connecting your own custom domain name in Webflow

7:32

7. Testing on your actual mobile phone

2:28

8. Class project 06 - Portfolio Complete

4:15

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 Figma

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

1. HTML embed code from Calendly, Twitter & Castos

10:15

SECTION: 30

Ecommerce 3:11:45

1. Creating an ecommerce store in Webflow FREE

6:20

2. How to add products to your store in Webflow

4:55

3. Adding your ecommerce product to a page in Webflow

5:33

4. Adding a list of your products to the homepage

6:32

5. Quiz question 34

6. Payment settings in Webflow

4:10

7. What happens after a purchase in a Webflow store

1:32

8. Customizing the cart settings in Webflow

5:49

9. Quiz question 35

10. How to add variants in Webflow ecommerce product

5:39

11. Adding Categories for Products CMS Collection with filters

6:53

12. Importing a CSV to Webflow product ecommerce

4:59

13. Float & why the cart button won’t go in the Nav in Webflow

8:27

14. Work along with Dan building the full tea store in Webflow

2:07:24

15. Class Project 09 - Ecommerce

3:32

SECTION: 31

What next 14:24

1. Distinction Certificate Project

8:31

2. How to request your certificate FREE

3. What next after your Webflow Essentials course

4:54