Stacks allow us to create rows or columns of elements that automatically align, distribute, and space themselves within the available space. Which not only means less tedious scaling and repositioning for us on the canvas — but also lets us build bulletproof layouts that can flex and adapt when things change size in browser.

Stacks not only unlock relative positioning — but also new sizing options that can make elements fill their parent — or make a parent frame automatically fit its children.

In this lesson, we’re going to look at how Stacks and Relative positioned layers work, how they make our lives easier, and of course when to use them.

If you’re already familiar with auto-layout in Figma or Flexbox in CSS, you’ve got a head start — but either way, you’re in the right place because we’re going to start with the basics.

00:00 Intro
00:09 What stacks do and why they matter
00:20 Stacks and relative positioning
00:37 Turning frames into stacks
01:12 Relative positioning behavior in stacks
01:55 Common use cases for stacks
02:25 Fitting stacks to content
03:02 Creating stacks from scratch or wrapping layers
03:55 Default stretching behavior for new stacks
04:16 Stack properties: direction and distribution
05:26 Adjusting gaps between elements
05:55 Aligning elements on the cross axis
06:11 Using padding effectively
06:44 Wrapping elements in stacks
07:02 Applying stack layouts to breakpoint frames
07:45 Wrap up

🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x

My Favorite Tool: https://amzn.to/3NIFJuO
Tools We Recommend: https://www.amazon.com/shop/benjaminsahlstrom

In this video I discuss different options for framing corners with 2x4s.

0:00 - 2x4 Corner Framing Intro
0:07 - Ways To Frame Corner
1:19 - The Best Way To Frame 2x4 Corner
2:00 - SUBSCRIBE!!!

Thanks for watching and subscribing! As an Amazon affiliate I earn from qualifying purchases. Thank you for your support!
Was this video helpful to you? Send a tip:https://www.paypal.me/bensahlstrom
Become a Patron: https://www.patreon.com/bensahlstrom

⚡️ Join my monthly newsletter for exclusive goodies:
https://mizko.net/newsletter

---

⚡ Get 3 FREE months on a Pro annual subbie!
https://mizko.net/framer

⚡️ Timestamps:
00:00 - Introduction to Framer
02:07 - Framer ecosystem
04:59 - Framer dashboard overview
06:35 - Portfolio design we will be building
07:05 - Framer workspace overview
14:20 - Let's start building
25:00 - Framer Collections (CMS)
36:40 - Building responsive views in Framer
41:48 - Framer effects

---

Become a highly-demanded Product (UX/UI) designer with me:

Master Figma with my Ultimate Figma Design Masterclass (6,800+ students)
👉 https://thedesignership.com/co....urses/the-ultimate-f

Practical UX Research & Strategy Masterclass (700+ students)
👉 https://thedesignership.com/co....urses/practical-user

Shipfaster UI - Advanced Figma Design System (3,000+ designers)
👉 https://thedesignership.com/pr....oducts/figma-design-

Outline - Figma Wireframe Kit (500+ designers)
👉 https://www.thedesignership.co....m/products/outline-w

Follow me on IG (Daily updates):
👉 https://instagram.com/themizko

---

Follow and learn with me:

Become a legendary designer: https://thedesignership.com
Personal portfolio: https://mizko.net
Instagram: https://instagram.com/themizko
LinkedIn: https://linkedin.com/in/mizko

Whether you’re a Framer newbie or a seasoned pro, mastering the mechanics (and tricks) of interacting with layers and navigating the canvas will speed up your work tremendously.

Let’s start with the basic mechanics of selecting layers on the canvas.

00:00 Intro
00:11 Basic layer selection mechanics
00:29 Selecting parents and adjusting preferences
00:45 Multiple selection techniques
01:10 Selecting from the layers panel
01:38 Moving layers with absolute positioning
02:03 Using keyboard nudging and alignment tools
02:26 Nesting layers inside frames
02:52 Preventing automatic nesting
03:30 Navigating the canvas
03:46 Zooming techniques and shortcuts
05:35 Wrap up

🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x

In this Framer beginner tutorial we build a responsive and animated website from scratch—in 30 minutes.

🔴 learn about the future of creative work: https://timgabe.com/newsletter
🔴 Working File: https://timgabe.com/resources/....framer-complete-webs

Timestamps
00:35 Styleguide
04:29 Structure
07:05 Design Tweaks
20:07 Responsiveness
26:29 Delightful Animations

#figma #figmatutorial

➡️ QUESTION — Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video—I’m happy to answer!

Framer is changing how websites are built in 2025. In this tutorial, Hassan from AllAboutAI walks you through how to build a professional website quickly with Framer, no coding required!

🚀 You’ll learn:
• What Framer is and why it’s growing 400% in user adoption
• How to design and publish websites faster than ever
• Framer vs Webflow, WordPress, and Wix — real-world comparisons
• The secret workflow top designers use to save 70% in development costs
• Key tips to optimize speed, SEO, and responsive design

By the end of this video, you’ll know exactly how to use Framer to build websites in days instead of months, while saving thousands in development costs.

💡 All stats & comparisons are based on 2025 industry data from verified market reports.

#vibecoding #framer #nocode #websitebuilder #ai #webdesign #framertutorial #webflow #wordpress #aitools #techtutorial #nocodetools #webdevelopment
Subscribe to Our Channel | https://www.youtube.com/@allab....outaicom?sub_confirm

Don't forget to:
👍 Like this video if you found it helpful
🔔 Subscribe to AllAboutAI for more insights and updates
💬 Share your experiences in the comments below

Stay updated with our latest content and join the conversation on our social media channels!
🤝Join our community | https://www.facebook.com/groups/allaboutaicom
🌐 Website | https://www.allaboutai.com
👍 Facebook | https://www.facebook.com/allaboutaicom
🐦 Twitter | https://www.x.com/allaboutaicom
📸 Instagram | https://www.instagram.com/allaboutai_official/
🎶 TikTok | https://www.tiktok.com/@allaboutaicom
🧑🏼‍💼LinkedIn | https://www.linkedin.com/company/allaboutai-com/
📌 Linktree | https://linktr.ee/allaboutaicom

In this video, we’ll break down the core building blocks of Framer’s CMS: Collections, Items, and Fields. You’ll learn how to create your first collection, add and manage content, and define custom fields to structure your data. Whether you're building a blog, portfolio, or product catalog, this lesson will set the foundation for creating scalable, content-driven sites in Framer.

00:00 Introduction
00:28 What is a CMS Collection?
00:53 Creating a CMS Collection
02:02 Exploring CMS Field Types
04:17 Adding Items to the Collection
05:20 Wrap Up

Check out the full course here: https://www.framer.com/academy..../courses/getting-sta

🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x

Creating layouts that look and behave the way we want them to largely comes down to choosing the right sizing mode for each element.

As you know, we have several to choose from — and each has a unique purpose, depending on how static or flexible we want things to be.

Earlier in this chapter, we unpacked “Fill” and “Fit Content” sizing — but there’s also a time and place to use “Fixed”, “Relative”, and “Viewport” sizing.

Whether we want our elements to remain at a specific size, scale with our layout, or even respond to a viewer’s screen size, we’ve got options to get the job done.

So let’s dive a bit deeper into how these next three sizing methods work and when to use each one.

00:00 Intro
00:06 Fixed sizing explained
00:24 Locking aspect ratios with fixed sizing
00:59 When to use fixed sizing
00:36 Relative sizing explained
03:28 Example of relative sizing
04:22 Viewport sizing explained
04:55 Setting full screen hero sections
05:26 Recap of sizing and positioning modes
06:40 Wrap up

🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x

Let’s start with the basics — how to make things feel alive when visitors interact with them. Hover and press effects are small touches that make a big difference — by giving visitors tangible feedback that makes it super clear if something is clickable in the first place — and if they’ve clicked it successful. In this lesson, we’ll walk through how to create these two effects in Framer in just a couple of clicks.

Grab the remix link here: https://www.framer.com/academy..../lessons/framer-anim

00:00 Intro
00:05 Why hover and press effects matter
00:19 Jumping into the Framer project file
00:43 Starting with the hover effect
01:02 Choosing and previewing hover settings
01:36 Adjusting transition with spring physics
02:30 Finalizing hover effect settings
02:54 Previewing the hover effect
03:15 Introducing press effects
03:39 Adding a press effect in Framer
03:55 Scaling for a pressed state
04:15 Matching spring settings to hover
04:26 Previewing the press effect
04:39 Adding rotation to the press effect
05:01 Final preview with rotation and scale
05:56 Wrap-up

Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
Learn: https://framer.link/yt-academy

If you’ve ever opened Framer and thought, “what even is a frame or a stack?” — this video is for you.

In this quick beginner tutorial, I’ll walk you through the basics of Framer — from understanding frames and stacks to how they work together to build clean, responsive website layouts (without touching code!).

You’ll learn:
✨ What frames and stacks actually mean
✨ How to structure your Framer canvas like a pro
✨ Simple layout tips to keep your designs consistent
✨ How to make your site responsive the easy way


Join the Patreon community here for weekly exclusive graphic design tutorials and to connect with other creatives!!!
use code: YOUTUBESUBS for 15% off: https://patreon.com/curatedcollectiveco

---------------------------------------

// WHERE TO FIND ME //

join my community or take my courses:
https://curatedcollectiveco.com/

instagram:
https://www.instagram.com/meganweeksdesign/

pinterest:
https://www.pinterest.com/meganweeksdesignco/

online portfolio:
https://meganweeksdesignco.com/

collaboration or business inquiries:
support@meganweeksdesignco.com

---------------------------------------

// MY FREE GRAPHIC DESIGNER RESOURCES //

GET THE FREE WEBSITE DESIGN PROCESS GUIDE HERE:
https://view.flodesk.com/pages..../6333c1377a59217f232

PRE-WRITTEN EMAILS FOR YOUR GRAPHIC DESIGN BUSINESS:
https://view.flodesk.com/pages..../6438202be83ecbda707

WEBSITE IN A WEEK PROCESS GUIDE:
https://view.flodesk.com/pages..../64c0bb6ad206cffe611

BRAND DESIGN ROADMAP:
https://view.flodesk.com/pages..../645bf9ca2efd35a7e39

FREE LOGO DESIGN QUESTIONNAIRE:
https://view.flodesk.com/pages..../63edbe7c8e06d4dae94

PROJECT MANAGEMENT WORKFLOW:
https://view.flodesk.com/pages..../64aefc19e181ddda00f

HOW TO GO FROM HOURLY FREELANCER TO TRUSTED DESIGNER
GET MY FREE TRAINING VIDEO 💥
https://view.flodesk.com/pages..../62f40298e5ea6b3d8ae

---------------------------------------

// TAKE MY COURSES //

LOGO DESIGN: SIMPLIFIED
https://courses.curatedcollect....iveco.com/courses/lo

DUBSADO DECODED: PROJECT MANAGEMENT
https://courses.curatedcollect....iveco.com/courses/du

GUIDE TO: LANDING GRAPHIC DESIGN CLIENTS
This course has 5 video led modules, a downloadable e-book and you will be able to join my community as well 💕
https://meganweeksdesignco.thi....nkific.com/courses/g

✨ WordPress Website Design Course ✨
https://meganweeksdesignco.thi....nkific.com/courses/w

✨ Custom Branding Process Course ✨
https://meganweeksdesignco.thi....nkific.com/courses/c

NOW OFFERING BRAND + WEB DESIGN COURSES IN A BUNDLE 💥
https://meganweeksdesignco.thi....nkific.com/bundles/b

---------------------------------------

// OTHER HELPFUL LINKS //

Join my email list for more helpful design tips:
https://view.flodesk.com/pages..../61eed0f36114df05454

LIKE MY EMAIL STYLE?! JOIN FLODESK FOR 50% OFF
https://app.flodesk.com/sign-up?ref=80647W

GET DUBSADO (my project management system):
https://www.dubsado.com/?c=meganweeks

SITEGROUND (my favorite website hosting for WordPress):
https://www.siteground.com/go/meganwdesignco

---------------------------------------

*I do make a commission on some of the links in this description box. Thank you so much for the support.*

#graphicdesign #framer #webdesign

Stacks and Grids are two powerful layout tools that help you arrange elements in your designs. They’re both used to create flexible and responsive layouts, but they differ a bit in functionality and are suited to slightly different use cases.

In the previous lesson, we talked about Stacks — but let’s talk about how Grids compare — and get comfortable with the basics of how they work.

00:00 Intro
00:03 Stacks vs grids overview
00:22 High-level differences between stacks and grids
00:55 Creating a grid layout
01:32 Anatomy of a grid
01:58 Fixed vs auto column settings
02:23 Setting rows and columns
02:52 How fill container height works
03:21 Sizing conflicts in grids
03:55 Gaps and padding in grids
04:19 Rearranging grid items
04:46 Spanning rows and columns
05:19 Sizing and positioning within grid cells
06:04 Using absolute positioning inside grids
07:15 Wrap up

🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x

In this lesson, we dive into drawing with vectors in Framer. You’ll learn how to create shapes and paths directly on the canvas, use modifier keys to draw with precision, and edit anchor points to refine your designs. We’ll also cover how to build more complex shapes using Boolean operations, so you can move faster without manually drawing every curve.

Perfect for anyone looking to create custom icons, UI elements, or illustrations inside Framer.

00:00 Introduction
00:35 Drawing with Shapes
01:43 Adjusting Curves
03:25 Adding & Selecting Points
04:27 Drawing with Paths
05:40 Boolean Operations
07:22 Wrap-Up

Remix Lesson Worksheet: https://framer.com/remix/Au8lxGEL37nhWoriktKv

Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
Learn: https://framer.link/yt-academy

Learning Framer in 2026 has never been easier.

Enroll in the Ultimate Framer Masterclass (on sale) 👇
https://ultimateframercourse.com/

Duplicate this project in Framer:
https://framer.link/JLPgQk4

In this Framer tutorial, I share a crash course on the fundamentals of Framer. Learn sizing, positioning, layout, breakouts and more in this Framer tutorial.

TIMESTAMPS
00:00 - Intro
00:21 - Fundamentals
02:40 - Sizing
05:18 - Styling
06:23 - Adding content
07:45 - Adding an image
08:29 - Adding a button
09:05 - Layout
17:10 - Components
22:46 - Effects
26:29 - Breakpoints
30:40 - Publishing
31:47 - Outro

CONNECT WITH ME
💬 X - https://x.com/theryanhayward
📸 Instagram - / theryanhayward
🤝 LinkedIn - / theryanhayward

ABOUT RYAN
Ryan is your new Framer teacher. Ryan builds products & education for Framer.

Happy building,
Ryan ✌️

Remix link : https://framer.com/projects/ne....w?duplicate=UrEwKrQo
New to Framer and want to create a stunning portfolio? This beginner-friendly crash course walks you through everything you need to know to get started with Framer! From setting up your account to designing a sleek, professional portfolio, I’ve got you covered. No coding skills required!
In this video, you’ll learn:
✨How to navigate Framer’s intuitive interface
✨Step-by-step guide to building a portfolio from scratch
✨Tips for customizing templates to match your style
✨Adding animations and responsive design for a polished look
✨How to publish your portfolio and share it with the world

Check out my Framer-built portfolio here: https://gracious-screens-348189.framer.app/
Want to showcase your work like a pro? Follow along and build your portfolio today!

TIME STAMPS
0:00 - Intro
1:15 - Introduction to framer
2:10 - framer features
7:40 - Breakpoint setup
9:20 - Stack
17:00 -Designing the portfolio site
1:05:28 - Publishing the design
1:07:28 - outro

follow my other handles :
instagram : https://www.instagram.com/uidesigner.praise/?hl=en
facebook : https://www.facebook.com/praise.onyenwe.1
X : https://x.com/OnyenwePra46037?t=kkGNwx8j9T_6eG_Ksr3fMw&s=09

#framer #beginnerfriendly #webdesign #tutorial

In this 4-hour free course, you'll learn to create beautiful, modern interfaces. Sponsored by https://framer.com

Start with dark mode and glass designs, then move from Figma to Framer, using stack and grid layouts for responsive websites. Add animations, scroll effects and custom components.

- Final site:
https://significant-nature-656376.framer.app

- Figma template: https://www.figma.com/communit....y/file/1349410423606

- Framer Remix: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC

- Watch on DesignCode with full content: https://designcode.io/framer-web-design-intro

----------
GETTING STARTED

This course is perfect for beginners! No need for prior coding or web design experience. We'll guide you through everything step by step, starting from the basics. However, a little familiarity with computers and understanding the basics of HTML and CSS will be helpful.

Here's how to begin:

- View the final site to get inspired and see what you'll be able to create by the end of this course: https://significant-nature-656376.framer.app

- Sign up at Framer to join the community and start designing: https://www.framer.com.

- Get the Remix link to dive into the design file with ease: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC.

- Download the Figma file to start with ready-made designs: https://www.dropbox.com/scl/fi/r6914i8almfd6jgon1v34/Framer-Course.fig.zip?rlkey=08k2klxw5g7dlj2j9axuqv4x7&dl=0.

Or skip ahead using the Framer template: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC.

- Framer Desktop App: Enhance your designing workflow by downloading the app or work directly in your browser: https://www.framer.com/downloads/.

- Framer Academy: A treasure trove of documentation at your fingertips. Visit the Framer Academy: https://www.framer.com/academy/topics/start.

- Learn Framer UI: Master the basics of Framer's user interface here: https://www.framer.com/features/design-layout/.

----------
ABOUT FRAMER

Framer is your go-to web design tool for crafting stunning, interactive websites with ease. Designed for a smooth transition for Figma users, it boasts a comprehensive Figma plugin for quick layout imports. With a wealth of preset templates, components, dynamic effects, and even AI-powered tools, Framer is both powerful and accessible, regardless of your experience level.

Dive in and start creating! This course will open up a whole new world of web design possibilities for you. Let's make something amazing together.

0:00:00 Intro to Course
0:03:07 Getting Started
0:07:08 Create your first layout
0:20:55 Framer AI
0:28:21 Basic Layout
0:43:47 Animated Text
1:02:03 Figma to Framer
1:15:16 Adaptive Layout
1:27:22 Breakpoints
1:41:19 Components
1:52:15 Effects
2:03:33 Scroll Speed
2:18:51 Scroll Variants
2:31:04 Copy Components
2:41:04 Grid Layouts
2:52:28 Icon Animation
3:03:31 Code Components
3:15:42 Property Controls
3:25:05 Code Overrides
3:38:25 CMS
3:52:49 Search and Conclusion

----------
FOLLOW MY JOURNEY

Twitter: http://twitter.com/mengto
Instagram: http://instagram.com/mengto
TikTok: https://www.tiktok.com/@mengto.design

#framer #webdesign #nocode

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.lemo....nsqueezy.com/buy/ada

👉 Get Final Website Source File —
https://averagedesigndude.lemo....nsqueezy.com/buy/114

👉 Get Esteemed Portfolio Templated (Use 25% off Discount Code K3ODCXOQ) —
https://averagedesigndude.lemo....nsqueezy.com/buy/77d

❤️ Show love by Joining Membership —
https://www.youtube.com/channe....l/UCjaRNaAUC2FRKFbTD

---------------

🎓 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/

Ready to learn how to build beautiful websites without using code? Start with this video where you will learn the fundamentals of Framer by following along with Matt Jumper.

Download the Figma file to follow along 👉 https://www.figma.com/design/JaehvtBGSiFQyXCDxaMtxl/Framer-Crash-Course?node-id=24-391&t=e75e4rabEDpUGYCE-1

Unlock the full power of Framer and build stunning websites that wow your clients! 🤩 Enroll in The Framer Masterclass 👉 https://bit.ly/4ipKbyD

Chapters (check times in final edit)
0:00 Intro
0:26 Styles and content
2:38 Layout
9:28 Components
18:39 Navigation
24:58 Responsive states

📱 Find us on SOCIAL MEDIA
Matt Jumper’s YouTube channel 👉 @mattjumper
Matt Jumper’s X (Twitter) 👉 http://www.twitter.com/mattjumper
Flux Academy's Instagram 👉 https://www.instagram.com/flux.academy/
Flux Academy's TikTok 👉 https://www.tiktok.com/@fluxacademy

✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account

In this Framer tutorial, we'll create an animated, responsive website starting from a blank canvas. We'll cover topics like different positioning types, responsive structures, components, 3D transforms, animations, and more.
By the end of the video, you'll have all the skills needed to build websites with Framer.

→ Remix the tutorial project: https://framer.university/reso....urces/animated-mini-
→ Responsive navigation bar tutorial: https://framer.university/less....ons/responsive-navig

00:00:00 - Introduction
00:00:40 - Remix the file
00:01:23 - What are breakpoints?
00:02:11 - Setting up breakpoints
00:03:38 - Absolute vs relative positioning
00:09:49 - Creating the hero section
00:19:35 - Adding the floating cards
00:26:15 - Adding the features section
00:30:08 - Start making the card
00:34:26 - Turning the card into a component
00:38:23 - Creating the navigation bar
00:43:29 - Adding a hover state to the button
00:45:09 - Adding animations
00:52:00 - Optimizing for mobile
00:56:03 - Optimizing text with text styles
01:03:00 - Publishing the website
01:03:52 - Additional resources

Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university

→ Framer Course Waitlist: https://framer.university/waitlist
✔︎ Create a free Framer account: https://framer.university/free-account

In this tutorial, you're building your first website in Framer from complete scratch. Do you know a better way to start 2026? We're going to be covering topics such as mastering site structure and breakpoints, understanding the nuances of absolute versus relative positioning, and leveraging code components to take your site to the next level. You will also learn how to integrate videos, build reusable components for hover animations, apply advanced creative effects, and optimize your entire project for mobile with a responsive navigation and professional footer.

→ Remix the tutorial project: https://framer.link/JvDDb3x

0:00 - Introduction & Final Website Preview pasted
02:20 - Course Roadmap, Remix File & How to Follow Along
08:00 - Framer Interface Overview (Pages, Assets, Preview, Styles)
18:00 - Typography Setup & Hero Text Design
33:00 - Building Buttons from Scratch (Frames, Stacks, Layout Logic)
50:00 - Components & Variants (Reusable Buttons, Text & Link Variables)
01:10:00 - Core Layout Architecture (Sections, Containers, Stacks)
01:28:00 - Breakpoints & Responsive Structure Strategy
01:45:00 - Code Components: 3D Globe Integration
02:02:00 - Absolute Positioning, Layering & Z-Index Control
02:15:00 - Video Component Build (Aspect Ratios, Overlay, Play Button)
02:32:00 - Hover Interactions, Pointer Events & Component Animations
02:33:00 - Wrap-Up, Resources & Final Notes


Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university

Enroll in the Ultimate Framer Masterclass (on sale) 👇
https://ultimateframercourse.com/

Duplicate this project in Framer:
https://ultimateframercourse.com/crash-course

In this Framer tutorial, I share a crash course on the fundamentals of Framer. Learn sizing, positioning, layout, breakouts and more in this Framer tutorial.

Got any questions? Fire away in the comments 🔥

Want more Framer power ups?
https://insertframe.io/

- Ryan ✌️