Course Curriculum
Detailed course curriculum which covers everything we will learn during the course.
90+
video lessons
7+
hours of content
Installing Framer
1:25
Framer Starter file
0:01
Getting familiar with the Framer interface
2:44
Course overview
4:16
Intro to Framer
Creating text & color styles
7:01
Creating a button
5:58
Components & Variables
4:39
Images for the Hero section
5:05
Adding a Blur Effect
3:32
Making the Hero section responsive
7:06
Setting up the Hero Section
4:01
Framer Foundations & the Hero section
Making the Nav bar responsive
4:05
Hamburger menu button
4:37
Hamburger menu open state
6:21
Styling the hamburger menu
3:33
Creating the top navigation bar
5:41
The Nav bar & Hamburger menu for mobile
Where to find company logos
1:17
Customizing logos for our website
5:01
Section overview
0:42
The Validation section
Setting up the section
4:01
Designing feature card component
6:22
Working with component variables
3:22
Section overview
0:25
The Feature cards section
Setting up the section
6:09
Sticking positioning
3:36
Scroll variants
3:23
Customizing the mobile experience
6:15
Features section overview
0:33
Features section
Designing the CTA banner
4:31
Making the CTA banner responsive
3:37
Designing Testimonial cards
5:33
Slideshow animation
4:11
Section overview
0:29
CTA Banner & Testimonials
Setting up the footer section
3:37
Menu items
5:37
Footer CTA and finalizing the design
4:15
Making the footer responsive
4:57
Footer section overview
0:23
The Footer section
Setting up the CMS & creating the first blog
4:58
Importing blogs into our CMS
3:56
Customizing blog post page
text
Making blog posts responsive
4:11
Blog post section overview
0:34
CMS and Blog post pages
Cutomizing the input component
5:01
Making the Subscription banner responsive
3:30
Setting up Latest posts sections
2:29
Designing blog post cards
9:09
Finalizing blog post page
6:24
Subscription banner
5:16
Blog posts (part II)
Featured blog post
7:01
Finalizing blogs page
7:34
Blogs section in the homepage
2:35
Blogs section overview
0:24
Blogs page
Pricing page setup
3:22
Designing Pricing cards
9:15
Creating other cards
2:22
Monthly to annual pricing interaction
6:27
Pricing page ovewview
0:28
The Pricing page
Setting up the page
3:20
Text portion
7:09
Customizing our form
9:02
FAQ section
10:22
Contact Us page overview
0:31
The Contact Us page
Creating an Airtable database
3:26
Creating our API flow
4:41
Finalizing the API connection
3:04
Success message with overlays
4:46
Setting up Airtable automation
5:10
Intro to Alphi
2:19
Connecting our form to a database with a no-code API
Showing success page
2:34
Creating a contact form with Formspark
4:43
Collecting subscription data
2:01
Collecting data with Formspark
Creating about us components
4:49
Finalizing about us cards
2:42
Timeline section setup
3:07
Designing timeline components
5:29
Making the timeline section responsive
3:55
The team section
7:56
About Us page overview
0:34
About Us page
Adding links to the site
7:26
Updating SEO Settings
9:15
The 404 page
6:55
SEO & site functionality
Scroll transform effect
2:09
Scroll transform for the phone
1:56
Button hover effect
3:02
Pricing cards effect
1:58
Appear animations
4:48
Animations and effects
Connecting Google Analytics
4:07
Getting started with Google Tag manager
4:25
Creating our first event
5:30
Setting up conversion events in Google analytics
3:31
Framer Analytics
1:15
Website analytics