Figma to Webflow: Complete Web Design Course
- Class Overview
- What is Webflow?
- Webflow Teaser
- PART 1: SECRETS OF GOOD DESIGN
- Getting started with Figma
- Layout is King
- Join our student hangout on Discord
- Assignment: Alignment & Grid
- Layout: Importance of Visual Hierarchy
- Assignment: Visual Hierarchy
- Layout: Beware of Optical Illusions
- Layout: Proximity
- How to Use Typography Beautifully
- Typography: Typeface Comes With a Personality
- Typography: Typeface Categories
- Assignment: Typeface Personality
- Typography: Setting type
- Assignment: Setting type
- Typography: Two fonts only
- Typography: Where to find fonts
- Assignment: Typeface Pairing
- The Art of Color
- Colors: Sampling Colors
- Assignment: Sampling Colors
- Colors: Fine-tuning Colors
- Assignment: Fine-tuning Colors
- Colors: Color hunting
- Colors: Brand Colors
- How to Use Photos to Create Mouthwatering Websites
- Photos: Image Overlays
- Assignment: Image Overlays
- Photos: Cropping Techniques - Extreme Crop
- Photos: Cropping Techniques - Soft Crop
- Assignment: Photo Cropping
- Photos: Rule of Thirds
- Photos: Unbox it!
- Photos: Pick photos Like a Pro
- Photos: Where to Find Photos
- Assignment: Finding Photos
- 6 Design Tricks Every Designer Should Know
- Design Trick: Contrast
- Design Trick: White Space
- Design Trick: Repetition
- Design Trick: Consistency
- Design Trick: Overlapping
- Assignment: Overlapping
- Design Trick: Tension
- Assignment: Tension
- PART 2: PRACTICE DESIGN LIKE A PRO
- The Mimic Method
- The Biggest secret of designers - Inspiration
- Assignment: Mood Board
- Assignment: Figma Homepage Design
- Chat App homepage design: Part 1
- Chat App homepage design: Part 2
- Chat App homepage design: Part 3
- Chat App homepage design: Part 4
- PART 3: WEB DEVELOPMENT (WEBFLOW)
- Web Basics: Webflow designer
- Web Basics: HTML and CSS
- Web Basics: The Box model
- Webflow: Element Hierarchy
- Webflow: Webpage Building Blocks
- Webflow: Size Settings
- Webflow: Padding & Margins
- Webflow: Web Typography
- Webflow: Buttons & Links
- Webflow: CSS Classes
- Canvas Settings
- Webflow: Images
- Webflow: Float & Display
- Webflow: Flexbox
- Webflow: Debugging Checklist
- Webflow: Navbar (Chat App)
- Webflow: Hover
- Webflow: Middle Section (Chat App)
- Webflow: HTML tags
- Webflow: Combo classes
- Webflow: CTA section (Chat App)
- Webflow: Footer (Chat App)
- Intro to Responsive Web Design
- Responsive: Hero Section - Tablet
- Responsive: Hero Section - Mobile 1
- Responsive: Hero Section - Mobile 2
- Responsive: Nav Menu (Chat App)
- Responsive: Overflow
- Responsive: CTA Section (Chat App)
- Responsive: Footer (Chat App)
- Going Live: SEO (Chat App)
- Going Live: Publishing (Chat App)
- Going Live: Editor
- PART 4: CLIENT PROJECT FROM START TO FINISH
- Client Project: Good Design Process
- Client Project: Project brief
- Client Project: Moodboard
- Client Project: Why Wireframing?
- Client Project: Figma styles
- Client Project: Figma components
- Client Project: Wireframe kit
- Client Project: Wireframes - Homepage Part 1
- Client Project: Wireframes - Homepage Part 2
- Client Project: Wireframes Post Page
- Client Project: Wireframes - Blog
- Client Project: Homepage Design Part 1
- Client Project: Homepage Design Part 2
- Client Project: Homepage Design Part 3
- Client Project: Blog Post Design
- Client Project: Blog Design
- Webflow Development 2
- Webflow 2: Background styles
- Webflow 2: Navbar (Team App)
- Webflow 2: Hero content
- Webflow 2: Forms
- Webflow 2: Mockup section 1
- Webflow 2: Mockup section 2
- Webflow 2: Photo sections
- Webflow 2: Slider Component
- Webflow 2: Testimonial slider
- Webflow 2: Positioning
- Webflow 2: Slider arrows
- Webflow 2: Footer (Team App)
- Webflow 2: Footer form
- Interactions: Breathing Life Into Your Website
- Interactions: Card interaction
- Interactions: Arrow interaction 1
- Interactions: Arrow interaction 2
- Responsive: Navbar (Team App)
- Responsive: Hero section
- Responsive: Mockup Section
- Responsive: Body
- Responsive: Testimonial & Footer
- Blog & CMS: Going From Static to Dynamic Website
- Blog & CMS: Webflow CMS
- Blog & CMS: CMS Items
- Blog & CMS: Collection page
- Blog & CMS: Navbar & headline
- Blog & CMS: Author block
- Blog & CMS: Reference field
- Blog & CMS: Dynamic styles
- Blog & CMS: Main image
- Blog & CMS: Rich Text
- Blog & CMS: Author Block Bottom
- Blog & CMS: Symbols
- Blog & CMS: Responsive post
- Blog & CMS: Homepage
- Blog & CMS: Collection list
- Blog & CMS: Pagination
- Blog & CMS: Responsive Blog Page
- Going Live: SEO & Publish
- Going Live: Form submissions
- Going Live: Custom domain
- PART 5: FREELANCING
- Portfolio website
- Portfolio website tour
- Installing portfolio website
- Finding work: Online
- Finding work: Studios
- Finding work: Networking
- Finding work: Conclusion
- Upwork Tips: Overview
- Upwork Tips: Get your profile approved
- Upwork Tips: Profile that attracts clients
- Upwork Tips: Best match badge
- Upwork Tips: Propose the right price
- Upwork Tips: Freelancer they can't resist
- Upwork Tips: Cover letters
- Upwork Tips: Don't get suspended
- Upwork Tips: Don't get scammed
- Pricing: How much do you charge?
- Pricing: Hourly vs Fixed Rate
- Proposal Template: Fixed Rate
- Proposal Template: Hourly Rate
- Freelance contract
- Selling webflow to clients
- Client billing feature
- PART 6: ADVANCED
- Webflow: Custom Modal
- Webflow: Custom Code Embed
- Photoshop: Stretch Crop
- Photoshop: Cut Out Tutorial
- Photoshop: Stick Out Tutorial
