Webflow Essentials Course

Focused View

Daniel Walter Scott

17:11:32

141 View

1 - Getting Started

1 - Intro to Webflow Tutorial training course.mp4

03:10

2 - Getting started with Webflow tutorial.mp4

03:00

3 - What is Webflow.mp4

06:12

4 - Webflow FAQs How much is webflow.mp4

14:19

5 - How to build your first website in webflow.mp4

08:47

2 - The Brief

6 - Class project 01 Create your own Webflow brief.mp4

02:27

3 - Layout Level 1

7 - What are Container vs Sections in Webflow.mp4

09:11

4 - CSS Classes Level 1

8 - How to create CSS classes in Webflow.mp4

17:02

5 - Images Level 1

9 - How to add images with margin in webflow.mp4

06:45

10 - Background images how to overlay text on image webflow.mp4

07:00

6 - Buttons & Navigation Level 1

11 - Buttons with a hover color in Webflow.mp4

13:21

12 - Making our own custom nav in Webflow.mp4

11:41

13 - How to make a mobile friendly burger menu nav bar in Webflow.mp4

11:39

14 - Production Video 1 Building Support & Next Event Sections.mp4

21:41

7 - Links

15 - Hyperlinks & remove underline & color from link in Webflow.mp4

05:41

16 - Anchor link to another page section in Webflow.mp4

04:06

17 - Class project 02 Create your club page.mp4

04:06

8 - CSS Classes Level 2

18 - Understanding Webflow Combo Classes.mp4

06:55

9 - Layout Level 2

19 - Webflow grid.mp4

19:55

10 - Responsive Design

20 - What is responsive design in Webflow.mp4

02:47

21 - How to make webflow responsive.mp4

18:12

22 - Responsive Grids in Webflow.mp4

05:18

23 - Class project 03 Grid & Responsive Website.mp4

01:37

11 - Interactions & Animations Level 1

24 - Webflow button hover animation using Element Trigger.mp4

07:09

25 - Fade in on scroll in Webflow.mp4

07:28

26 - Class project 04 Interactions.mp4

01:05

12 - Publishing Level 1

27 - Sharing with your design with your client.mp4

05:01

28 - How much is webflow hosting site vs workspace.mp4

06:03

13 - Workflow

29 - The best Webflow shortcuts & speed tips & tricks.mp4

14:57

14 - CSS Level 3

30 - How to change the default styles in Webflow.mp4

09:18

31 - Combo vs Global Classes in Webflow.mp4

09:38

32 - Class naming conventions in Webflow.mp4

22:06

33 - How to use style manager webflow.mp4

05:54

34 - Production Video 2 New Portfolio.mp4

01:49

35 - Minimum Height vs ViewPort Heights in Webflow.mp4

13:36

15 - Connecting with other software

36 - Convert Figma to Webflow.mp4

05:26

37 - Convert XD to Webflow.mp4

06:37

16 - Fonts

38 - How to add fonts to webflow.mp4

04:36

39 - Production Video 3 Hero Text.mp4

15:39

40 - Line height space after letter spacing in Webflow.mp4

08:19

41 - Text & Box Button Shadows in Webflow.mp4

09:08

17 - Color

42 - How to create global swatches in Webflow.mp4

12:36

43 - What is color contrast ratio in Webflow.mp4

05:26

44 - Gradient background in Webflow.mp4

04:47

18 - Layout Level 3

45 - Navbar full width container in Webflow.mp4

09:17

46 - Webflow layout Columns vs Flex vs Grid vs None vs Inline.mp4

03:06

47 - Webflow layout Flex vs Grid which should I use.mp4

12:20

48 - Flex box layout with examples in Webflow.mp4

17:17

49 - Equal height cards with button on the bottom in Webflow.mp4

14:22

50 - Position absolute & relative explained in Webflow.mp4

09:34

51 - Sticky navbar footer webflow position sticky not working.mp4

04:24

52 - Class project 05 Portfolio Homepage.mp4

05:11

53 - Class project 05 Portfolio Homepage Solution.mp4

54:12

19 - Units

54 - How to use Px Rem & Em s in Webflow.mp4

11:36

55 - How to use VH viewport height in Webflow.mp4

08:04

20 - Navigation

56 - How to style the navbar component in Webflow.mp4

12:15

57 - Adding & connecting pages in Webflow.mp4

10:20

58 - How to make an image a link in Webflow.mp4

07:13

21 - Symbols

59 - Create a symbol & overrides in Webflow.mp4

11:59

22 - Forms

60 - How to make a contact form in Webflow.mp4

10:41

61 - How to style a form in Webflow.mp4

13:17

23 - Images Level 2

62 - Image types in Webflow SVG vs PNG vs JPG.mp4

08:11

63 - What are HiDPI & responsive images in Webflow.mp4

06:08

64 - How crop images in Webflow using object fit.mp4

02:51

65 - What is lazy load in Webflow.mp4

02:00

66 - How to change favicon in webflow.mp4

02:59

24 - Footer

67 - Footer stick to bottom in Webflow.mp4

06:27

25 - Interactions & Animations Level 2

68 - How to create a page load animation in Webflow.mp4

20:26

69 - Image fade in & get bigger on roll over in Webflow.mp4

12:12

70 - Parallax background scroll image move in Webflow.mp4

21:25

26 - SEO Level 1

71 - Is webflow good for SEO.mp4

03:35

72 - Meta description title tags robots & sitemap explained Webflow.mp4

07:29

73 - What is Image Alt text in webflow.mp4

05:43

74 - SEO Keywords in Headings & URLs in Webflow.mp4

05:52

27 - Publishing Level 2

75 - Can you export code self hosted Webflow.mp4

07:43

76 - What are read only links in Webflow for.mp4

02:43

77 - Style manager & cleaning up classes.mp4

04:42

78 - Using your own custom website domain name in Webflow.mp4

07:57

79 - Manually connecting your own custom domain name in Webflow.mp4

07:31

80 - Testing on your actual mobile phone.mp4

02:28

81 - Class project 06 Portfolio Complete.mp4

04:15

28 - Dynamic content CMS Collections

82 - What are Static vs Dynamic CMS Collection in Webflow.mp4

03:37

83 - Creating a CMS Collection in Webflow.mp4

06:52

84 - Adding the CMS collection list via CSV Webflow.mp4

05:29

85 - Adding the CMS Collection List to the webpage in Figma.mp4

09:21

86 - Reorganizing what is shown from the Webflow collection list.mp4

04:36

87 - Styling our collection list with grid & flex in Webflow.mp4

07:10

88 - Class project 07 Kitchen Collection.mp4

02:03

89 - Allowing your client to update the website in Webflow editor.mp4

07:18

90 - How to create blog using CMS Collection Pages in Webflow.mp4

07:33

91 - Linking to a collection page from the homepage in Webflow.mp4

06:38

92 - Manually linking to a collection page in Webflow.mp4

04:14

93 - How does my client add a blog post in the CMS collection in Webflow.mp4

02:24

94 - How to use rich text elements in Webflow.mp4

07:34

95 - Styling rich text in a Webflow CMS.mp4

06:56

96 - Class project 08 Blog CMS.mp4

04:06

29 - Custom Embed Code

97 - HTML embed code from Calendly Twitter & Castos.mp4

10:15

30 - Ecommerce

98 - Creating an ecommerce store in Webflow.mp4

06:20

99 - How to add products to your store in Webflow.mp4

04:55

100 - Adding your ecommerce product to a page in Webflow.mp4

05:33

101 - Adding a list of your products to the homepage.mp4

06:36

102 - Payment settings in Webflow.mp4

04:10

103 - What happens after a purchase in a Webflow store.mp4

01:32

104 - Customizing the cart settings in Webflow.mp4

05:49

105 - How to add variants in Webflow ecommerce product.mp4

05:39

106 - Adding Categories for Products CMS Collection with filters.mp4

06:53

107 - Importing a CSV to Webflow product ecommerce.mp4

04:59

108 - Float & why the cart button won t go in the Nav in Webflow.mp4

08:27

109 - Work along with Dan building the full tea store in Webflow.mp4

02:07:24

110 - Class Project 09 Ecommerce.mp4

03:32

31 - What next

111 - What next after your Webflow Essentials course.mp4

04:22

Description

Use Webflow to enable you to create responsive, accessible websites without the need for complex coding.

What You'll Learn?

Create responsive websites using Webflow.
Intuitive design techniques without the need for coding.
Basic layout techniques.
Simple animations.
Consistent design across desktop, tablet and phone views.
Flex, columns and divs.
Build your own portfolio website.
Create and style forms within your website.
Converting Adobe XD and Figma files for use within Webflow.
Sticky nav's, symbols, REM's, Floats, Gradients and Fonts.
How to optimise your website for SEO.
Create a CMS website with the ability to give responsibility to clients.
Handing over your site to admins and managers with login abilities.
Create a shopping website with digital, physical products and services.

Who is this for?

Anyone who wants to start using Webflow in their career & get paid for their user experience design skills.

This course is for beginners, newbies & amateurs in the field of Web design & Webflow.

Aimed at people new to the world of web design & user experience.

For anyone that needs to add ‘Web Designer’ to their portfolio.

Anyone who wants to learn the essentials of Webflow & Web Design.

What You Need to Know?

You'll need a Webflow account, I'll show you how to make one within the course.

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

You don't need any experience in Web Design or Webflow to get value from this course.

No previous design skills or experience required.

More details

Description
Hi, my name is Dan Scott and together, you and I are going to learn Webflow.
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!
Who this course is for:
Anyone who wants to start using Webflow in their career & get paid for their user experience design skills.
This course is for beginners, newbies & amateurs in the field of Web design & Webflow.
Aimed at people new to the world of web design & user experience.
For anyone that needs to add â€˜Web Designerâ€™ to their portfolio.
Anyone who wants to learn the essentials of Webflow & Web Design.

User Reviews

Rating

average 0

Total votes0

Focused display

Web Design

Daniel Walter Scott

Instructor's Courses

Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.I have a wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) – but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.I'm a certified Adobe instructor (ACI) in Ireland. I'm also an Adobe Certified Expert (ACE) and have completed the Adobe Certified Associate training (ACA). And I don't just do Adobe. Remember, media is a very broad term – digital blew out the borders, so we are all constantly learning.I've been teaching for 14+ years. I come from being a media designer and content creator – so I understand exactly where you're at now. I've been there. I love this stuff. Print, digital publishing, web and video. I can see how it all connects. And I can see how we can share those connections.I built Bring Your Own Laptop in Ireland, New Zealand, Australia & online. I have a great team working with me to keep BYOL at the top of Adobe and digital media training. I understand business, I have one – so I know how important it is to get it right and make it work for you.Now my focus is on Udemy. It's my mission to bring you the best training for digital media on Udemy.Daniel Walter Scott

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.