4.76 out of 5
4.76
98 reviews on Udemy

Webflow Essentials Course

Use Webflow to enable you to create responsive, accessible websites without the need for complex coding.
Instructor:
Daniel Walter Scott
902 students enrolled
English [Auto]
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.

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!

Getting Started

1
Intro to Webflow Tutorial training course
2
Getting started with Webflow tutorial
3
What is Webflow
4
Webflow FAQs - How much is webflow
5
How to build your first website in webflow

The Brief

1
Class project 01 - Create your own Webflow brief
2
Class project 01 - Create your own Webflow brief

Layout Level 1

1
What are Container vs Sections in Webflow

CSS Classes - Level 1

1
How to create CSS classes in Webflow

Images Level 1

1
How to add images with margin in webflow
2
Background images how to overlay text on image webflow

Buttons & Navigation - Level 1

1
Buttons with a hover color in Webflow
2
Making our own custom nav in Webflow
3
How to make a mobile friendly burger menu nav bar in Webflow
4
Production Video 1 - Building Support & Next Event Sections

Links

1
Hyperlinks & remove underline & color from link in Webflow
2
Anchor link to another page section in Webflow
3
Class project 02 - Create your club page
4
Class project 02 - Create your club page

CSS Classes - Level 2

1
Understanding Webflow Combo Classes

Layout Level 2

1
Webflow grid

Responsive Design

1
What is responsive design in Webflow
2
How to make webflow responsive
3
Responsive Grids in Webflow
4
Class project 03 - Grid & Responsive Website
5
Class project 03 - Grid & Responsive Website

Interactions & Animations Level 1

1
Webflow button hover animation using Element Trigger
2
Fade in on scroll in Webflow
3
Class project 04 - Interactions
4
Class project 04 - Interactions

Publishing Level 1

1
Sharing with your design with your client
2
How much is webflow hosting site vs workspace

Workflow

1
The best Webflow shortcuts & speed tips & tricks

CSS Level 3

1
How to change the default styles in Webflow
2
Combo vs Global Classes in Webflow
3
Class naming conventions in Webflow
4
How to use style manager webflow
5
Production Video 2 - New Portfolio
6
Minimum Height vs ViewPort Heights in Webflow

Connecting with other software

1
Convert Figma to Webflow
2
Convert XD to Webflow

Fonts

1
How to add fonts to webflow
2
Production Video 3 - Hero Text
3
Line height space after letter spacing in Webflow
4
Text & Box Button Shadows in Webflow

Color

1
How to create global swatches in Webflow
2
What is color contrast ratio in Webflow
3
Gradient background in Webflow

Layout Level 3

1
Navbar full width container in Webflow
2
Webflow layout - Columns vs Flex vs Grid vs None vs Inline
3
Webflow layout Flex vs Grid which should I use
4
Flex box layout with examples in Webflow
5
Equal height cards with button on the bottom in Webflow
6
Position absolute & relative explained in Webflow
7
Sticky navbar footer webflow position sticky not working
8
Class project 05 - Portfolio Homepage
9
Class project 05 - Portfolio Homepage - Solution
10
Class project 05 - Portfolio Homepage

Units

1
How to use Px Rem & Em’s in Webflow
2
How to use VH viewport height in Webflow

Navigation

1
How to style the navbar component in Webflow
2
Adding & connecting pages in Webflow
3
How to make an image a link in Webflow

Symbols

1
Create a symbol & overrides in Webflow

Forms

1
How to make a contact form in Webflow
2
How to style a form in Webflow

Images Level 2

1
Image types in Webflow SVG vs PNG vs JPG
2
What are Hi-DPI & responsive images in Webflow
3
How crop images in Webflow using object fit
4
What is lazy load in Webflow
5
How to change favicon in webflow

Footer

1
Footer stick to bottom in Webflow

Interactions & Animations Level 2

1
How to create a page load animation in Webflow
2
Image fade in & get bigger on roll over in Webflow
3
Parallax background scroll image move in Webflow
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
Webflow Essentials Course
30-Day Money-Back Guarantee

Includes

17 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion