Curriculum walkthrough lesson | Framer: Beginner to Pro course

Search lessons...

All 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

5:05

Working with text & font styles

9:11

Working with colors & color styles

4:14

7:29

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

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

13:06

Footer for mobile

3:51

Pricing & Masking

Module Overview

0:43

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

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

5:49

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

/

Foundations

/

Intro to Framer Interface

Curriculum walkthrough

Free

Firdavs Abdunazarov

Course instructor

In this lesson, you'll get an overview of the entire Framer Beginner to Pro course. We'll introduce you to the foundational concepts of Framer, then move on to building homepages and working with components. You'll learn about content management with CMS, form creation, and implementing advanced effects and animations. The course also covers crucial aspects like responsiveness, SEO optimization, and integrating with Google Analytics, providing you with a comprehensive skill set in Framer.

In this lesson, you'll get an overview of the entire Framer Beginner to Pro course. We'll introduce you to the foundational concepts of Framer, then move on to building homepages and working with components. You'll learn about content management with CMS, form creation, and implementing advanced effects and animations. The course also covers crucial aspects like responsiveness, SEO optimization, and integrating with Google Analytics, providing you with a comprehensive skill set in Framer.

In this lesson, you'll get an overview of the entire Framer Beginner to Pro course. We'll introduce you to the foundational concepts of Framer, then move on to building homepages and working with components. You'll learn about content management with CMS, form creation, and implementing advanced effects and animations. The course also covers crucial aspects like responsiveness, SEO optimization, and integrating with Google Analytics, providing you with a comprehensive skill set in Framer.