The anatomy of a Framer project — lesson cover image

Framer Fundamentals

Get familiar with all the fundamental parts of Framer’s website builder.

In this Framer course, you’ll learn how to design and publish fully responsive websites without code. From mastering layout and styling to adding content, creating components, and optimizing for launch—this course gives you everything you need to confidently build in Framer.

1.

Welcome to Framer

Getting familiar with the Framer interface

5:16

The anatomy of a Framer project

5:38

Interacting with layers in Framer

6:01

2.

Layout 101

Thinking in frames

3:53

Absolute positioning in Framer

7:39

Stacks and relative positioning in Framer

8:05

Sizing to fill and fit content in Framer

7:37

Stacks vs grids in Framer

7:45

Fixed and sticky positioning in Framer

4:09

Relative, fixed, and viewport Sizing in Framer

7:05

Min and max sizing in Framer

8:26

3.

Adding Content to the Canvas

Adding images, video, and text in Framer

6:08

Using the insert panel in Framer

5:13

Importing from Figma and the web to Framer

12:55

Adding links in Framer

10:30

4.

Layer Properties and Style

Styling frames in Framer

10:47

Text properties in Framer

12:36

Link and color styles in Framer

9:36

Text styles in Framer

7:06

Creating light and dark themes in Framer

6:30

Intro to components in Framer

16:57

Using layout templates in Framer

12:22

5.

Responsive Design 101

What is responsive design?

1:26

Designing fluid layouts in Framer

22:30

Creating breakpoints in Framer

19:02

6.

Preparing to Publish

Optimizing your Framer site for search engines and accessibility

10:22

Site and page settings in Framer

6:57

Choosing the right Framer plan for your site

5:04

Publishing and connecting a domain

7:59

Tracking visitors with Framer’s built-in analytics

2:45

Framer Fundamentals — course cover image

Course details

4h 6m

Beginner

Academy