
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
Time remaining or 525 enrolls left
Don’t miss any coupons by joining our Telegram group |