Framer Zero To Hero – Tim Gabe

*** Proof of Product ***

Exploring the Essential Features of “Framer Zero To Hero – Tim Gabe”

Become a Framer Hero in a week.
Make the transformation to a true Framer professional with a 23+ hour Zero To Hero experience.

A messy and fun web design journey.

This won’t be the short, snappy and heavily edited videos you’re used to if you’re watching my YouTube channel. 📽️
This is me taking you behind the scenes of creating a website from scratch, piece by piece.

Jumping between reference projects and googling stuff on the fly. 

Screwing things up and then fixing them. Rinse and repeat.

Web design is messy and there will always be moments of frustration throughout the process. Just remember that in this course we’ll go through the messy process together, step by step.

Signed by Tim Gabe
Senior Messy Designer

Master all the important building blocks

Create Styleguides
Learn how to make your websites look consistently beautiful and professional by creating a styleguide. 

Nail Down Layouts
Become super fast at structuring custom layouts from scratch, making your most ambitious layout ideas easy and fun.

Perfect Responsiveness
Make responsiveness second nature so that you never again have to worry about your website breaking down on different devices.

Master Components
Speed up your entire way of working with large websites with advanced component tactics and workflows.

Create Stunning Animations
Make every website project a delight for visitors to scroll through with stunning micro interactions and animations.

Become A CMS Pro
Remove any fear of the CMS and make your websites easily managed by clients and non-techy people. 

Optimize Any Website
Boost the user experience of your websites by learning how to optimize for loading speed and search engine performance.

Build a next level eCommerce website
By building a full-fledged eCommerce website you’ll learn all the different techniques needed to make your most ambitious website projects a reality.

A fully modular curriculum
Each and every key moment of the course is a standalone lesson, making it easy to find the exact video you need at any moment despite it being 23+ hours of content.

Getting Started
Module 01

1. Module Introduction
2. Setup Framer
3. Dashboard UI
4. Editor UI
5. Page Settings UI

Fundamentals
Module 02

1. Module Introduction
2. Web Box Model
3. Layout Rules (4pt Grid)
4. Layout Basics
5. Grid Layouts
6. Breakpoints
7. Component Basics
8. Ticker Component
9. Carousel Component
10. Slideshow Component
11. Search Component
12. Scroll Speed
13. Scroll Transform
14. Scroll Variant
15. 3D Transforms
16. Custom Cursors
17. Framer Forms
18. Relative Overlay
19. Fixed Overlay
20. Page Transitions

Styleguide
Module 03

1. Module Introduction
2. Creating Our First Styleguide
3. Responsive Text Styles in Framer
4. Setup Color Styles in Framer
5. Hiding Our Styleguide
6. SEO Tags
7. Export Figma components to Framer
8. Collect Figma Styles for Framer Export
9. Setup Figma Styles in Framer
10. Setup Dark & Light Mode in Framer
11. Midjourney Tricks for Framer
12. Image Background Removal for Framer

Structure & Layout
Module 04

1. Module Introduction
2. Landing Page: Navigation
3. Landing Page: Navigation Overlay
4. Landing Page: Hero
5. Landing Page: Ticker
6. Landing Page: Category Cards
7. Landing Page: Top Sellers
8. Landing Page: Scroll Variants
9. Landing Page: Footer
10. Landing Page: Loader
11. Category Page: Hero
12. Category Page: Products Filter
13. Detail Page: Hero
14. Detail Page: Similar Products
15. Signup Page: Full Page
16. Cleanup: Fixing Mistakes

Responsiveness
Module 05

1. Module Introduction 
2. Landing Page: Hero
3. Landing Page: Ticker
4. Landing Page: Category Cards
5. Landing Page: Top Sellers
6. Landing Page: Scroll Variants
7. Category Page: Hero
8. Category Page: Product Filters
9. Detail Page: Hero
10. Detail Page: Similar Products
11. Signup Page: Full Page

Components
Module 06

1. Module Introduction
2. Basics: States
3. Basics: Variants
4. Basics: Interactions
5. Basics: Variables
6. General: Button MD Primary
7. General: Navigation Hamburger
8. General: Navigation Hamburger Button
9. General: Navigation Logotype
10. General: Navigation Dropdown
11. General: Navigation Overlay Item
12. General: Navigation Overlay Container
13. General: Full Navigation
14. General: Pulse Interaction
15. General: Button LG Secondary
16. General: Button XL
17. General: Button MD Secondary
18. Landing Page: Text Ticker
19. Landing Page: Category Card
20. Landing Page: Tooltip
21. Landing Page: Top Sellers Card
22. Landing Page: Top Sellers Carousel
23. Landing Page: Scroll Variants
24. Landing Page: Footer
25. Landing Page: Loader
26. Detail Page: Image Picker
27. Detail Page: Text Ticker
28. Detail Page: Similar Products Card
29. Category Page: Text Ticker
30. Category Page: Filter
31. Category Page: Search Styling
32. Cleanup: Fixing Mistakes

Animations
Module 07

1. Module Introduction 
2. General: Navigation Appear Effect
3. General: Navigation Relative Overlay
4. General: Navigation Scroll Animation
5. General: Page Transition
6. General: Footer Loop Effect
7. Landing Page: Hero Looping Images Effect
8. Landing Page: Hero Scroll Speed
9. Landing Page: Hero Scroll Transform
10. Landing Page: Top Sellers Scroll Animation
11. Landing Page: Hero Text Appear Effect
12. Landing Page: Top Sellers Relative Overlay
13. Landing Page: Top Sellers Looping Images Effect
14. Landing Page: Scroll Variants
15. Landing Page: Loader
16. Detail Page: Hero Appear Effect
17. Category Page: Hero Appear Effect
18. Category Page: Hero Looping Images Effect
19. Category Page: Hero Scroll Transform
20. Signup Page: Appear Effect
21. Signup Page: Loop Effect

CMS Module 08

1. Module Introduction 
2. CMS Basics
3. Basics: Index Page
4. Basics: Detail Page
5. Detail Page: Create Detail Page
6. Detail Page: Hero CMS Connection
7. Detail Page: Products CMS Connection
8. Category Page: Create Category Page
9. General: Duplicate CMS Collections
10. Category Page: Filter CMS Connection
11. Landing Page: Category Cards CMS Connection
12. Landing Page: Top Seller Cards CMS Connection
13. Landing Page: Footer Form CMS Connection
14. General: Navigation Links
15. Landing Page: Hero Links
16. Signup Page: Full Page Links
17. eCommerce: Lemonsqueezy Integration
18. Cleanup: Fixing Mistakes

Extra Material
Module 09

1. Module Introduction 
2. Staging
3. Redirects
4. Page Settings Optimization
5. Analytics
6. Custom Domains
7. General Site Optimization

Please see the full list of alternative group-buy courses available here: https://lunacourse.com/shop/