Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Web Design: from Figma to Webflow to Freelancing
Getting Started
What is Webflow? (7:06)
Sign up with Webflow
Webflow Teaser (4:17)
Check out the Resources Page
PART 1: SECRETS OF GOOD DESIGN
Intro to Good Design (2:34)
Getting started with Figma (6:55)
Pro Tip: Screen Resolution
Layout is King
It All Starts With Alignment & Grid (6:49)
Practice: Alignment & Grid (9:13)
Importance of Visual Hierarchy (7:20)
Practice: Visual Hierarchy (8:34)
Beware of Optical Illusions (3:51)
Proximity (1:42)
Section Notes
How to Use Typography Beautifully
Intro to Typography (1:37)
Typeface Comes With a Personality (1:51)
Typeface Categories (6:14)
Practice: Typeface Personality (6:12)
Setting type (8:30)
Practice: Setting type (7:03)
Two fonts only (2:51)
Where to Find Fonts (3:57)
Practice: Typeface Pairing (7:16)
Section Notes
The Art of Color
Intro to Colors (1:11)
Sampling Colors (1:56)
Practice: Sampling Colors (13:30)
Fine-tuning Colors (3:58)
Practice: Fine-tuning Colors (2:30)
Color Hunting (2:35)
Brand Colors (2:20)
Section Notes
How to Use Photos to Create Mouthwatering Websites
Intro to Photos (0:23)
Image Overlays (1:58)
Practice: Image Overlays (4:57)
Photo Cropping Techniques - Extreme Crop (4:28)
Photo Cropping Techniques - Soft Crop (4:37)
Practice: Photo Cropping (11:10)
Rule of Thirds (4:38)
Unbox it! (4:47)
Pick Photos Like a Pro (6:13)
Where to Find Photos (3:27)
Practice: Finding Photos (4:53)
Section Notes
6 Design Tricks Every Designer Should Know
Intro to Design Tricks (0:24)
Contrast (3:52)
White Space (5:07)
Repetition (3:56)
Overlapping (3:43)
Practice: Overlapping (0:57)
Tension (2:32)
Practice: Tension (3:44)
Consistency (7:55)
Section Notes
PART 2: PRACTICE DESIGN LIKE AN ARTIST
Intro to Design Practice (0:18)
Practice by Mimicking Pros
Mimic Method (4:57)
The Biggest secret of GREAT DESIGNERS: Inspiration (5:50)
Practice: Mood Board (5:42)
Practice: Figma Homepage Design (7:11)
Section Notes
Designing Your First Beautiful Web Page
Chat App homepage design: Part 1 (7:18)
Chat App homepage design: Part 2 (11:08)
Chat App homepage design: Part 3 (11:45)
Chat App homepage design: Part 4 (10:01)
Section Notes
PART 3: WEB DEVELOPMENT (WEBFLOW)
Intro to Webflow Development (0:24)
How Web Pages Work
Webflow Designer Intro (4:07)
HTML & CSS (3:36)
The Box Model (2:15)
Element Hierarchy (3:52)
Section Notes
Building Your First Web Page
Section & Div Block (3:53)
Read-Only Version of Chat App
Size Settings (12:47)
Section Notes
Padding & Margins (11:42)
Webflow Autosave
Web Typography (6:10)
Webflow Tutorials
Buttons & Links (5:14)
CSS Classes (6:15)
Images (6:26)
Float, Columns, Display (8:55)
Flexbox (7:38)
Flexbox Game
Navbar (Chat App) (10:15)
Hover (7:54)
Middle Section (Chat App) (4:22)
HTML Tags (10:05)
Combo Classes (7:58)
CTA Section (Chat App) (14:15)
Footer (Chat App) (11:45)
Responsive Web Design: Beautiful on Any Device
Intro to Responsive Web Design (6:27)
Responsive: Hero Section - Tablet (3:42)
Responsive: Hero Section - Mobile 1 (4:47)
Responsive: Hero Section - Mobile 2 (3:07)
Responsive: Nav Menu (Chat App) (9:53)
Responsive: Overflow (7:01)
Responsive: CTA Section (Chat App) (4:05)
Responsive: Footer (Chat App) (5:12)
Going Live: Launching Your First Web Page
Going Live: SEO (Chat App) (4:49)
Going Live: Publishing (Chat App) (4:58)
Webflow Editor (3:03)
PART 4: CLIENT PROJECT FROM START TO FINISH
Intro to Client Project (1:32)
Nail the Designs: Project Brief, Mood Board, Wireframes, Design
Good Design Process (8:03)
Project Brief (5:09)
Mood Board (5:02)
Why Wireframing? (7:35)
Figma Styles (2:49)
Figma Components (6:03)
Wireframe Kit (4:09)
Wireframes – Homepage Part 1 (11:28)
Wireframes – Homepage Part 2 (12:37)
Wireframes – Post Page (7:46)
Wireframes – Blog (7:16)
Team App Homepage Design: Part 1 (11:32)
Team App Homepage Design: Part 2 (16:52)
Team App Homepage Design: Part 3 (6:19)
Team App Blog Post Design (13:31)
Team App Blog Design (12:12)
Development: From Designs to Functional Website
Intro (1:02)
Background Styles (7:37)
Read-Only Mode of Team App
Navbar (Team App) (8:50)
Hero Content (Team App) (7:22)
Forms (11:01)
Mockup Section – Part 1 (Team App) (9:49)
Mockup Section – Part 2 (Team App) (4:26)
Photo Sections (Team App) (4:21)
Slider Component (4:27)
Testimonial Slider (Team App) (12:34)
Positioning (8:34)
Slider Arrows (6:04)
Footer (Team App) (7:33)
Footer Form (Team App) (9:11)
Interactions: Breathing Life Into Your Website
Interactions Intro (2:18)
Card Interaction (10:08)
Arrow Interaction – Part 1 (2:45)
Arrow Interaction – Part 2 (6:50)
Responsive Web Design (Team App Website)
Responsive: Navbar (Team App) (5:26)
Responsive: Hero (Team App) (4:42)
Responsive: Mockup Section (Team App) (5:42)
Responsive: Body (Team App) (6:23)
Responsive: Testimonials & Footer (Team App) (5:51)
Blog & CMS: Going From Static to Dynamic Website
CMS & Dynamic Content (1:33)
Webflow CMS (5:22)
CMS Items (3:10)
Collection Page (4:08)
Blog: Navbar & Headline (4:55)
Blog: Author & Date Block (3:37)
Reference Field (5:47)
Dynamic Styles (3:08)
Blog: Main Image (2:31)
Rich Text (9:57)
Blog: Author Block Bottom (4:08)
Symbols (6:03)
Blog: Responsive Post Page (5:30)
Blog: Homepage (13:28)
Collection List (11:16)
Safari Wrapping Bug
Pagination (7:29)
Blog: Responsive Homepage (4:59)
Going Live: Your Fully Functional Dynamic Website
SEO & Publish (Team App) (6:32)
Form Submissions (2:15)
Custom Domain (13:02)
More Webflow Videos
PART 5: SECRETS OF MAKING MONEY FREELANCING
Intro to Freelancing (1:22)
Stunning Portfolio Website Made for You
Portfolio Website (4:32)
Portfolio Website Tour (6:15)
Installing Portfolio Website (12:42)
Where to Find Freelance Work
Finding work – Online (9:50)
Finding work – Studios (6:35)
Finding work – Networking (3:10)
Finding work – Conclusion (0:32)
28 Tips to Win on Upwork
Upwork Overview (6:05)
Tips 1-3: Getting your profile approved (5:01)
Tips 4-9: Create a profile that attracts clients (7:02)
Tips 10-12: Get the "best match" badge (3:30)
Tips 13-14: Propose the right price (4:09)
Tips 15-16: Be the freelancer they can't resist (6:02)
Tips 17-22: Write damn good cover letters (8:03)
Tips 23-25: Don't get yourself suspended (6:31)
Tips 26-28: Don't get scammed (3:05)
Pricing, Proposal Template, & More
Pricing: How much do you charge? (11:25)
Pricing: Hourly vs Fixed Rate (4:14)
Proposal Template: Fixed Rate (8:36)
Proposal Template: Hourly Rate (2:28)
Freelance Contract (5:55)
Selling Webflow to Clients (12:31)
Client Billing Feature (2:59)
PART 6: ADVANCED
Intro to Advanced (1:50)
Webflow: Custom Modal (Pop-Up) (15:40)
Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan) (7:16)
Photoshop: How To Create a Stretch Crop (5:16)
Photoshop: How to Cut Out an Image (13:57)
Photoshop: Stick Out Tutorial (10:11)
Team App Homepage Design: Part 1
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock