Advanced Framer
No code doesn't mean no complexity.
This course is no longer available.
Explore other courses
Course overview
Get over the hump and learn how to build your own ideas.
Building something basic is easy. Building what you want is where things get tricky.
Get the tools to build anything by putting together a high quality site from start to finish.
You need this course if you are:
01
A freelancer who needs the confidence to build anything your clients need.
02
Moving your company's large content rich site to Framer
03
A startup looking to grab attention with a super slick landing page.
04
Building a personal portfolio that stands out from the template crowd.
What you’ll get out of this course
A deep understanding of Layout and Motion
You'll understand how to build dynamic and complex layouts that leverage Framer's powerful but quirky motion engine.
Content at scale
A site is nothing without content! You'll learn how to use Framer’s CMS (Content Management System) in combination with your designs.
Go beyond Framer's functionality
Learn how to use Code Overrides and Code Components to open up new possibilities beyond Framer's UI.
Integrations! Integrations! Integrations!
Learn how to take your site to the next level by integrating tools like Spline, for 3D, and Rive for advanced animations.
Course syllabus
12 lessons • 8 projects
Week 1
- 📄
Lesson 1: Nav + Flyout Menu
- ✍️
Create a Flyout Menu Nav Bar
Submit by Oct 19 - 📄
Lesson 2: Feature Carousel
- ✍️
Make a Cycling Carousel
Submit by Oct 19 - 📄
Lesson 3: Fraud Animations
- 📄
Lesson 4: Scroll Carousel
- ✍️
Create a Scrolling Carousel
Submit by Oct 19 - 📄
Lesson 5: Pricing Component + Table
- ✍️
Build a Pricing Component
Submit by Oct 18 - 📄
Lesson 6: Border Gradients + Parallax Effects
- 📄
Lesson 7 - Code Overrides
- ✍️
Create a Code Override
Submit by Oct 19 - 📄
Lesson 8: Code Components
- ✍️
Use AI to Create a Code Component
Submit by Oct 19 - 📄
Lesson 9: Rive
- ✍️
Create an Interactive Rive Animation
Submit by Oct 19 - 📄
Lesson 10: Spline
- ✍️
Create an Interactive Spline Animation
Submit by Oct 18 - 📄
Lesson 11: CMS
- 📄
Lesson 12: Integrations, Accessibility and Performance
Build
In this module we build the different sections of the Detax site to learn the techniques used to create dynamic, interactive sites in Framer. We also cover how to make these complicated UI elements responsive across breakpoints.
Everything in this module is done in Framer's UI - no coding.
Craft
In this module we push beyond what is possible in Framer's UI by using Code Overrides and Components to augment Framer's functionality. We also integrate Rive and Spline create interactions not possible with Framer on it's own.
No coding skill required, but parts of this do get pretty technical.
Scale
In this module we dive into everything needed to create Framer sites that work at scale. We look at how you can integrate 3rd party tools into Framer, like custom analytics, and how to ensure your site is ready for production.
Week 2
Week 3
Week 4
Week 5
What people are saying
Dan
Ben
Meet your instructor
Dan Hollick
Dan Hollick
Product Designer at Raycast
I've been working in tech as a product designer since we used to do it in Photoshop. These days I run my own small design company, Rectangle Labs.
I've always been obsessed with design tools and Framer is no exception.
You can usually catch me writing very long threads about design tooling over on twitter.
What's in the box?
Learn how you want
Like to jump around? No problem.
The topics are designed so that you can jump in and learn the specific thing you're interested in.
Course assets included
Get remix links for everything we build so that you can adapt them to your own projects.
Collaborate with others
Stuck on something? Share what you're building with fellow course participants and we'll figure it out together.