Framer for Beginners: The #1 Secret to a Responsive Site

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.

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:

[monironi]

I was so overwhelmed by trying to learn framer and none of the other videos broke down responsive design like this. Super helpful, you’ve made my job so much easier. Thank you!

[ebubeiloegbunam-nbmv]

A someone whose been learning framer and has struggled with responsiveness this video has really helped me i really recommend it

[bytomhaynes]

Always such good explanations Nandi! Appreciate it!

[jessemoffett]

Can't wait for a full course from you!

[albigaus]

I'm beggining in Framer, this video saved me!

[xboxHero]

Best framer tutorial I have ever seen! 😍😍

[gustavowave]

Today in the bootcamp they were asking for resources to learn framer and I said "framer university". The tutor was like "nooo, there's actually a better one, from this guy... " and I said "yeah, it's framer university. with Nandi"

[mirkomihailo]

Very good explanations. Nice tutorial.

[SafaAshrafN]

A very useful video! Recommending for beginners.

[kadirov]

Amazing tutorial! You make me love Framer

[JovanWatson]

This was awesome. Solved everything I wanted to figure out. Thank you.

[Anca_Webdesign]

Really helpfull, thank to you Nandi ! 😇For me like a begginer it is a next step to be better in Framer

[anitius]

This was genius Nandi. Thank you! I only have 1 question. Why do we set the Left and Right padding to make "the margins" of each section individually instead of applying this lest and right padding to the Main frame? Same with the gap, is it better to add it to each section or to the main. I guess the gap would vary depending on the design, but the margins are usually consistent, maybe not, but if they were always the same in all sections, would it be a best practice to set left and right padding to the Main container?

[ulvarod]

Great content and always love your explanation. Learn so much from this. Thank you...

[nitzanmorgan]

This is super awesome man. I was stuck trying to figure this out for the past 5 hours thank you. btw, the music at the start of your videos is really cool, Where do you get it from?

[alshehab]

Hi Nandi, I've been following your videos for over a year now, and I've learned so much from them. I believe I’m capable of building a fully functional Framer website, and I’m eager to explore new opportunities. However, I sometimes experience imposter syndrome when it comes to handling the backend of more complex projects, especially with intricate integrations. Could you create a video showcasing one of your backend projects? Thank you so much.

[philipchao]

This was so helpful! Thank you for the fantastic tutorial.

[jarosoho]

More great content Nandi - thank you and keep it coming!!

[odujebepelumi]

Thank you for your explanatory section.

[navaharishvenkatesh]

Thank alot, i looking for this tutorial, i found you at right time . Again Thank you