New & improved 2.0 version
The definitive Framer course to go from a beginner to a Pro
Learn to turn your designs into functional websites with Framer and increase your earning potential as a designer.
30-day money back guarantee
Predrag Rovcanin
Lead Designer at Vix Nova agency
Here are just a few reasons why students choose our course
We keep up with the pace of Framer's development by releasing new videos every month. Of course, you get access to all new updates.
We will not bore you with hour-long videos that will put you to sleep. We kept all of our videos short to make it easy to consume.
Whether you are a complete beginner, or have some experience building sites with Framer, you will learn useful skills in this course.
Everybody learns differently. Some students finish the course in a week, others take a month. You can learn at the pace that works best for you.
In this course we will not be building some gimmicky site that looks cool. We will build out a real website that has been used by real businesses.
This is an all-in-one course that will help you master Framer. We'll take you step-by-step so that you can implement the concepts with ease.
In this course you'll master…
Fundamentals of working with Framer
We'll start with giving you a breakdown of the fundamental concepts in Framer. You'll learn about sizing, positioning, layouts, text styles, color styles, working with images, icons, and even create your first component. This foundational knowledge will set you up for success in the later modules.
Fundamentals of working with Framer
We'll start with giving you a breakdown of the fundamental concepts in Framer. You'll learn about sizing, positioning, layouts, text styles, color styles, working with images, icons, and even create your first component. This foundational knowledge will set you up for success in the later modules.
Fundamentals of working with Framer
We'll start with giving you a breakdown of the fundamental concepts in Framer. You'll learn about sizing, positioning, layouts, text styles, color styles, working with images, icons, and even create your first component. This foundational knowledge will set you up for success in the later modules.
Responsive design & development
We will approach each design element with responsiveness in mind, so that our website looks great on all screen sizes. You'll learn how to design each section and each element responsively (pun intended) so that you don't have to make many changes on tablet & mobile breakpoints.
Responsive design & development
We will approach each design element with responsiveness in mind, so that our website looks great on all screen sizes. You'll learn how to design each section and each element responsively (pun intended) so that you don't have to make many changes on tablet & mobile breakpoints.
Responsive design & development
We will approach each design element with responsiveness in mind, so that our website looks great on all screen sizes. You'll learn how to design each section and each element responsively (pun intended) so that you don't have to make many changes on tablet & mobile breakpoints.
Working with components
Components will be our best friends throughout the course. They'll help us speed up our design process and give us flexibiliy with making any changes. We'll create 30+ components in this course and you'll learn how to work with components of various difficulty. By the end of the course, you'll become a master at working with components.
Working with components
Components will be our best friends throughout the course. They'll help us speed up our design process and give us flexibiliy with making any changes. We'll create 30+ components in this course and you'll learn how to work with components of various difficulty. By the end of the course, you'll become a master at working with components.
Working with components
Components will be our best friends throughout the course. They'll help us speed up our design process and give us flexibiliy with making any changes. We'll create 30+ components in this course and you'll learn how to work with components of various difficulty. By the end of the course, you'll become a master at working with components.
Managing content at scale with CMS
On top of components, you'll learn how to manage your site content at scale with Framer's power Content Management System (CMS). We'll create CMS collections of various complexity, learn how to import & export data with CVSs. You'll also learn how to set limits, conditional views, and CMS references.
Managing content at scale with CMS
On top of components, you'll learn how to manage your site content at scale with Framer's power Content Management System (CMS). We'll create CMS collections of various complexity, learn how to import & export data with CVSs. You'll also learn how to set limits, conditional views, and CMS references.
Managing content at scale with CMS
On top of components, you'll learn how to manage your site content at scale with Framer's power Content Management System (CMS). We'll create CMS collections of various complexity, learn how to import & export data with CVSs. You'll also learn how to set limits, conditional views, and CMS references.
Collecting data with custom forms
We'll create a custom form from scratch using Framer's native form builder. We'll customize every field, desing loading and success states, and connect the form to email and Google sheets for easy data management. By the end of the course, you'll be able to create forms of any difficulty.
Collecting data with custom forms
We'll create a custom form from scratch using Framer's native form builder. We'll customize every field, desing loading and success states, and connect the form to email and Google sheets for easy data management. By the end of the course, you'll be able to create forms of any difficulty.
Collecting data with custom forms
We'll create a custom form from scratch using Framer's native form builder. We'll customize every field, desing loading and success states, and connect the form to email and Google sheets for easy data management. By the end of the course, you'll be able to create forms of any difficulty.
3D transforms
We'll also dive into 3D transforms. We'll start off with a quick intro and then turn our testimonial cards into 3D cards that flip on hover on desktop breakpoint and on click on mobile breakpoint. By the end of the course, you'll be able to work with 3D effects with ease.
3D transforms
We'll also dive into 3D transforms. We'll start off with a quick intro and then turn our testimonial cards into 3D cards that flip on hover on desktop breakpoint and on click on mobile breakpoint. By the end of the course, you'll be able to work with 3D effects with ease.
3D transforms
We'll also dive into 3D transforms. We'll start off with a quick intro and then turn our testimonial cards into 3D cards that flip on hover on desktop breakpoint and on click on mobile breakpoint. By the end of the course, you'll be able to work with 3D effects with ease.
Advanced interactions & animations
We'll bring our site to life with animations and effects. This will be the most exciting part of the course. You'll learn how to work with appear, scroll, loop, drag, hover, press, scroll transform, and scroll speed effects. We'll also dive into text effects & page-level effects. By the end of the course, you'll know how to work with all effects in Framer.
Advanced interactions & animations
We'll bring our site to life with animations and effects. This will be the most exciting part of the course. You'll learn how to work with appear, scroll, loop, drag, hover, press, scroll transform, and scroll speed effects. We'll also dive into text effects & page-level effects. By the end of the course, you'll know how to work with all effects in Framer.
Advanced interactions & animations
We'll bring our site to life with animations and effects. This will be the most exciting part of the course. You'll learn how to work with appear, scroll, loop, drag, hover, press, scroll transform, and scroll speed effects. We'll also dive into text effects & page-level effects. By the end of the course, you'll know how to work with all effects in Framer.
SEO & analytics
We'll finalize our site development by making sure all SEO parameters & settings are set correctly. You'll learn how to set titles, meta descriptions, images, and how to add custom domains. We'll also go over Framer analytics & how to connect your site to Google Analytics.
SEO & analytics
We'll finalize our site development by making sure all SEO parameters & settings are set correctly. You'll learn how to set titles, meta descriptions, images, and how to add custom domains. We'll also go over Framer analytics & how to connect your site to Google Analytics.
SEO & analytics
We'll finalize our site development by making sure all SEO parameters & settings are set correctly. You'll learn how to set titles, meta descriptions, images, and how to add custom domains. We'll also go over Framer analytics & how to connect your site to Google Analytics.
Some kind words from course graduates
Mark Mograph
Motion designer
Avis Williams
UX/UI Designer at Green Collab
Predrag Rovcanin
Lead Designer at Vix Nova
Miguel Tapia
Analyst at Gallo
Riza Seitra
Student
Elin Marte
Founder of FramerWiz
Mark Mograph
Motion designer
Avis Williams
UX/UI Designer at Green Collab
Predrag Rovcanin
Lead Designer at Vix Nova
Miguel Tapia
Analyst at Gallo
Riza Seitra
Student
Elin Marte
Founder of FramerWiz
Course Curriculum
Detailed course curriculum which covers everything we will learn during the course.
Homepage & Components
Components module overview
2:34
Free
Setting up our project & first font styles
9:14
Free
Defining all font styles
10:48
Free
Setting color styles
10:27
Hero section
13:54
Working with logos in Framer
6:27
Validation section & ticker component
9:30
Feature highlights section
16:24
Features section: designing the section
15:08
Features section: turning into components
8:30
Process: Designing the section
14:15
Process: Adding interactivity
7:12
Vertically rotating card: design
11:07
Vertically rotating cards: interactivity
11:21
Featured testimonial
11:51
FAQ: designing cards
13:21
FAQ: making card interactive
7:37
Blogs & CMS
Blogs & CMS Module overview
1:10
Free
Setting up our first CMS collection
8:11
Designing blog post page
7:58
CSV importing & exporting
3:13
CMS references
12:11
Conditional views
3:36
Creating our Blog card
11:24
Connecting components to CMS
6:40
CMS filtering & limits
8:39
Adding a Back button
6:08
Legal page with Previous & Next buttons
11:43
Animations & Effects
Animations & Effects Module overview
0:57
Free
Header Appear effect
8:43
Hero circle scroll transform effect
7:31
3D scroll transforms
6:53
Scroll speed effect
3:30
Scroll animation for Navbar
2:35
Appear animation with a delay
6:09
Feature section - Effects on component level
5:45
Loop, Drag, Hover & Press effects
10:37
Text effects
5:49
Page effects
6:53
Buttons hover effect
8:09
Homepage & Components
Components module overview
2:34
Free
Setting up our project & first font styles
9:14
Free
Defining all font styles
10:48
Free
Setting color styles
10:27
Hero section
13:54
Working with logos in Framer
6:27
Validation section & ticker component
9:30
Feature highlights section
16:24
Features section: designing the section
15:08
Features section: turning into components
8:30
Process: Designing the section
14:15
Process: Adding interactivity
7:12
Vertically rotating card: design
11:07
Vertically rotating cards: interactivity
11:21
Featured testimonial
11:51
FAQ: designing cards
13:21
FAQ: making card interactive
7:37
Blogs & CMS
Blogs & CMS Module overview
1:10
Free
Setting up our first CMS collection
8:11
Designing blog post page
7:58
CSV importing & exporting
3:13
CMS references
12:11
Conditional views
3:36
Creating our Blog card
11:24
Connecting components to CMS
6:40
CMS filtering & limits
8:39
Adding a Back button
6:08
Legal page with Previous & Next buttons
11:43
Animations & Effects
Animations & Effects Module overview
0:57
Free
Header Appear effect
8:43
Hero circle scroll transform effect
7:31
3D scroll transforms
6:53
Scroll speed effect
3:30
Scroll animation for Navbar
2:35
Appear animation with a delay
6:09
Feature section - Effects on component level
5:45
Loop, Drag, Hover & Press effects
10:37
Text effects
5:49
Page effects
6:53
Buttons hover effect
8:09
Homepage & Components
Components module overview
2:34
Free
Setting up our project & first font styles
9:14
Free
Defining all font styles
10:48
Free
Setting color styles
10:27
Hero section
13:54
Working with logos in Framer
6:27
Validation section & ticker component
9:30
Feature highlights section
16:24
Features section: designing the section
15:08
Features section: turning into components
8:30
Process: Designing the section
14:15
Process: Adding interactivity
7:12
Vertically rotating card: design
11:07
Vertically rotating cards: interactivity
11:21
Featured testimonial
11:51
FAQ: designing cards
13:21
FAQ: making card interactive
7:37
Blogs & CMS
Blogs & CMS Module overview
1:10
Free
Setting up our first CMS collection
8:11
Designing blog post page
7:58
CSV importing & exporting
3:13
CMS references
12:11
Conditional views
3:36
Creating our Blog card
11:24
Connecting components to CMS
6:40
CMS filtering & limits
8:39
Adding a Back button
6:08
Legal page with Previous & Next buttons
11:43
Animations & Effects
Animations & Effects Module overview
0:57
Free
Header Appear effect
8:43
Hero circle scroll transform effect
7:31
3D scroll transforms
6:53
Scroll speed effect
3:30
Scroll animation for Navbar
2:35
Appear animation with a delay
6:09
Feature section - Effects on component level
5:45
Loop, Drag, Hover & Press effects
10:37
Text effects
5:49
Page effects
6:53
Buttons hover effect
8:09
Course Pricing
Enroll today to get the best pricing. All future course updates are included in your membership.
Course
Get access to the entire curriculum & learn at your own pace
$99
one-time fee
What's included:
90+ video lessons
90+ video lessons
90+ video lessons
11+ hours of content
11+ hours of content
11+ hours of content
Lifetime access
Lifetime access
Lifetime access
All future updates
All future updates
All future updates
Course + Coaching
Get access to the curriculum and 2 separate 1:1 sessions with the instructor
$399
one-time fee
What's included:
90+ video lessons
90+ video lessons
90+ video lessons
11+ hours of content
11+ hours of content
11+ hours of content
Lifetime access
Lifetime access
Lifetime access
All future updates
All future updates
All future updates
Two 40-min 1:1 sessions with instructor
Two 40-min 1:1 sessions with instructor
Two 40-min 1:1 sessions with instructor
Both plans are eligible to 100% money-back guarantee within the first 30 days. For the Course + Coaching plan, the instructor hours should be unused in order to get a refund.
Hi 👋 I'm Firdavs - your instructor for the course
I'm an official Framer expert, partner, and the founder of framer.ing templates. I've spent over 1,000 hours building Framer templates and websites for clients. Along the way, I learned all the intricacies of working with the platform and I'm excited to share all of my learnings with you. This course is 1,000+ hours of Framer experience condensed into 10. You'll learn a ton about building with Framer in this course, and if you are not satisfied - I'm happy to give the money back.
FAQs
Some answers to some frequently asked questions.
Why should I take this course instead of learning Framer on my own?
While self-learning is always an option, our Framer: Beginner to Pro course offers several unique advantages:
Structured Learning Path: We provide a carefully designed curriculum that takes you from the basics to advanced concepts in a logical, step-by-step manner.
Comprehensive Coverage: The course covers all aspects of Framer, ensuring you don't miss any crucial features or best practices.
Accelerated Progress: Our structured approach helps you progress faster than self-learning, allowing you to tackle complex projects sooner.
Practical Projects: We include real-world projects that reinforce your learning and build your portfolio.
Expert Guidance: Benefit from the instructor's experience and avoid common pitfalls in your learning journey.
How up-to-date is the course content?
We regularly update our course content to ensure it aligns with the latest Framer features and best practices. Our team monitors Framer updates and incorporates new functionalities into the course material promptly.
Do I need any prior experience with web design or development?
While no prior Framer experience is necessary, having some background in web design is highly beneficial for this course. Our curriculum focuses primarily on web development using Framer, rather than teaching fundamental web design principles. We take you from a complete Framer beginner to a proficient user, covering everything from basic concepts to advanced techniques.
Are there any discounts available for students or individuals from developing countries?
Yes, we offer generous discounts to make our course more accessible:
Students receive a 50% discount on the course price.
Individuals from developing countries are eligible for a 40% discount.
To claim these discounts, please email firdavsinho at gmail.com. Students should use their student email address when contacting us.
What is the refund policy for this course?
We offer a 30-day money-back guarantee for students who have completed less than 10% of the course content. For the Course + Coaching plan, the instructor hours must be unused to be eligible for a refund. This policy ensures that you can try the course risk-free while also protecting the value of our premium content and coaching services.
Why should I take this course instead of learning Framer on my own?
While self-learning is always an option, our Framer: Beginner to Pro course offers several unique advantages:
Structured Learning Path: We provide a carefully designed curriculum that takes you from the basics to advanced concepts in a logical, step-by-step manner.
Comprehensive Coverage: The course covers all aspects of Framer, ensuring you don't miss any crucial features or best practices.
Accelerated Progress: Our structured approach helps you progress faster than self-learning, allowing you to tackle complex projects sooner.
Practical Projects: We include real-world projects that reinforce your learning and build your portfolio.
Expert Guidance: Benefit from the instructor's experience and avoid common pitfalls in your learning journey.
How up-to-date is the course content?
We regularly update our course content to ensure it aligns with the latest Framer features and best practices. Our team monitors Framer updates and incorporates new functionalities into the course material promptly.
Do I need any prior experience with web design or development?
While no prior Framer experience is necessary, having some background in web design is highly beneficial for this course. Our curriculum focuses primarily on web development using Framer, rather than teaching fundamental web design principles. We take you from a complete Framer beginner to a proficient user, covering everything from basic concepts to advanced techniques.
Are there any discounts available for students or individuals from developing countries?
Yes, we offer generous discounts to make our course more accessible:
Students receive a 50% discount on the course price.
Individuals from developing countries are eligible for a 40% discount.
To claim these discounts, please email firdavsinho at gmail.com. Students should use their student email address when contacting us.
What is the refund policy for this course?
We offer a 30-day money-back guarantee for students who have completed less than 10% of the course content. For the Course + Coaching plan, the instructor hours must be unused to be eligible for a refund. This policy ensures that you can try the course risk-free while also protecting the value of our premium content and coaching services.
Why should I take this course instead of learning Framer on my own?
While self-learning is always an option, our Framer: Beginner to Pro course offers several unique advantages:
Structured Learning Path: We provide a carefully designed curriculum that takes you from the basics to advanced concepts in a logical, step-by-step manner.
Comprehensive Coverage: The course covers all aspects of Framer, ensuring you don't miss any crucial features or best practices.
Accelerated Progress: Our structured approach helps you progress faster than self-learning, allowing you to tackle complex projects sooner.
Practical Projects: We include real-world projects that reinforce your learning and build your portfolio.
Expert Guidance: Benefit from the instructor's experience and avoid common pitfalls in your learning journey.
How up-to-date is the course content?
We regularly update our course content to ensure it aligns with the latest Framer features and best practices. Our team monitors Framer updates and incorporates new functionalities into the course material promptly.
Do I need any prior experience with web design or development?
While no prior Framer experience is necessary, having some background in web design is highly beneficial for this course. Our curriculum focuses primarily on web development using Framer, rather than teaching fundamental web design principles. We take you from a complete Framer beginner to a proficient user, covering everything from basic concepts to advanced techniques.
Are there any discounts available for students or individuals from developing countries?
Yes, we offer generous discounts to make our course more accessible:
Students receive a 50% discount on the course price.
Individuals from developing countries are eligible for a 40% discount.
To claim these discounts, please email firdavsinho at gmail.com. Students should use their student email address when contacting us.
What is the refund policy for this course?
We offer a 30-day money-back guarantee for students who have completed less than 10% of the course content. For the Course + Coaching plan, the instructor hours must be unused to be eligible for a refund. This policy ensures that you can try the course risk-free while also protecting the value of our premium content and coaching services.