ENROLL IN THIS MASTERCLASS TO VIEW THIS LESSON
The end-to-end ultimate Framer masterclass course.
“Now it’s your turn. You’ve been watching me build, now you’re gonna do it too. Don’t worry, I’m right here with you.” – Ryan
Starting in Next Lesson, you’ll follow Ryan step-by-step as he builds a full, clean, responsive portfolio site in Framer. This is your first full build, and you’ll be doing it alongside him.
What You’ll Do
Open a fresh Framer project
Use the Figma file to collect assets or follow the visual layout
Follow Ryan in Lessons, building alongside him
Pause the video, implement what you see, repeat!
You can:
Copy Ryan’s design 1:1 (great for mastering fundamentals) OR
Get creative and add your own colors, layout tweaks, or effects
Either way, your goal is to publish a real site by the end
What You’ll Need
A free Framer account + fresh project
The Figma file (to grab layout, images, structure)
Lessons "first site" part 1 - 4
Core Building Blocks (What Your Site Must Include)
Section | What to Look Out For |
|---|---|
Hero | Large name, intro text, CTA |
Navbar | Simple nav with links |
CMS Content | “Selected work” grid |
CMS Pages | Click into full project pages |
Contact Form | Simple form with 3 fields |
Footer | Site links, socials |
Responsive | Works on desktop/tablet/phone |
Effects | Hover or scroll animations |
Published | Site is live & viewable |
What Comes Next?
This is your first assessment, but it won’t block certification.
You’ll get certified when you complete the final quiz but this is your first real test as a Framer creator.
You’ll submit: Your remix and live link
