ALL COURSES 75% OFF Black Friday Deals

Complete Web Design: from Figma to Webflow to Freelancing

  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Duration: 18 Hours

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

Category Course format Language Duration Level
Art Direction, No Code Online English with Subt. 18 Hours Beginners and those with some web design experience


No prior knowledge is required; all you need is a computer with an internet connection.


Web Design is fun. It's creative. It gives you a huge self-satisfaction when you look at your work and say, "I made this!". I love that feeling after I'm done working on 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 per day and making more than what people make working full-time?

- Waking up whenever you want?

- Working from home? Or Starbucks? Or bathtub? If that's your thing. Or from some awesome place like Bali?

I do! And that's why I got into this field. Not for the love of Web Design, which I do now. But for the LIFESTYLE!

There are many ways one can achieve this lifestyle. This is my way. This is how I achieved a lifestyle I've been fantasizing about for five years. And I'm going to teach you the same.

Often people think Web Design is complicated. That it needs some creative talent or knack for computers. Sure, a lot of people make it very complicated. People make the simplest things complicated. Like most subjects taught in the universities.

But I don't like complicated. I like easy. I like life hacks. I like to take the shortest and simplest route to my destination. I haven't gone to an art school or have a computer science degree. I'm an outsider to this field who hacked himself into it, somehow ending up being a sought-after professional.

That's how I'm going to teach you Web Design. So you're not demotivated on your way with 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 you Photoshop. Because Photoshop is needlessly complicated for Web Design. But 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 how to create basic layouts in Photoshop.

Second, this is a Development course. But I don't teach you how to code. Because for Web Design coding is needlessly complicated and takes too long to learn. Instead, I teach Webflow – a tool that is taking over the web design world. You will be building complex websites within two weeks while others are still learning the basics of HTML & CSS.

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. When you're done with the course, you will have a stunning portfolio website with portfolio pieces already in it.

You will learn

  • Graphic design concepts like layout, typography, visual hierarchy, design tricks, and more.
  • How to design beautiful websites using Figma, an interface design tool used by designers at Uber, Airbnb and Microsoft.
  • 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.
  • Insider tips of freelance web designers and how they make good income freelancing online.

The course includes

  • 19 hours of video lessons
  • 19 practice assignments and projects
  • Assignment files and lecture notes
  • Active Discord group for students to connect and help each other
  • All the necessary course resources

Discover more about
this course


What you will learn
in this course.

  • Lessons
  • Lesson 1
    Getting Started
    • What is Webflow?
    • Sign up with Webflow
    • Webflow Teaser
    • Check out the Resources Page
  • Lesson 2
    Part 1: Secrets of Good Design
    • Intro to Good Design
    • Getting started with Figma
  • Lesson 3
    Layout is King
    • It All Starts With Alignment & Grid
    • Practice: Alignment & Grid
    • Assignment: Alignment & Grid
    • Importance of Visual Hierarchy
    • Practice: Visual Hierarchy
    • Assignment: Visual Hierarchy
    • Join the Student Hangout on Discord
    • Beware of Optical Illusions
    • Proximity
  • Lesson 4
    How to Use Typography Beautifully
    • Intro to Typography
    • Typeface Comes With a Personality
    • Typeface Categories
    • Practice: Typeface Personality
    • Assignment: Typeface Personality
    • Setting type
    • Practice: Setting type
    • Assignment: Setting Type
    • Two fonts only
    • Where to Find Fonts
    • Practice: Typeface Pairing
    • Assignment: Typeface Pairing
  • Lesson 5
    The Art of Color
    • Intro to Colors
    • Sampling Colors
    • Practice: Sampling Colors
    • Assignment: Sampling Colors
    • Fine-tuning Colors
    • Practice: Fine-tuning Colors
    • Assignment: Fine-tuning Colors
    • Color Hunting
    • Brand Colors
  • Lesson 6
    How to Use Photos to Create Stunning Websites
    • Intro to Photos
    • Image Overlays
    • Practice: Image Overlays
    • Assignment: Image Overlays
    • Photo Cropping Techniques - Extreme Crop
    • Photo Cropping Techniques - Soft Crop
    • Practice: Photo Cropping
    • Assignment: Photo Cropping
    • Rule of Thirds
    • Unbox it!
    • Pick Photos Like a Pro
    • Where to Find Photos
    • Practice: Finding Photos
    • Assignment: Finding Photos
  • Lesson 7
    6 Design Tricks Every Designer Should Know
    • Intro to Design Tricks
    • Contrast
    • White Space
    • Repetition
    • Overlapping
    • Practice: Overlapping
    • Assignment: Overlapping
    • Tension
    • Practice: Tension
    • Assignment: Tension
    • Consistency
  • Lesson 8
    Part 2: Practice Design Like an Artist
    • Intro to Design Practice
  • Lesson 9
    Practice by Mimicking Pros
    • Mimic Method
    • The Biggest secret of GREAT DESIGNERS: Inspiration
    • Practice: Mood Board
    • Assignment: Mood Board
    • Practice: Figma Homepage Design
    • Assignment: Figma Homepage Design
  • Lesson 10
    Designing Your First Beautiful Web Page
    • Chat App homepage design: Part 1
    • Chat App homepage design: Part 2
    • Chat App homepage design: Part 3
    • Chat App homepage design: Part 4
    • Final Project: Chat App Homepage Design
  • Lesson 11
    Part 3: Webflow Development
    • Intro to Webflow Development
  • Lesson 12
    How Web Pages Work
    • Webflow Designer Intro
    • HTML & CSS
    • The Box Model
    • Element Hierarchy
  • Lesson 13
    Building Your First Web Page
    • Section & Div Block
    • Read-Only Version of Chat App
    • Size Settings
    • Padding & Margins
    • Web Typography
    • Buttons and Links
    • CSS Classes
    • Canvas Settings
    • Images
    • Float, Columns, Display
    • Flexbox
    • Navbar (Chat App)
    • Hover
    • Middle Section (Chat App)
    • HTML Tags
    • Combo Classes
    • CTA Section (Chat App)
    • Footer (Chat App)
  • Lesson 14
    Responsive Web Design: Beautiful on Any Device
    • Intro to Responsive Web Design
    • Responsive: Hero Section - Tablet
    • Responsive: Hero Section - Mobile 1
    • Responsive: Hero Section - Mobile 2
    • Responsive: Nav Menu (Chat App)
    • Responsive: Overflow
    • Responsive: CTA Section (Chat App)
    • Responsive: Footer (Chat App)
  • Lesson 15
    Going Live: Launching Your First Web Page
    • Going Live: SEO (Chat App)
    • Going Live: Publishing (Chat App)
    • Webflow Editor
    • Assignment: Final Result – Chat App
  • Lesson 16
    Part 4: Client Project from Start to Finish
    • Intro to Client Project
  • Lesson 17
    Nail the Designs: Project Brief, Mood Board, Wireframes, Design
    • Good Design Process
    • Project Brief
    • Mood Board
    • Why Wireframing?
    • Figma Styles
    • Figma Components
    • Wireframe Kit
    • Wireframes – Homepage Part 1
    • Wireframes – Homepage Part 2
    • Wireframes – Post Page
    • Wireframes – Blog
    • Assignment: Final Result – Team App Wireframes
    • Team App Homepage Design: Part 1
    • Team App Homepage Design: Part 2
    • Team App Homepage Design: Part 3
    • Team App Blog Post Design
    • Team App Blog Design
    • Assignment: Final Result – Team App Designs
  • Lesson 18
    Development: From Designs to Functional Website
    • Intro
    • Background Styles
    • Navbar (Team App)
    • Hero Content (Team App)
    • Forms
    • Mockup Section – Part 1 (Team App)
    • Mockup Section – Part 2 (Team App)
    • Photo Sections (Team App)
    • Slider Component
    • Testimonial Slider (Team App)
    • Positioning
    • Slider Arrows
    • Footer (Team App)
    • Footer Form (Team App)
  • Lesson 19
    Interactions: Breathing Life Into Your Website
    • Interactions Intro
    • Card Interaction
    • Arrow Interaction – Part 1
    • Arrow Interaction – Part 2
  • Lesson 20
    Responsive Web Design (Team App Website)
    • Responsive: Navbar (Team App)
    • Responsive: Hero (Team App)
    • Responsive: Mockup Section (Team App)
    • Responsive: Body (Team App)
    • Responsive: Testimonials & Footer (Team App)
  • Lesson 21
    Blog & CMS: Going From Static to Dynamic Website
    • CMS & Dynamic Content
    • Webflow CMS
    • CMS Items
    • Collection Page
    • Blog: Navbar & Headline
    • Blog: Author
    • Reference Field
    • Dynamic Styles
    • Blog: Main Image
    • Rich Text
    • Blog: Author Block Bottom
    • Symbols
    • Blog: Responsive Post Page
    • Blog: Homepage
    • Collection List
    • Pagination
    • Blog: Responsive Homepage
  • Lesson 22
    Going Live: Your Fully Functional Dynamic Website
    • SEO & Publish (Team App)
    • Form Submissions
    • Custom Domain
    • Assignment: Final Result – Team App Website
  • Lesson 23
    Part 5: Secrets of Making Money Freelancing
    • Intro to Freelancing
  • Lesson 24
    Stunning Portfolio Website Made for You
    • Portfolio Website
    • Portfolio Website Tour
    • Installing Portfolio Website
  • Lesson 25
    Where to Find Freelance Work
    • Finding work – Online
    • Finding work – Studios
    • Finding work – Networking
    • Finding work – Conclusion
  • Lesson 26
    28 Tips to Win on Upwork
    • Upwork Overview
    • Tips 1-3: Getting your profile approved
    • Tips 4-9: Create a profile that attracts clients
    • Tips 10-12: Get the "best match" badge
    • Tips 13-14: Propose the right price
    • Tips 15-16: Be the freelancer they can't resist
    • Tips 17-22: Write damn good cover letters
    • Tips 23-25: Don't get yourself suspended
    • Tips 26-28: Don't get scammed
  • Lesson 27
    Pricing, Proposal Template, & More
    • Pricing: How much do you charge?
    • Pricing: Hourly vs Fixed Rate
    • Proposal Template: Fixed Rate
    • Proposal Template: Hourly Rate
    • Freelance Contract
    • Selling Webflow to Clients
    • Client Billing Feature
  • Lesson 28
    Part 6: Advanced
    • Intro to Advanced
    • Webflow: Custom Modal (Pop-Up)
    • Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)
    • Photoshop: How To Create a Stretch Crop
    • Photoshop: How to Cut Out an Image (Unboxing)
    • Photoshop: Stick Out Tutorial

Meet the teacher

Vako Shvili

Web Designer, UX/UI Designer

One day Vako had enough with the 9-to-5 grind, or more like 9-to-9 in his case, and quit his job, or more like got himself fired from his own startup. He decided to work on his dream: be his own boss, travel the world, only do the work he enjoyed, and make a lot more money in the process. No more begging for vacation days and living from paycheck to paycheck. After trying everything from e-commerce stores to professional poker his lucky break came when he started freelance design. Vako fell in love with the field that gives him the lifestyle of his dreams. Vako realizes that people who take courses on Udemy want to transform their lives. Today with his courses and mentoring Vako is helping thousands of people transform their lives, just like he did once.


Course Content

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


  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginners and those with some web design experience
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.
Start the course and grow up to the moon
Start the course and grow up to the moon

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses