Complete Webflow Bootcamp: From Figma Design to Development to Freelancing

Name: Complete Webflow Bootcamp: From Figma Design to Development to Freelancing
Author: Arash Ahadzadeh

By Arash Ahadzadeh

Language: English
Certificate: of completion
Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
Duration: 11 Hours 36 Mins

Now

24.99$

/$50

Do you want to become a web designer and a web developer, but you don't know how to code? Have you ever wanted to build custom websites without writing a single line of code? This course will allow you to develop your web design and development skills, and add web developer to your CV to start getting clients for your skills.

Category	Course format	Language	Duration	Level
UX Design, No Code	Online	English with Subt.	11 Hours 36 Mins	Beginners

Introduction

Hi everyone. I'm Arash, and I'm a UI/UX designer and a web developer. In the past few years, I have helped over 50,000 designers worldwide to build their own UI/UX design business from the ground up. In this course, I will help you learn and master Webflow comprehensively from scratch.

Webflow is an innovative and brilliant tool for web designers. It allows you to build custom websites visually. Don't get me wrong; it's not a website builder like Wix or Squarespace that comes with extensive limitations. On the contrary, it allows you to build modern and responsive websites without any limitations visually. It's used by everyone from entrepreneurs and start-ups to Dell, Zendesk, etc.

Many designers think that web development is hard, boring, and complex, but I will teach you how to develop amazing websites in a simple, fun, and engaging way.

This is not another development course where you learn HTML & CSS. Instead, you will learn how to convert any design to a fully responsive website with complex animations and interaction without code.

Description

In the first part of the course, I will teach you the basics of web development, and we will go through all the features of Webflow in the Webflow Academy section. In the second part of the course, you will put everything you learned into practice by building a complete website for a design agency from scratch. Next, we will dive into advanced topics like responsivity, animations, and interactions. Last but not least, you will learn how to optimize a website for search engines (SEO).

In the last part of the course, we will talk about the business side of the web design industry. You will learn how to get your very first client, how to price your work, how to prepare amazing proposals, and so much more. Eventually, you will learn how to become a world-class freelance web developer and how to run your own web development business.

Requirements

It's an amazing course for people with zero web development experience, or for experienced UI/UX designers who want to learn and master Webflow and become no-code web developers. By the end of this course, you’ll have a complete, real-world project for your own portfolio, and every student will have the knowledge and confidence to apply for a web developer job.

With over 11 hours of content across 80+ lectures, I will take you from beginner to expert, and teach you everything you need to know in order to use Webflow in a professional manner.

You will learn

Fundamentals of Webflow
How to structure a web page
How to build a complete modern website from scratch
Advanced Tips & Tricks
Master Webflow

The course includes

11 Hours 36 Mins of condensed knowledge
Immediate access to the entire collection of videos
Valuable links and resources for every lesson
Source Files: Figma and Webflow
Certificate of completion

Modules

What you will learn
in this course.

Lessons

Chapters

Duration
Lesson 1

Webflow Academy

25

1 Hour 49 Mins

View more
- Introduction to Webflow
  
  02:02 Mins
- Environment of Webflow
  
  05:52 Mins
- Introduction to HTML & CSS
  
  04:16 Mins
- Introduction to the Box Model
  
  02:06 Mins
- Webflow Elements
  
  03:49 Mins
- Div Block
  
  04:06 Mins
- Section
  
  03:57 Mins
- Container
  
  02:46 Mins
- Grid
  
  08:13 Mins
- List
  
  02:34 Mins
- Link Block
  
  04:23 Mins
- Button
  
  02:23 Mins
- Typography
  
  06:59 Mins
- Image
  
  03:37 Mins
- Video
  
  01:48 Mins
- Lottie Animation
  
  01:32 Mins
- Forms
  
  11:12 Mins
- Nav Bar
  
  03:14 Mins
- Lightbox
  
  06:23 Mins
- Slider
  
  06:01 Mins
- Tabs
  
  05:53 Mins
- Social Media
  
  02:52 Mins
- Search
  
  02:25 Mins
- Symbols
  
  08:11 Mins
- Important Shortcuts
  
  02:41 Mins
Lesson 2

Layout & Design in Webflow

15

2 Hours 29 Mins

View more
- Classes
  
  12:31 Mins
- Display Settings
  
  11:54 Mins
- Flexbox
  
  08:16 Mins
- Flexbox Challenge
  
  01:11 Mins
- Challenge Solution
  
  13:05 Mins
- Flexbox vs. Grid
  
  03:33 Mins
- Spacing
  
  05:30 Mins
- Size
  
  16:24 Mins
- Position
  
  15:12 Mins
- Typography
  
  11:01 Mins
- Backgrounds
  
  14:12 Mins
- Borders
  
  08:10 Mins
- Effects
  
  07:24 Mins
- States
  
  07:54 Mins
- Breakpoint Basics
  
  12:52 Mins
Lesson 3

Build Your First Website

26

5 Hours 45 Mins

View more
- Setting up Your Project
  
  09:08 Mins
- Navigation Bar
  
  17:38 Mins
- Hero Section
  
  23:44 Mins
- Clients Section
  
  05:35 Mins
- Projects Section
  
  17:51 Mins
- Testimonial Section
  
  19:05 Mins
- Services Section
  
  15:04 Mins
- CTA Section
  
  16:09 Mins
- Footer
  
  08:45 Mins
- CMS & Dynamic Content
  
  28:42 Mins
- Project Page - Part 1
  
  04:51 Mins
- Project Page - Part 2
  
  16:18 Mins
- Project Page - Part 3
  
  06:48 Mins
- Contact Page
  
  15:35 Mins
- Introduction to Responsiveness
  
  01:33 Mins
- Responsiveness: Tablet
  
  17:37 Mins
- Responsiveness: Mobile Landscape
  
  12:13 Mins
- Responsiveness: Mobile Portrait
  
  10:33 Mins
- Animations & Interactions - Part 1
  
  12:40 Mins
- Animations & Interactions - Part 2
  
  16:57 Mins
- Animations & Interactions - Part 3
  
  19:13 Mins
- Accessibility
  
  14:49 Mins
- Project Settings
  
  08:44 Mins
- Editor
  
  11:34 Mins
- Publish Your Website
  
  04:40 Mins
- Webflow Plans
  
  09:40 Mins
Lesson 4

SEO & Optimizations

2

16:00 Mins

View more
- Intro to SEO
  
  07:35 Mins
- Site Verification & Google Analytics
  
  08:25 Mins
Lesson 5

Advanced Tips & Tricks

6

46:03 Mins

View more
- Image Optimization & Lazy Load
  
  09:07 Mins
- Custom Attributes
  
  03:33 Mins
- How to create a pop-up?
  
  09:55 Mins
- Custom Code & Integration
  
  12:03 Mins
- Lottie Animation
  
  06:27 Mins
- Naming Convention
  
  04:58 Mins
Lesson 6

Work With Clients

9

27:25 Mins

View more
- Introduction to the Freelance World
  
  00:47 Mins
- How to Get Clients?
  
  02:58 Mins
- Sending a Proposal
  
  05:17 Mins
- Pricing Your Work
  
  06:32 Mins
- Meeting Your Clients
  
  01:59 Mins
- Webflow Pitch
  
  03:43 Mins
- Webflow Hosting
  
  02:33 Mins
- How to Deliver the Project to the Client?
  
  02:50 Mins
- What to do Next?
  
  00:46 Mins

Meet the teacher

Arash Ahadzadeh

UI/UX designer - Instructor at the University of Economics and Human Sciences in Warsaw

I am a UI/UX Designer with +10 years of graphic design and UI/UX design experience. I teach UI/UX design at the University of Economics and Human Sciences in Warsaw. My passion is helping people to learn new skills in short-term courses and achieve their goals.

Now