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.
BUILD THE HERO IN THREE MOVES
Follow the lesson flow: draw and style the section, add the content, then lock in the layout so it responds to the screen.
Draw the section
Press F to draw a frame, set the width to 100% and the height to auto, then add a grey background style.
Add the content
Type the heading and paragraph, draw a button frame with white text and an arrow icon, then paste in the image asset.
Structure the layout
Wrap the text and button in a stack, set it to horizontal with space-between, and add outer padding so nothing touches the edge.
11:26
Build a section from scratch
Draw frames, apply fills and text styles, and understand how a hero is put together.
11:26
Control layout with stacks
Use direction, distribution, alignment and padding to align content without guesswork.
11:26
Layer images with absolute positioning
Pin an image, manage z-index and add a gradient so the hero responds nicely at any width.
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.
Overflow in Framer
Overflow decides what happens when content is bigger than the frame it lives in. Learn the four overflow types and when to use each one.
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
Open a blank Framer project and rebuild the hero from the lesson: a 100% width section, a heading, a paragraph, a button with an arrow icon, and one image positioned absolutely behind the content. Preview it and resize the window to check that the bottom row stays aligned.
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
