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.
Real sites, broken down
See how a Figma landing page and framer.com are just nav bars, sections, images and buttons, each in its own frame.
Frames are the building blocks
Every website is a box inside a box. In Framer those boxes are called frames, and they form the skeleton of every site.
Parent, child and grandparent
Learn the family-tree terminology used throughout the course to describe where frames sit on the canvas.
HOW FRAMES FIT TOGETHER
Ryan breaks two real websites down into their frames, then explains the terminology you'll hear for the rest of the course.
Everything is a box
A nav bar, a hero section, an image and even a button are each just a frame.
Frames are the skeleton
Frames hold the structure; you fill them with text, images and buttons to finish the site.
Family-tree terminology
Elements inside a frame are its children; the frame above is the parent, and above that the grandparent.
03:34
Read any layout as frames
Look at a website and see the nested boxes that build it, and describe them using parent and child terminology.
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.
Building Your First Hero Section in Framer
Time to put your skills into action. In this hands-on lesson, Ryan walks you through building a hero section from scratch, bringing together everything you have learned so far in Framer.
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.
FUNDAMENTALS
Pick any website you like and sketch its top section as boxes. Mark the nav bar, the hero section, the image, the button and the container that holds them, then label which frames are parents and which are children.
Learn the basics
PUBLISH CHECKLIST
Is the page responsive?
Do I use a container?
Using text & color styles?
Used components for reusable elements
Updated SEO
Published my site
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
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
