Search lessons...

All Lessons

Housekeeping

Curriculum walkthrough

3:16

Free

How to get the most out of the course

2:04

Free

Create a Framer account

1:07

Free

Course resources

5:58

Framer Foundations

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

Homepage & Components

Components module overview

2:34

Free

Setting up our project & first font styles

9:14

Free

Defining all font styles

10:48

Free

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

Navigation & Footer Module Overview

0:43

Free

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

Pricing & Masking

Module Overview

0:41

Free

Designing Pricing cards

11:26

Introduction to Masking

6:51

Creating all Pricing cards

12:34

Annual and monthly pricing

9:11

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

Blogs & CMS Module overview

1:10

Free

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

3:36

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

Forms & 3D transforms Module overview

0:55

Free

Designing our first form

16:39

Form states & sending data to email

12:11

Connecting our form to Google Sheets

4:19

Intro to 3D transforms

7:33

Designing 3D cards

12:34

Flipping on hover and click

9:32

Connecting 3D card to CMS

8:18

Animations & Effects

Animations & Effects Module overview

0:57

Free

Header Appear effect

8:43

Hero circle scroll transform effect

7:31

3D scroll transforms

6:53

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

6:53

Buttons hover effect

8:09

SEO & Analytics

SEO & Analytics Module overview

1:26

Free

Setting up a 404 page

7:19

Project clean up

11:26

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

All Lessons

Foundations

Intro to Framer Interface

Adding a background pattern

Unlock the course

6:25

Unlock the course

6:25

Firdavs Abdunazarov

Course instructor

Unlock the course today

Course

Get access to the entire curriculum & learn at your own pace

$99

one-time fee

What's included:

90+ video lessons

11+ hours of content

Lifetime access

All future updates

Enroll today

Adding a transition effect

Designing a circle background