English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 18.5 Hours | 10.4 GB
3 in 1 Course: Learn to design websites with Figma, build with Webflow, and make a living freelancing.
Web Design is fun. It’s creative.
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.
Buy this course now and take it whenever the time is right for you.
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.
Table of Contents
Getting Started
1 What is Webflow
2 Sign up with Webflow
3 Webflow Teaser
4 Check out the Resources Page
PART 1 SECRETS OF GOOD DESIGN
5 Intro to Good Design
6 Getting started with Figma
7 Pro Tip Screen Resolution
Layout is the King
8 It All Starts With Alignment & Grid
9 Practice Alignment & Grid
10 Assignment Feedback
11 Importance of Visual Hierarchy
12 Practice Visual Hierarchy
13 Beware of Optical Illusions
14 Proximity
How to Use Typography Beautifully
15 Intro to Typography
16 Where to Find Fonts
17 Practice Typeface Pairing
18 Typeface Comes With a Personality
19 Typeface Categories
20 Practice Typeface Personality
21 Setting type
22 Practice Setting type
23 Setting Type
24 Two fonts only
The Art of Color
25 Intro to Colors
26 Sampling Colors
27 Practice Sampling Colors
28 Sampling Colors
29 Fine-tuning Colors
30 Practice Fine-tuning Colors
31 Color Hunting
32 Brand Colors
How to Use Photos to Create Mouthwatering Websites
33 Intro to Photos
34 Unbox it!
35 Pick Photos Like a Pro
36 Where to Find Photos
37 Practice Finding Photos
38 Finding Photos
39 Image Overlays
40 Practice Image Overlays
41 Image Overlays
42 Photo Cropping Techniques – Extreme Crop
43 Photo Cropping Techniques – Soft Crop
44 Practice Photo Cropping
45 Photo Cropping
46 Rule of Thirds
Design Tricks Every Designer Should Know
47 Intro to Design Tricks
48 Tension
49 Consistency
50 Contrast
51 White Space
52 Repetition
53 Overlapping
54 Practice Overlapping
55 Overlapping
56 Tension
57 Practice Tension
PART 2 PRACTICE DESIGN LIKE AN ARTIST
58 Intro to Design Practice
Practice by Mimicking Pros
59 Mimic Method
60 The Biggest secret of GREAT DESIGNERS Inspiration
61 Practice Mood Board
62 Mood Board
63 Practice Figma Homepage Design
64 Figma Homepage Design
Designing Your First Beautiful Web Page
65 Chat App homepage design Part 1
66 Chat App homepage design Part 2
67 Chat App homepage design Part 3
68 Chat App homepage design Part 4
69 Chat App Homepage Design
PART 3 WEB DEVELOPMENT (WEBFLOW)
70 Intro to Webflow Development
Understanding the Web
71 Weblow Designer Intro
72 HTML & CSS
73 The Box Model
74 Element Hierarchy
Building Your First Web Page
75 Section & Div Block
76 Flexbox
77 Flexbox Game
78 Navbar
79 Hover
80 Middle Section
81 HTML Tags
82 Combo Classes
83 CTA Section
84 Footer
85 Read-Only Mode of Chat App
86 Size Settings
87 Padding & Margins
88 Web Typography
89 Buttons and Links
90 CSS Classes
91 Images
92 Float, Columns, Display
Responsive Web Design Beautiful on Any Device
93 Intro to Responsive Web Design
94 Hero Section – Tablet
95 Hero Section – Mobile 1
96 Hero Section – Mobile 2
97 Nav Menu
98 Overflow
99 CTA Section
100 Footer
Going Live Launching Your First Web Page
101 SEO
102 Publishing
103 Webflow Editor
104 Final Result – Chat App
PART 4 CLIENT PROJECT FROM START TO FINISH
105 Intro to Client Project
Nail the Designs Project Brief, Mood Board, Wireframes, Design
106 Good Design Process
107 Wireframes – Post Page
108 Wireframes – Blog
109 Final Result – Team App Wireframes
110 Homepage Design – Part 1
111 Homepage Design – Part 2
112 Homepage Design – Part 3
113 Blog Post Design
114 Blog Design
115 Final Result – Team App Designs
116 Project Brief
117 Mood Board
118 Why Wireframing
119 Figma Styles
120 Figma Components
121 Wireframe Kit
122 Wireframes – Homepage Part 1
123 Wireframes – Homepage Part 2
Development From Designs to Functional Website
124 Intro
125 Slider Component
126 Testimonial Slider
127 Positioning
128 Slider Arrows
129 Footer
130 Footer Form
131 Background Styles
132 Read-Only Mode of Team App
133 Navbar
134 Hero Content
135 Forms
136 Mockup Section – Part 1
137 Mockup Section – Part 2
138 Photo Sections
Interactions Breathing Life Into Your Website
139 Interactions Intro
140 Card Interaction
141 Arrow Interaction – Part 1
142 Arrow Interaction – Part 2
Responsive Web Design
143 Responsive – Navbar
144 Responsive – Hero
145 Responsive – Mockup Section
146 Responsive – Body
147 Responsive – Testimonials & Footer
Blog & CMS Going From Static to Dynamic Website
148 CMS & Dynamic Content
149 Rich Text
150 Blog – Author Block Bottom
151 Symbols
152 Blog – Responsive Post Page
153 Blog – Homepage
154 Collection List
155 Pagination
156 Blog Responsive Homepage
157 Webflow CMS
158 CMS Items
159 Collection Page
160 Blog – Navbar & Headline
161 Blog – Author & Date Block
162 Reference Field
163 Dynamic Styles
164 Blog – Main Image
Going Live Your Fully Functional Dynamic Website
165 SEO & Publish
166 Form Submissions
167 Custom Domain
168 Final Result – Team App Website
PART 5 SECRETS OF MAKING MONEY FREELANCING
169 Intro to Freelancing
Stunning Portfolio Website Made for You
170 Portfolio Website
171 Portfolio Website Tour
172 Installing Portfolio Website
Where to Find Freelance Work
173 Finding work – Online
174 Finding work – Studios
175 Finding work – Networking
176 Finding work – Conclusion
Tips to Win on Upwork
177 Upwork Overview
178 Tips 1-3 Getting your profile approved
179 Tips 4-9 Create a profile that attracts clients
180 Tips 10-12 Get the best match badge
181 Tips 13-14 Propose the right price
182 Tips 15-16 Be the freelancer they can’t resist
183 Tips 17-22 Write damn good cover letters
184 Tips 23-25 Don’t get yourself suspended
185 Tips 26-28 Don’t get scammed
Pricing, Proposal Template, & More
186 Pricing How much do you charge
187 Pricing Hourly vs Fixed Rate
188 Proposal Template Fixed Rate
189 Proposal Template Hourly Rate
190 Freelance Contract
191 Selling Webflow to Clients
192 Client Billing Feature
PART 6 ADVANCED
193 Intro to Advanced
194 Webflow Custom Modal (Pop-Up)
195 Webflow Custom Code Embed – Commenting Plugin (Needs a Paid Plan)
196 Photoshop How To Create a Stretch Crop
197 Photoshop How to Cut Out an Image
198 Photoshop Stick Out Tutorial
Resolve the captcha to access the links!