Lukas Margerie
Lukas Margerie
  • Видео 23
  • Просмотров 10 309
Building a Responsive Framer Template from Scratch: Collapsable Sidebar & Responsiveness
SUMMARY ⤵️
In this second part of our Framer documentation site series, we dive deeper into enhancing our design and functionality. Watch as we implement a collapsible sidebar, create smooth scrolling sections, and tackle responsive design challenges. Learn advanced Framer techniques to build a professional, user-friendly documentation site for your product.
WHY ME?
Hi, I'm Lukas! As a Framer enthusiast, I'm excited to share real-world techniques for building complex, functional web applications. Whether you're a beginner or an experienced designer, you'll learn valuable skills for creating professional documentation sites.
Timestamps:
0:00 Recap and fixing initial issues
5:36 Redesigning the s...
Просмотров: 41

Видео

Stunning Animated Headers in Framer Using AI
Просмотров 132День назад
SUMMARY ⤵️ In this tutorial, I demonstrate how to create eye-catching animated headers for your Framer projects using AI-powered tools (specifically v0 from Vercel). Learn how to design and implement three unique animations, including a mesmerizing blur effect and a letter glitch animation, all without writing complex code (just prompting AI to do so). Perfect for designers and developers looki...
Building a Responsive Framer Template from Scratch: Part 1
Просмотров 110День назад
SUMMARY ⤵️ In this first episode of our series, I walk you through the process of creating a "Getting Started" template for a SaaS product using Framer. Learn how to build a responsive layout with a side panel navigation, top bar, and content area - similar to Midjourney's documentation guide. We cover everything from setting up the initial structure to creating interactive navigation component...
Live Framer Client Build: Part 2 - Design & CMS Polishing
Просмотров 53День назад
SUMMARY ⤵️ Welcome back to our Framer client series! In this video, we dive deeper into the design process and CMS refinement in Framer. Building on our initial setup, we focus on creating an engaging, user-friendly interface while optimizing our CMS structure for seamless content management. Perfect for designers and developers looking to elevate their Framer projects with professional-grade d...
Live Framer Client Build: Part 1 - Project Setup & CMS Integration
Просмотров 116День назад
SUMMARY ⤵️ In this first part of our series, I walk you through the initial setup of a client project for a licensed Florida real estate school using Framer. Learn how to structure your Framer project and leverage the power of CMS collections to create dynamic course and category pages. This video is perfect for web designers and developers looking to enhance their Framer skills and create more...
Rebuilding Airbnb's Design in Framer: 35-Minute UI Challenge
Просмотров 239День назад
SUMMARY ⤵️ In this tutorial, I demonstrate how to recreate Airbnb's marketplace homepage design using Framer and the Framepad component library. Watch as I build a fully responsive layout featuring a custom navbar, property cards with image galleries, and a sticky footer - all in just 35 minutes. Perfect for designers and developers looking to enhance their Framer skills and understand the stru...
Creating Interactive Framer Components with AI: 3 Quick Custom Code Examples
Просмотров 114День назад
SUMMARY ⤵️ In this tutorial, I demonstrate how to use Vercel's V0 AI tool to create three custom interactive components for Framer: a custom text highlighter, a glitchy text effect, and a cursor-following button. Learn how to leverage AI to generate React code for components that go beyond Framer's built-in capabilities, enhancing your web designs with unique, interactive elements. WHY ME? Hi, ...
Building a Dropdown Navbar in Framer in Just 15 Minutes
Просмотров 189День назад
SUMMARY ⤵️ In this fast-paced tutorial, I demonstrate how to create a professional, interactive navbar in Framer, inspired by perspective.co, using Framepad components. Watch as we build a navbar with a dropdown menu, complete with images and call-to-action buttons, all in just 15 minutes. This video is perfect for designers and developers looking to enhance their Framer skills and create more ...
Build an Apple Landing Page Design in 20 Minutes
Просмотров 1,3 тыс.День назад
SUMMARY ⤵️ In this video, I demonstrate how to rapidly create an Apple-inspired landing page using Framer and Framepad. Watch as I build a sleek, responsive design featuring a navigation bar and hero section with video background in under 30 minutes. This tutorial is perfect for designers and developers looking to streamline their workflow and create professional-looking websites quickly with F...
Bolt.new: 2 Apps in 10 Minutes
Просмотров 3012 дня назад
SUMMARY ⤵️ In this video, I dive into bolt.new, a powerful new tool for creating and deploying web applications using AI. Watch as I build two projects from scratch: a dark mode landing page with a blog about hurricanes, and an AI-powered writing assistance tool (that didn't really work, but if I would troubleshoot for a few more minutes it would work.). Learn how to use simple prompts to gener...
Framer Hero Section Re-Build with Blocs Plugin
Просмотров 5942 дня назад
SUMMARY ⤵️ In this tutorial, I'll show you how to build Framer.com's homepage hero section using the new Blocs (blocsui.com) plugin for Framer. Watch as it takes me just a few minutes to build the hero section, covering everything from layout structure to styling details. This video is perfect for web designers looking to streamline their workflow and quickly create impressive designs with Fram...
My Favorite Framer Plugins
Просмотров 30114 дней назад
SUMMARY ⤵️ In this video, I dive into the world of Framer's newly released plugins, showcasing how they can revolutionize your Framer site building process. From upgrading your site's design, helping you with SEO analytics or helping you build faster, these plugins massively improve your workflow as a Framer site builder. Watch as I explore and demonstrate key plugins like Rive for interactive ...
Building a Portfolio using v0 and Cursor
Просмотров 15314 дней назад
SUMMARY ⤵️ In this step-by-step tutorial, I show you how to create a sleek and modern portfolio website with just a few prompts and tweaks. Watch as we go from a simple prompt from our imagination to a fully functional, locally hosted website in just 15 minutes. Learn how to customize your design (with the v0 chat) and deploy your site using easy-to-follow AI prompts and Cursor. WHY ME? Hi, I'm...
Deploying an App in 10 Minutes from v0 to Google Chrome: A Complete Beginner's Guide
Просмотров 6814 дней назад
Deploying an App in 10 Minutes from v0 to Google Chrome: A Complete Beginner's Guide
5 Minute Landing Pages with Framer and Framepad
Просмотров 24514 дней назад
5 Minute Landing Pages with Framer and Framepad
Finding Micro Niche SaaS Ideas: Leveraging Reddit & SEO
Просмотров 13221 день назад
Finding Micro Niche SaaS Ideas: Leveraging Reddit & SEO
Edit Shopify Email Templates Easily with Claude AI
Просмотров 5021 день назад
Edit Shopify Email Templates Easily with Claude AI
Build 3 MVPs in 15 Minutes with Vercel's v0 AI Tool
Просмотров 99621 день назад
Build 3 MVPs in 15 Minutes with Vercel's v0 AI Tool
SaaS Simplified: Building and Launching a Web App in 2024
Просмотров 17121 день назад
SaaS Simplified: Building and Launching a Web App in 2024
Mapbox Basics Tutorial (Deutsch)
Просмотров 1,8 тыс.2 года назад
Mapbox Basics Tutorial (Deutsch)
Beginner Mapbox Tutorial (Deutsch)
Просмотров 2,3 тыс.3 года назад
Beginner Mapbox Tutorial (Deutsch)

Комментарии

  • @wizkid7717
    @wizkid7717 День назад

    As I try to keep up with this project, it has been a great learning experience so far.

  • @mofunnel
    @mofunnel День назад

    Hello, thank you for the distinguished video. So, I will specialize in creating and designing landing pages. In your opinion, I will use any platform, framer, webflow, or wordpress. I will create them for clients, and I want to specialize in one platform. Your advice is appreciated. I will provide this skill as a service to clients

    • @lukas-margerie
      @lukas-margerie День назад

      I would suggest choosing a specific niche (lets say medical spas) and creating a landing page template in Framer for this specific niche. The landing page must fulfill a goal (have a function that helps them easily get clients to their phone calendar for example). You go on google maps, you talk to each medical spa business around you. You sell the template for cheap (like $60) for them to install it on their own, or, you can help them install it for a higher price. If you got more questions, feel free to reach out to me here: discord.gg/RSsSuGCt

  • @FloNocode
    @FloNocode 2 дня назад

    Hi Lukas, its really interesting to see that. V0+framer and how iterate on V0 when we don't have what we want. I have a question about that because for your example, it's easy to explain this kind of css animation, but when you want a more complexe animation, what is the best way for explain complexe animation with word ?? Do you have an alternative, maybe share a library like GSAP , i dont know if you have test something in this way ?

    • @lukas-margerie
      @lukas-margerie День назад

      Hey Flo! Thanks for the comment :) You are right, v0 might be good for simple animations. What advanced animation do you have in mind? Feel free to share an example and I can make a video for you on that. I have personally never used GSAP, but GSAP supports react: gsap.com/resources/React/ (which is what is needed for Framer). Also, the creators of Framer made "Framer Motion" which might work as a library similar to GSAP: www.framer.com/motion/

  • @wizkid7717
    @wizkid7717 3 дня назад

    Grate Video as always. Thanks

  • @joey_williams
    @joey_williams 5 дней назад

    I'm a fan of Rive. Am I right in that you can't embed Rive within rich text within a CMS item?

    • @lukas-margerie
      @lukas-margerie 5 дней назад

      Me too! So I just checked, and you cant really use the Framer plugin in the formatted text in CMS, BUT you can embed Rive projects using a code block: help.rive.app/editor/share-links You would need an upgraded Rive account in order to export embed code.

  • @productguiderhero2324
    @productguiderhero2324 5 дней назад

    Amazing

    • @lukas-margerie
      @lukas-margerie 5 дней назад

      Thanks! Feel free to comment/reach out to me in social media if you have any questions!

  • @wizkid7717
    @wizkid7717 5 дней назад

    Lukas, I’m following along and really appreciate your guidance. It’s still early days for me, but I’m fully invested in Framer hoping to break into freelance. This project is invaluable. Thanks again for sharing!

    • @lukas-margerie
      @lukas-margerie 5 дней назад

      Hey man, thanks for the positive comment. These things fuel my motivation to share more! How far along are you with learning Framer? Have you managed to rack up a few portfolio projects? I would be more than happy to jump on a quick call with you and see how I could help you start freelancing.

    • @wizkid7717
      @wizkid7717 4 дня назад

      @@lukas-margerie Hey Lukas, I'm Glad to hear that! Your content is top-notch, and I have no doubt you'll get the recognition you deserve soon. As for me, I'm really diving into Framer these days, focusing on improving on it. I'm currently working on my first project for a local club, which is exciting! I can't thank you enough for the opportunity. It would be amazing if you could help out. I'm based in Australia, but I'm happy to join any time that suits you. Thanks again! Cheers

    • @lukas-margerie
      @lukas-margerie 4 дня назад

      @@wizkid7717 Thanks man. And I'm happy you got your first client! Please join my discord server (discord.gg/RSsSuGCt) and we can chat more :) Since you are in Australia, maybe the best time to talk would be in the morning (9am-10am your time) or late at night

  • @jamespower2670
    @jamespower2670 5 дней назад

    Bolt.new

  • @joey_williams
    @joey_williams 6 дней назад

    That was really useful, Lukas. I was a bit stumped linking everything together with the new CMS references.

    • @lukas-margerie
      @lukas-margerie 6 дней назад

      Me too. I think this topic alone needs a long tutorial with different use cases.

    • @joey_williams
      @joey_williams 5 дней назад

      @@lukas-margerie I have Framepad so was good to see you showing how to get the most out of it. They could do with more tutorials too!

  • @ChronicleContent
    @ChronicleContent 6 дней назад

    but then you need to publish the website on framer? can you get the whole code of the website and publish it somewhere else?

    • @lukas-margerie
      @lukas-margerie 6 дней назад

      It’s not so simple, but you can theoretically do it. Would you be interested in seeing a video of how to do this?

  • @wizkid7717
    @wizkid7717 6 дней назад

    This is epic! I appreciate you sharing this real-world build with us.

    • @lukas-margerie
      @lukas-margerie 6 дней назад

      @@wizkid7717 thanks! You inspired this video, so props to you ;)

  • @wizkid7717
    @wizkid7717 7 дней назад

    I’m wondering if you could Please create a comprehensive tutorial that covers a real-world project in Framer. It would be incredibly helpful if you could explain the use of absolute and relative positioning, as well as the concepts of fit and fill. This kind of detailed learning video would be amazing. I’m currently working on a few projects, but I often run into issues when adding new frames. Thanks

    • @lukas-margerie
      @lukas-margerie 7 дней назад

      I can definitely make a comprehensive tutorial on a real-world project. I am currently building a website for a licensed real estate school, would that interest you? I can cover fill, fit, relative, etc topics in that build video. I will probably post later today or tomorrow, but it will be a longer video.

    • @wizkid7717
      @wizkid7717 6 дней назад

      Thanks for getting back to me. It would be great to follow along and pick your brain on how you go about creating the project. I really appreciate the time and effort you put into creating the content. Thanks

  • @wizkid7717
    @wizkid7717 7 дней назад

    Great work Lukas! Learned a ton.

    • @lukas-margerie
      @lukas-margerie 7 дней назад

      I'm really happy you learned something!

  • @SFairoz-ex6mc
    @SFairoz-ex6mc 9 дней назад

    This is UNBELIEVABLE!! Few hours back I was looking into apple website and wondering how can I build something similar for my own agency website, I'm aware of framer the website builder but its too complicated :( Is it possible for you to build an agency website for me????

    • @lukas-margerie
      @lukas-margerie 9 дней назад

      @@SFairoz-ex6mc reach out via Twitter (lukas_margerie)

    • @SFairoz-ex6mc
      @SFairoz-ex6mc 9 дней назад

      @@lukas-margerie you mean "X"?

  • @AkinsRealm
    @AkinsRealm 10 дней назад

    Just discovered your channel, good content! 🙌

    • @lukas-margerie
      @lukas-margerie 10 дней назад

      Really appreciate the comment! Likewise with your channel :)

  • @ARFIGAMING26
    @ARFIGAMING26 11 дней назад

    Greattttt 🥰🥰🚀

  • @unsa101
    @unsa101 12 дней назад

    they used mask for that blue shadow

  • @xnegusx
    @xnegusx 17 дней назад

    bruh please learn the basics you have potential but since you dunno the basic in makes it such a hard watch. or at least act like you know so the noobs can trust you

    • @lukas-margerie
      @lukas-margerie 17 дней назад

      I am a noob building for noobs.

    • @xnegusx
      @xnegusx 16 дней назад

      @lukas-margerie I understand but please learn the absolute basics last week 2 weeks ago I didn't even know what vite was, now I'm making a website in Vite. It will make the quality better

    • @lukas-margerie
      @lukas-margerie 16 дней назад

      @@xnegusx you wanna make a video together? We can go on a discord call and you teach me why this is important and we build something together

    • @xnegusx
      @xnegusx 16 дней назад

      @@lukas-margerie okay cool send the link

    • @lukas-margerie
      @lukas-margerie 16 дней назад

      @@xnegusx dm me on Twitter: lukas_margerie

  • @xnegusx
    @xnegusx 17 дней назад

    this is a hard watch if know how to code. especially at 9:26. bro doesn't know basic bash. beginners should rely heavily on these tools because if you just knew the basics of react like pure BASICS the issues could of been solved. I'm not hating, just learn a bit of react and CSS, and the video wouldn't be a hard watch

    • @lukas-margerie
      @lukas-margerie 17 дней назад

      @@xnegusx thanks for your feedback. I am not an expert here, just trying to do it from a complete beginners perspective.

  • @aleem11
    @aleem11 17 дней назад

    Great @lukas thats impressive, i have a doubt How to deploy that?

  • @BlocsUI
    @BlocsUI 17 дней назад

    Thanks for checking out Blocs! Glad you had a good experience. Your honest feedback is so helpful for our small team!

    • @lukas-margerie
      @lukas-margerie 17 дней назад

      I will be making a video on your plugin very soon.

    • @BlocsUI
      @BlocsUI 17 дней назад

      @@lukas-margerie if u wait a week, we'll have an update ready with more components and some extra goodies ;)

    • @lukas-margerie
      @lukas-margerie 17 дней назад

      @@BlocsUI awesome! I’ll keep myself updated on Twitter…

  • @AsifKhanPersonal
    @AsifKhanPersonal 18 дней назад

    Brillian work.

  • @salmabas3896
    @salmabas3896 22 дня назад

    is it free to use? i am broke.

  • @lukas-margerie
    @lukas-margerie 26 дней назад

    Thanks for watching! If you want to chat, you can find me here: x.com/lukas_margerie