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
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.
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! 🥳
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.
I finally finished this project and I must say this was sooooo easy to follow even though I've never really learned react before. I learnt so much about react and tailwind css and I'm sooo excited to actually dive into the fundamentals because this video was so graspable
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.
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?
@@frontend-tribe Personally I prefer going through video and then messing with the completed code adding stuff to it, because watching the video and doing the exact same thing isn't that useful.
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 ☺️
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 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
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 ;)
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
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?
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
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 ?
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"
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
thank you was usefull
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
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.
completed it, loved it, learned it and gonna practice the heck out of it.....Thank u so-so much. Your explanation is kind of beauty.
So happy you liked it! 👏
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! 🥳
Thanks for the kind words 😌
I agree, his voice is very nice and suitable for explaining.
Just want to say thankyou so much, this turned out to be BEAUTIFUL! I really hope you get all the success on your channel! Love from Pakistan
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.
Thanks, I appreciate it!
I finally finished this project and I must say this was sooooo easy to follow even though I've never really learned react before. I learnt so much about react and tailwind css and I'm sooo excited to actually dive into the fundamentals because this video was so graspable
I know right, kuhle ukubona umuntu wakithi ngapha, keep on building.
@trell535 ngifisa kube kunabantu abafani nathi abayenza amavideo aso. Nawe kumnandi ukukbona
@lebogangsekwati1331 A lot would benefit from an SA creator doing these, but the challenge is on us to do so.
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! 🙌
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!
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?
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?
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?
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! 😊
Amazing Video! Tip: If you are having trouble with the gradient put _ before every custom color or do not give any space
Good catch! 👍
the no give space at all did it for me: bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#183EC2,#EAEEFE_66%)]
I'm obsessed with functionality and design ❤
Same here. It should be as beautiful as it is functional. That's my philosophy.
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
damn this tutorial is awesome! the tracking-tight is awesome, also that image mask.. i didnt know that before. thank you very much
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 mate. I hardly ever comment but this video was really high quality.
Thank you! Glad you enjoyed it 😌
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 🤷♂️
I'd wish my feed is filled of content like this!!
This is insane dude! Great work and tutorial. you got a fan for a lifetime!
Thank you very much!
Thank yo buddy
looking forward to more challenging frontend projects
Not sure if you covered this but making the toggle menu functional would be a great addition!
What is the extension you are using to view desktop/tab/mobile view in the browser?
Awesome tutorial!! We appreciate you for making this bro. Learn A LOT!
Appreciate the kind words, glad you liked it 💪
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?
Impressive delivery and teaching style..................have learned lot of things............thanks lot
Thanks for the kind words ☺️
finally completed this one today!!!!
Awesome to hear 💪💪
I am eagerly waiting for your next project....
finished it, loved it, lived it.
😆 💪💪
Great video I made the project for complete greetings here from BRAZIL
much appriciated your efforts. Kindle make more projects. Full stack MERN project
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!
Thanks, this tutorial is very helpful for me to learn Next.js❤
Glad to hear that!
Amazing work, keep it up!
Thanks! 😊
This is very beautiful, I'm amazed to see it nice job 🔥🔥🔥
Thank you very much!
Amazing i will be following when i finished my portfolio
Please, continue making more :)
Thanks for the great video ! do you mind sharing the hamburger menu (mobile version) to be clickable & show up the menu ? thanks
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
thanks man this tutorial was amazing
Glad you liked it! 🙂
Buddy in the pricing part you missed the white background :)
no problem, we got you.
Hey where can I download illustrations like this?
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?
Polypane 🙂
Thank you sm for this amaizing content, please keep sharing🙏
Thank you, I will
Can we get the completed code? In the link it says starter code
That’s what the video is for 😊
@@frontend-tribe Personally I prefer going through video and then messing with the completed code adding stuff to it, because watching the video and doing the exact same thing isn't that useful.
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 😊
Amazing!!
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 😊
Can you tell me what kind of theme you are using for vs code?
I like how you explaining, keep it up 👏
Glad you liked it!
I finished all project but gradient property not worked in tailwind css !
Name of the extension you are using for viewing the options like mobile, tablet and desktop
Polypane 👍
Just started the project and its a really nice one please how do you view all of the screen sizes at once?
polypane browser
done , i use react but , learn so much things thank you so much
Awesome 😎
Great video, Thank you❤
really high quantity content that make me to subscribe your channel Appreciated Thank you !🤗
Awesome, thank you! 🙏
very nice video i get to polish my concepts of gradient colors ,masking , framer motion, scroll progress in framer and positions in CSS🗿🗿🗿🗿🗿🗿🫡🫡🫡
Yo!!! what is the browser extension to have multiple tabs with different viewports?? thanks in advance
Polypane 👍👍
Great video, keep it up.
Thanks, will do!
Guys how did you manage to get the resources ? or where did you get those resources especially the assets?
i literally love you
This tutorial was sick. I'm surprised you don't use Cursor IDE though
Please, enlight me, guys, how to install the starter project to creat the landing page? And where all the beautiful UI imags come from?
This explaination is amazing thanks
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 ☺️
Damn amazing tuto😍😍
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!
Great project
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 ☺️
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
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 👍
Great content ❤
Thank you! 😄
Is it a browser or extension that you use to display these panels? “mobile” “desktop'” etc.
Polypane 👍
Just completed it thank you
That’s awesome! Anything you’d like to see different in the next one?
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 😊
Dude I am not getting any Email to get the assets
Probably just hit your spam folder, but if you continue to have trouble just send an email to support@frontendtribe.com and someone can help you out 👍
@@frontend-tribe got it mate thanks
Also i built completely watchinh yours with advanced customisation
Now working on backend
That’s awesome - ping the link here when you get it hosted 😊
@@frontend-tribe sure
@@frontend-tribe actual I’m done it yt doesn’t allow to add links in comments
More videos like this!!
finally completed this project
Awesome! Glad to hear it! 💪
@@frontend-tribe thanks ☺️☺️☺️
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!
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 😊
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 haven’t seen that error, sorry
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
That’s polypane for this one 😊
Amazing video 👌👌🤩I like it
Thanks 😊
But I can't download the ressources🥲🥲
@@strong-ari this is the link for downloading the resources directly
@@Korabii thanks
@@strong-ari np
Try to add nice looking mobile navigation menu with framer animations in future videos.
Good thought, thanks 😊
God bless you brother
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.
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 😆
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
sir, what do you using tool for look responsive mobile, tablet, desktop at the same time ?
Check the description 👌
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 ?
Yeah, that’s an optimization. I do it the other way for simplicity when teaching 🙂
godd damm this man cooks again!
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!
what extension are you using to se your site across multiple devices
polypane browser
can anyone help me to get the video resource bundle, It's not working for me!
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 😌
Thanks! ♥ 💯
You’re welcome 😊