Framer: Beginner to Pro course

Framer: Beginner to Pro

Build powerful websites for your personal projects, take on client work, or sell Framer templates. All without writing a single line of code. We teach you how.

Buy $69.00 Free Preview

Course curriculum

1. Course overview
  FREE PREVIEW
2. Installing Framer
  FREE PREVIEW
3. Framer Starter File
4. Getting familiar with the Framer interface
1. Setting up the Hero Section
  FREE PREVIEW
2. Creating text & color styles
  FREE PREVIEW
3. Creating a button
4. Components & Variables
5. Images for the Hero section
6. Adding the Blur Effect
7. Making the Hero section responsive
1. Creating the top navigation bar
2. Making the Nav bar responsive
3. Hamburger menu button
4. Hamburger menu open state
5. Styling the hamburger menu
1. Section overview
2. Where to find company logos
3. Customizing logos for our website
4. Building out the validation section
1. Section overview
2. Setting up the section
3. Designing feature card component
4. Working with component variables
5. Designing the center card & making it responsive
1. Feature section overview
2. Setting up the section
3. Sticky positioning
4. Scroll variants
5. Customizing mobile experience
1. Section overview
2. Designing the CTA banner
3. Making the CTA banner responsive
4. Designing Testimonial cards
5. Slideshow animation
1. The Footer section overview
2. Setting up the footer section
3. Menu items
4. Footer CTA and finalizing the design
5. Making the footer responsive
1. Blog post section overview
2. Setting up the CMS & creating the first blog
3. Importing blogs into our CMS
4. Customizing blog post page
5. Making blog posts responsive
1. Subscription banner
2. Customizing the input component
3. Making the Subscription banner responsive
4. Setting up Latest posts section
5. Designing blog post cards
6. Finalizing blog post page
1. Blogs section overviews
2. Featured blog post
3. Finalizing blogs page
4. Blogs section in homepage
1. Pricing page overview
2. Pricing page setup
3. Designing Pricing cards
4. Creating other cards
5. Monthly to annual pricing interaction
1. Contact Us page overview
2. Setting up contact us page
3. Text portion
4. Customizing our form
5. FAQ section
1. Intro to Alphi - no-code API creator
2. Creating Airtable database & connecting it to Alphi
3. Creating our API flow
4. Finalizing our API connection
5. Working with overlays
6. Setting up Airtable automation
1. Collecting subscriptions with Formspark
2. Sucessful submission page
3. Creating a contact form with Formspark
1. About Us page overview
2. Creating about us components
3. Finalizing about us cards
4. Timeline section setup
5. Designing Timeline components
6. Making the timeline section responsive
7. Team section
1. The 404 page
2. Adding links to the site
3. Updating SEO Settings
1. Appear animations
2. Scroll transform effect
3. Scroll transform for phone
4. Button Hover effect
5. Pricing cards effect
1. Framer Analytics
2. Connecting to Google Analytics
3. Setting up Google Tag manager
4. Creating events to measure downloads
5. Setting up conversion events

About this course

$69.00
94 lessons
7 hours of video content

Fira's School

Framer: Beginner to Pro

Course curriculum

Intro to Framer

Framer Foundations & Building out the Hero section

The Nav bar & Hamburger menu for mobile

The Validation section

The Feature cards section

Features section

CTA Banner and Testimonials

The Footer section

CMS and Blog post pages

Blog posts (part II)

Blogs page

Pricing page

Contact Us page

Connecting our forms to a database with no-code APIs

Collecting data with Formspark

About Us page

SEO & Site functionality

Animations & Effects

Website Analytics

About this course