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

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

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

 

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

Time remaining or 525 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate