- Видео 24
- Просмотров 13 156
Framerdive
Добавлен 25 мар 2024
Helping you become a better framer designer
How to build modern bento cards in framer (Beginner's Guide)
#framer #webdesign #bentocards
Try framer for free: www.framer.com/?via=joseph25
Learn how to design sleek and modern Bento-style cards in Framer! This beginner-friendly guide walks you through the basics of creating, visually appealing layouts step by step. Perfect for designers new to Framer or looking to elevate their UI design skills.
Happy diving!
Free remix link: framer.com/projects/new?duplicate=eGvm8SIx4pwItTMl4ZvK&via=joseph25
Subscribe for more on RUclips: @Framerdive
Let's connect on X: x.com/FramerDive
Try framer for free: www.framer.com/?via=joseph25
Learn how to design sleek and modern Bento-style cards in Framer! This beginner-friendly guide walks you through the basics of creating, visually appealing layouts step by step. Perfect for designers new to Framer or looking to elevate their UI design skills.
Happy diving!
Free remix link: framer.com/projects/new?duplicate=eGvm8SIx4pwItTMl4ZvK&via=joseph25
Subscribe for more on RUclips: @Framerdive
Let's connect on X: x.com/FramerDive
Просмотров: 33
Видео
Building a Magic Calendar in Framer
Просмотров 21917 часов назад
Try framer for free: www.framer.com/?via=joseph25 In this video, I take you through how to create an amazing magic calendar. It's an amazing template that could work for blog posts, portfolios or anything else that deems fit. We discuss the following framer topics 1. Background sticky positions 2. Creating scroll sections 3. Working with components with variants 4. Playing with transitions (Fin...
How to create a sleek mobile friendly navigation bar in framer (Full Tutorial)
Просмотров 221День назад
#framer #tutorial #nocode In the previous video we built this amazing navigation bar. Now I have quickly bounced back with a full tutorial covering how to make that specific navigation bar for tablet and mobile friendly. I hope you can pick up some lessons on how to build amazing and user friendly sites in framer. Happy diving! Try framer for free: www.framer.com/?via=joseph25 Sign-up for frami...
![Build a modern website navigation bar with this new tool [Part 1]](http://i.ytimg.com/vi/g9Lyob1a4O8/mqdefault.jpg)
Build a modern website navigation bar with this new tool [Part 1]
Просмотров 245День назад
#framer #nocode #navigationbar Try framer for free: www.framer.com/?via=joseph25 In this video we draw inspiration from a leading website, on how to build a navigation bar. Not just any navigation bar, but one with an elevated user experience. Integrating images and cool effects. I also show you how to leverage a new tool call framify.design to ship cool websites much faster. Happy diving! Remi...
How to design an Elegant Hero Section in Framer
Просмотров 52214 дней назад
#framertutorial #framer #webdesigntutorial Try framer for free: www.framer.com/?via=joseph25 Learn how to build an intuitive magic like hero section of a website. Steal this idea to make your websites pop out. Any questions or comments? Let's engage. Happy diving! REMIX LINK: framer.com/projects/new?duplicate=nplxYkyFoGReGyVZyBHw Subscribe for more on RUclips: @Framerdive Let's connect on X: x....
How to Build the Tesla Website Nav Bar
Просмотров 9021 день назад
#tesla #webdesign #marketing #framer #webflow #framertutorial Try framer for free: www.framer.com/?via=joseph25 Learn how to build amazing navigation sections for your website from tesla website as an inspiration. With @Framer the sky is the limit on what you can build. To catch up on part 1 of this tesla website recreation here is the link: ruclips.net/video/ved2h8YXEYY/видео.html&ab_channel=F...
I Cloned the Tesla Website! Here's how it went! (Chapter 1)
Просмотров 244Месяц назад
#tesla #webdesign #framer Try Framer for free: www.framer.com/?via=joseph25 In this video we explore and dive deep into rebuilding the tesla.com website. Although you will notice that the home page is currently different from current live tesla.com website, seems like tesla updated their website interface but it's not much different from this one. This video is the first part of a series of 3 c...
How to create a sleek website hero section in framer (Part 2)
Просмотров 536Месяц назад
#webdesign #framer #webflow #nocode #seo Try framer for free: www.framer.com/?via=joseph25 Your website hero section is the first point of contact between what your customer sees and what your offer You have to get it right otherwise you risk losing customers and clients because of ineffective design and presentation. This video is divided into 2 parts. This is part 2 of the video, where I take...
How to create a sleek website hero section in framer (Part 1)
Просмотров 656Месяц назад
#webdesign #framer #webflow #nocode Try framer for free: www.framer.com/?via=joseph25 Your website hero section is the first point of contact between what your customer sees and what your offer You have to get it right otherwise you risk losing customers and clients because of ineffective design and presentation. This video is divided into 2 parts. This is part 1 of the video, where I take you ...
Quick Easy Guide on making a website responsive in framer (Cheat codes Activated)
Просмотров 595Месяц назад
Try framer for free: www.framer.com/?via=joseph25 In this video (Suited for beginners in framer) I take you through how you can easily launch your first website after understanding simple easy principles on making a website responsive. Yes, Quick W for You! Knowing that 92% of people visits websites on mobile this should be an important step towards making amazing and user-friendly websites! Ha...
Walk with me as I dissect critical design animations from this website
Просмотров 464Месяц назад
Try framer for free: www.framer.com/?via=joseph25 Here we get to practice 4 things from this state-of-the-art website 1. How to create components - Why you need them 2. Creating cursor variants - Cursor change from one type to another 3. Creating hover variants - Images change on hover 4. Working with appear effects in framer Remix link: framer.com/projects/new?duplicate=rbYHYLpn7P00TYTzkjsw&vi...
Website CRASH COURSE! Build this award-winning agency website with me. (No code)
Просмотров 1 тыс.Месяц назад
#framer #webdesign #marketing #nocode Try framer for free: https: www.framer.com/?via=joseph25 Here we do a deep dive! Building a full home page website of an award-winning marketing agency in Framer. Framer is a no code tool that lets you build amazing modern websites without coding. I hope after watching this video you will get a good understanding of what it takes to build amazing websites i...
How to Build a Remarkable Website Without Code (Steal this Effect)
Просмотров 1,1 тыс.2 месяца назад
Try Framer for Free: www.framer.com/?via=joseph25 I was blown away by the user experience of remarkable.com website and thought I'd share some secret sauce with you. Framer is such a cool tool that lets you build Top Notch sites without code. Yes, superpowers on your hands! Dive in! Live Website Demo Link: remarkablewebsitedoneinframer.framer.website/ Remix Link: framer.com/projects/new?duplica...
I created the Apple Website in 30 Minutes!
Просмотров 1,1 тыс.2 месяца назад
#framer #webdesign #apple Try framer for free: www.framer.com/?via=joseph25 In this video I take you through building the apple website from scratch. Yes you don't have to be an experienced developer to create a stunning website. You can do it all in framer. In case you have any problems or questions ask me and I will be happy to assist you! Happy diving! LINK TO LIVE WEBSITE: applewebsitein30m...
How to Create a cool Navigation bar in Framer (Inspired by framer site of the month)
Просмотров 1942 месяца назад
Try framer for free: www.framer.com/?via=joseph25 In this video I show you how to create this amazing navigation bar in framer. Good for practicing scroll variants and scroll transforms. Happy diving! Remix link: framer.com/projects/new?duplicate=2IrXY3Dy8anWvbAYxAUv&via=joseph25 Subscribe for more! Follow me on X: x.com/FramerDive
What is Fixed, Relative, Fill and Fit Content in Framer?
Просмотров 2423 месяца назад
What is Fixed, Relative, Fill and Fit Content in Framer?
How to Create a Magic Slideshow in Framer
Просмотров 3,7 тыс.3 месяца назад
How to Create a Magic Slideshow in Framer
What is Overflow visible and Overflow Hidden in Framer? (A Beginner's Headache)
Просмотров 4063 месяца назад
What is Overflow visible and Overflow Hidden in Framer? (A Beginner's Headache)
How to Create a Stylish Scroll Effect In Framer
Просмотров 1133 месяца назад
How to Create a Stylish Scroll Effect In Framer
Recreate This Amazing Website Effect Like A Pro. ( Inspiration from an Award Winning Website)
Просмотров 5913 месяца назад
Recreate This Amazing Website Effect Like A Pro. ( Inspiration from an Award Winning Website)
Understanding Absolute, Relative, Sticky and Fixed Positioning (A Framer Beginner's Nightmare!)
Просмотров 8657 месяцев назад
Understanding Absolute, Relative, Sticky and Fixed Positioning (A Framer Beginner's Nightmare!)
Steal This SECRET To Convert Your Website into a Money-Making Landing Page
Просмотров 617 месяцев назад
Steal This SECRET To Convert Your Website into a Money-Making Landing Page
Learn how to create this Amazing Website in Framer In under 5 Minutes!
Просмотров 467 месяцев назад
Learn how to create this Amazing Website in Framer In under 5 Minutes!
How to Create a Super Slick design Portfolio in Framer
Просмотров 958 месяцев назад
How to Create a Super Slick design Portfolio in Framer
Great Keep Going
Much appreciated!
i love it , really creative inspiration :D
For sure! Thanks :)
Hi and thank you. Can I have your contact info I have some business for you. And Thank
Hi thank you for your tutorial, it will be interesting to understand how to transform this with another device (tablet or phone). When you change devices with the remix link (thanks) it's not responsive and I was wondering what was the best way to make this UI work on other devices
Hey @FloNocode. Great question, quick overview on how to make it responsive on other devices would be to work with different variants on the navigation bar. But I will create a tutorial on that to expound on it. All the best!
How can I achieve the drag effect and round corners at the end? Could you please explain?
For round corners set the corner radius for the BL - bottom left and BR - Bottom right of your particular frame/stack. For drag effects go to framer on right side panel where you will see effects, under effects click the plus icon click add drag effect and customize its properties. Hope this helps
just started the video but i had to leave a comment to support 1st before watching the video.
Much appreciated!
This is pretty dope! Really helpful
The explanation is clear and straightforward. Thank you Joe🤝
Your welcome!
Really helpful man. Thank you
Your much welcomed!
How can I get the second part?
New Sub Here, Hope you upload Regularly
Here for you!
You should also show how this is optimized in mobile.
Great! Will do that
Is it directly responsive for mobile?
not made it responsive yet
create the next part please and can you please create an detailed CMS video as client want most of it
@@class2444 Part 2 dropping soon. A detailed cms video. Got it. Coming soon.
Find the video here: ruclips.net/video/ETx2yFtZ40o/видео.html&ab_channel=Framerdive
Awesome content, what software do you use for screen recording?
+1 ??
@@omarprado541 its called Bandicam. You can find it on google.
Some one give this guy a medal. Mind blowing man... Dope shi.....I mean stuff... Dope stuff 😅
Haha thats a good one. Bless you man!
Wow man, your content is awesome, I am a student web developer who wanted to try and get into the fundamentals of framer. You are helping a ton! Keep up the video :)
Glad I can be of help! All the best in your framer journey!
Thank you for the tutorial
@@1azjoy Your welcome!
Thanks for this!
@@entrpswn You’re welcome!
I'm learning, thanks for sharing
Your welcome bro! More to come
helpful!
Happy to help!
Awesome content. Thank you so much!
You're welcome! Glad you like it
Click bait
are you speaking in mute language
@@vishalkanse4702 Thank you! Will work on the sound
Lets Go G!
Thanks bro!
volume is soooo lowwwww :(
will work on that. Thanks for the feedback!
Good content ! Very Useful tutorial
Glad you liked it!
Great video! need more
Thank you! More to come
Great content, will definitely try this. Do you have an Instagram handle?
great video, thank you!
Glad you like it!
thank you! please do a tutorial explained the concept of "overflow" and how is related to the position
Your welcome! I will definitely do that
Tq
thank you
Your welcome :)
Thank you, Joe, for this video! It's very well explained. I like the idea of hovering and stretching out of cards!
Glad you enjoyed it Elena!