For those who are still new and learning, when you first try to run the project and found error "clsx not found", just run this command on terminal "npm install --save clsx". I don't know why on my side, the base project is using clsx inside of tailwind merge
You are literally so amazing! Your voice is really nice while you actually explained everything really well and clear. Hope your channel will get the recognition it deserves! 🥳
Lol, I like how you were so modest about "Rect" users - Facebook, Netflix and Airbnb. I think at this point 46.6% of the websites use React. I think it would be fair to say that EVERY major website uses React at least to some degree.
This is probably the best programming tutorial i've ever followed! But really what impresses me the most is not the outstanding quality of the final product, is the ability you have to explain what you're doing with so much ease, yet steadily fast.
Excellent , I like this kind of videos where you can see the whole process step by step of how to go styling and also integrate the process behind each decision regarding the measures , a hug!
Amazing tutorial - you explain beautifully. On a side note, I installed eslint-plugin-tailwindcss and prettier-plugin-tailwindcss, and they’ve been game-changers for my Tailwind workflow. Keep up the great work!
@@frontend-tribeI'm so noob at react nextjs can you please teach us how to make the toggle menu functional please ... Please teach us how to implement it on your previous projects too 🥺 I already build all your projects where two of your projects consists non functional toggle button ...
Amazing. Your explanations are crystal clear and easy to pickup quickly. Thank you for the hard work. One question: what is this browser? Those dev tools doesn't look like from Chrome. Or is it an extension? Thank you.
Hey just finished watching your vid, i just want to appreciate your patience and i like the approach for template first animation after then bug fixes You can use alt + z on windows for toggle word wrap Ctrl + b for toggle side bar Win + arrow left/right to get the vscode and browser in position again I was wondering why you make hero tsx and and product tsx client components, the reason why i ask if you look at nextjs docs instead of doing dom manipulation in the entire hero tsx you can just make a component for the client components section and import it back The reason i mention this is because then only the animation will be client while the rest of hero tsx will still be ssg What are your thoughts on this ?
It's an amazing Video for teaching all and I have a question which extension or tool did you used for testing the design in all sizes like tablet or Mobile or other
Hej, Thank you for the high quality you are giving for free. Can you please let me know the extension you are using for seeing all versions (Desktop, Tab, Mobile) of UI at the same time?
I learned alot from you man, you just gained another fan. Awesome tutorial. On a lighter note, which plugin did you use to preview your work responsively on VSCODE
Love the video but when I tried deploying it to gh-pages or when I just ran "npm run build" in general I am seeing this error: "Failed to compile. ./node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs + 187 modules Unexpected end of JSON input" Any ideas on what this could be?
Hello! Great tutorial, finished it up today! I have a question, but it is not related specifically to the tutorial. I want to upload this website on cpanel. When i use "npm run build", it creates a "out" folder for me, but when I upload the contents of this folder on my cpanel, then the images are missing. The functionality is still there, i see moving parts, but most of the images are missing. Also, strangely, but the Cog, the Cylinder and the Noodle are not missing, everything else is gone. Do you have some recommendations on what should I do? Thanks! Nevermind, I got an answer - I needed to put images: { unoptimized: true, }, in my next.config.mjs. I don't know, if it is the best solution, but still works. Thanks again!
i love that you take time to explain thing but there was a time when I got confused `md:w-auto md:max-w-none` I didn't understood these sorry I'm backend dev , also if possible please try sharing the github as a backend dev I cannot each and everything thing but still thanks man
Which browser are you using ? bg-clip-text isn't supporting in Responsively App... Btw Great Tutorial for learning... can't wait to see more tutorials from you in the future ;)
This is a great video tutorial lesson @frontend-tribe - you make it look easy. But I don't have a clue what you are doing. I just started watching this video and am at 25:04. I just recently finished React, SaaS, Bootstrap, jQuery and Redux. As for Next.js, TailwindCSS & Framer Motion, this I think are the ones I'm lost at, I don't know them yet. I'm continuing to watch maybe I'll be unstuck along the way. One question, is it compulsory to make a web page mobile responsive in this video having all the tools you are using ? Because using Bootstrap will take care of the mobile responsiveness. Thank you in advance
Yeah, TailwindCSS would certainly be helpful to have some understanding of during this video. Bootstrap could be used as well - there’s lots of ways to develop websites ☺️
Hi @frontend tribe.. i used the code in the tutorial to develop my portofolio but for a reason i could not push i to any hosting platform seems the startup file you gave us is complicated
Thanks for making these tutorials. Do you have any recommendations on design tutorials courses to design things like this? I'm a full time dev but would like to learn to design to be able to design interesting designs like this. I've had trouble finding resources to inspire me along the way. Wondering how you go about getting these? :)
Thank you for this quality content🙂🙂 . I would like to ask you a question about your browser. I would like to know how you managed to pin when in portrait, tablet, desktop mode when inspecting the page
Thank you for the tutorial - it is very helpful. Could you perhaps please advise as the Testimonials section are working fine locally, but are receiving the error below when trying to deploy to Vercel: "./src/sections/Testimonials.tsx 79:9 Error: Missing "key" prop for element in iterator react/jsx-key"
Amazing video! would you be will to do a tutorial on a responsive dashboard that utilises framer motion somehow? and maybe has some cool transitions between pages?
Impresive I code with you and learned a lot of trick, I'll reuse some thing on my next projects for sure, Thanks!
greetings from Argentina
For those who are still new and learning, when you first try to run the project and found error "clsx not found", just run this command on terminal "npm install --save clsx". I don't know why on my side, the base project is using clsx inside of tailwind merge
Deleted it, from import, and from the component now my entire setup is working properly.
I'm unable to download the resouces due to the failuer of email sent
@@mix_mash3703 check in spam
@@mrsrk.shorts run npm install clsx
Amazing Video! Tip: If you are having trouble with the gradient put _ before every custom color or do not give any space
You are literally so amazing! Your voice is really nice while you actually explained everything really well and clear. Hope your channel will get the recognition it deserves! 🥳
Lol, I like how you were so modest about "Rect" users - Facebook, Netflix and Airbnb. I think at this point 46.6% of the websites use React. I think it would be fair to say that EVERY major website uses React at least to some degree.
One of the best projects ive ever seen, loved building it alongside. Thank you for the project and keep up the good work!!!!
Thanks, will do!
I'm obsessed with functionality and design ❤
Same here. It should be as beautiful as it is functional. That's my philosophy.
This is probably the best programming tutorial i've ever followed!
But really what impresses me the most is not the outstanding quality of the final product, is the ability you have to explain what you're doing with so much ease, yet steadily fast.
Needed this Video more than anyone needed anything.
The introduction looks great! will continue to watch
Awesome, thank you! 😊
if you have completed this project can you please provide the entire code for the reference ? i am facing some doubts !! github?
just found you and im glad i did my backend concept are clear but Im really a bum when it comes to frontend. Ty for ur clean explaination.
Awesome tutorial!! We appreciate you for making this bro. Learn A LOT!
This is what clean coding feels like
if you have completed this project can you please provide the entire code for the reference ? i am facing some doubts !! github?
finished it, loved it, lived it.
😆 💪💪
Very high quality content. I don't know what to say! Please keep going and blessing us with this amazing projects!
if you have completed this project can you please provide the entire code for the reference ? i am facing some doubts !! github?
More to come! 😊
Great video mate. I hardly ever comment but this video was really high quality.
Thank you! Glad you enjoyed it 😌
TOP NOTCH, this is an amazing project and TOP NOTCH explanation with BEST PRACTISES, keep goin and let us shine with these projects!
Thank you! Will do! 🙌
Excellent , I like this kind of videos where you can see the whole process step by step of how to go styling and also integrate the process behind each decision regarding the measures , a hug!
Glad you enjoyed it 😊
if you have completed this project can you please provide the entire code for the reference ? i am facing some doubts !! github?
I'd wish my feed is filled of content like this!!
Impressive delivery and teaching style..................have learned lot of things............thanks lot
Thanks for the kind words ☺️
Amazing tutorial - you explain beautifully.
On a side note, I installed eslint-plugin-tailwindcss and prettier-plugin-tailwindcss, and they’ve been game-changers for my Tailwind workflow. Keep up the great work!
Thank you!
Great video, I can finally code along a tutorial that gives you an idea on whats actually happening
Great to hear! Glad it was understandable
Just came across your channel and this my be my sign to finally learn frontend development. I’m a UI/UX designer 😊
Might be a sign 🤷♂️
Great video I made the project for complete greetings here from BRAZIL
I am eagerly waiting for your next project....
what a cleaned and organized code. just love
No problem 😌
@@frontend-tribeI'm so noob at react nextjs can you please teach us how to make the toggle menu functional please ...
Please teach us how to implement it on your previous projects too 🥺
I already build all your projects where two of your projects consists non functional toggle button ...
if you have completed this project can you please provide the entire code for the reference ? i am facing some doubts !! github?
This is insane dude! Great work and tutorial. you got a fan for a lifetime!
Thank you very much!
Amazing i will be following when i finished my portfolio
done , i use react but , learn so much things thank you so much
Thanks, this tutorial is very helpful for me to learn Next.js❤
Glad to hear that!
much appriciated your efforts. Kindle make more projects. Full stack MERN project
hey man! this is awesome!, please create more videos like this... this is the right way for your youtube channel :D
More to come!
@@frontend-tribe Thanks
Not sure if you covered this but making the toggle menu functional would be a great addition!
Amazing work, keep it up!
Thanks! 😊
thanks man this tutorial was amazing
Glad you liked it! 🙂
This explaination is amazing thanks
Just completed it thank you
That’s awesome! Anything you’d like to see different in the next one?
Great project
Amazing. Your explanations are crystal clear and easy to pickup quickly. Thank you for the hard work.
One question: what is this browser? Those dev tools doesn't look like from Chrome. Or is it an extension?
Thank you.
Check the description 😊
It is polypane
This is very beautiful, I'm amazed to see it nice job 🔥🔥🔥
Thank you very much!
finally completed this project
Awesome! Glad to hear it! 💪
@@frontend-tribe thanks ☺️☺️☺️
Please, continue making more :)
i literally love you
Thank you, I like this kind of projects to learn, I will keep an eye on your new videos, best regards
Glad you like them!
Great video, Thank you❤
Hey just finished watching your vid, i just want to appreciate your patience and i like the approach for template first animation after then bug fixes
You can use alt + z on windows for toggle word wrap
Ctrl + b for toggle side bar
Win + arrow left/right to get the vscode and browser in position again
I was wondering why you make hero tsx and and product tsx client components, the reason why i ask if you look at nextjs docs instead of doing dom manipulation in the entire hero tsx you can just make a component for the client components section and import it back
The reason i mention this is because then only the animation will be client while the rest of hero tsx will still be ssg
What are your thoughts on this ?
I like how you explaining, keep it up 👏
Glad you liked it!
Damn amazing tuto😍😍
It's an amazing Video for teaching all and I have a question which extension or tool did you used for testing the design in all sizes like tablet or Mobile or other
Just started the project and its a really nice one please how do you view all of the screen sizes at once?
polypane browser
very nice video i get to polish my concepts of gradient colors ,masking , framer motion, scroll progress in framer and positions in CSS🗿🗿🗿🗿🗿🗿🫡🫡🫡
Hej, Thank you for the high quality you are giving for free. Can you please let me know the extension you are using for seeing all versions (Desktop, Tab, Mobile) of UI at the same time?
really high quantity content that make me to subscribe your channel Appreciated Thank you !🤗
Awesome, thank you! 🙏
God bless you brother
Thanks! ♥ 💯
Thank you sm for this amaizing content, please keep sharing🙏
Thank you, I will
Name of the extension you are using for viewing the options like mobile, tablet and desktop
I learned alot from you man, you just gained another fan. Awesome tutorial.
On a lighter note, which plugin did you use to preview your work responsively on VSCODE
That’s polypane - check the link in the description ☺️
More videos like this!!
Great video, keep it up.
Thanks, will do!
Great content ❤
Thank you! 😄
Is it a browser or extension that you use to display these panels? “mobile” “desktop'” etc.
Love the video but when I tried deploying it to gh-pages or when I just ran "npm run build" in general I am seeing this error:
"Failed to compile.
./node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs + 187 modules
Unexpected end of JSON input"
Any ideas on what this could be?
i am newb in frontend. can you pretty please share what tool you are using to see all mobile, tablet and desktop design at once ? thank you !
Link in the description 😊
Yo!!! what is the browser extension to have multiple tabs with different viewports?? thanks in advance
Ah, men just love this video ❤
BTW, please share how you set up the browser window to display tabs for mobile, tablet, and desktop.
link is in the description 👍
Hello! Great tutorial, finished it up today! I have a question, but it is not related specifically to the tutorial. I want to upload this website on cpanel. When i use "npm run build", it creates a "out" folder for me, but when I upload the contents of this folder on my cpanel, then the images are missing. The functionality is still there, i see moving parts, but most of the images are missing. Also, strangely, but the Cog, the Cylinder and the Noodle are not missing, everything else is gone. Do you have some recommendations on what should I do? Thanks!
Nevermind, I got an answer - I needed to put
images: {
unoptimized: true,
},
in my next.config.mjs. I don't know, if it is the best solution, but still works. Thanks again!
i love that you take time to explain thing but there was a time when I got confused `md:w-auto md:max-w-none` I didn't understood these sorry I'm backend dev , also if possible please try sharing the github as a backend dev I cannot each and everything thing but still thanks man
Yeah, these do get a little advanced, but you’ll learn it if you keep watching these creations ☺️
Me too. This 'md:w-auto md:max-w-none' staff, I don't have a clue of what he is doing
Try to add nice looking mobile navigation menu with framer animations in future videos.
Good thought, thanks 😊
i loved your video, is it possible if you could explain how do you build these packages to import them into visual studio, thanks :)
Not sure what you mean
godd damm this man cooks again!
Awesome video, learned a lot! Where can i find/design images like the shapes you added for my projects?
Google is how I find mine 😆
Which browser are you using ? bg-clip-text isn't supporting in Responsively App...
Btw Great Tutorial for learning...
can't wait to see more tutorials from you in the future ;)
Check the description - I left a link in there 😊
what extension are you using to se your site across multiple devices
polypane browser
It is very hard to read through the code in the video because there is no line wrap in your IDE. Thanks for the awesome tutorial though!
please also make a video on how to make such designs and assets.
i think these are also very important
Design is really hard - much harder than code lol
That would be great!
@@frontend-tribe please make video on this topic
@@Okir09 yeah
@@frontend-tribe Nothing is really hard on earth. Great video, even thou I don't have any idea what you doing.
Wow. Any upcoming videos on Vercel v0 and cursor?
Maybe, keep your eyes peeled 😁
can anyone help me to get the video resource bundle, It's not working for me!
sir, what do you using tool for look responsive mobile, tablet, desktop at the same time ?
Check the description 👌
This is a great video tutorial lesson @frontend-tribe - you make it look easy. But I don't have a clue what you are doing. I just started watching this video and am at 25:04. I just recently finished React, SaaS, Bootstrap, jQuery and Redux. As for Next.js, TailwindCSS & Framer Motion, this I think are the ones I'm lost at, I don't know them yet. I'm continuing to watch maybe I'll be unstuck along the way.
One question, is it compulsory to make a web page mobile responsive in this video having all the tools you are using ? Because using Bootstrap will take care of the mobile responsiveness.
Thank you in advance
Yeah, TailwindCSS would certainly be helpful to have some understanding of during this video. Bootstrap could be used as well - there’s lots of ways to develop websites ☺️
Love it!
Hi @frontend tribe.. i used the code in the tutorial to develop my portofolio but for a reason i could not push i to any hosting platform seems the startup file you gave us is complicated
Host on vercel or netlify for free 👍
Unable to download the resources
Awesome tutorial! One qn, what is your IDE theme and the customization?
I use the Cursor IDE 👍. No customizations other than a couple of plugins.
Rally great video. One question, how can I also use that really nice UI to see desktop, mobile and more all in on place?
Link is in the description 😌
Which extension is used for live preview
Browser link in the description 😊
Thanks for making these tutorials. Do you have any recommendations on design tutorials courses to design things like this? I'm a full time dev but would like to learn to design to be able to design interesting designs like this. I've had trouble finding resources to inspire me along the way. Wondering how you go about getting these? :)
Lots of looking at designs around the web 😊
Thank you for this quality content🙂🙂 . I would like to ask you a question about your browser. I would like to know how you managed to pin when in portrait, tablet, desktop mode when inspecting the page
Yup, check the link in the description 😊
Hey! Do you make those graphics yourself? Those are some really good designs. Do you mind sharing your resource? or what do you use to design them?
I’m inspired by other designs. Just find a design I like and then code it up :)
@@frontend-tribe where do you find these graphics from? Do you mind telling a few sources?
nice theme and fonts . which are they
Hi there.. I have a question at 1:58:50 - are you using Next.js or TypeScript because I heard you talking about TypeScript
Using both 😊
I'm not getting the assests even after trying to enter two different emails
What browser are you using that is giving these different screen size views?
Check the link in the description 👍
Please forgive the annoyance.. at 2:17:18 - what are you using there to copy and paste multiple lines
It’s an IDE shortcut. Ctrl | Cmd + D
Thank you for the tutorial - it is very helpful. Could you perhaps please advise as the Testimonials section are working fine locally, but are receiving the error below when trying to deploy to Vercel:
"./src/sections/Testimonials.tsx
79:9 Error: Missing "key" prop for element in iterator react/jsx-key"
Probably just forgot the react key. Check out the docs here: react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
@@frontend-tribe thank you!
Amazing video! would you be will to do a tutorial on a responsive dashboard that utilises framer motion somehow? and maybe has some cool transitions between pages?
There’s more in store! Stay tuned!
@@frontend-tribe super excited!
where i find this imgs with 3D desgn for me???
Hey can you please do some tutorial on only framer-motion ?
That’s a good idea.
@@frontend-tribe yes , please consider making a complete tutorial on framer motion , it will be awesome
Hi, I have a problem with desktop large screen. In hero section image is not inside the container. half image is below the container. Kindly help me.
Probably just not flexed left to right? Or maybe some top margin? Hard to say…
I gave already two emails to get the starting code but nothing happened? Didn't get any message but a thanks for submitting the form?
Sometimes email can be flaky 🤷♂️. Send a message to support@frontendtribe.com and we can help you get it sorted 😊