Webflow Essentials Course

Webflow Essentials Course, available at $94.99, has an average rating of 4.82, with 111 lectures, based on 1016 reviews, and has 6572 subscribers.

You will learn about 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. This course is ideal for individuals who are Anyone who wants to start using Webflow in their career & get paid for their user experience design skills. or This course is for beginners, newbies & amateurs in the field of Web design & Webflow. or Aimed at people new to the world of web design & user experience. or For anyone that needs to add ‘Web Designer’ to their portfolio. or Anyone who wants to learn the essentials of Webflow & Web Design. It is particularly useful for Anyone who wants to start using Webflow in their career & get paid for their user experience design skills. or This course is for beginners, newbies & amateurs in the field of Web design & Webflow. or Aimed at people new to the world of web design & user experience. or For anyone that needs to add ‘Web Designer’ to their portfolio. or Anyone who wants to learn the essentials of Webflow & Web Design.

Enroll now: Webflow Essentials Course

Summary

Title: Webflow Essentials Course

Price: $94.99

Average Rating: 4.82

Number of Lectures: 111

Number of Published Lectures: 111

Number of Curriculum Items: 120

Number of Published Curriculum Objects: 120

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will 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 Should Attend

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.

Target Audiences

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.

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!

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Intro to Webflow Tutorial training course

Lecture 2: Getting started with Webflow tutorial

Lecture 3: What is Webflow

Lecture 4: Webflow FAQs – How much is webflow

Lecture 5: How to build your first website in webflow

Chapter 2: The Brief

Lecture 1: Class project 01 – Create your own Webflow brief

Chapter 3: Layout Level 1

Lecture 1: What are Container vs Sections in Webflow

Chapter 4: CSS Classes – Level 1

Lecture 1: How to create CSS classes in Webflow

Chapter 5: Images Level 1

Lecture 1: How to add images with margin in webflow

Lecture 2: Background images how to overlay text on image webflow

Chapter 6: Buttons & Navigation – Level 1

Lecture 1: Buttons with a hover color in Webflow

Lecture 2: Making our own custom nav in Webflow

Lecture 3: How to make a mobile friendly burger menu nav bar in Webflow

Lecture 4: Production Video 1 – Building Support & Next Event Sections

Chapter 7: Links

Lecture 1: Hyperlinks & remove underline & color from link in Webflow

Lecture 2: Anchor link to another page section in Webflow

Lecture 3: Class project 02 – Create your club page

Chapter 8: CSS Classes – Level 2

Lecture 1: Understanding Webflow Combo Classes

Chapter 9: Layout Level 2

Lecture 1: Webflow grid

Chapter 10: Responsive Design

Lecture 1: What is responsive design in Webflow

Lecture 2: How to make webflow responsive

Lecture 3: Responsive Grids in Webflow

Lecture 4: Class project 03 – Grid & Responsive Website

Chapter 11: Interactions & Animations Level 1

Lecture 1: Webflow button hover animation using Element Trigger

Lecture 2: Fade in on scroll in Webflow

Lecture 3: Class project 04 – Interactions

Chapter 12: Publishing Level 1

Lecture 1: Sharing with your design with your client

Lecture 2: How much is webflow hosting site vs workspace

Chapter 13: Workflow

Lecture 1: The best Webflow shortcuts & speed tips & tricks

Chapter 14: CSS Level 3

Lecture 1: How to change the default styles in Webflow

Lecture 2: Combo vs Global Classes in Webflow

Lecture 3: Class naming conventions in Webflow

Lecture 4: How to use style manager webflow

Lecture 5: Production Video 2 – New Portfolio

Lecture 6: Minimum Height vs ViewPort Heights in Webflow

Chapter 15: Connecting with other software

Lecture 1: Convert Figma to Webflow

Lecture 2: Convert XD to Webflow

Chapter 16: Fonts

Lecture 1: How to add fonts to webflow

Lecture 2: Production Video 3 – Hero Text

Lecture 3: Line height space after letter spacing in Webflow

Lecture 4: Text & Box Button Shadows in Webflow

Chapter 17: Color

Lecture 1: How to create global swatches in Webflow

Lecture 2: What is color contrast ratio in Webflow

Lecture 3: Gradient background in Webflow

Chapter 18: Layout Level 3

Lecture 1: Navbar full width container in Webflow

Lecture 2: Webflow layout – Columns vs Flex vs Grid vs None vs Inline

Lecture 3: Webflow layout Flex vs Grid which should I use

Lecture 4: Flex box layout with examples in Webflow

Lecture 5: Equal height cards with button on the bottom in Webflow

Lecture 6: Position absolute & relative explained in Webflow

Lecture 7: Sticky navbar footer webflow position sticky not working

Lecture 8: Class project 05 – Portfolio Homepage

Lecture 9: Class project 05 – Portfolio Homepage – Solution

Chapter 19: Units

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

Lecture 2: How to use VH viewport height in Webflow

Chapter 20: Navigation

Lecture 1: How to style the navbar component in Webflow

Lecture 2: Adding & connecting pages in Webflow

Lecture 3: How to make an image a link in Webflow

Chapter 21: Symbols

Lecture 1: Create a symbol & overrides in Webflow

Chapter 22: Forms

Lecture 1: How to make a contact form in Webflow

Lecture 2: How to style a form in Webflow

Chapter 23: Images Level 2

Lecture 1: Image types in Webflow SVG vs PNG vs JPG

Lecture 2: What are Hi-DPI & responsive images in Webflow

Lecture 3: How crop images in Webflow using object fit

Lecture 4: What is lazy load in Webflow

Lecture 5: How to change favicon in webflow

Chapter 24: Footer

Lecture 1: Footer stick to bottom in Webflow

Chapter 25: Interactions & Animations Level 2

Lecture 1: How to create a page load animation in Webflow

Lecture 2: Image fade in & get bigger on roll over in Webflow

Lecture 3: Parallax background scroll image move in Webflow

Instructors

Daniel Walter Scott
Adobe Certified Instructor & Adobe Certified Expert

Rating Distribution

1 stars: 4 votes
2 stars: 5 votes
3 stars: 38 votes
4 stars: 233 votes
5 stars: 736 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

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!

Menu