Freelance Web Design From Design To Development To Making Money

3 in 1 Course: Learn to design websites with Figma, build with Webflow, and make a living freelancing.

Last updated 2022-01-10 | 4.8

- 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.

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.

* Requirements

* No requirements. You don't have to be creative or good with math. Those are Design and Development myths.

Description

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.

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.

Course content

28 sections • 221 lectures

What is Webflow? Preview 07:06

Sign up with Webflow Preview 00:05

Webflow Teaser Preview 04:12

Bookmark the Resources Page Preview 00:21

It All Starts With Alignment & Grid Preview 06:49

Practice: Alignment & Grid Preview 09:18

Alignment & Grid

Time to practice Alignment & Grid. Don't freak, it's not timed. 20 minutes is just my estimate of how long it might take you. You're free to take 2 minutes or 2 hours. This assignment is part of the previous video that you just watched. You just need to submit your result here.

Assignment Feedback Preview 01:26

Importance of Visual Hierarchy Preview 07:20

Practice: Visual Hierarchy Preview 08:34

Visual Hierarchy

An assignment to practice visual hierarchy.

Join the Student Hangout on Discord Preview 00:42

Beware of Optical Illusions Preview 03:52

Proximity Preview 01:42

Section Notes Preview 00:01

Intro to Typography Preview 01:37

Typeface Comes With a Personality Preview 01:51

Typeface Categories Preview 06:14

Practice: Typeface Personality Preview 06:12

Typeface Personality

An assignment to practice Typeface Personality.

Setting type Preview 08:30

Practice: Setting type Preview 07:03

Setting Type

An assignment to practice setting type.

Two fonts only Preview 02:47

Where to Find Fonts Preview 03:57

Practice: Typeface Pairing Preview 07:00

Typeface Pairing

An assignment to practice Typeface Pairing.

Section Notes Preview 00:01

Intro to Colors Preview 01:11

Sampling Colors Preview 01:56

Practice: Sampling Colors Preview 13:33

Sampling Colors

An assignment to practice Sampling Colors.

Fine-tuning Colors Preview 03:58

Practice: Fine-tuning Colors Preview 02:30

Fine-tuning Colors

An assignment to practice Fine-tuning Colors.

Color Hunting Preview 02:35

Brand Colors Preview 02:20

Section Notes Preview 00:01

Intro to Photos Preview 00:23

Image Overlays Preview 01:59

Practice: Image Overlays Preview 04:57

Image Overlays

An assignment to practice Image Overlays.

Photo Cropping Techniques - Extreme Crop Preview 04:28

Photo Cropping Techniques - Soft Crop Preview 04:37

Practice: Photo Cropping Preview 11:09

Photo Cropping

An assignment to practice Photo Cropping.

Rule of Thirds Preview 04:38

Unbox it! Preview 04:47

Pick Photos Like a Pro Preview 06:13

Where to Find Photos Preview 03:27

Practice: Finding Photos Preview 04:53

Finding Photos

A practice assignment.

Section Notes Preview 00:01

Intro to Design Tricks Preview 00:24

Contrast Preview 03:53

White Space Preview 05:07

Repetition Preview 03:56

Consistency Preview 07:56

Overlapping Preview 03:43

Practice: Overlapping Preview 00:57

Overlapping

Practice assignment.

Tension Preview 02:32

Practice: Tension Preview 03:45

Tension

Practice assignment.

Section Notes Preview 00:01

Mimic Method Preview 04:57

The Biggest SECRET of Great Designers: Inspiration Preview 05:50

Practice: Mood Board Preview 05:42

Mood Board

Practice assignment.

Practice: Figma Homepage Design Preview 07:11

Figma Homepage Design

Practice assignment.

Section Notes Preview 00:01

Chat App homepage design: Part 1 Preview 08:25

Chat App homepage design: Part 2 Preview 16:09

Chat App homepage design: Part 3 Preview 13:53

Chat App homepage design: Part 4 Preview 17:36

Chat App Homepage Design

This assignment is linked to previous videos. Nothing new, just for you to submit the final result.

Section Notes Preview 00:01

Webflow Designer Intro Preview 04:07

HTML & CSS Preview 03:36

The Box Model Preview 02:15

Element Hierarchy Preview 03:52

Section Notes Preview 00:01

Section & Div Block Preview 03:53

Read-Only Version of Chat App Preview 00:50

Size Settings Preview 12:47

Padding & Margins Preview 11:55

Section Notes Preview 00:04

Web Typography Preview 06:18

Webflow Tutorials Preview 00:10

Buttons and Links Preview 05:14

Webflow Autosave Preview 00:48

CSS Classes Preview 06:15

Canvas Settings Preview 07:57

Images Preview 06:26

Float, Columns, Display Preview 08:55

Flexbox Preview 07:38

Figma vs Webflow Sizes Preview 01:36

Webflow Debugging Checklist Preview 23:55

Flexbox Game Preview 00:19

Navbar (Chat App) Preview 10:25

Hover Preview 07:54

Middle Section (Chat App) Preview 04:22

HTML Tags Preview 10:05

Combo Classes Preview 07:58

CTA Section (Chat App) Preview 14:15

Footer (Chat App) Preview 11:45

Intro to Responsive Web Design Preview 06:27

Responsive: Hero Section - Tablet Preview 04:36

Responsive: Hero Section - Mobile 1 Preview 04:47

Responsive: Hero Section - Mobile 2 Preview 03:07

Responsive: Nav Menu (Chat App) Preview 09:53

Responsive: Overflow Preview 07:01

Responsive: CTA Section (Chat App) Preview 04:12

Responsive: Footer (Chat App) Preview 05:12

Going Live: SEO (Chat App) Preview 04:49

Going Live: Publishing (Chat App) Preview 06:03

Webflow Editor Preview 03:03

Final Result – Chat App

Submit your final result of Chat App homepage.

Good Design Process Preview 08:03

Project Brief Preview 05:09

Mood Board Preview 05:02

Why Wireframing? Preview 07:35

Figma Styles Preview 02:49

Figma Components Preview 06:05

Wireframe Kit Preview 04:09

Wireframes – Homepage Part 1 Preview 11:28

Wireframes – Homepage Part 2 Preview 12:37

Wireframes – Post Page Preview 07:46

Wireframes – Blog Preview 07:16

Final Result – Team App Wireframes

Submit your final result of Team App wireframes.

Team App Homepage Design: Part 1 Preview 11:32

Team App Homepage Design: Part 2 Preview 17:44

Team App Homepage Design: Part 3 Preview 11:57

Team App Blog Post Design Preview 06:19

Team App Blog Design Preview 13:39

Final Result – Team App Designs

Submit your final result of Team App designs.

Intro Preview 01:02

Background Styles Preview 07:37

Read-Only Mode of Team App Preview 00:16

Navbar (Team App) Preview 08:50

Hero Content (Team App) Preview 07:22

Forms Preview 11:01

Mockup Section – Part 1 (Team App) Preview 09:49

Mockup Section – Part 2 (Team App) Preview 04:26

Photo Sections (Team App) Preview 04:21

Slider Component Preview 04:27

Testimonial Slider (Team App) Preview 12:34

Positioning Preview 08:34

Slider Arrows Preview 06:04

Footer (Team App) Preview 07:33

Footer Form (Team App) Preview 09:11

Interactions Intro Preview 02:18

Card Interaction Preview 10:08

Arrow Interaction – Part 1 Preview 02:45

Arrow Interaction – Part 2 Preview 06:50

Responsive: Navbar (Team App) Preview 05:26

Responsive: Hero (Team App) Preview 04:42

Responsive: Mockup Section (Team App) Preview 05:42

Responsive: Body (Team App) Preview 06:23

Responsive: Testimonials & Footer (Team App) Preview 05:51

CMS & Dynamic Content Preview 01:33

Webflow CMS Preview 05:22

CMS Items Preview 03:10

Collection Page Preview 04:08

Blog: Navbar & Headline Preview 04:55

Blog: Author & Date Block Preview 03:37

Reference Field Preview 05:47

Dynamic Styles Preview 03:08

Blog: Main Image Preview 02:31

Rich Text Preview 09:57

Blog: Author Block Bottom Preview 04:08

Symbols Preview 06:09

Blog: Responsive Post Page Preview 05:30

Blog: Homepage Preview 13:28

Collection List Preview 12:51

Pagination Preview 07:29

Blog: Responsive Homepage Preview 04:59

SEO & Publish (Team App) Preview 06:34

Form Submissions Preview 02:15

Custom Domain Preview 13:02

Final Result – Team App Website

Submit your final result of Team App website.

More Webflow Videos Preview 00:05

Webflow Plans, Accounts and How to Handover the Website to the Client Preview 00:09

Portfolio Website Preview 04:34

Portfolio Website Tour Preview 06:15

Installing Portfolio Website Preview 12:39

Finding work – Online Preview 09:51

Finding work – Studios Preview 06:35

Finding work – Networking Preview 03:12

Finding work – Conclusion Preview 00:32

Freelancing Tips From a Successful Student Preview 02:11

Upwork Overview Preview 06:05

Tips 1-3: Getting your profile approved Preview 05:04

Tips 4-9: Create a profile that attracts clients Preview 07:02

Tips 10-12: Get the "best match" badge Preview 03:30

Tips 13-14: Propose the right price Preview 04:09

Tips 15-16: Be the freelancer they can't resist Preview 06:03

Tips 17-22: Write damn good cover letters Preview 08:03

Tips 23-25: Don't get yourself suspended Preview 06:31

Tips 26-28: Don't get scammed Preview 03:05

Pricing: How much do you charge? Preview 11:25

Pricing: Hourly vs Fixed Rate Preview 04:15

Proposal Template: Fixed Rate Preview 08:37

Proposal Template: Hourly Rate Preview 02:28

Freelance Contract Preview 05:55

Selling Webflow to Clients Preview 12:32

Client Billing Feature Preview 02:59

Intro to Advanced Preview 01:51

Extra content Preview 00:27

Webflow: Custom Modal (Pop-Up) Preview 15:40

Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan) Preview 07:16

Photoshop: How To Create a Stretch Crop Preview 05:16

Photoshop: How to Cut Out an Image (Unboxing) Preview 13:57

Photoshop: Stick Out Tutorial Preview 10:11