I finally finished the project in five working days. I learned a lot about Tailwind from this, and I also explored animation ideas using Framer Motion. Thanks!
We need more projects like this, also we need a project where tailwind config file setting and best practices are covered. Furthermore, how to plan a project where you need to convert figma to pixel perfect code
Man , so far this is the best beginner friendly tutorial on youtube. Who are all knows basic knowledge of react, typescript and tailwind css it'll be really helpful. Very organised and well code structure, production grade stuff❤ In future add Dashboard ui tutorial in your bucket list 🎉 Love from India 🙏❤
I'm not going for webdev but I have a great interest in making things feel and be my own so I've been wanting to make a portfolio website for some time now (really liked Vue and Nuxt so far!). The quality in this tutorial is INSANE, I legit thought you had over 10k subs. Best of luck with every project one, really looking forward for more content!
1:10:58 In case anyone is getting error while reloading the page , paste 'use client' at the top of the page. It will be fixed. (it happens until you give the width & height to image element)
1.30 AM night time here in india , finished entire video. Learnt a lot from this video & really appreciate the detailed explanations throughout. Please keep integrating framer-motion techniques for future builds. It really make the components come to life. 😄👌
Also , in last section , getting a console warning for some reason(Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly). Fix : in global.css , add html{position:relative}
@@shubham___gupta hey shubham , im a noob in web dev try hard to fix an error in this project but failed can you please give me your whatsapp number for consulting? if you dont mind ...
For anyone who was not able see the gradient color background at 14:56, add a custom template to tailwind config module.exports = { theme: { extend: { backgroundImage: { 'custom-gradient': 'linear-gradient(to right, #FCD6FF, #29D8FF, #3FFFD8, #3F89AB, #FCD6FF)', }, }, }, plugins: [], }; And then use it like this export const Banner = () => { return (
Subscribed and getting all notes when you upload new videos, amazing content creator thank you! What kind of browser do you use? Really cool to just put it to the right and can change easy from mobile to tablet and desktop? 😄
Hi! your tutorial has been extremly useful and helpful so thanks alot for that! i have a question though, what is the name of the extension to show you the responsive layout (that phone tablet pc thing) i definetly will need it, thanks!!
Thanks for this amazing tutorial, but when I tried to start to work with it, I figure out that the resources are missing (even I filled my name/email in your landing page)... Help?
Trying to fix the logoTicker animation, looks good on mopbile and tablet, but when i go to desktop it doesnt seems to work correctly, like before you added one more map for images. How can I fix that?
@@frontend-tribe Haha yeah i get it sorry mate. Would you like to build a cool ladning page for a football team? (soccer) whould be really cool to see, I'm am a passionate fan of football thats why I ask :D
@@frontend-tribe hello I tried to submit many times and could not receive any email from yours. Could you please check it , thanks a lot for your time and tutorials
Guys does any of you get the resources/started project after providing your email? Because I didn't and I tried with three different emails... Does anyone have it?
![[#2024MAMA] ROSÉ (로제), Bruno Mars - APT. | Mnet 241122 방송](http://i.ytimg.com/vi/dgGqD28J6aQ/mqdefault.jpg)
![[LIVE] : ONE ลุมพินี 88 | คู่เอก "ป้อมเพชร vs อัสลามจอน"](http://i.ytimg.com/vi/1ZqTVVbMgbo/mqdefault.jpg)
It's almost illegal to watch such an outstanding tutorial for free! Absolutely mind-blowing work
I finally finished the project in five working days. I learned a lot about Tailwind from this, and I also explored animation ideas using Framer Motion. Thanks!
Rare to see someone manually making FAQS instead of using a pre-build components 🐐
We need more projects like this, also we need a project where tailwind config file setting and best practices are covered. Furthermore, how to plan a project where you need to convert figma to pixel perfect code
Appreciate the feedback. I’ll have to cover those in future videos 👍
Learned so much from this tutorial. Took me 3 days. I took notes as well.
Man , so far this is the best beginner friendly tutorial on youtube.
Who are all knows basic knowledge of react, typescript and tailwind css it'll be really helpful.
Very organised and well code structure, production grade stuff❤
In future add Dashboard ui tutorial in your bucket list 🎉
Love from India 🙏❤
Thanks for the detailed comment - glad you’re enjoying the videos 😊
Your voice has relax sensation dude.❤
I'm not going for webdev but I have a great interest in making things feel and be my own so I've been wanting to make a portfolio website for some time now (really liked Vue and Nuxt so far!). The quality in this tutorial is INSANE, I legit thought you had over 10k subs. Best of luck with every project one, really looking forward for more content!
Amazing feedback, thanks! Working on the 10k subs 😂
1:10:58 In case anyone is getting error while reloading the page , paste 'use client' at the top of the page. It will be fixed. (it happens until you give the width & height to image element)
1.30 AM night time here in india , finished entire video. Learnt a lot from this video & really appreciate the detailed explanations throughout. Please keep integrating framer-motion techniques for future builds. It really make the components come to life. 😄👌
Also , in last section , getting a console warning for some reason(Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly). Fix : in global.css , add html{position:relative}
@@shubham___gupta hey shubham , im a noob in web dev try hard to fix an error in this project but failed can you please give me your whatsapp number for consulting? if you dont mind ...
For anyone who was not able see the gradient color background at 14:56, add a custom template to tailwind config
module.exports = {
theme: {
extend: {
backgroundImage: {
'custom-gradient': 'linear-gradient(to right, #FCD6FF, #29D8FF, #3FFFD8, #3F89AB, #FCD6FF)',
},
},
},
plugins: [],
};
And then use it like this
export const Banner = () => {
return (
Explore the demo
);
};
Amazing 👏🏻 🔥 Would also like a portfolio website with sleek animations and transitions like this also the same theme and vibe.
Great work.
Great suggestion! I’ll keep that in mind.
this is amazing ...where have you been guys all thisa time
style looks like JS MASTERY channel, but loved it. cool bro
Best explanation throughout the video. Please we neer more videos like this. ❤
More to come! 😁
Thanks so much, I really appreciate this, now on to the next project.
Glad you enjoyed it 😀
What a nice tutorial and project. Keep up with this amazing work!!
Wow this is an amazing projects, plz make more projects tutorial like this! 🥺
Thank you! Will do!
Hey there 👋🏽
I just started the tutorial but gotta say. This is good content, keep it up!
Love your choice of fonts
You are the fucking shit, I can't thank you enough for this 11/10 tutorial
Really appreciate the kind words. Happy I could help!
Thanks man, this is truly an amazing piece.
Really good videp! Subscribed!
Love your work man🎉❤
Thank you very much 😀
Amazing brother keep going and upload this type of content bring more landing pages like this 🤭🤗 absolutely love the tutorial
Thanks! Will do!
That's very good video as a whole and also as a reference for an individual componenst. Thanks
Glad it was helpful!
damn bro, i didn't finish the whole tutorial but it looks sick to me, keep it up. Btw i've got the same issue with the email
Try again. Should be fixed now 😅
@@frontend-tribe not fixed yet...
Start uploading this kind of content ❤
Thanks bro for this cool project.
now this is insightful 👏
Thanks! ♥
Very cool tutorial
Glad you liked it
Want more videos like this , Got my first client on upwork ...
That’s awesome! 👏 👏
nice nice nice this is actual value
Good Video, I've enjoy all. Would you do a video about good practices about developing frontend with nextjs/React?
That’s a good idea 👍
Start uploading this kind of content please
This is beautiful
thank you for the tutorial!! please also share the git repo so its easier for us to follow
Can you please let me know which browser you are using? I really enjoy your video, you are amazing!
Thanks! Browser is responsively.app ☺️
Subscribed and getting all notes when you upload new videos, amazing content creator thank you!
What kind of browser do you use? Really cool to just put it to the right and can change easy from mobile to tablet and desktop? 😄
Thanks for the kind words! The browser is responsively.app ☺️
The intro is like from JavaScript Mastery
Great Content
Greate video sir
Subbed
Much appreciated!
Hi! your tutorial has been extremly useful and helpful so thanks alot for that!
i have a question though, what is the name of the extension to show you the responsive layout (that phone tablet pc thing) i definetly will need it, thanks!!
Yeah, that’s responsively.app 👍
Great 🔥🔥
Thanks for this amazing tutorial, but when I tried to start to work with it, I figure out that the resources are missing (even I filled my name/email in your landing page)... Help?
Can we have more like this ❤ with optimization explanation please 🥺
What browser do you use to preview the design? looks neat
responsively.app
Hi, I can't download the resources to get started because I haven't received the email. I hope you can help me!
Same here, where are the resources?
the folder is not downloading even after entering multiple emails...can you help me
Need a react project as simple
Amazing work!
PS: Can you please explain how you translate the figma gradients to css? I'm digging into the figma file but I am a bit confused
They’re kind of tough tbh - I look at the colors and estimate the percentages
@@frontend-tribe No worries man. Thanks a ton for these videos - conversion of our products are going to go through the roof 😆
Hello, thanks for these high-quality videos! However, where did you get all these illustrations (for free, if possible)?
Check out the description 👍
Thank you
Hello, great video. Can I ask you please how you did the intro? :) Is it premiere pro? Thanks!
I use Final Cut, but your choice of editing software doesn’t matter all that much. I could have done the same thing with Premiere 😊
Nice proyect, like and sub
Awesome content. Which browser it is ?
Responsively.app
nice your voice
stunning design,Could you please tell me what you are using the browser for, bro?
That’s responsively.app if I understood you correctly 😊
@@frontend-tribe hah You understand me correctly, thank you
Awesome. Please anyone share the final code link.
Awesome project. I tried to get the starter files but I haven't received any mail yet also I checked the spam folder as well but no mail.
Thanks. Usually it’s just because it went to spam…
@@frontend-tribe sorry, but I didn't received the mail in spam also
Please, make more!
Working on the next one 😊
@@frontend-tribe waiting :)
New subscriber here
which font you are using in video?
Could plz tell me how to get figma design for it
Amazing video, but im not able to download assets, i submitted the form and it says form filled but nothing happens after that
Sorry to hear that - shoot a message to support@frontendtribe.com
please dont skip projrct creating part because i dont know how to create a next js project and your resources files are delivered to inbox
Sorry to hear that. Shoot an email to support@frontendtribe.com and we can help you out
Hey bro, can you also share the commands which were used to create initial folder setup.
Just use the 📁 that you can download :)
Please do one on react also
I’ll have to add that to the list ☺️
cool🥶
Sir download the source code not retrieving , Please help
Sorry to hear that. Shoot an email to support@frontendtribe.com and I’ll make sure you get the files 👍
i can't download resources , in the website i fill the user name and email and the success message appear but nothing download for me
Check your email 😊
great tutorial, I'm trying to download the starter files but I'm not getting an email sent to me
Did you check your spam folder?
Trying to fix the logoTicker animation, looks good on mopbile and tablet, but when i go to desktop it doesnt seems to work correctly, like before you added one more map for images. How can I fix that?
Hard to debug over TH-cam comments 😅. Stay tuned for more community features like coding help 👍
@@frontend-tribe Haha yeah i get it sorry mate. Would you like to build a cool ladning page for a football team? (soccer) whould be really cool to see, I'm am a passionate fan of football thats why I ask :D
assets link is not working please help
What is the font you used in the introduction section?
Bricolage Grotesque ☺️
@@frontend-tribe Thanks a lot
why can't we get the end result?
It shows you how to build it 😄
Why can't I get Download your FREE resource bundle through my email?
Good question. Hard to know without knowing your email. Shoot a message to support@frontendtribe.com if you continue having issues 👍
but this project it should be in react not next becuase everthing in client side
Hey friend how to get the starter file? I could not find in your description
Hey @user-je8pc9km9f - it's there now 😅
@@frontend-tribe hello I tried to submit many times and could not receive any email from yours. Could you please check it , thanks a lot for your time and tutorials
where do I find this file that he transferred to vscode at the beginning of the video? what file is this?
It’s part of the resources bundle you can download from the link in the top of the description. Includes the full template, images, everything 😊
I have submitted the resources form multiple times, but I did not receive anything in my mail
Send an email to support@frontendtribe.com - someone can help you out there 😊
Why you didn't make navbar menu toggle in mobile view 😢
Thought I’d leave something for you to do 😉
after submitting email web can't letting me download starter template. can you recheck please?
Shoot a message to support@frontendtribe.com with your details.
how can i get the format of of the browser or whatever u opened at the right side of vs code for seperating the mobile tablet and desktop view?
Just used Responsively.app and set the views to be the same sizes as in the design 😊
what browser are you using?
Responsively.app 👍
would like the link to the figma file itself so I build without watching the video after watchig the video
That’s part of the resource bundle - check the description ☺️
Does anyone know which NextJs version is he using?
Next 14.2.4 👍
Whats the browser that you are using? Is it Polypane?
It’s not - it’s called responsively. Free and open source ☺️ responsively.app
@@frontend-tribe Thanks 😊
i didn't receive the email to retrieve the material
Shoot an email to support@frontendtribe.com and we can help you out
Hello Sir, I am having trouble signing in to your website
Shoot a message to support@frontendtribe.com
I can't download the starter files
Shoot a message to support@frontendtribe.com - I’m sure we can help you out
I am not able to find the assets could anyone tell me where to find one
Assets should be included in the resource bundle 👍
Which web browser you used?
Responsively.app 👍
please give github links too
The download resources is not working
Sorry to hear that. Shoot an email to support@frontendtribe.com if you can’t find it in spam
Is that an extension for mobille tablet and desktop
It’s responsively.app 👍
Guys does any of you get the resources/started project after providing your email? Because I didn't and I tried with three different emails... Does anyone have it?
Shoot an email to support@frontendtribe.com - we can help you get it figured out
Ask your thumbnail font family please 🙏
thx bro
You’re welcome
Is it possible to implement this in vanilla html css
Absolutely. Just did it in Next.js and React to help teach those technologies too