Your One-Stop Shop to Learn Webflow for Freelancing in 2022

Look no further. Learn all you need to know about Webflow in an all-in-one single course to stand out of the crowd.

Language: english

Note: 4.5/5 (2 notes) 510 students

Instructor(s): Akbar Bakhshi

Last update: 2022-03-21

What you’ll learn

Learn the ins and outs of Webflow Designer
Add and style Webflow elements and layouts
Add different types of animations and interactions to elements
Learn proper techniques to make a responsive website
Build an outstanding responsive portfolio website in Webflow
Connect Webflow website to a custom domain
How to take advantage of Webflow paid plans

Requirements

No prior experience with Webflow is needed. You will learn everything you need to know.
Basic knowledge of html and css can help with the learning process, but definitely not required.

Description

Whether you are just thinking about starting to learn web development or you have already built many websites, whether you are a designer who wants to design and build eye-catching websites on a single platform, or if you want to build websites as a freelancer quickly and efficiently, this course is all you need. In this course, you will learn:

Webflow Basics such as how to set up your account, create projects, and share them
All you need to know about Webflow Designer and Webflow Editor
Adding custom fonts
Setting up forms with reCAPTCHA
Adding Google Maps to a website
All you need to know about interactions and animations in Webflow
- Mouse hover and click effects
- Scroll based animations
- Creating custom cursors
- Horizontal scrolling inside a webpage
- Customizing interactions for touch screens
Build a production-ready website
Add custom domains, Google Analytics
How to take advantage of Webflow CMS in your projects
Adding Lottie animations to a website
Making your Website responsive (Webflow limitations and how to fix them)
TWO BIG PROJECTS to put all you have learned into practice
- A multi-page landing website for a mobile application
- An outstanding professional personal portfolio to showcase all your work to help you land more jobs as a freelancer
A supplemental section on how to integrate custom code in a Webflow website
- Add custom CSS and Javascript code to facilitate transitions, effects, etc. on a website
- Export all the HTML, CSS, and Javascript code
- How to use Webflow as a tool to help design and develop websites outside Webflow
- Use exported code from Webflow to host your Website on Github Pages

Who this course is for

Anyone (including Non-programmers) who are looking for a career change to web design and development
Everyone who is interested in learning Webflow for personal and professional gains
Anyone who is interested in starting a freelancing career to build websites quickly and efficiently
Business owners who want to make a landing website for their business quickly with minimal costs
Designers who want to expand their area of expertise in the development field as well

Course content

Introduction
- Introduction
- Adjusting Video Play Speed
- Course Outline
- Getting Started with Webflow
- Webflow Plans
- Webflow Forum
Webflow Basics
- General Layouts and Elements in a Website
- How to Share Your Webflow Project With Others
- Layouts and Basic Styling in Webflow
- Custom (pre-styled) Layouts in Webflow
- Grid Layout in Webflow
- Creating Pages – Explore Other Elements and Styles
- Webflow Navbars and Responsiveness
Project 1 – Building A Multi-Page Responsive Website
- Overview of Project #1 – What We Will Be Building
- Final Project Link
- Project Settings – Adding Favicon and External Font
- Home Page – Hero Section
- Home page – Hero Section Responsiveness
- Home Page – App Features Section
- Home Page – Footer Section and Fixed Navbar
- Adding About Page and Symbols
- About Page – Team Members
- About Page – FAQ Section
- About Page – Contact Form and Google Maps
- Final Touches – Link to Sections, Test on Physical Device, SEO, Webflow Editor
Animations in Webflow
- Page Trigger
- Element Trigger
- Element Trigger Scroll Animations
- Page Trigger Scroll Animations
- Creating a Custom Mouse Cursor
- Add Animations to Our Static Website (Project #1)
Project 2 – Building our Portfolio Website – Development
- Overview of Our Portfolio Project
- Final Finished Portfolio Project Link
- Project Settings
- Navigation Menu – Adding Elements and Styles
- Navigation Menu – Animations and Interactions
- Home Page – Hero Section (Part 1)
- Home Page – Hero Section (Part 2)
- Home Page – About Section
- Home Page – Images Section With Horizontal Scrolling
- Home Page – Footer Section
- Work Page – Hero Section
- Work Page – Portfolio Projects Section
- Work Page – Contact Section
Project 2 – Building Our Portfolio Website – Production
- Introduction to Webflow CMS
- CMS for Portfolio Projects
- SEO and Google Analytics
Supplemental Section – Webflow Paid Accounts
- Add Custom Code in Webflow
- Final Custom Code for Next Lecture
- Custom Cursor and Touch Screen Detection
- Final Javascript Code for Next Lecture
- Add Page Load/Transition Animation
- Read This Before Watching Next Lecture
- Add Custom Domain to Webflow Project
- Extract and Host Our Code on Github Pages
- Javascript Code for the Next Lecture
- Using Formspree To Collect Form Data
- Final Thoughts
- Bonus Lecture