framer tutorial: building a site from scratch

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 178

  • @IgorBornebusch
    @IgorBornebusch 2 месяца назад +64

    I’ve spent the past four months trying to learn all of this , buying kits, templates, and courses that nearly drove me insane and then you come here and break it down so effortlessly. It’s a bit frustrating but also incredible. You’re a genius and you’ve made everything clear to me in just an hour. The power of teaching like this is truly a gift.

    • @framer.university
      @framer.university  2 месяца назад +9

      You can’t imagine how much motivation these comments give me. I appreciate you so much! So happy that this video helped you 🫶

    • @IgorBornebusch
      @IgorBornebusch 2 месяца назад +2

      @ well the saying Credit where credit is due couldn’t fit better in here hehe. You are amazing! ⭐️

    • @timilehinsolu4254
      @timilehinsolu4254 2 месяца назад

      Love this for you

    • @yogarize6733
      @yogarize6733 Месяц назад

      same hahaaa 😅

    • @كلاممنالقلب-ز1خ
      @كلاممنالقلب-ز1خ 3 часа назад

      Exactly! Same here, I’ve been spending my time for the past 2 months buying courses but never understood clearly how to work with stack. Super thankful that i clicked on this video and had the opportunity to watch it!!

  • @NawaraNour-rx2qn
    @NawaraNour-rx2qn 2 месяца назад +26

    I'm a UX/UI designer who's always been a Figma loyalist and still, but Framer totally changed my game...Nandi, the way you break down animations and make Framer feel effortless is UNREAL

    • @framer.university
      @framer.university  2 месяца назад +1

      Wow that’s soo good to hear :)) that’s exactly the point of Framer. Giving designers the ability to bring their ideas to life!
      Happy to hear that my videos make learning Framer fun 🫶
      Lmk if u have any questions or struggles, I also do Q&As on Twitter!

    • @saadkamran6263
      @saadkamran6263 Месяц назад

      can you please guide me on hwo to get cilents as a ui ux designer

  • @MACH_SDQ
    @MACH_SDQ 2 месяца назад +8

    Finally !!!! this is what we need, straight and no turns left or right !!!! Greetings from Dominican Republic !!!!

  • @Sefko1995
    @Sefko1995 2 месяца назад +6

    I watched the entire video and followed along, building everything step-by-step. I spent five hours on it, but I got everything exactly as you explained. This tutorial leveled me up so much, and I feel like I've really advanced my skills. I can't wait to start applying some of these techniques to my own web design agency's website.
    Thank you again, this truly made a huge difference for me.

    • @framer.university
      @framer.university  2 месяца назад +1

      wow, this means so much! happy to hear that 🙌

  • @DigitaalMaatje
    @DigitaalMaatje 2 месяца назад +6

    Nandi whether you have a fast or slow learning curve your tutorials are always a must watch and study. The approach and the calmness with which you manage to explain something step by step every time is a gift that makes your truly special teacher in the art of framer

    • @framer.university
      @framer.university  2 месяца назад

      wow, that’s such an incredible compliment - thank you so much! 🙏

  • @hopperanocode
    @hopperanocode 2 месяца назад +2

    I have to say, subscribing to your channel has been a game-changer! The first time I faced an issue with Framer, I got a notification for one of your videos, and it was exactly what I needed to solve my problem. And today, just as I was wishing for a video on building a Framer website from scratch, you released one! You’re not just the best Framer educator on RUclips you consistently deliver exactly what your viewers need and genuinely help us overcome our challenges. That makes you the best RUclipsr out there. Thank you for your incredible content!

    • @framer.university
      @framer.university  2 месяца назад

      Seems like I have an amazing day receiving all these amazing comments from you all :))
      Thank u so much 🫶🫶 so happy to hear that my videos are helpful. Please feel free to let me know if you have any requests!

  • @kadirov61
    @kadirov61 2 дня назад +1

    Wow, Nandi, this is pure gold. Thank you so much!

  • @Ryoumenheian
    @Ryoumenheian Месяц назад +1

    I was desperately searching for resources to help me build my UX portfolio website. Then I found your channel and everything changed. Your tutorials are so well explained that I could follow along easily. I'm so grateful for your help. I've also joined the waiting list on your website.😊

  • @UlugbekAbdullayev-c7g
    @UlugbekAbdullayev-c7g 3 дня назад

    I have learned bunch of things from this video! You open new door for me, i hope as soon as i will finish all of your tutorials and I will create amazing web sites too!

    • @framer.university
      @framer.university  3 дня назад

      glad the video helped you! can’t wait to see what you'll create! 🚀

  • @obsessed4036
    @obsessed4036 2 месяца назад +8

    Alhumdulillah I found you early or else it'll be tough for me learn framer, I wish I wish youtube push your videos to more people and you can get more subscribers,likes and views( I know it hurts when you put too much effort literally too much effort and you got nothing but please stay motivated we're here for you to support and in future your account we'll beon number 1)

  • @ramimrifat2
    @ramimrifat2 2 месяца назад +3

    Most Wanted Video from Framer University 😄

  • @holo1702
    @holo1702 2 месяца назад

    Thank you so much for putting this video and all others out, I've went through so so many videos about understanding Framer but no one actually tells you how to think of laying things out in the way you did, you're a lifesaver, keep at it you're an amazing teacher ✨

  • @randyderrez4560
    @randyderrez4560 2 месяца назад +1

    Amazing video Nandi! You really inspire me to move forward with my switch into web design. Thanks for the value you’re delivering through these videos!

    • @framer.university
      @framer.university  2 месяца назад

      I’m glad you’ve found this helpful 🫶🫶 good luck with your switch to web design, and let me know if i can help 🫡

  • @ic3yondeck
    @ic3yondeck 2 месяца назад +1

    I have to say a big thank you for this. I have learnt and improve on framer since watching your videos

  • @sayan4078
    @sayan4078 2 месяца назад +2

    I truly appreciate your contents bro, You're doing an absolutely fantastic job. Keep going, Keep growing😊

  • @movieswithshankar
    @movieswithshankar 2 месяца назад +1

    The best channel to learn framer. Great content as always ❤

  • @franlee7028
    @franlee7028 2 месяца назад +2

    Since I have been using Figma, I was able to pick up the basics of Framer quite quickly. However, I still learned a lot from this video. Thank you very much. By the way, Framer is far superior to Figma when it comes to responsive design.

    • @framer.university
      @framer.university  2 месяца назад

      Glad it was helpful! And yeah, Framer is amazing! You literally design + develop a real site at the same time. Game changing...

  • @JirayutPumpoung
    @JirayutPumpoung 2 месяца назад

    Thank you so much! You're teaching very well and making it easy to understand. I'm currently practicing using it.

  • @chimauzoma7461
    @chimauzoma7461 2 месяца назад +1

    This is such great content. Why haven't I been following!? 😢. Awesome work

    • @framer.university
      @framer.university  2 месяца назад

      Welcome here! Glad u find my channel:) share it with your friends 😉

  • @nable0306
    @nable0306 2 месяца назад

    Best tutorial by far. learned a lot. Thank You

  • @hendriawan-ob8pc
    @hendriawan-ob8pc 2 месяца назад +2

    Thanks so much Nandi.

  • @AJ-ge4bc
    @AJ-ge4bc 2 месяца назад +1

    Amazing tutorial Bro!

  • @modsbeck
    @modsbeck 15 дней назад +1

    Great vid, thank you!

    • @framer.university
      @framer.university  14 дней назад +1

      My pleasure! 🫶 Should I do more builds from scratch?

  • @DesignDen673
    @DesignDen673 2 месяца назад +2

    This is so cool. For me the harder part about framer is making layouts from cms. For blogs etc. could you please make a video around this

    • @framer.university
      @framer.university  2 месяца назад +3

      i was just actually mapping out a CMS tutorial in my head a couple of hours ago. you can expect something in the coming weeks :)

  • @abdulazeez2222
    @abdulazeez2222 2 месяца назад

    Thanks so much Nandi, We need more full site builds, Thank you thank you thank you,♥♥♥

  • @bharat5194
    @bharat5194 2 месяца назад

    Bookmarked for later. Thanks!

  • @gabrielemumwen9921
    @gabrielemumwen9921 22 дня назад +1

    Thank you very much 👐👐🌟

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

    Great Video...Appreciate the efforts

  • @leslee-wp5ks
    @leslee-wp5ks 2 месяца назад

    this video helped me to build my first website for my portfolio thankyou soooo much🥰🥰🥰😊

    • @framer.university
      @framer.university  2 месяца назад

      that’s awesome! glad I could be a part of your journey

  • @chilly7351
    @chilly7351 2 месяца назад +1

    Such an underrated channel😢

  • @ends_journey
    @ends_journey Месяц назад +1

    I really love your tutorials and it's very helpfull. The thing i need is " Can you make a tutorial on navigation bar with responsiveness.

    • @framer.university
      @framer.university  Месяц назад +1

      Thanks! 🙏
      Here’s a video about that:
      ruclips.net/video/Cz52GG0h9GI/видео.htmlsi=NHg3LZumpwj2mQd6

    • @ends_journey
      @ends_journey Месяц назад

      @ Thanks A Lot 🥰😘

  • @DJ-tq1ht
    @DJ-tq1ht 2 месяца назад +1

    Great job man

  • @jessemoffett6035
    @jessemoffett6035 2 месяца назад

    Thank You, Thank You, Thank You!

  • @mdrahat-lu9tn
    @mdrahat-lu9tn 2 месяца назад +1

    Take love from Bangladesh ❤..

  • @tajinderjsingh826
    @tajinderjsingh826 Месяц назад +2

    Great demo // Thanks

  • @foyzulhasan4242
    @foyzulhasan4242 2 месяца назад +1

    watching From Bangladesh ❤

  • @kunaidemo7617
    @kunaidemo7617 23 дня назад +1

    Thank you so much

  • @zazzman16
    @zazzman16 Месяц назад +1

    Great Job

  • @alearielrodriguez
    @alearielrodriguez 22 дня назад +1

    Thank you for you effort and im waiting for you course!!! PLEASE!

  • @RobertoVillaLobby
    @RobertoVillaLobby 8 дней назад

    Absolutely brilliant. I just finished an in depth Figma course and thanks to this tutorial as a follow up i can dive straight into Framer. Any idea when your structured course planned for 2025 is airing?

    • @framer.university
      @framer.university  6 дней назад

      awesome to hear this helped you get started!
      i think it'll be probably closer to 2nd half of the year but stay tuned for updates! :)

  • @sammieregmi
    @sammieregmi 2 месяца назад

    You are amazing! Thank you :)

  • @franlee7028
    @franlee7028 2 месяца назад +1

    You are amazing!!!

  • @designwithsd
    @designwithsd 2 месяца назад +1

    Thank u brother

  • @sultanacademy491
    @sultanacademy491 2 месяца назад +1

    Take Love bro from bangladesh

  • @user-vk2ei5ze4y
    @user-vk2ei5ze4y 20 дней назад +1

    Thank you so much for the video!! I got laid off recently and now I have to rebuild my portfolio. Been using other platform for it but I've always wanted to try using framer. I love it. I had trouble even using a pre-made template but now I can play around with it!
    + One quick question - for the Title+Sub+Button frame, rather than setting a max width (1100) can I just add left and ride paddings to the Hero/parent frame (in this case 170 px each)? Will this mess up anything?

    • @framer.university
      @framer.university  20 дней назад +1

      Glad u started using Framer and I hope this video helped :)
      Max width is better because with padding, it will always keep 170px distance from left and right but won’t be limited to a maximum of 1100px. So in case of a large large screen, it might be a little too wide, but ultimately it depends on what you want.
      Hope it makes sense :) play around a lot, experiment and have fun :)

  • @kaixa696
    @kaixa696 2 месяца назад +2

    Hi, I always watch all your tutorials, I have a question, can you add custom code overrides to block scroll for fake loading screen. I tried some codeoverrides but it conflicts with smooth scroll component. Really hope you can answer.

    • @framer.university
      @framer.university  2 месяца назад

      Did you try my solution?
      framer.university/blog/how-to-block-scrolling-during-the-website-s-preloader-in-framer
      Or you can also try this:
      framer.university/resources/scroll-stopper-component-in-framer

  • @sheshirockzz3959
    @sheshirockzz3959 2 месяца назад

    Thank you bro

  • @mrartisto2216
    @mrartisto2216 14 дней назад

    thank you sir

  • @DanRayLee
    @DanRayLee 2 месяца назад +2

    Hello, I always find myself completely drawn into your high-quality content. Thank you, and I always support you! 😊
    I have a few questions, but it seems there’s a limit to what I can find through searches, so I’m posting them here. (Most of the questions are related to Framer.)
    I am creating a knowledge-based online platform based in korea and building a website for it.
    1. If I use the HTML copy function to gather ideas from other websites and then publish them on my own site, will there be copyright issues?
    2. Are websites created with Framer secure from hacking?
    3. Can I embed videos on a Framer-based website, similar to hosting a live class?
    4. Is it possible to set up separate user and admin pages in Framer?
    5. Can I create pages in Framer that are accessible only to members who meet certain conditions?

    • @framer.university
      @framer.university  2 месяца назад +3

      hey, I really appreciate your support!!
      1. the HTML paste should be used for transferring your own websites (created with other tools) to Framer. you can still use it for educational purposes, so just to play around with different layouts, but I wouldn't recommend publishing copied parts to your site as your own.
      2. Framer sites are secure, yes!
      3. Yes you can get built in components from the insert panel to embed videos from RUclips or Vimeo for example. (access insert panel by pressing "I" on your keyboard)
      4. This sounds like something that you'd usually do for a web application. Framer is for building static websites mostly (with some dynamic functionalities like fetching or code components).
      5. yes you can create members only content in Framer by integrating with 3rd party softwares like framerauth.com/
      Hope this helps :)

    • @DanRayLee
      @DanRayLee 2 месяца назад +1

      @ thank you soooo much🥹 really helped me ALOT!!!

  • @mrblack3163
    @mrblack3163 2 месяца назад +1

    Thank sir

  • @AerajFatima
    @AerajFatima 14 дней назад +1

    Just starting your video

  • @sahalarianto
    @sahalarianto 2 месяца назад +1

    could you show your all of your gear?

  • @miansamir-p9p
    @miansamir-p9p 2 месяца назад +1

    Hi, I've been practicing the lessons all along, Thanks for the guide. One question regarding one of the previous tutorial (Web Loading Animation), Is there any way possible to make the animation load just one time at the start of web site so if I navigate from other pages of website, back to Home it doesn't play again?
    Thanks Again!

    • @framer.university
      @framer.university  2 месяца назад

      thanks for the kind words! :)
      you can use my show once override to show it only once!
      framer.university/resources/show-once-code-override-for-framer

  • @saraga94
    @saraga94 Месяц назад

    Thanks thanks thanks!

  • @mr.chinaski2613
    @mr.chinaski2613 2 месяца назад +1

    Awesomeness!

  • @winawinarti8631
    @winawinarti8631 Месяц назад +1

    Nandi please make tutorial inverted border radius with framer ☺

  • @dinanddunia
    @dinanddunia 19 дней назад +1

    please can you help me with the command and opntion and enter cause the stack does'nt show up

    • @framer.university
      @framer.university  19 дней назад

      you can also try right clicking and clicking "add stack"

  • @timilehinsolu4254
    @timilehinsolu4254 2 месяца назад +2

    You need a Framer PHD💆🏾‍♂️

  • @shifatmasud
    @shifatmasud 2 месяца назад +1

    Please share scroll media component

  • @Ibnalsafir1
    @Ibnalsafir1 Месяц назад +1

    for some reason I got stuck from the part where you stack the title "Start with framer" I'm doing exactly everything you said....

  • @shishukumarguin6918
    @shishukumarguin6918 2 месяца назад +1

    Does anyone know the music name in the beginning?

  • @Nutrism
    @Nutrism 2 месяца назад +1

    Hey please brother NANDI create an video on CMS collection and how to create an dynamic website that would be so much time saver for early startup
    I run an ecommerce store i want to switch to the framer but can't figure out the CMS PLEASE NANDI BRO CREATE AN video on the CMS collection how to create the dynamic website

  • @rajnomadheart
    @rajnomadheart 2 месяца назад +1

    Not sure why but pasting the effect on button is not working?

    • @framer.university
      @framer.university  2 месяца назад

      It should work! Are you using the right command?

  • @krush845
    @krush845 Месяц назад

    What is the purpose of fill height for the navigation button? I feel that's unnecessary?

    • @framer.university
      @framer.university  Месяц назад

      not necessary at all. you can keep it on fixed or fit. but with fill, it will adopt to height changes on the navigation that might happen when you're playing around.

  • @TheStypeQ
    @TheStypeQ 2 месяца назад +1

    How to add google reviews to framer page?

    • @framer.university
      @framer.university  2 месяца назад +1

      If Google Reviews have an embed option, you can embed it.

  • @tonysuonvieri8970
    @tonysuonvieri8970 2 месяца назад +1

    The champ!

  • @khanayan-v7z
    @khanayan-v7z 2 месяца назад

    Hey Nandi, after your watching your videos on framer layout, animation, UX and etc. I built really good websites, and I thought of applying to Framer Partner program. Although, They rejected my application saying the UX, the quality of design, and animations didn't meet the standards. I'm so frustrated ngl! Any tips?

  • @unsa101
    @unsa101 2 месяца назад +1

    Nandy thanks a lot for this gem, Can you make a story about your recent 2000$ project

    • @framer.university
      @framer.university  2 месяца назад +2

      Thanks! :)
      What do you wanna know?👀 I’ll make a tutorial on the scroll animation I made for the client.

  • @rajnomadheart
    @rajnomadheart 2 месяца назад +1

    Sir, do you have internship opportunity? I want to get practical overview about Framer web designing.

  • @salahudeen5846
    @salahudeen5846 Месяц назад

    I subscribed 🎉 like 🎉

  • @MuhammadRehan-xc8fz
    @MuhammadRehan-xc8fz 5 дней назад +1

    I can’t do this 😭😭

  • @stormspeerit
    @stormspeerit 2 месяца назад +1

    👑👑👑

  • @ahmetkose9621
    @ahmetkose9621 2 месяца назад +1

    Thaaatt'ss ittttt

  • @lucasackermann053
    @lucasackermann053 2 месяца назад +1

    💟💟

  • @teqqed
    @teqqed 2 месяца назад

    Lord, the amount of ads in this vid.. Is this Google controlled or did you configure this?

  • @DrNikhilRavi
    @DrNikhilRavi 2 месяца назад +2

    No 1

  • @aamirfaraz786
    @aamirfaraz786 2 месяца назад +1

    🫡🫡🫡🫡🫡🫡🫡🫡🫡🫡🫡

  • @bb-oz2ry
    @bb-oz2ry 2 месяца назад +1

    #pizza

    • @framer.university
      @framer.university  2 месяца назад +1

      The OG hahah

    • @bb-oz2ry
      @bb-oz2ry 2 месяца назад +1

      @ hahahah ma man! following you for like 2 years, probably remixed 80% of your resources and learned a lot from them. last week ive got the framer expert badge officially. thanks and big R man🍻

    • @framer.university
      @framer.university  2 месяца назад +1

      @@bb-oz2ry woow maan! big congrats for getting your badge! keep going 🫶 so happy to hear my resources help!