CF

Complete Web Design: from Figma to Webflow to Freelancing

19h 10m 59s
English
Paid
Updated September 2026

Complete Web Design: from Figma to Webflow to Freelancing is a 179-lesson 19 hours 10 minutes self-paced course by Udemy. Complete Web Design: from Figma to Webflow to Freelancing walks you through the full path from a blank canvas to a launched website, and then into taking on client work.

Course facts

Lessons
179
Duration
19 hours 10 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Udemy
Price
Premium

Complete Web Design: from Figma to Webflow to Freelancing walks you through the full path from a blank canvas to a launched website, and then into taking on client work.

The Workflow You'll Practice

Rather than jumping straight into code, the course starts in Figma, where you design layouts before touching a page builder. From there you move into Webflow to turn those designs into a live, responsive site.

What You'll Build Toward

  • Designing web pages in Figma with an eye toward how they'll be built
  • Translating a design into a working Webflow project
  • Understanding the basics of freelancing as a web designer

The course runs 179 lessons, giving you room to move at a steady pace from design fundamentals through to your first freelance-ready projects.

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.

Requirements:

  • No requirements. You don't have to be creative or good with math. Those are Design and Development myths.

Who this course is for:
  • This course is for those who want to launch a Freelance Web Design career.
  • Those who are looking to reboot their work life and try a new profession that is fun, rewarding and highly in-demand.

What you'll learn:

  • 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 your designs and build them into powerful websites using Webflow, a state-of-the-art 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.

Who teaches Complete Web Design: from Figma to Webflow to Freelancing? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Complete Web Design: from Figma to Webflow to Freelancing?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 179 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What is Webflow?
All Course Lessons (179)
#Lesson TitleDurationAccess
1
What is Webflow? Demo
07:07
2
Webflow Teaser
04:13
3
Intro to Good Design
02:35
4
Getting started with Figma
06:56
5
It All Starts With Alignment & Grid
06:50
6
Practice: Alignment & Grid
09:19
7
Importance of Visual Hierarchy
07:21
8
Practice: Visual Hierarchy
08:35
9
Beware of Optical Illusions
03:53
10
Proximity
01:43
11
Intro to Typography
01:38
12
Typeface Comes With a Personality
01:52
13
Typeface Categories
06:15
14
Practice: Typeface Personality
06:14
15
Setting type
08:31
16
Practice: Setting type
07:04
17
Two fonts only
02:48
18
Where to Find Fonts
03:58
19
Practice: Typeface Pairing
07:01
20
Intro to Colors
01:12
21
Sampling Colors
01:57
22
Practice: Sampling Colors
13:34
23
Fine-tuning Colors
03:59
24
Practice: Fine-tuning Colors
02:32
25
Color Hunting
02:36
26
Brand Colors
02:21
27
Intro to Photos
00:24
28
Image Overlays
02:00
29
Practice: Image Overlays
04:58
30
Photo Cropping Techniques - Extreme Crop
04:29
31
Photo Cropping Techniques - Soft Crop
04:38
32
Practice: Photo Cropping
11:10
33
Rule of Thirds
04:39
34
Unbox it!
04:48
35
Pick Photos Like a Pro
06:14
36
Where to Find Photos
03:28
37
Practice: Finding Photos
04:54
38
Intro to Design Tricks
00:26
39
Contrast
03:54
40
White Space
05:08
41
Repetition
03:57
42
Consistency
07:57
43
Overlapping
03:45
44
Practice: Overlapping
00:58
45
Tension
02:33
46
Practice: Tension
03:46
47
Intro to Design Practice
00:19
48
Mimic Method
04:58
49
The Biggest SECRET of Great Designers: Inspiration
05:52
50
Practice: Mood Board
05:43
51
Practice: Figma Homepage Design
07:12
52
Chat App homepage design: Part 1
08:27
53
Chat App homepage design: Part 2
16:11
54
Chat App homepage design: Part 3
13:54
55
Chat App homepage design: Part 4
17:37
56
Intro to Webflow Development
00:25
57
Webflow Designer Intro
04:08
58
HTML & CSS
03:37
59
The Box Model
02:16
60
Element Hierarchy
03:53
61
Section & Div Block
03:54
62
Size Settings
12:48
63
Padding & Margins
11:56
64
Web Typography
06:19
65
Buttons and Links
05:15
66
CSS Classes
06:16
67
Canvas Settings
07:58
68
Images
06:27
69
Float, Columns, Display
08:56
70
Flexbox
07:39
71
Webflow Debugging Checklist
23:56
72
Navbar (Chat App)
10:26
73
Hover
07:55
74
Middle Section (Chat App)
04:23
75
HTML Tags
10:06
76
Combo Classes
07:59
77
CTA Section (Chat App)
14:16
78
Footer (Chat App)
11:46
79
Intro to Responsive Web Design
06:28
80
Responsive: Hero Section - Tablet
04:37
81
Responsive: Hero Section - Mobile 1
04:48
82
Responsive: Hero Section - Mobile 2
03:08
83
Responsive: Nav Menu (Chat App)
09:54
84
Responsive: Overflow
07:02
85
Responsive: CTA Section (Chat App)
04:13
86
Responsive: Footer (Chat App)
05:13
87
Going Live: SEO (Chat App)
04:50
88
Going Live: Publishing (Chat App)
06:04
89
Webflow Editor
03:04
90
Intro to Client Project
01:33
91
Good Design Process
08:04
92
Project Brief
05:10
93
Mood Board
05:03
94
Why Wireframing?
07:36
95
Figma Styles
02:50
96
Figma Components
06:06
97
Wireframe Kit
04:10
98
Wireframes – Homepage Part 1
11:29
99
Wireframes – Homepage Part 2
12:38
100
Wireframes – Post Page
07:47
101
Wireframes – Blog
07:17
102
Team App Homepage Design: Part 1
11:33
103
Team App Homepage Design: Part 2
17:45
104
Team App Homepage Design: Part 3
11:59
105
Team App Blog Post Design
06:20
106
Team App Blog Design
13:40
107
Intro
01:03
108
Background Styles
07:38
109
Navbar (Team App)
08:51
110
Hero Content (Team App)
07:23
111
Forms
11:02
112
Mockup Section – Part 1 (Team App)
09:50
113
Mockup Section – Part 2 (Team App)
04:28
114
Photo Sections (Team App)
04:22
115
Slider Component
04:28
116
Testimonial Slider (Team App)
12:35
117
Positioning
08:35
118
Slider Arrows
06:06
119
Footer (Team App)
07:34
120
Footer Form (Team App)
09:12
121
Interactions Intro
02:19
122
Card Interaction
10:09
123
Arrow Interaction – Part 1
02:46
124
Arrow Interaction – Part 2
06:51
125
Responsive: Navbar (Team App)
05:27
126
Responsive: Hero (Team App)
04:43
127
Responsive: Mockup Section (Team App)
05:43
128
Responsive: Body (Team App)
06:24
129
Responsive: Testimonials & Footer (Team App)
05:52
130
CMS & Dynamic Content
01:34
131
Webflow CMS
05:23
132
CMS Items
03:11
133
Collection Page
04:09
134
Blog: Navbar & Headline
04:56
135
Blog: Author & Date Block
03:38
136
Reference Field
05:48
137
Dynamic Styles
03:09
138
Blog: Main Image
02:32
139
Rich Text
09:58
140
Blog: Author Block Bottom
04:09
141
Symbols
06:10
142
Blog: Responsive Post Page
05:31
143
Blog: Homepage
13:29
144
Collection List
12:53
145
Pagination
07:30
146
Blog: Responsive Homepage
05:00
147
SEO & Publish (Team App)
06:36
148
Form Submissions
02:16
149
Custom Domain
13:03
150
Intro to Freelancing
01:23
151
Portfolio Website
04:35
152
Portfolio Website Tour
06:16
153
Installing Portfolio Website
12:40
154
Finding work – Online
09:52
155
Finding work – Studios
06:36
156
Finding work – Networking
03:13
157
Finding work – Conclusion
00:33
158
Upwork Overview
06:06
159
Tips 1-3: Getting your profile approved
05:05
160
Tips 4-9: Create a profile that attracts clients
07:03
161
Tips 10-12: Get the "best match" badge
03:31
162
Tips 13-14: Propose the right price
04:10
163
Tips 15-16: Be the freelancer they can't resist
06:04
164
Tips 17-22: Write damn good cover letters
08:04
165
Tips 23-25: Don't get yourself suspended
06:32
166
Tips 26-28: Don't get scammed
03:06
167
Pricing: How much do you charge?
11:26
168
Pricing: Hourly vs Fixed Rate
04:16
169
Proposal Template: Fixed Rate
08:38
170
Proposal Template: Hourly Rate
02:29
171
Freelance Contract
05:56
172
Selling Webflow to Clients
12:33
173
Client Billing Feature
03:00
174
Intro to Advanced
01:52
175
Webflow: Custom Modal (Pop-Up)
15:41
176
Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)
07:17
177
Photoshop: How To Create a Stretch Crop
05:17
178
Photoshop: How to Cut Out an Image (Unboxing)
13:58
179
Photoshop: Stick Out Tutorial
10:13
Unlock unlimited learning

Get instant access to all 178 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Complete Web Design: from Figma to Webflow to Freelancing?

More courses by Udemy

Frequently asked questions

What prerequisites should I have before enrolling in this course?
There are no formal prerequisites for this course, but having a basic understanding of web design principles and experience with design tools like Figma can be beneficial. Early lessons include 'Getting started with Figma', so familiarity with this tool will help you dive right into the design aspects covered in the course.
What will I be able to build by the end of the course?
By the end of the course, you will have designed and built a complete homepage for a chat app, covering all aspects from layout to typography and color. The course provides practical projects like 'Practice: Figma Homepage Design' and 'Chat App homepage design' parts 1 to 4, ensuring you have hands-on experience with real-world design and development tasks.
Who is the target audience for this course?
This course is ideal for aspiring web designers and developers who want to gain practical skills in web design using Figma and Webflow. It is also suitable for individuals looking to transition into freelancing by building a solid foundation in web design principles and tools.
How does this course compare to other web design courses?
This course uniquely focuses on both design and development aspects, starting with foundational design principles like alignment, grid, and typography, and progressing into Webflow development. Its comprehensive coverage of practical design exercises and projects sets it apart from courses that may focus solely on design theory or coding.
What specific tools will I learn to use in this course?
The course focuses on teaching Figma for design tasks and Webflow for development. It covers essential design concepts in Figma and transitions into using Webflow for building websites, including lessons like 'Webflow Designer Intro' and 'HTML & CSS', providing a solid introduction to these tools.
What topics are not covered in this course?
The course does not cover advanced programming languages or backend development. It focuses primarily on the design and front-end development aspects using Figma and Webflow. If you're looking for deep dives into languages like JavaScript or server-side programming, you may need additional resources.
How much time should I expect to commit to complete the course?
The course comprises 179 lessons, with a focus on both theory and practice. Though the total runtime is not specified, students should be prepared to dedicate time to work through each lesson and complete the practical exercises and projects, ensuring a thorough understanding of the material.