Complete Web Design: From Figma To Webflow To Freelancing (updated 2/2023)

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

What you'll learn

You will learn graphic design concepts like layout, typography, visual hierarchy, design tricks, and more.

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 the designs and build them into websites using Webflow — a powerful 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.

Overview

Section 1: Getting Started

Lecture 1 What is Webflow?

Lecture 2 Sign up with Webflow

Lecture 3 Webflow Teaser

Lecture 4 Bookmark the Resources Page

Section 2: PART 1: SECRETS OF GOOD DESIGN

Lecture 5 Intro to Good Design

Lecture 6 Getting started with Figma

Section 3: Layout is King

Lecture 7 It All Starts With Alignment & Grid

Lecture 8 Practice: Alignment & Grid

Lecture 9 Assignment Feedback

Lecture 10 Importance of Visual Hierarchy

Lecture 11 Practice: Visual Hierarchy

Lecture 12 Join the Student Hangout on Discord

Lecture 13 Beware of Optical Illusions

Lecture 14 Proximity

Lecture 15 Section Notes

Section 4: How to Use Typography Beautifully

Lecture 16 Intro to Typography

Lecture 17 Typeface Comes With a Personality

Lecture 18 Typeface Categories

Lecture 19 Practice: Typeface Personality

Lecture 20 Setting type

Lecture 21 Practice: Setting type

Lecture 22 Two fonts only

Lecture 23 Where to Find Fonts

Lecture 24 Practice: Typeface Pairing

Lecture 25 Section Notes

Section 5: The Art of Color

Lecture 26 Intro to Colors

Lecture 27 Sampling Colors

Lecture 28 Practice: Sampling Colors

Lecture 29 Fine-tuning Colors

Lecture 30 Practice: Fine-tuning Colors

Lecture 31 Color Hunting

Lecture 32 Brand Colors

Lecture 33 Section Notes

Section 6: How to Use Photos to Create Mouthwatering Websites

Lecture 34 Intro to Photos

Lecture 35 Image Overlays

Lecture 36 Practice: Image Overlays

Lecture 37 Photo Cropping Techniques - Extreme Crop

Lecture 38 Photo Cropping Techniques - Soft Crop

Lecture 39 Practice: Photo Cropping

Lecture 40 Rule of Thirds

Lecture 41 Unbox it!

Lecture 42 Pick Photos Like a Pro

Lecture 43 Where to Find Photos

Lecture 44 Practice: Finding Photos

Lecture 45 Section Notes

Section 7: 6 Design Tricks Every Designer Should Know

Lecture 46 Intro to Design Tricks

Lecture 47 Contrast

Lecture 48 White Space

Lecture 49 Repetition

Lecture 50 Consistency

Lecture 51 Overlapping

Lecture 52 Practice: Overlapping

Lecture 53 Tension

Lecture 54 Practice: Tension

Lecture 55 Section Notes

Section 8: PART 2: PRACTICE DESIGN LIKE AN ARTIST

Lecture 56 Intro to Design Practice

Section 9: Practice by Mimicking Pros

Lecture 57 Mimic Method

Lecture 58 The Biggest SECRET of Great Designers: Inspiration

Lecture 59 Practice: Mood Board

Lecture 60 Practice: Figma Homepage Design

Lecture 61 Section Notes

Section 10: Designing Your First Beautiful Web Page

Lecture 62 Chat App homepage design: Part 1

Lecture 63 Chat App homepage design: Part 2

Lecture 64 Chat App homepage design: Part 3

Lecture 65 Chat App homepage design: Part 4

Lecture 66 Section Notes

Section 11: PART 3: WEB DEVELOPMENT (WEBFLOW)

Lecture 67 Intro to Webflow Development

Section 12: How Web Pages Work

Lecture 68 Webflow Designer Intro

Lecture 69 HTML & CSS

Lecture 70 The Box Model

Lecture 71 Element Hierarchy

Lecture 72 Section Notes

Section 13: Building Your First Web Page

Lecture 73 Section & Div Block

Lecture 74 Read-Only Version of Chat App

Lecture 75 Size Settings

Lecture 76 Padding & Margins

Lecture 77 Section Notes

Lecture 78 Web Typography

Lecture 79 Webflow Tutorials

Lecture 80 Buttons and Links

Lecture 81 Webflow Autosave

Lecture 82 CSS Classes

Lecture 83 Canvas Settings

Lecture 84 Images

Lecture 85 Float, Columns, Display

Lecture 86 Flexbox

Lecture 87 Figma vs Webflow Sizes

Lecture 88 Webflow Debugging Checklist

Lecture 89 Flexbox Game

Lecture 90 Navbar (Chat App)

Lecture 91 Hover

Lecture 92 Middle Section (Chat App)

Lecture 93 HTML Tags

Lecture 94 Combo Classes

Lecture 95 CTA Section (Chat App)

Lecture 96 Footer (Chat App)

Section 14: Responsive Web Design: Beautiful on Any Device

Lecture 97 Intro to Responsive Web Design

Lecture 98 Responsive: Hero Section - Tablet

Lecture 99 Responsive: Hero Section - Mobile 1

Lecture 100 Responsive: Hero Section - Mobile 2

Lecture 101 Responsive: Nav Menu (Chat App)

Lecture 102 Responsive: Overflow

Lecture 103 Responsive: CTA Section (Chat App)

Lecture 104 Responsive: Footer (Chat App)

Section 15: Going Live: Launching Your First Web Page

Lecture 105 Going Live: SEO (Chat App)

Lecture 106 Going Live: Publishing (Chat App)

Lecture 107 Webflow Editor

Section 16: PART 4: CLIENT PROJECT FROM START TO FINISH

Lecture 108 Intro to Client Project

Section 17: Nail the Designs: Project Brief, Mood Board, Wireframes, Design

Lecture 109 Good Design Process

Lecture 110 Project Brief

Lecture 111 Mood Board

Lecture 112 Why Wireframing?

Lecture 113 Figma Styles

Lecture 114 Figma Components

Lecture 115 Wireframe Kit

Lecture 116 Wireframes – Homepage Part 1

Lecture 117 Wireframes – Homepage Part 2

Lecture 118 Wireframes – Post Page

Lecture 119 Wireframes – Blog

Lecture 120 Team App Homepage Design: Part 1

Lecture 121 Team App Homepage Design: Part 2

Lecture 122 Team App Homepage Design: Part 3

Lecture 123 Team App Blog Post Design

Lecture 124 Team App Blog Design

Section 18: Development: From Designs to Functional Website

Lecture 125 Intro

Lecture 126 Background Styles

Lecture 127 Read-Only Mode of Team App

Lecture 128 Navbar (Team App)

Lecture 129 Hero Content (Team App)

Lecture 130 Forms

Lecture 131 Mockup Section – Part 1 (Team App)

Lecture 132 Mockup Section – Part 2 (Team App)

Lecture 133 Photo Sections (Team App)

Lecture 134 Slider Component

Lecture 135 Testimonial Slider (Team App)

Lecture 136 Positioning

Lecture 137 Slider Arrows

Lecture 138 Footer (Team App)

Lecture 139 Footer Form (Team App)

Section 19: Interactions: Breathing Life Into Your Website

Lecture 140 Interactions Intro

Lecture 141 Card Interaction

Lecture 142 Arrow Interaction – Part 1

Lecture 143 Arrow Interaction – Part 2

Section 20: Responsive Web Design (Team App Website)

Lecture 144 Responsive: Navbar (Team App)

Lecture 145 Responsive: Hero (Team App)

Lecture 146 Responsive: Mockup Section (Team App)

Lecture 147 Responsive: Body (Team App)

Lecture 148 Responsive: Testimonials & Footer (Team App)

Section 21: Blog & CMS: Going From Static to Dynamic Website

Lecture 149 CMS & Dynamic Content

Lecture 150 Webflow CMS

Lecture 151 CMS Items

Lecture 152 Collection Page

Lecture 153 Blog: Navbar & Headline

Lecture 154 Blog: Author & Date Block

Lecture 155 Reference Field

Lecture 156 Dynamic Styles

Lecture 157 Blog: Main Image

Lecture 158 Rich Text

Lecture 159 Blog: Author Block Bottom

Lecture 160 Symbols

Lecture 161 Blog: Responsive Post Page

Lecture 162 Blog: Homepage

Lecture 163 Collection List

Lecture 164 Pagination

Lecture 165 Blog: Responsive Homepage

Section 22: Going Live: Your Fully Functional Dynamic Website

Lecture 166 SEO & Publish (Team App)

Lecture 167 Form Submissions

Lecture 168 Custom Domain

Lecture 169 More Webflow Videos

Lecture 170 Webflow Plans, Accounts and How to Handover the Website to the Client

Section 23: PART 5: SECRETS OF MAKING MONEY FREELANCING

Lecture 171 Intro to Freelancing

Section 24: Stunning Portfolio Website Made for You

Lecture 172 Portfolio Website

Lecture 173 Portfolio Website Tour

Lecture 174 Installing Portfolio Website

Section 25: Where to Find Freelance Work

Lecture 175 Finding work – Online

Lecture 176 Finding work – Studios

Lecture 177 Finding work – Networking

Lecture 178 Finding work – Conclusion

Lecture 179 Freelancing Tips From a Successful Student

Section 26: 28 Tips to Win on Upwork

Lecture 180 Upwork Overview

Lecture 181 Tips 1-3: Getting your profile approved

Lecture 182 Tips 4-9: Create a profile that attracts clients

Lecture 183 Tips 10-12: Get the "best match" badge

Lecture 184 Tips 13-14: Propose the right price

Lecture 185 Tips 15-16: Be the freelancer they can't resist

Lecture 186 Tips 17-22: Write damn good cover letters

Lecture 187 Tips 23-25: Don't get yourself suspended

Lecture 188 Tips 26-28: Don't get scammed

Section 27: Pricing, Proposal Template, & More

Lecture 189 Pricing: How much do you charge?

Lecture 190 Pricing: Hourly vs Fixed Rate

Lecture 191 Proposal Template: Fixed Rate

Lecture 192 Proposal Template: Hourly Rate

Lecture 193 Freelance Contract

Lecture 194 Selling Webflow to Clients

Section 28: PART 6: ADVANCED

Lecture 195 Intro to Advanced

Lecture 196 Extra content

Lecture 197 Webflow: Custom Modal (Pop-Up)

Lecture 198 Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)

Lecture 199 Photoshop: How To Create a Stretch Crop

Lecture 200 Photoshop: How to Cut Out an Image (Unboxing)

Lecture 201 Photoshop: Stick Out Tutorial

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.