Complete Web Design: from Figma to Webflow to Freelancing

19h 10m 59s
English
Paid
November 22, 2023

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.

More

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.

Watch Online Complete Web Design: from Figma to Webflow to Freelancing

Join premium to watch
Go to premium
# Title Duration
1 What is Webflow? 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

Similar courses to Complete Web Design: from Figma to Webflow to Freelancing

Figma for Web Designers

Figma for Web Designersflux-academy (Ran Segall)

Duration 5 hours 31 minutes 58 seconds
Learn Figma - UI/UX Design Essential Training

Learn Figma - UI/UX Design Essential Trainingudemy

Duration 3 hours 55 minutes 26 seconds
Beginner Figma Video Course

Beginner Figma Video CourseAndrija Prelec

Duration 3 hours 22 minutes 35 seconds
The Beginner's Guide to Figma

The Beginner's Guide to Figmaegghead

Duration 24 minutes 19 seconds