Look no further. Learn all you need to know about Webflow in an all-in-one single course to stand out of the crowd.
What you will 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
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
English
language
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