Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Webflow Essentials: Beginner's Guide to Building Beautiful Websites

via Skillshare

Overview

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.

You can get Webflow by clicking here.

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!

Syllabus

  • Introduction to Webflow Training Course
  • Getting Started with Webflow Tutorial
  • What is Webflow
  • Webflow FAQs - How Much is Webflow Part 1
  • Webflow FAQs - How Much is Webflow Part 2
  • Webflow FAQs - How Much is Webflow Part 3
  • How to Build Your First Website in Webflow
  • Class project 01 - Create Your Own Webflow Brief
  • What are Container vs Sections in Webflow
  • How to Create CSS Classes in Webflow
  • How to add Images with Margin in Webflow
  • Background Images How to Overlay Text on Image Webflow
  • Buttons with a Hover Color in Webflow
  • Making Our Own Custom Nav in Webflow
  • How to Make a Mobile Friendly Burger Menu Nav Bar in Webflow
  • Production Video 1 - Building Support & Next Event Sections
  • Hyperlinks & Remove Underline & Color From Link in Webflow
  • Anchor Link to Another Page Section in Webflow
  • Class project 02 - Create Your Club Page
  • Understanding Webflow Combo Classes
  • Webflow Grid
  • What is Responsive Design in Webflow
  • How to Make Webflow Responsive
  • Responsive Grids in Webflow
  • Class project 03 - Grid & Responsive WebsiteClass project 03 - Grid & Responsive Website
  • Webflow Button Hover Animation Using Element Trigger
  • Fade in on Scroll in Webflow
  • Class Project 04 - Interactions
  • Sharing With Your Design With Your Client
  • How Much Is Webflow Hosting Site vs Workspace
  • The Best Webflow Shortcuts & Speed Tips & Tricks
  • How To Change the Default Styles in Webflow
  • Combo vs Global Classes in Webflow
  • Class Naming Conventions in Webflow
  • How to use Style Manager Webflow
  • Production Video 2 - New Portfolio
  • Minimum Height vs ViewPort Heights in Webflow
  • Convert Figma to Webflow
  • Convert XD to Webflow
  • How to Add Fonts to Webflow
  • Production Video 3 - Hero Text
  • Line Height Space After Letter Spacing in Webflow
  • Text & Box Button Shadows in Webflow
  • How to Create Global Swatches in Webflow
  • What is Color Contrast Ratio in Webflow
  • Gradient Background in Webflow
  • Navbar Full Width Container in Webflow
  • Webflow Layout - Columns vs Flex vs Grid vs None vs Inline
  • Webflow Layout Flex vs Grid which should I use
  • Flex Box Layout With Examples in Webflow
  • Equal Height Cards With Button on the Bottom in Webflow
  • Position Absolute & Relative Explained in Webflow
  • Sticky Navbar Footer Webflow Position Sticky Not Working
  • Class Project 05 - Portfolio Homepage
  • Class Project 05 - Portfolio Homepage - Solution Part 1
  • Class Project 05 - Portfolio Homepage - Solution Part 2
  • How to use Px Rem & Em’s in Webflow
  • How to use VH viewport Height in Webflow
  • How to Style the Navbar Component in Webflow
  • Adding & Connecting Pages in Webflow
  • How to Make an Image Link in Webflow
  • Create a Symbol & Overrides in Webflow
  • How to Make a Contact Form in Webflow
  • How to Style a Form in Webflow
  • Image Types in Webflow SVG vs PNG vs JPG
  • What are Hi-DPI & Responsive Images in Webflow
  • How Crop Images in Webflow Using Object Fit
  • What is Lazy Load in Webflow
  • How to Change Favicon in Webflow
  • Footer Stick to Bottom in Webflow
  • How to Create a Page Load Animation in Webflow
  • Image Fade In & Get Bigger On Roll Over in Webflow
  • Parallax Background Scroll Image Move in Webflow
  • Is Webflow Good For SEO
  • Meta Description Title Tags Robots & Sitemap Explained Webflow
  • What is Image Alt Text in webflow
  • SEO Keywords in Headings & URLs in Webflow
  • Can You Export Code Self Hosted Webflow
  • What Are Read Only Links in Webflow For
  • Style Manager & Cleaning Up Classes
  • Using Your Own Custom Website Domain Name in Webflow
  • Manually Connecting Your Own Custom Domain Name in Webflow
  • Testing on Your Actual Mobile Phone
  • Class project 06 - Portfolio Complete
  • What are Static vs Dynamic CMS Collection in Webflow
  • Creating a CMS Collection in Webflow
  • Adding the CMS Collection List via CSV Webflow
  • Adding the CMS Collection List to the Webpage in Figma
  • Reorganizing What is Shown From the Webflow Collection List
  • Styling our Collection List With Grid & Flex in Webflow
  • Class project 07 - Kitchen Collection
  • Allowing Your Client to Update the Website in Webflow Editor
  • How to Create Blog Using CMS Collection Pages in Webflow
  • Linking to a Collection Page From the Homepage in Webflow
  • Manually Linking to a Collection Page in Webflow
  • How Does My Client Add a Blog Post in the CMS Collection in Webflow
  • How To Use Rich Text Elements in Webflow
  • Styling Rich Text in a Webflow CMS
  • Class project 08 - Blog CMS
  • HTML Embed Code From Calendly, Twitter & Castos
  • Creating an Ecommerce Store in Webflow
  • How to Add Products to Your Store in Webflow
  • Adding Your Ecommerce Product to a Page in Webflow
  • Adding a List of Your Products to the Homepage
  • Payment Settings in Webflow
  • What Happens After a Purchase in a Webflow Store
  • Customizing the Cart Settings in Webflow
  • How to Add Variants in Webflow Ecommerce Product
  • Adding Categories for Products CMS Collection with Filters
  • Importing a CSV to Webflow Product Ecommerce
  • Float & Why the Cart Button Won’t go in the Nav in Webflow
  • Work Along With Dan Building the Full Tea Store in Webflow Part 1
  • Work Along with Dan Building the Full Tea kStore in Webflow Part 2
  • Work Along with Dan Building the Full Tea Store in Webflow Part 3
  • Work Along with Dan Building the Full Tea Store in Webflow Part 4
  • Class Project 08 - Ecommerce
  • What Next After Your Webflow Essentials Course

Taught by

Daniel Scott

Reviews

Start your review of Webflow Essentials: Beginner's Guide to Building Beautiful Websites

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.