Complete Web Design: from Figma to Webflow to Freelancing
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.
- 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
# | 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 |