Whoever made this video, I really want to express my deepest gratitude😊. Thanks to you, I can smoothly and understand how to create prototypes in Framer, and thank you as well for providing the assets for us to learn.😉
This is a fantastic tutorial! As a new Framer user I've run into several problems that you've actually help solve and I'm only 30 minutes in. I can't wait to see what else I learn. Thank you for creating this and sharing.
This tutorial is amazing! As a Brazilian, I'm still improving my English, and there are few content creators on Framer in Brazil with this teaching style. Moreover, you speak at a slower pace, which is great for me as it allows me to better follow the tutorial. Thnks 😊
I'm glad that my teaching style suits the way you learn. I have a new Framer course as well. Feel free to check it out: ua-cam.com/video/9nIwTjG2fdI/v-deo.html
Thank you so much Framer and design code... I've been a wordpress developer but was never happy, So i have been keep jumping to various CMS's and framer is the real deal,.......
i hear ya!! I WAS learning WF , got freakn frustrated and turned to Framer … i wish I had the patience and capacity to learn WF but damn big learning curve plus some basic coding needed!
So informative. Fact packed! Easy explanations, if you don’t understand everything at first, give it some time, it will be referenced later. Watch this. I’m super pumped to get started on my new site!!
NEED GUIDANCE IN PURCHASING framer premium. I have been trying to purchase the premium version of framer, but unfortunately my visa card kept declining multiple times, I also tried other cards as well, but all of them kept declining. Then I also tried making another framer account and get premium there, the same thing happened. Anyone here who could guide me ??
I have some questions to you. 1.Is it essential to learn figma before framer? 2.Is it essential to learn HTML CSS before framer? 3.What is the prerequisite for learning framer? 4.Is learning figma helps to framer? Please answer these questions I am new to this field.
Learning Figma will make things easy for you. HTML CSS isn't essential at this stage, You can learn it later if you want to. If you want to learn Framer first, it's completely fine, But I would suggest learning Figma quickly as it really helps in Framer.
@@gigachadtwixz7262 How much Figma should learn first before framer? Just basic or basic + prototype, auto layout,components etc? Please give me the answer kindly
Hi @Designcodeteam I would like to express my gratitude to you and your esteemed team for creating this amazing tutorial. However, it is incumbent upon me to bring to your attention that certain revisions are required, as numerous components and features have either been removed or relocated to alternative sections.
Framer is amazing for a free flow interface experience....it's more similar to a design tool with advanced features it feels like figma on steroids. Thank you ...♥️Framer♥️
Hi Sir Thank you so much for this valuable tutorial. But I didn't see any of the tutorial from basic t advanced. I'm requesting you to do videos from basic and this is looking so beautiful
At around the 1:38:13 mark you bring in a loading progress animation into your Framer project but I'm struggling to find this. I tried using the Quick Action menu like you did but it's not popping up as an option. Has Framer removed this feature?
@@bryce-jones yes you have, no need to upgrade, it's on the right side under assets/framer (Pages-Layer -Assets) the tabe is close you'll need to open it to reveal the progress bar component.
Hey great course! I am loving it!, I just... cant use the spline links. when I embed it in my page it wont move or anything. Am I doing something wrong ?
I have a question. Every time I move text around that is already inside a frame, the text jumps out of the frame and below every other layer. I then have to manually place it back inside the frame so that it is visible in preview, tablet and phone mode. This gets annoying and cumbersome. How do I move text around and have it stay inside the frame? Are there any particular settings that I need to adjust in framer? Thanks a bunch.
"Great tutorial! I'm curious about how data storage works in Framer-designed websites. Can Framer handle backend functionality like storing user input data, or would we need to integrate with a separate backend system?
Around 1:04:44 I did exactly what u did and components are still not visable even tho I set the overflow Visable and the other on Yes, I guess it's bugged? - Anyway I appreciate your tutorial very clear and not super fast!
Hello and thanks for the content. It definitely has inspired me to learn how to use framer. Question. How can I go about changing the colors and elements used in the background and spline animation? I like the one used in the sample sight but would like to make a few tweaks to accommodate my color scheme?
When I create a new section the new section will not go to the next section below but instead stays in my hero stack. How can I make the new section that I create stack under the previous section vertically? Please help, thanks.
Where it lost me was the that self hosting isn't a thing. My websites get over a thousand views within within 24 hours. I think this might be a ripoff, as a developer and front end designer I perfer hosting my own solution and not be limited by how much my app can grow.
@DesignCode Hey can you please tell me how to create circular progress baar in framer i'm not able to use progress bar i tried since morning and i didn't found any video to please tell me 😔
If you're used to Figma, Framer be extremely familiar. I love that it's using the same concepts for stacks, components, text styles, plugins, etc. By that extension, you have more creative freedom and can design from scratch. Webflow is more a web builder, meaning that you're implementing an already-made design with direct CSS concepts, which sometimes can be hard to understand to designers who's never done CSS. Both are good options.
@DesignCodeTeam I am noat able to get my " Top Bar " to show unless it is placed In Front of the " Hero" frame. I cannot see it if it is above the Hero section in the Layers menu. It has to be below ( in front). Why is this?
Hi Deepak, were you able to find the basic template to work from? Could you show me how you got this, please? Sorry I do not know the answer to your question, otherwise would've loved to help!
@@sanambalani It ended up being under Styles > Filters > BG Blur. Framer changed quite a few things that were shown in this video, so there was a lot of digging and research to be done. I'm sure it helped me get a better understanding in doing so anyway!
same. I feel like it works for the most part except the Mobile Menu background blur. Even after publishing, it still didn't work. Any idea, @DesignCode?
Thanks for the tutorial & all your patience to explain with such detail. I'm at 12:23 attempting to change the text to "Fill" however the option is greyed out & not available. Is there a setting that would cause this? Thanks in advance!
I have a text cursor show up ( instead of my pointer arrow ) when hovering over the "text" of a button. Only the text, the pointer arrow shows when hovering over the icon of a button.
I would love to have more icon options. I tried to bring my own icon library from Figma, but it's a pain, pe vectors inside don't resize with it's parent container 😭
Hey, I wanted to make a website throw framer, and I want to connect firebase in my website for the database storage authentication. So can I do that? And if I want to integrate fire based on my project, will that be good? It's not a big project like it's my college project. So can I use firebase for the database? As I don't know coding. So will it be a good option? And please tell me a good option to watch a video where fire disintegration is there? Or could you please guide me how to integrate firebase in the same project that you made in this video? In my project, I will be uploading courses on my website so that the students can visit my website and take the courses, buy the courses. So will it all be possible with fire base integration? Or do I need to code?
Hi, I would really love to follow this properly however from the outset, I am not able to find this "basic template" you mention at 4:20, which underprins all the edits you make, e.g. the title changes in the "layers" section at 6:38. I assume many updates have been made to Framer since this video was made, however could you or someone kindly pinpoint me on how to get this basic template with all the basic pages (e.g. 404, about, contact), please? Thanks in advance for your help! :)
Hi. I followed through but when I click publish, only the hero showed in my browser, but it is fully responsive when I test on framer app. is this a bug or I didn't do it right?
I purchased the Flux Academy Framer Masterclass and your tutorial was wayyy more valuable..and also free I might add.
I think this is the best crash course I've found on UA-cam.
Whoever made this video, I really want to express my deepest gratitude😊. Thanks to you, I can smoothly and understand how to create prototypes in Framer, and thank you as well for providing the assets for us to learn.😉
This is a fantastic tutorial! As a new Framer user I've run into several problems that you've actually help solve and I'm only 30 minutes in. I can't wait to see what else I learn. Thank you for creating this and sharing.
Best and most valuable free course I've ever seen on the internet. Thank you so much for this amazingly helpful content.
That’s amazing to hear, thank you!
This tutorial is amazing! As a Brazilian, I'm still improving my English, and there are few content creators on Framer in Brazil with this teaching style. Moreover, you speak at a slower pace, which is great for me as it allows me to better follow the tutorial. Thnks 😊
I'm glad that my teaching style suits the way you learn. I have a new Framer course as well. Feel free to check it out: ua-cam.com/video/9nIwTjG2fdI/v-deo.html
This is the most calming voice I ever heard!
Thank you so much Framer and design code... I've been a wordpress developer but was never happy, So i have been keep jumping to various CMS's and framer is the real deal,.......
IDK what to say but i just wanted to say thank you for sharing such valuable lessons.
Amazing tutorial and site design! I’m a WordPress expert but this looks like a much cleaner foundation to build with
😍
❤
I was about learning Webflow... Well I just found a better option 😇
It’s a great alternative to Webflow!
Same!! 🙌🏾
same
Same here.. and it looks like framer will get bigger
i hear ya!! I WAS learning WF , got freakn frustrated and turned to Framer … i wish I had the patience and capacity to learn WF but damn big learning curve plus some basic coding needed!
So informative. Fact packed!
Easy explanations, if you don’t understand everything at first, give it some time, it will be referenced later. Watch this. I’m super pumped to get started on my new site!!
Thank you for the crash course! I know where to build my portfolio now.
This video convinced me to go all in on Framer 🙌 I
Thank you for this "All in one place answers" video
I have watched many videos about Framer and you're the best so far.
Wow, thanks!
NEED GUIDANCE IN PURCHASING framer premium.
I have been trying to purchase the premium version of framer, but unfortunately my visa card kept declining multiple times, I also tried other cards as well, but all of them kept declining. Then I also tried making another framer account and get premium there, the same thing happened.
Anyone here who could guide me ??
I have some questions to you.
1.Is it essential to learn figma before framer?
2.Is it essential to learn HTML CSS before framer?
3.What is the prerequisite for learning framer?
4.Is learning figma helps to framer?
Please answer these questions
I am new to this field.
Learning Figma will make things easy for you. HTML CSS isn't essential at this stage, You can learn it later if you want to. If you want to learn Framer first, it's completely fine, But I would suggest learning Figma quickly as it really helps in Framer.
@@gigachadtwixz7262 How much Figma should learn first before framer?
Just basic or basic + prototype, auto layout,components etc?
Please give me the answer kindly
Hi @Designcodeteam I would like to express my gratitude to you and your esteemed team for creating this amazing tutorial. However, it is incumbent upon me to bring to your attention that certain revisions are required, as numerous components and features have either been removed or relocated to alternative sections.
We need tutorials on building backgrounds like yours!
You are saving me a semester!
Very well done, thank you for this amazing content and detailed explanations. Much appreciated!!
yours is perfect. These are going to takes loads of ti off the learning process.
Great video! Very informative, easy to understand. Keep up the great work!
Glad it was helpful!
This guy is amazing, Framer should take note of his tutorials as there's are pants.
s there courier in webdesign and dev ?? alredy dora is there ? what u think ?
Amazing course!
Glad you think so!
Thank you for the course! It´s great!! Thank you
Thanks for this. I wish you all the best ❤
Thank you so much for this video guys! I learned a lot with you!
this channel is just amazing....
s there courier in webdesign and dev ?? alredy dora is there ? what u think ?
Amazing, BUT what makes the site unique are the 3D images and the background I WANT to know how to create them! ❤
Spline 3D. Tutorials on UA-cam
Awesome tutorial, amazing teacher! Thanks Meng To for this ❤🔥❤🔥❤🔥🙏
Nice job. Feel the new Squarespace Fluid Engine comes very close...
I’m sure each platform has their versions of the adaptive features. Thanks for watching!
Wonderful course! It was very helpful😘
Great video and it is still relevant to todays standards 2 years old too :)
is there courier in webdesign and dev ?? alredy dora is there ? what u think ?
Framer is amazing for a free flow interface experience....it's more similar to a design tool with advanced features it feels like figma on steroids.
Thank you ...♥️Framer♥️
I like the course very much.
Thank you!
Thank you so much for the amazing tutorial🙏😊
Hi Sir
Thank you so much for this valuable tutorial. But I didn't see any of the tutorial from basic t advanced. I'm requesting you to do videos from basic and this is looking so beautiful
Thank you for this wonderful tutorial 🙏🙏.
I was also wondering if you had a tutorial on how you created the 3d asset using spline
Great course! Thanks for creating this.
Cannot download assets for some reason though.
click on the "text content" link, you have a working link for the assets inside that page
@@ym.820 thank you so muchh
Hello, the dropbox link have been updated!
The best of the best!!!!!
At around the 1:38:13 mark you bring in a loading progress animation into your Framer project but I'm struggling to find this. I tried using the Quick Action menu like you did but it's not popping up as an option. Has Framer removed this feature?
No, they just relocated the items. Now It's under the assets panel. Assets>framer>progressbar.
@@Micheal_Muane very strange, still not seeing it on my end. I’m a new Framer user, so perhaps newer accounts don’t have access to legacy components?
@@bryce-jones yes you have, no need to upgrade, it's on the right side under assets/framer (Pages-Layer -Assets) the tabe is close you'll need to open it to reveal the progress bar component.
@@Micheal_Muane I'm doing exactly as you describe but i'm still not seeing anything on my end.
@@Micheal_Muane also can't find anything
Your video was so helpful thanks a lot ❤
I cannot find the progress bar component from the Appear Animation section. Any suggestions on where to find this?
I couldn't either, i took the react code for the progress bar from his framer template copy - and copied it over
Me too @designcodeteam
Editing in Framer is so damn complicated, your tutorial helped a lot but I am updating my custom 3 d model it's not taking it
thanks for this tutorial, helps me a lot! lov u
Glad it helped!
Hey great course! I am loving it!, I just... cant use the spline links. when I embed it in my page it wont move or anything. Am I doing something wrong ?
Thank you so much 🙏🏻
You’re welcome 😊
I have a question. Every time I move text around that is already inside a frame, the text jumps out of the frame and below every other layer. I then have to manually place it back inside the frame so that it is visible in preview, tablet and phone mode. This gets annoying and cumbersome. How do I move text around and have it stay inside the frame? Are there any particular settings that I need to adjust in framer? Thanks a bunch.
"Great tutorial! I'm curious about how data storage works in Framer-designed websites. Can Framer handle backend functionality like storing user input data, or would we need to integrate with a separate backend system?
Around 1:04:44 I did exactly what u did and components are still not visable even tho I set the overflow Visable and the other on Yes, I guess it's bugged? - Anyway I appreciate your tutorial very clear and not super fast!
Hello and thanks for the content. It definitely has inspired me to learn how to use framer. Question. How can I go about changing the colors and elements used in the background and spline animation? I like the one used in the sample sight but would like to make a few tweaks to accommodate my color scheme?
When I create a new section the new section will not go to the next section below but instead stays in my hero stack. How can I make the new section that I create stack under the previous section vertically? Please help, thanks.
Wow right to the point, do you have a class for Figma by any chance?
This was awesome!!
I have one question, where did you made those images you used? the look amazing
You are the best!!🙂
Updated.
Spline URL #1: my.spline.design/framercopy-bd9e7275da55ebaf7252e8a0e4e0055f/
Spline URL #2: my.spline.design/daccord-49093ae84c00862e2451c953172dde5c/
thank you so much!
Very good keep it up
i have a doubt , i am not blaming you its my fault that my preview is getting cut when the resolution exceeds above 1200
Nice tutorial, Thanks a lot
Where it lost me was the that self hosting isn't a thing. My websites get over a thousand views within within 24 hours. I think this might be a ripoff, as a developer and front end designer I perfer hosting my own solution and not be limited by how much my app can grow.
Thanks it's really helpful..
But what do you think about figma which one is better ?!
Figma is the best design tool. But if you want to build a site as well, Framer is a really good option.
AWESOME 🤙
Thanks!
@DesignCode Hey can you please tell me how to create circular progress baar in framer i'm not able to use progress bar i tried since morning and i didn't found any video to please tell me 😔
Hello, I can't download the assets, is it possible for you to update the link please ?
AWESOME 🥰
I’m trying to add a blank section but it wants me to insert on of their premade layouts. I’ve searched all over Google
Webflow vs Framer which you recommend?
If you're used to Figma, Framer be extremely familiar. I love that it's using the same concepts for stacks, components, text styles, plugins, etc. By that extension, you have more creative freedom and can design from scratch.
Webflow is more a web builder, meaning that you're implementing an already-made design with direct CSS concepts, which sometimes can be hard to understand to designers who's never done CSS.
Both are good options.
Thank you In the setup
Great video! Can we edit breakpoints separately, or if I add / remove an element in one breakpoint it automatically reflects in others?
@DesignCodeTeam I am noat able to get my " Top Bar " to show unless it is placed In Front of the " Hero" frame. I cannot see it if it is above the Hero section in the Layers menu. It has to be below ( in front). Why is this?
Thank you very much
Thank you for watching!
thank you
Appreciate the chat!
Excellent video. Thank you so much.
Im unable to find bgblur option under view? Has it been moved somewhere else? or am i missing something?
Hi Deepak, were you able to find the basic template to work from? Could you show me how you got this, please? Sorry I do not know the answer to your question, otherwise would've loved to help!
Its already mentioned in the description
I don't see the blur option either... Did you ever figure it out?
@@TCakes I did not sadly. It's not in the description either. If you find out, please do let me know!
@@sanambalani It ended up being under Styles > Filters > BG Blur.
Framer changed quite a few things that were shown in this video, so there was a lot of digging and research to be done. I'm sure it helped me get a better understanding in doing so anyway!
I don't understand why my framer project doesn't have "background blur" effect, can you help me to explain it?
same. I feel like it works for the most part except the Mobile Menu background blur. Even after publishing, it still didn't work. Any idea, @DesignCode?
@@minhpl also not working for me
Yeah it works for the top bar but not for the mobile menu, even with the site published, any adea why ?
@@minhpl same for me
same here
this is awesome
Thanks for the tutorial & all your patience to explain with such detail. I'm at 12:23 attempting to change the text to "Fill" however the option is greyed out & not available. Is there a setting that would cause this? Thanks in advance!
I have a text cursor show up ( instead of my pointer arrow ) when hovering over the "text" of a button. Only the text, the pointer arrow shows when hovering over the icon of a button.
I would love to have more icon options. I tried to bring my own icon library from Figma, but it's a pain, pe vectors inside don't resize with it's parent container 😭
Great!
thanks
You're welcome!
You use blobs for your backgrounds yes?
Yep they are blobs
Hey, I wanted to make a website throw framer, and I want to connect firebase in my website for the database storage authentication. So can I do that? And if I want to integrate fire based on my project, will that be good? It's not a big project like it's my college project. So can I use firebase for the database? As I don't know coding. So will it be a good option? And please tell me a good option to watch a video where fire disintegration is there? Or could you please guide me how to integrate firebase in the same project that you made in this video? In my project, I will be uploading courses on my website so that the students can visit my website and take the courses, buy the courses. So will it all be possible with fire base integration? Or do I need to code?
Thank you for your course, but nobody shows how to use the Framer code and integrate/deploy on a hosting service/headless CMS !!!
Hi, I would really love to follow this properly however from the outset, I am not able to find this "basic template" you mention at 4:20, which underprins all the edits you make, e.g. the title changes in the "layers" section at 6:38. I assume many updates have been made to Framer since this video was made, however could you or someone kindly pinpoint me on how to get this basic template with all the basic pages (e.g. 404, about, contact), please? Thanks in advance for your help! :)
Webflow or framer? Pros n cons?! Drop comments anyone who used both
Hello, if I add the 3D image, the image will stay in the corner and I can’t see the full image. Does anyone know what to do?
Hello, can you help me, the assets link doesn't work for me?
Hello, the dropbox link have been updated!
I am not getting or seeing any animations on the Spline URL #1
Assets not available on dropbox: Link temporarily disabled
I am trying to scale the button component on hover but nothing happens. Any idea why this might be happening?. Opacity on hover works though.
It’s possible that another event is using scale such as scroll. Otherwise try testing on a new button.
At the end dose it becomes an html & css website? To add links and so on?
Yes, it outputs HTML, CSS and JS. You can export components to React and also include code to your site.
Great Course! But the spline links are not working anymore. Would be helpful if you update the links again.
It actually works when I try to undo the process lol
@@moiadiguewould u help be out. its not working for me, i am using the first link and it is very laggy
Love it
thanks for amazing and useful video!! I need a little help. Can you update spline URLs again:) ?
The DropBox link doest seem to work anymore.
Hello, the dropbox link have been updated!
Hi. I followed through but when I click publish, only the hero showed in my browser, but it is fully responsive when I test on framer app. is this a bug or I didn't do it right?
Spline and framer which is more better?
This is using both. Spline for 3D and Framer for creating the site
@@DesignCodeTeam i can't delete projects on framer, have checked everywhere but i can't seem to find where to delete projects.
@@DesignCodeTeamI also want to know if i can use a domain i purchased on Cloudflare with Framer, and how?
great stuff - anyone know how we access standard web fonts, Arial, Verdana etc?