Part of 100+ video lessons
Short, step-by-step lessons you can rewatch anytime.
Hands-on project
Follow along in the host project and build as you learn.
Certificate path
Counts toward your Framer Fundamentals certificate.
Add the tablet and phone views, restyle what breaks, then preview at each width.
Desktop exists by default. Click the plus for tablet, phone or a custom width.
Desktop covers 1200px and up. Tablet takes over at 1199px and below.
Switch stack direction, change alignment, resize images and swap fixed widths for fill.
BUILD ONE PAGE THAT WORKS ON EVERY SCREEN
Set up desktop, tablet and phone layouts without duplicating the page.
FIX THE LAYOUTS THAT BREAK
Change stack direction and distribution, and swap fixed widths for fill.
KNOW WHICH CHANGES CASCADE
Desktop edits flow down to every smaller breakpoint. Smaller edits stay put.
Layout in Framer
Framer's layout system works like auto layout in Figma or Flexbox in Webflow. Learn how stacks and grids bring alignment and order to your elements.
Understanding Frames
Every great site starts with frames, Framer's core building block. In this foundational lesson you'll learn what frames are, how they work, and why they're essential to everything you'll design going forward.
CURRICULUM
WHAT YOU’LL LEARN IN THIS COURSE
In the Ultimate Framer Masterclass, you’ll master Framer from the ground up. Follow real projects, get expert feedback, and finally design and ship the way you’ve always wanted to.
Take a hero section and make it work on tablet and phone. Restyle only what breaks, then preview at every width.
06:07
PUBLISH CHECKLIST
Tablet breakpoint added
Phone breakpoint added
Stack direction fixed on phone
Fixed widths swapped for fill
Previewed at each width
Desktop edits checked for knock-on changes
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
How do breakpoints work in Framer?
A change on the desktop breakpoint flows down to tablet and phone. A change made on a smaller breakpoint stays only there. That one rule keeps a responsive site manageable.
What widths do Framer breakpoints start at?
Desktop covers 1200px and up. Tablet takes over at 1199px and below, and phone covers the smallest widths. You can also add a breakpoint at a custom width.
Do I have to rebuild my page for mobile in Framer?
No. You restyle rather than rebuild: switch stack direction, change alignment, resize images and swap fixed widths for fill. It stays one page across every breakpoint.
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
