Learn why frames are the core building block of every Framer layout.

Pin elements precisely on the canvas and know when absolute positioning is the right tool.

Use stacks to build ordered, self-arranging layouts that are easy to maintain.

Choose between fill, fit, and fixed sizing so elements behave predictably.

Know when a stack is enough and when a grid gives you better control.

Keep navigation bars and key elements in view while the page scrolls.

Combine pixel, percentage, and viewport units for flexible layouts.

Set sensible size limits so layouts hold up at any screen width.

Bring your pages to life with media and typography done right.

Find ready-made elements, components, and sections to build faster.

Move existing designs into Framer without starting from scratch.

Connect pages, sections, and external URLs with proper link settings.

Apply fills, borders, radius, and shadows to craft polished surfaces.

Control fonts, sizing, spacing, and alignment for readable, beautiful text.

Create reusable color and link styles that keep your site consistent.

Build a reusable type scale that updates everywhere at once.

Set up color tokens that adapt automatically between light and dark.

Turn repeating elements into components you can reuse and update in one place.

Share navigation and footers across pages with layout templates.

Understand how breakpoints and flexible sizing make sites work on any device.

Apply what you’ve learned to build a layout that flexes with the viewport.

Hands-on practice adapting a real page across desktop, tablet, and phone.

Make your site discoverable and usable for everyone with the right settings.

Configure titles, descriptions, favicons, and other site essentials.

Compare Framer plans and pick the one that fits your site’s needs.

Go live: publish your site and connect a custom domain.

Track visitors and understand how people use your site with built-in analytics.