Complete Web Design: from Figma to Webflow to Freelancing
All LevelsDesignWeb Design

Complete Web Design: from Figma to Webflow to Freelancing

3 in 1 Course: Learn to design websites with Figma, build with Webflow, and make a living freelancing.

Created by Vako Shvili
21.5 hours
Video Content
200
Lectures
95,958
Students
4.7
Rating
4.7
(95,958 students enrolled)

What you'll learn

You will learn graphic design concepts like layout, typography, visual hierarchy, design tricks, and more.
You will learn how to design beautiful websites using Figma, an interface design tool used by designers at Uber, Airbnb and Microsoft.
You will learn how to take the designs and build them into websites using Webflow — a powerful site builder used by teams at Adobe, Dell, NASA and more.
You will learn secret tips of freelance web designers and how they make great money freelancing online.

Course Content

28 sections • 200 lectures • 21:32:43 total length

Getting Started

4 lectures • 12:01

What is Webflow?06:54
Sign up with Webflow00:05
Webflow Teaser04:38
⭐️ Bookmark the Resources Page ⭐️00:24

PART 1: SECRETS OF GOOD DESIGN

3 lectures • 15:04

Intro to Good Design02:34
Getting started with Figma11:34
Join the Student Hangout on Discord00:56

Layout is King

8 lectures • 41:58

It All Starts With Alignment & Grid06:49
Practice: Alignment & Grid11:10
Alignment & Grid Practice1 question
Assignment Feedback01:44
Importance of Visual Hierarchy07:20
+5 more lectures

How to Use Typography Beautifully

10 lectures • 47:40

Intro to Typography01:37
Typeface Comes With a Personality01:51
Typeface Categories06:15
Practice: Typeface Personality08:08
Typeface Personality & Categories5 questions
+10 more lectures

The Art of Color

8 lectures • 33:49

Intro to Colors01:11
Sampling Colors01:56
Practice: Sampling Colors18:42
Sampling Colors Practice1 question
Fine-tuning Colors03:58
+5 more lectures

How to Use Photos to Create Mouthwatering Websites

12 lectures • 49:59

Intro to Photos00:23
Image Overlays01:58
Practice: Image Overlays05:18
Image Overlays Practice1 question
Photo Cropping Techniques - Extreme Crop04:28
+10 more lectures

6 Design Tricks Every Designer Should Know

10 lectures • 33:48

Intro to Design Tricks00:24
Contrast03:52
White Space05:07
Repetition03:56
Consistency07:55
+7 more lectures

PART 2: PRACTICE DESIGN LIKE AN ARTIST

1 lectures • 00:18

Intro to Design Practice00:18

Practice by Mimicking Pros

5 lectures • 26:31

Mimic Method04:57
The Biggest SECRET of Great Designers: Inspiration05:52
Practice: Mood Board07:12
Mood Board Practice1 question
Practice: Figma Homepage Design08:29
+2 more lectures

Designing Your First Beautiful Web Page

5 lectures • 01:04:50

Chat App homepage design: Part 109:16
Chat App homepage design: Part 218:20
Chat App homepage design: Part 315:40
Chat App homepage design: Part 421:33
Chat App Homepage Design1 question
+1 more lectures

PART 3: WEB DEVELOPMENT (WEBFLOW)

1 lectures • 00:24

Intro to Webflow Development00:24

How Web Pages Work

5 lectures • 13:16

Webflow Designer Intro02:52
HTML & CSS03:38
The Box Model02:15
Element Hierarchy04:30
Section Notes00:01

Building Your First Web Page

22 lectures • 03:04:03

Section, Container, Div Block03:53
Read-Only Version of Chat App00:57
Size Settings13:48
Padding & Margins13:46
Section Notes00:04
+17 more lectures

Responsive Web Design: Beautiful on Any Device

8 lectures • 47:36

Intro to Responsive Web Design06:38
Responsive: Hero Section - Tablet03:57
Responsive: Hero Section - Mobile 105:16
Responsive: Hero Section - Mobile 203:03
Responsive: Nav Menu (Chat App)10:12
+3 more lectures

Going Live: Launching Your First Web Page

3 lectures • 17:28

Going Live: SEO (Chat App)07:05
Going Live: Publishing (Chat App)06:52
Webflow Editor03:31
Final Result – Chat App1 question

PART 4: CLIENT PROJECT FROM START TO FINISH

1 lectures • 01:32

Intro to Client Project01:32

Nail the Designs: Project Brief, Mood Board, Wireframes, Design

16 lectures • 02:49:12

Good Design Process08:03
Project Brief05:12
Mood Board04:44
Why Wireframing?07:35
Figma Styles03:05
+13 more lectures

Development: From Designs to Functional Website

15 lectures • 01:55:55

Intro01:02
Background Styles07:52
Read-Only Version of Team App Website00:16
Navbar (Team App)10:05
Hero Content (Team App)11:25
+10 more lectures

Interactions: Breathing Life Into Your Website

4 lectures • 25:48

Interactions Intro02:02
Card Interaction13:44
Arrow Interaction – Part 102:50
Arrow Interaction – Part 207:12

Responsive Web Design (Team App Website)

5 lectures • 27:29

Responsive: Navbar (Team App)05:43
Responsive: Hero (Team App)04:57
Responsive: Mockup Section (Team App)05:02
Responsive: Body (Team App)05:23
Responsive: Testimonials & Footer (Team App)06:24

Blog & CMS: Going From Static to Dynamic Website

17 lectures • 01:48:13

CMS & Dynamic Content01:33
Webflow CMS05:36
CMS Items03:46
Collection Page04:07
Blog: Navbar & Headline05:41
+12 more lectures

Going Live: Your Fully Functional Dynamic Website

5 lectures • 25:14

SEO & Publish (Team App)09:42
Form Submissions02:16
Custom Domain13:02
Final Result – Team App Website1 question
More Webflow Videos00:05
+1 more lectures

PART 5: SECRETS OF MAKING MONEY FREELANCING

1 lectures • 01:22

Intro to Freelancing01:22

Stunning Portfolio Website Made for You

4 lectures • 24:41

Portfolio Website04:34
Important Disclaimer00:37
Portfolio Website Tour06:15
Installing Portfolio Website13:15

Where to Find Freelance Work

5 lectures • 22:21

Finding work – Online09:51
Finding work – Studios06:35
Finding work – Networking03:12
Finding work – Conclusion00:32
Freelancing Tips From a Successful Student02:11

28 Tips to Win on Upwork

9 lectures • 46:41

Upwork Overview05:05
Tips 1-3: Getting your profile approved04:37
Tips 4-9: Create a profile that attracts clients07:02
Tips 10-12: Get the "best match" badge03:29
Tips 13-14: Propose the right price04:09
+4 more lectures

Pricing, Proposal Template, & More

6 lectures • 43:51

Pricing: How much do you charge?11:25
Pricing: Hourly vs Fixed Rate04:14
Proposal Template: Fixed Rate08:48
Proposal Template: Hourly Rate02:24
Freelance Contract05:51
+1 more lectures

PART 6: ADVANCED

7 lectures • 56:40

Intro to Advanced01:51
Webflow: Custom Modal (Pop-Up)15:16
Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)07:16
Photoshop: How To Create a Stretch Crop05:16
Photoshop: How to Cut Out an Image (Unboxing)13:57
+2 more lectures

Description

Web design is fun. It's creative.

It gives you huge self-satisfaction when you look at your work and say, "I made this.". I love that feeling after finishing something. When I lean back in my chair, look at the final result with a smile, and have this little spark joy moment.

It's especially satisfying when I know I just made $5,000.

Wouldn't you want to have that?

  • Wouldn't you want to be your own boss?

  • Working 2-3 hours a day and earning more than people working full-time?

  • Waking up whenever you want?

  • Working from home? Or Starbucks? Or the bathtub—if that’s your thing. Or maybe somewhere awesome, like Bali?

I do! That's why I got into this field. Not initially for the love of web design, though I do love it now. I got in for the lifestyle.

There are many ways one can achieve this lifestyle. This is my way—this is how I reached the life I dreamed about for years. And I’m going to teach you to do the same.

Often people think web design is complicated, that it needs creative talent or knack for computers. Sure, a lot of people make it complicated. People make the simplest things complicated—just like most subjects taught in universities.

But I don't like complicated. I like easy. I like life hacks. I like taking the shortest, simplest route to my goal. I didn’t go to art school or get a computer science degree. I’m an outsider who hacked my way into this field, and somehow, I ended up as a sought-after professional.

That’s how I’m going to teach you web design—so you’re not discouraged by needless complexity. So you enjoy the process because it's simple and fun. So you can become a freelance web designer in no time.

For example, this is a design course, but I don't teach Photoshop. Why? Because Photoshop is needlessly complicated for web design, yet people still teach it to web designers. I don't. I teach Figma—a simple tool that is taking over the design world. You will be designing a complete website within a week, while others are still learning basic layouts in Photoshop.

Second, this is a development course, but I don’t teach you how to code. Coding for web design is needlessly complicated and takes too long to learn. Instead, I teach Webflow, a tool revolutionizing web design. You’ll be building complex websites within two weeks while others are still learning HTML and CSS basics.

Third, this is a freelancing course. But I don’t just teach you how to write great proposals—I give you a winning proposal template. By the end of the course, you’ll have a stunning portfolio website, complete with portfolio pieces.

Enroll now and start whenever the time is right for you. I keep the course up to date, review every assignment, and answer every question in the Q&A.

Who this course is for:

  • Anyone who wants to launch a web design career.
  • Those looking to reboot their work life and try a new profession that’s fun, rewarding, and highly in-demand.

This course includes:

  • 21.5 hours on-demand video
  • 22 articles
  • 9 downloadable resources
  • Access on mobile and TV
  • Full lifetime access
  • Certificate of completion

Instructor

Vako Shvili

Students also download

Explore related courses to expand your learning journey.