Framer Complete Course 2025

Video Description

This is a Premium Framer Course. This is the video you will ever need to learn Framer completely. In this Framer course, we will learn every feature from scratch by designing a real-time complete website. This tutorial is perfect for beginners who want to learn Framer and start making professional websites without any coding skills. In this course we will cover almost all core concepts of Framer including Layouts, Components, Dynamic Variables, Effects, Animations, Responsive designs, Breakpoints, Light and Dark modes, CMS and more. 📦 Get Resource Zip File (FREE) — https://averagedesigndude.lemonsqueezy.com/buy/adaca6cb-5535-4379-8064-7378d0affd65 👉 Get Final Website Source File — https://averagedesigndude.lemonsqueezy.com/buy/114a0d90-8f4d-4688-91c5-759ea74fd44a 👉 Get Esteemed Portfolio Templated (Use 25% off Discount Code K3ODCXOQ) — https://averagedesigndude.lemonsqueezy.com/buy/77d868ea-9e39-483e-bfcd-c081a2ecc4ce ❤️ Show love by Joining Membership — https://www.youtube.com/channel/UCjaRNaAUC2FRKFbTDx1-nWw/join --------------- 🎓 Topics we cover in this Course: 00:00:00 Intro 00:02:30 Getting Access To Framer 00:03:51 Framer overview 00:07:45 Frames and positioning explained 00:12:11 Layouts in Framer explained 00:19:08 Getting ready for website design. 00:20:28 Defining color styles with dark and light mode 00:22:56 Defining text styles 00:25:12 Desiging responsive navbar component 00:29:19 Breakpoints explained 00:30:08 Adding Tablet and Phone Breakpoints 00:30:38 Components and variants in Framer ft. Navbar 00:41:19 Variables and dynamic components properties 00:44:58 Hero section design 00:48:11 Adding a ticker 00:49:45 Adding a fixed max width container 00:50:35 Making Navbar Fixed on Top 00:51:47 Trick for max width container 00:53:02 Continuing with website design... 00:55:08 Card design, Icons and Dynamic card component properties 00:58:59 Why we use Layouts? 00:59:31 Continuing with website design... 01:01:37 Grid layout 01:03:15 Continuing with website design... 01:04:01 Button component with hover and pressed state 01:05:51 Dark and Light mode 01:06:44 Continuing with website design... 01:12:08 Fixing Tablet and Phone Design for Responsiveness 01:18:52 Making new contact page and Adding Templates 01:23:12 Adding form to Contact Page 01:29:30 Making Thank you page and adding redirection 01:30:49 Making a work page 01:32:34 Intro to CMS 01:33:47 CMS setup and connection 01:50:01 Adding breakpoints to all pages 02:11:03 Publishing website 02:13:26 Outro ----------------------------------- 🎯 Want to learn more about Figma? Subscribe to my channel. https://youtube.com/@AverageDesignDude 🚨 Learn more tips and tricks on Figma on my Instagram channel below https://www.instagram.com/averagedesigndude/