CF

Complete Web Design: from Figma to Webflow to Freelancing

19h 10m 59s
English
Paid

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.

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.

About the Author: 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.

Watch Online 179 lessons

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

Course content

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

Related courses

Frequently asked questions

What is Complete Web Design: from Figma to Webflow to Freelancing about?
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…
Who teaches Complete Web Design: from Figma to Webflow to Freelancing?
Complete Web Design: from Figma to Webflow to Freelancing is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Complete Web Design: from Figma to Webflow to Freelancing?
Complete Web Design: from Figma to Webflow to Freelancing contains 179 lessons with a total runtime of 19 hours 10 minutes. All lessons are available to watch online at your own pace.
Is Complete Web Design: from Figma to Webflow to Freelancing free to watch?
Complete Web Design: from Figma to Webflow to Freelancing is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Complete Web Design: from Figma to Webflow to Freelancing online?
Complete Web Design: from Figma to Webflow to Freelancing is available to watch online on CourseFlix at https://courseflix.net/course/complete-web-design-from-figma-to-webflow-to-freelancing. The page hosts every lesson with the integrated video player; no download is required.