Pricing
Course Portal
Log in
Enroll
Search lessons...
All Lessons
Curriculum walkthrough
3:16
Free
How to get the most out of the course
2:04
Create a Framer account
1:07
Course resources
5:58
Intro to Framer Interface
5:13
Frames & Absolute positioning
7:19
Stacks & Relative Positioning
6:53
Sizing: Fixed, Fill, Fit,
5:12
Breakpoints
5:05
Working with text & font styles
9:11
Working with colors & color styles
4:14
Images
7:29
Icons & SVGs
4:31
Introduction to Components
8:45
Components module overview
2:34
Setting up our project & first font styles
9:14
Defining all font styles
10:48
Setting color styles
10:27
Hero section
13:54
Working with logos in Framer
6:27
Validation section & ticker component
9:30
Feature highlights section
16:24
Features section: designing the section
15:08
Features section: turning into components
8:30
Process: Designing the section
14:15
Process: Adding interactivity
7:12
Vertically rotating card: design
11:07
Vertically rotating cards: interactivity
11:21
Featured testimonial
11:51
FAQ: designing cards
13:21
FAQ: making card interactive
7:37
Navigation & Footer Module Overview
0:43
Designing the Navbar
7:57
Mobile navigation
15:41
Sticky & Fixed positioning
8:08
Dropdown menu - desktop version
11:47
Dropdown menu - mobile version
6:20
Footer design
13:06
Footer for mobile
3:51
Module Overview
Designing Pricing cards
11:26
Introduction to Masking
6:51
Creating all Pricing cards
12:34
Annual and monthly pricing
Adding a transition effect
10:32
Adding a background pattern
6:25
Designing a circle background
3:36
Designing CTA banners
13:45
Blogs & CMS Module overview
1:10
Setting up our first CMS collection
8:11
Designing blog post page
7:58
CSV importing & exporting
3:13
CMS references
12:11
Conditional views
Creating our Blog card
11:24
Connecting components to CMS
6:40
CMS filtering & limits
8:39
Adding a Back button
6:08
Legal page with Previous & Next buttons
11:43
Forms & 3D transforms Module overview
0:55
Designing our first form
16:39
Form states & sending data to email
Connecting our form to Google Sheets
4:19
Intro to 3D transforms
7:33
Designing 3D cards
Flipping on hover and click
9:32
Connecting 3D card to CMS
8:18
Animations & Effects Module overview
0:57
Header Appear effect
8:43
Hero circle scroll transform effect
7:31
3D scroll transforms
Scroll speed effect
3:30
Scroll animation for Navbar
2:35
Appear animation with a delay
6:09
Feature section - Effects on component level
5:45
Loop, Drag, Hover & Press effects
10:37
Text effects
5:49
Page effects
Buttons hover effect
8:09
SEO & Analytics Module overview
1:26
Setting up a 404 page
Project clean up
SEO and Site settings
13:12
Setting accessibility tags
3:41
Connecting our site to a custom domain
2:41
Checking SEO score and social images
5:26
Framer analytics & connecting to Google Analytics
4:38
/
Foundations
Unlock the course
Course instructor
