Webflow Essentials Course

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.

Requirements

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.

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!

Overview

Section 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

Section 2: The Brief

Lecture 6 Class project 01 - Create your own Webflow brief

Section 3: Layout Level 1

Lecture 7 What are Container vs Sections in Webflow

Section 4: CSS Classes - Level 1

Lecture 8 How to create CSS classes in Webflow

Section 5: Images Level 1

Lecture 9 How to add images with margin in webflow

Lecture 10 Background images how to overlay text on image webflow

Section 6: Buttons & Navigation - Level 1

Lecture 11 Buttons with a hover color in Webflow

Lecture 12 Making our own custom nav in Webflow

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

Lecture 14 Production Video 1 - Building Support & Next Event Sections

Section 7: Links

Lecture 15 Hyperlinks & remove underline & color from link in Webflow

Lecture 16 Anchor link to another page section in Webflow

Lecture 17 Class project 02 - Create your club page

Section 8: CSS Classes - Level 2

Lecture 18 Understanding Webflow Combo Classes

Section 9: Layout Level 2

Lecture 19 Webflow grid

Section 10: Responsive Design

Lecture 20 What is responsive design in Webflow

Lecture 21 How to make webflow responsive

Lecture 22 Responsive Grids in Webflow

Lecture 23 Class project 03 - Grid & Responsive Website

Section 11: Interactions & Animations Level 1

Lecture 24 Webflow button hover animation using Element Trigger

Lecture 25 Fade in on scroll in Webflow

Lecture 26 Class project 04 - Interactions

Section 12: Publishing Level 1

Lecture 27 Sharing with your design with your client

Lecture 28 How much is webflow hosting site vs workspace

Section 13: Workflow

Lecture 29 The best Webflow shortcuts & speed tips & tricks

Section 14: CSS Level 3

Lecture 30 How to change the default styles in Webflow

Lecture 31 Combo vs Global Classes in Webflow

Lecture 32 Class naming conventions in Webflow

Lecture 33 How to use style manager webflow

Lecture 34 Production Video 2 - New Portfolio

Lecture 35 Minimum Height vs ViewPort Heights in Webflow

Section 15: Connecting with other software

Lecture 36 Convert Figma to Webflow

Lecture 37 Convert XD to Webflow

Section 16: Fonts

Lecture 38 How to add fonts to webflow

Lecture 39 Production Video 3 - Hero Text

Lecture 40 Line height space after letter spacing in Webflow

Lecture 41 Text & Box Button Shadows in Webflow

Section 17: Color

Lecture 42 How to create global swatches in Webflow

Lecture 43 What is color contrast ratio in Webflow

Lecture 44 Gradient background in Webflow

Section 18: Layout Level 3

Lecture 45 Navbar full width container in Webflow

Lecture 46 Webflow layout - Columns vs Flex vs Grid vs None vs Inline

Lecture 47 Webflow layout Flex vs Grid which should I use

Lecture 48 Flex box layout with examples in Webflow

Lecture 49 Equal height cards with button on the bottom in Webflow

Lecture 50 Position absolute & relative explained in Webflow

Lecture 51 Sticky navbar footer webflow position sticky not working

Lecture 52 Class project 05 - Portfolio Homepage

Lecture 53 Class project 05 - Portfolio Homepage - Solution

Section 19: Units

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

Lecture 55 How to use VH viewport height in Webflow

Section 20: Navigation

Lecture 56 How to style the navbar component in Webflow

Lecture 57 Adding & connecting pages in Webflow

Lecture 58 How to make an image a link in Webflow

Section 21: Symbols

Lecture 59 Create a symbol & overrides in Webflow

Section 22: Forms

Lecture 60 How to make a contact form in Webflow

Lecture 61 How to style a form in Webflow

Section 23: Images Level 2

Lecture 62 Image types in Webflow SVG vs PNG vs JPG

Lecture 63 What are Hi-DPI & responsive images in Webflow

Lecture 64 How crop images in Webflow using object fit

Lecture 65 What is lazy load in Webflow

Lecture 66 How to change favicon in webflow

Section 24: Footer

Lecture 67 Footer stick to bottom in Webflow

Section 25: Interactions & Animations Level 2

Lecture 68 How to create a page load animation in Webflow

Lecture 69 Image fade in & get bigger on roll over in Webflow

Lecture 70 Parallax background scroll image move in Webflow

Section 26: SEO Level 1

Lecture 71 Is webflow good for SEO

Lecture 72 Meta description title tags robots & sitemap explained Webflow

Lecture 73 What is Image Alt text in webflow

Lecture 74 SEO Keywords in Headings & URLs in Webflow

Section 27: Publishing Level 2

Lecture 75 Can you export code self hosted Webflow

Lecture 76 What are read only links in Webflow for

Lecture 77 Style manager & cleaning up classes

Lecture 78 Using your own custom website domain name in Webflow

Lecture 79 Manually connecting your own custom domain name in Webflow

Lecture 80 Testing on your actual mobile phone

Lecture 81 Class project 06 - Portfolio Complete

Section 28: Dynamic content / CMS / Collections

Lecture 82 What are Static vs Dynamic CMS Collection in Webflow

Lecture 83 Creating a CMS Collection in Webflow

Lecture 84 Adding the CMS collection list via CSV Webflow

Lecture 85 Adding the CMS Collection List to the webpage in Figma

Lecture 86 Reorganizing what is shown from the Webflow collection list

Lecture 87 Styling our collection list with grid & flex in Webflow

Lecture 88 Class project 07 - Kitchen Collection

Lecture 89 Allowing your client to update the website in Webflow editor

Lecture 90 How to create blog using CMS Collection Pages in Webflow

Lecture 91 Linking to a collection page from the homepage in Webflow

Lecture 92 Manually linking to a collection page in Webflow

Lecture 93 How does my client add a blog post in the CMS collection in Webflow

Lecture 94 How to use rich text elements in Webflow

Lecture 95 Styling rich text in a Webflow CMS

Lecture 96 Class project 08 - Blog CMS

Section 29: Custom Embed Code

Lecture 97 HTML embed code from Calendly, Twitter & Castos

Section 30: Ecommerce

Lecture 98 Creating an ecommerce store in Webflow

Lecture 99 How to add products to your store in Webflow

Lecture 100 Adding your ecommerce product to a page in Webflow

Lecture 101 Adding a list of your products to the homepage

Lecture 102 Payment settings in Webflow

Lecture 103 What happens after a purchase in a Webflow store

Lecture 104 Customizing the cart settings in Webflow

Lecture 105 How to add variants in Webflow ecommerce product

Lecture 106 Adding Categories for Products CMS Collection with filters

Lecture 107 Importing a CSV to Webflow product ecommerce

Lecture 108 Float & why the cart button won’t go in the Nav in Webflow

Lecture 109 Work along with Dan building the full tea store in Webflow

Lecture 110 Class Project 09 - Ecommerce

Section 31: What next

Lecture 111 What next after your Webflow Essentials course

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.