Complete Web Design: from Figma to Webflow to Freelancing

19h 10m 59s
English
Paid

Course description

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.

Read more about the course

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

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Beginner Figma Video Course

Beginner Figma Video Course

Sources: Andrija Prelec
There is no better place to start learning design than the most popular design application! Learn by doing and begin or enhance your knowledge in Figma.
3 hours 22 minutes 35 seconds
Figma for Web Designers

Figma for Web Designers

Sources: flux-academy (Ran Segall)
If you've ever found yourself overwhelmed by Figma's extensive features or wished your workflow could be more efficient for web design projects… Then this course is your golden...
5 hours 31 minutes 58 seconds
Advanced Figma Video Course + Let's Design Together Add-on

Advanced Figma Video Course + Let's Design Together Add-on

Sources: Andrija Prelec
Become a master of Figma and soar up the career ladder in design. The course is filled with real tips and tricks from a senior product designer with...
20 hours 58 minutes 42 seconds
Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwind

Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 seconds
Kickstart your UI/UX Design Career / DesignCourse UI/UX

Kickstart your UI/UX Design Career / DesignCourse UI/UX

Sources: Gary Simon
Join the most interactive course for learning UI/UX Design with Gary Simon. The DesignCourse UI/UX Curriculum is taught entirely with Figma. You will go from ab
16 hours 33 minutes 33 seconds