סרטונים אחרונים
✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, I'm walking you through the process of building your first Framer site. We're covering a bunch of things: creating a responsive structure for the website, building a fully responsive navigation, adding amazing animations, and of course, optimizing the entire website for different breakpoints. If you want to start with Framer, now is the perfect time! :)
→ Remix the tutorial project: https://framer.university/reso....urces/interactive-mi
0:00 Introduction
5:06 Hero section
26:04 Features section
35:26 Navigation
44:21 Footer
49:08 Animation
55:19 Responsive navigation
1:05:11 Optimizing sections
1:04:19 Publish
1:04:56 Additional resources
Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university
✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, I'm walking you through building a complete portfolio website from scratch. You'll learn everything from CMS collections to dynamic detail pages - perfect for showcasing your work without getting lost in complexity. Whether you're a designer, developer, or creative, this straightforward guide will help you launch your portfolio the right way.
→ Remix the starter project: https://frameruni.link/portfolio-starter
→ Remix the completed project: https://framer.link/TlCFWx7
→ Emre's Portfolio: https://www.emrekayganaci.com/
→ Beginner Framer tutorials: https://framer.university/starter-kit
00:00 - Introduction & Overview of Portfolio Project
01:10 - Setting Up CMS Collection & Fields
06:34 - Adding Images, Tags, and Banners to CMS
09:15 - Creating Items & Populating CMS Content
11:12 - Displaying Items with Collection Frames
15:25 - Structuring Cards with Grid & Responsive Setup
17:10 - Connecting CMS Fields to Card Variables
18:07 - Adding Filters with Component Variants
23:13 - Switching Between Categories (All, Product Design, Art Direction)
29:22 - Optimizing Responsiveness with Conditions & Toggles
30:24 - Creating Flexible Detail Pages
36:08 - Connecting Dynamic Fields (Title, Description, Tags, Year)
43:02 - Handling Optional Images with Conditional Visibility
45:57 - Using Toggles to Switch Between Images and Videos
49:56 - Creating Index Pages & Navigation Back Button
54:38 - Final Review & Outro
Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university
⭐ Giveaway: Our 100% FREE plugin makes any site 3X faster - https://bit.ly/airlift-performance-plugin. In this video
Confused between Framer, Webflow, and WordPress? You’re not alone. In this no-BS, experience-based breakdown, I compare all three platforms — not as a fanboy, but as someone who’s actually built websites with each of them for real clients.
Whether you’re a designer, developer, or agency owner, this video will help you understand:
✅ How Framer feels like Figma but has code limitations
✅ Why Webflow is a powerful visual development tool (but not for the faint of heart)
✅ How WordPress is still king for CMS-heavy, complex, or custom projects — if you’re ready to manage the backend
✅ Which platform offers the best control, the fastest learning curve, or the most scalable hosting setup
✅ The true cost of each tool in 2025 — including hidden pricing gotchas
📌 TL;DR
Hate limits? → WordPress
Hate complexity? → Framer
Hate maintenance? → Webflow
🎓 Framer University: https://frameruni.link/yt
👉 Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, you'll learn how to avoid the biggest mistake every beginner makes in Framer. I'll teach you the basics of responsiveness and show you how to set up your page structure. This way, you can effortlessly optimize the website for multiple breakpoints later.
Project remix:
https://page-structure.learnframer.site/
0:00 - Introduction
0:31 - The roadmap
0:43 - Absolute positioning
2:38 - Relative positioning
3:45 - Stacks
5:08 - Sizing options
6:57 - Page structure
12:13 - Breakpoint optimization
15:09 - Recap
16:30 - Your next step
Follow me on:
X: https://x.com/learnframer
Instagram: https://instagram.com/framer.university
✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, we're going to find a solution for fixing your messy and unresponsive Framer websites. I'm going to teach you the basics of responsiveness, such as stacks, relative positioning, and relative sizing options. We're going to put everything we learn into practice and fix a messy website by restructuring it with the correct page structure. I'm also going to show you how easy it is to optimize this correctly structured website for mobile. After watching this video, you're going to have the techniques needed for building responsive websites confidently, right inside of Framer.
→ Remix the tutorial project: https://responsive.learnframer.site/
0:00 - Introduction
0:44 - The 4 sections
1:10 - Identify the issue
3:41 - Basics on responsiveness
12:06 - Page structure
28:38 - Optimizing for mobile
32:12 - Rcap
32:58 - Additional resources
Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university
Things have changed in 2025. Here’s the key differences between these web design tools, to help you figure out which one is right for you.
FREE TRAINING: 3 Steps to Build a Thriving Web Design Career 👉 https://bit.ly/3Tiua2G
🚀 Launch a thriving career in web design with our proven 3-step plan. Discover more about Web Career Ignite 👉 https://bit.ly/4lvxu7n
Learn to build custom websites the easy way with Webflow. Enroll in Webflow Masterclass 👉 https://bit.ly/3Yx0TEe
Master Framer and build stunning sites at lightning speed. Enroll in Framer Masterclass 👉 https://bit.ly/3RgA43m
📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 https://www.instagram.com/ransegall/
Ran's X (Twitter) 👉 https://twitter.com/ransegall
Flux Academy's Instagram 👉 https://www.instagram.com/flux.academy/
Flux Academy's TikTok 👉 https://www.tiktok.com/@fluxacademy
Ready to design a fully responsive portfolio, and publish it with just one tool?
Start creating for free at https://framer.link/Dansky and use code DANSKY for a free month of Framer Pro.
This video is sponsored by Framer.
✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account
In this video, I'm going to teach you how to build a fully responsive Framer website from complete scratch using a site structure developed by top Framer experts. For the practice project, we're rebuilding a few sections from the Framer landing page, with an animated gradient background, parallax scroll effects, and advanced bento grids.
→ Remix the tutorial project: https://framer.university/reso....urces/framer-website
0:00 - Introduction
1:54 - Structure Setup
10:47 - Building Sections: Hero
43:10 - Building Sections: Social Proof
44:47 - Building Sections: Advanced Grid
58:02 - Responsive Navigation
1:13:03 - Layout Template
1:16:49 - Intro Anims
1:19:16 - Additional Resources
Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university
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
