Mô tả

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.

Bạn sẽ học được gì

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.

Yêu cầu

  • You will need a computer with internet access.
  • You will create free accounts with Figma and Webflow.

Nội dung khoá học

29 sections

Getting Started

4 lectures
What is Webflow?
06:54
Bookmark the Resources Page
00:24
Sign up with Webflow
00:05
Webflow Teaser
04:51

PART 1: SECRETS OF GOOD DESIGN

2 lectures
Intro to Good Design
02:34
Getting started with Figma
10:25

Layout is King

11 lectures
It All Starts With Alignment & Grid
06:49
Practice: Alignment & Grid
11:11
Alignment & Grid Practice
1 question
Assignment Feedback
01:26
Importance of Visual Hierarchy
07:20
Practice: Visual Hierarchy
09:18
Visual Hierarchy Practice
1 question
Join the Student Hangout on Discord
00:44
Beware of Optical Illusions
03:51
Proximity
01:42
Section Notes
00:01

How to Use Typography Beautifully

13 lectures
Intro to Typography
01:37
Typeface Comes With a Personality
01:51
Typeface Categories
06:14
Practice: Typeface Personality
08:08
Typeface Personality Practice
1 question
Setting type
08:30
Practice: Setting type
07:29
Setting Type Practice
1 question
Two fonts only
02:47
Where to Find Fonts
03:57
Practice: Typeface Pairing
07:30
Typeface Pairing Practice
1 question
Section Notes
00:01

The Art of Color

10 lectures
Intro to Colors
01:11
Sampling Colors
01:56
Practice: Sampling Colors
18:27
Sampling Colors Practice
1 question
Fine-tuning Colors
03:58
Practice: Fine-tuning Colors
02:30
Fine-tuning Colors Practice
1 question
Color Hunting
02:35
Brand Colors
02:20
Section Notes
00:01

How to Use Photos to Create Mouthwatering Websites

15 lectures
Intro to Photos
00:23
Image Overlays
01:58
Practice: Image Overlays
04:45
Image Overlays Practice
1 question
Photo Cropping Techniques - Extreme Crop
04:28
Photo Cropping Techniques - Soft Crop
04:37
Practice: Photo Cropping
11:18
Photo Cropping Practice
1 question
Rule of Thirds
04:38
Unbox it!
04:47
Pick Photos Like a Pro
06:13
Where to Find Photos
03:27
Practice: Finding Photos
04:53
Finding Photos Practice
1 question
Section Notes
00:01

6 Design Tricks Every Designer Should Know

12 lectures
Intro to Design Tricks
00:24
Contrast
03:52
White Space
05:07
Repetition
03:56
Consistency
07:55
Overlapping
03:43
Practice: Overlapping
00:57
Overlapping Practice
1 question
Tension
02:32
Practice: Tension
03:44
Tension
1 question
Section Notes
00:01

PART 2: PRACTICE DESIGN LIKE AN ARTIST

1 lectures
Intro to Design Practice
00:18

Practice by Mimicking Pros

7 lectures
Mimic Method
04:57
The Biggest SECRET of Great Designers: Inspiration
05:50
Practice: Mood Board
05:42
Mood Board Practice
1 question
Practice: Figma Homepage Design
07:11
Figma Homepage Design
1 question
Section Notes
00:01

Designing Your First Beautiful Web Page

6 lectures
Chat App homepage design: Part 1
08:25
Chat App homepage design: Part 2
16:09
Chat App homepage design: Part 3
13:52
Chat App homepage design: Part 4
17:36
Chat App Homepage Design
1 question
Section Notes
00:01

PART 3: WEB DEVELOPMENT (WEBFLOW)

1 lectures
Intro to Webflow Development
00:24

How Web Pages Work

5 lectures
Webflow Designer Intro
04:18
HTML & CSS
03:35
The Box Model
02:15
Element Hierarchy
04:30
Section Notes
00:01

Building Your First Web Page

22 lectures
Section & Div Block
04:05
Read-Only Version of Chat App
00:57
Size Settings
13:43
Padding & Margins
14:37
Section Notes
00:04
Web Typography
08:15
Buttons and Links
05:47
CSS Classes
06:22
Images
06:40
Float, Columns, Display
09:02
Flexbox
12:56
Webflow vs Figma Sizes
09:36
Flexbox Game
00:19
Webflow University
00:11
Navbar (Chat App)
10:35
Webflow Debugging Checklist
21:38
Hover State
08:24
Middle Section (Chat App)
04:25
HTML Tags
11:13
Combo Classes
09:03
CTA Section (Chat App)
16:47
Footer (Chat App)
13:28

Responsive Web Design: Beautiful on Any Device

8 lectures
Intro to Responsive Web Design
06:40
Responsive: Hero Section - Tablet
03:57
Responsive: Hero Section - Mobile 1
05:16
Responsive: Hero Section - Mobile 2
03:03
Responsive: Nav Menu (Chat App)
10:12
Responsive: Overflow
07:17
Responsive: CTA Section (Chat App)
05:12
Responsive: Footer (Chat App)
06:01

Going Live: Launching Your First Web Page

4 lectures
Going Live: SEO (Chat App)
05:30
Going Live: Publishing (Chat App)
06:52
Webflow Editor
03:31
Final Result – Chat App
1 question

PART 4: CLIENT PROJECT FROM START TO FINISH

1 lectures
Intro to Client Project
01:32

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

18 lectures
Good Design Process
08:03
Project Brief
05:09
Mood Board
05:02
Why Wireframing?
07:35
Figma Styles
02:49
Figma Components
06:05
Wireframe Kit
04:09
Wireframes – Homepage Part 1
11:28
Wireframes – Homepage Part 2
12:37
Wireframes – Post Page
07:46
Wireframes – Blog
07:16
Final Result – Team App Wireframes
1 question
Team App Homepage Design: Part 1
11:30
Team App Homepage Design: Part 2
16:56
Team App Homepage Design: Part 3
11:57
Team App Blog Post Design
06:19
Team App Blog Design
13:39
Final Result – Team App Designs
1 question

Development: From Designs to Functional Website

15 lectures
Intro
01:02
Background Styles
08:34
Read-Only Version of Team App Website
00:16
Navbar (Team App)
10:05
Hero Content (Team App)
11:25
Forms
13:01
Mockup Section – Part 1 (Team App)
12:05
Mockup Section – Part 2 (Team App)
04:41
Photo Sections (Team App)
05:01
Slider
04:39
Testimonial Slider (Team App)
15:17
Positioning
08:38
Slider Arrows
05:47
Footer (Team App)
07:26
Footer Form (Team App)
09:39

Interactions: Breathing Life Into Your Website

4 lectures
Interactions Intro
02:02
Card Interaction
13:57
Arrow Interaction – Part 1
02:50
Arrow Interaction – Part 2
07:12

Responsive Web Design (Team App Website)

5 lectures
Responsive: Navbar (Team App)
05:43
Responsive: Hero (Team App)
04:57
Responsive: Mockup Section (Team App)
05:02
Responsive: Body (Team App)
05:23
Responsive: Testimonials & Footer (Team App)
06:47

Blog & CMS: Going From Static to Dynamic Website

17 lectures
CMS & Dynamic Content
01:33
Webflow CMS
05:36
CMS Items
03:36
Collection Page
04:14
Blog: Navbar & Headline
05:41
Blog: Author & Date Block
04:07
Reference Field
06:24
Object Fit
02:06
Blog: Main Image
03:03
Rich Text
12:45
Blog: Author Block Bottom
03:48
Webflow Components
10:15
Blog: Responsive Post Page
06:34
Blog: Homepage
15:19
Collection List
10:33
Pagination
07:11
Blog: Responsive Homepage
05:25

Going Live: Your Fully Functional Dynamic Website

6 lectures
SEO & Publish (Team App)
08:30
Form Submissions
02:16
Custom Domain
13:02
Final Result – Team App Website
1 question
More Webflow Videos
00:05
Webflow Plans, Accounts and How to Handover the Website to the Client
00:09

PART 5: SECRETS OF MAKING MONEY FREELANCING

1 lectures
Intro to Freelancing
01:22

Stunning Portfolio Website Made for You

3 lectures
Portfolio Website
04:34
Portfolio Website Tour
06:15
Installing Portfolio Website
13:15

Where to Find Freelance Work

5 lectures
Finding work – Online
09:51
Finding work – Studios
06:35
Finding work – Networking
03:12
Finding work – Conclusion
00:32
Freelancing Tips From a Successful Student
02:11

28 Tips to Win on Upwork

9 lectures
Upwork Overview
06:05
Tips 1-3: Getting your profile approved
04:46
Tips 4-9: Create a profile that attracts clients
07:02
Tips 10-12: Get the "best match" badge
03:30
Tips 13-14: Propose the right price
04:09
Tips 15-16: Be the freelancer they can't resist
06:03
Tips 17-22: Write damn good cover letters
08:03
Tips 23-25: Don't get yourself suspended
06:31
Tips 26-28: Don't get scammed
03:05

Pricing, Proposal Template, & More

6 lectures
Pricing: How much do you charge?
11:25
Pricing: Hourly vs Fixed Rate
04:14
Proposal Template: Fixed Rate
08:36
Proposal Template: Hourly Rate
02:28
Freelance Contract
05:55
Selling Webflow to Clients
12:32

PART 6: ADVANCED

7 lectures
Intro to Advanced
01:51
Extra content
00:25
Webflow: Custom Modal (Pop-Up)
15:16
Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)
07:16
Photoshop: How To Create a Stretch Crop
05:16
Photoshop: How to Cut Out an Image (Unboxing)
13:57
Photoshop: Stick Out Tutorial
10:11

Bonus Lecture

1 lectures
Bonus Lecture: Discord Links
00:18

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.