For anyone facing the issue with CSS not showing the same as it is in the video I think we all followed what was mentioned in the latest docs of tailwind website To be able to get things work the same way as in this video, please do this: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p npm i and then finally npm run dev
Thank you so much jsmastery,I am just 17 yrs and you have made me one the youngest and incredible developers in my state. With a lot of people asking me how I learn so fast
Bro I wanna ask an question : can I build this modern website in wordpress with kindly the same design/looks and function of this modern website? I'm still new so I don't really understand the concept bro.
@@yokoso2386 Yes, but u need to know php cuz wordpress built on top of that and then learn how to develop wordpress themes, please note that php and wordpress will be ur backend and this video is just frontend so with decent amount of knowladge u can implement that
@@zendark8651 so for the front end side I need : html css javascript, react js three js, next js etc But from back end side = need php, and wordpress to build and launch my own website right bro? Can I use wordpress for back end while I am using html css js react js?
@@yokoso2386 Yes, you can u can make your own theme in html css js or react and use it inside wordpress wordpress will act as your backend or you can build your very own backend like wordpress
I've been following you since your node js how to create pdf video, and since then I've learned a lot from you. You're the reason I've come into the field of freelancing, and let me tell you, the things I've learned from you helped me a lot in my career. You are really an inspiration to me because you are the only person that helps me a lot in my career, and I still wait for you to upload because there are many things to learn from you. Lastly, thank you so much for providing such high-quality content!
Man. I did all your React projects and have learnt SO DAMN MUCH!! Some courses taught concepts, but yours really helped me to put these concept into use. Thank you so much!! Really appreciate that you made all these content free. It has been a big help in my career! Thank you!
Yes! I am not sure why the other person said no. I had minimal knowledge on JS less than 2 months ago, I have been going at it 30-40 hr a week for the last 1.5 months and I could easily follow along and understand the concepts. BUT there are many issues with getting this project to work correctly. This video should have a follow up video with the corrections.@@mostafizurrahman2694
For the task at 1:54:54, you can make the images pop on hover by playing with the opacity. Here are the classes I added to the tag opacity-50 hover:opacity-100 Many thanks for this tutorial, Sir
As a new comer of tech who is trying hard to build my own portfolio, this is the first web development video that I followed all the way through. Your tutorial is super organized and easy to comprehend from scratch. I even felt this 2-hr video is not long enough lol. Can't wait to watch other videos of yours. Thank you Thank you!
When I say no one does it better than you, I mean every single word of it. You are the best, I recently started learning web development, but I can tell you that I've never seen a page that takes it time to educate people like yours, all your projects are amazing, how do one even thank you? I sincerely want to use this medium to say a big thanks for all you do, I know its time consuming but you still take it upon yourself to dedicate these times to teach and educate us, God bless and enrich you wherever you are. Thank you so so much, the best channel so far.
Awesome video :-) A small correction; On minute 131:00, you've forgot to include the actual link. of each social network. What I would suggest is to wrap the img component with an , add the link to it using href={social.link}, move the class name and the key to it as well, and inside just include the icon of the social network 🙂 Other than that, I learned SO MUCH! Thank you!
Just yesterday I was looking for tailwind tutorials but I couldn't find any latest videos and today I got a discord notification about your video and I'm super excited to follow along! Thanks
Bro you are really good at teaching us how to build a project from scratch, as a beginner, i love the way you already declare all the tailwind styles and make it to look so easy to use, this video is gold if you're browsing for some mind refreshing with react + tailwind and responsive design, 100/10 bud, thanks again
Just a day ago I was browsing entire TH-cam for at least one good video to learn tailwind. Tada 🎉 now you upload this amazing course 🤩 you can't even imagine how excited I'm rn!! Thank you so muchhh
Great video! Learned a lot from it. Something that might help some people is that instead of doing a margin right and margin bottom with the flexed items, you could just use the gaps utility class instead to save you typing a lot. For example 'flex gap-6' will flex the items and then give you a gap of 1.5rem or 24px between the flexed items, and you can use gap-x-6 for example, if you only want the gaps to affect horizontally flexed items and gap-y-6 to target the gaps on the y-axis (vertical gaps). However, gap-6 is great if you want the gap irrespective of the orientation of the flexed items.
Instead of using index to figure out which item is the last and conditionally apply margin you may use tailwind's 'space-between' utilities. If you will apply 'space-x-4' on parent div then all children except first will have css value 'ml-4' (prefer margin-left over margin-right and margin-top over margin-bottom, because it's easy to override them)
You can simply use the gap property if you are using flex or grid to give space between items. Don't need to check whether the item is last or not with conditional. Another thing I want to add here, use semantic tags whenever possible.
Bro I wanna ask an question : can I build this modern website in wordpress with kindly the same structure, design/looks and function of this modern website? I'm still new so I don't really understand the concept bro.
@@yokoso2386 yeah of course....but you won't be getting the single page application functionalities as we see in ReactJs... although the design and structure will be same
I don't usually comment on videos, but I got say thank you for this. Just finished this project and added it to my portfolio. A lot of knowledge acquired
if I wanna highlight one thing from your every project video. it's Your file & folder structure are really unique which I have seen ever also learn much think and I'm trying to apply them to my everyday project. take love and respect :)
I don't want to generalize, but this is one of the best channels out there. I just watched 2 videos and had to subscribe. Thank you. PS: I'm curious about something: how much does it cost a website like this one? I'm in college and I don't know exactly how to set prices.
I learnt a lot from this video. Some of the tricks like making the get started button with two divs with padding and adding the linear gradient :) But, like any other video, I would like to see the process of your development. Not type the long list of classes for the divs without knowing why they are typed. There are certain principles that tailwind is built on. For example, mobile is the default design that tailwind is for and then you can expand to bigger screens. The sm: or md: modifiers say "from medium screens apply this class" or "from small screen onwards apply these classes". They do not say "Apply this class for small screen or apply this class for the medium screen". This was a bit confusing in the video. Anyways :) Wonderful job in developing the website, organising it, sharing the design so it became easy for us to follow :)
One more thing tailwind has feature called @apply it adds up multiple tailwind classes in one class so you didn't need to add a javascript file to add object keys for those tailwind classes, simple could have added in css file using apply , Your course was good but still searching for best folder structure and approach for reactjs/nextjs to make design from figma , landing pages, then their dashboards how security will work, how state management will work, how perfectly theme design can be confugred in tailwind, and only person i know can make this beatiful beast project is you, cuz you lot better than most of youtube content, you talk to the point and give practical and professional things om platter
man I just started learning to code because I want to develop on the web and the truth is that your video has motivated even more to go after my dreams. I have no idea about half of the things you do in this video haha but I have many ideas that I want to execute and what you teach in your videos man is simply gold! Thank you with all my heart for sharing your knowledge to the world.
Love this. 👏😃🔥This will sound weird because I’ve seen and followed along with your project videos and they are much ambitious in scale, but this is becoming my favorite because it’s allowing me to see how you are coding the design from figma which makes me see how something like a graphic or ux design is coded. It’d be great to be see more tailwind or design centric sites. Not many do this and I can see how the site comes to life. You are amazing. Please make this site evolve with e-commerce or do something similar with e-commerce. So far my favorite are your tiktik and portfolio videos.
Covered almost 1hr of the video. And I must say, this is one of the best projects/tutorials I have done on React. His style makes me want to learn more. Thanks a lot man!
Big thanks, Brother Adrian. The voice is very clear, its very helped me because my English is not good enough. Then, I see very detailed explanation. As a beginner, I think step by step of this tutorial makes it easier for me to understand. Once again, thank You 🙏🙏🙏
Thank you for sharing such a wonderful tutorial using React JS and Tailwind CSS and I really like how you manage your file and folder structure, I found this unique and really love how you structure them and thanks once again and hope more will come ! :)
Bro I wanna ask an question : can I build this modern website in wordpress with kindly the same structure, design/looks and function of this modern website? I'm still new so I don't really understand the concept bro.
I was looking for something else on TH-cam. Then I came upon this video........... Guess what? Whatever I was looking for has been postponed until further noticed. That's how great Adrian's content is............ Cheers
This is Awesome, 💯💯, I have been following you a while, But In this Project I just Fully noticed that how your Explanation of a latest tech-stack and provided Resources can make a 4-year kid to a Fully-grown dev, I highly Appreciate Your Work, For You i could easily Understand such Complex Activity, Love and Respect From India 😇😇
Great tutorial, explaining how to build an amazing looking page! Small feedback: It would be nice if you also explain a little more of "why" you are using those CSS classes. I know the focus of this tutorial is on React but since we are also trying to understand Tailwind, it would be even better to understand the reasoning behind the CSS.
My passion was graphic design and I have taken up Computer Technology in college coz of scholarship. I learn web development, but after I graduate I become a Graphic Designer. It's been 5 months now that I have abandoned web development. But Hey! I am here right now watching again with your tutorial. I really love your tutorial, you are the channel I love the most and I have pinned for my college years. Thank you and I am back again🎉❤️❤️❤️❤️ Either way I am a Graphic Designer or Web Developer 🙃
Your are always fully loaded with content that is always so rich yet you do not charge even a penny!!! You are just awesome!! Your channel is like a university for us developers to learn the skills that help us to grow in our careers phenomenally. Thank you for all your glorious efforts. P.S. Please try and add GSAP animtions in your websites and teach us that too.
i have been following all this tutorial for a while and i must thank you for that. it really helps my practice. i would very much like to see tutorials on other than just reactJS . Next js would be fun. some backend technology tutorials would be great... 🤗
I learned react for the first time in your mini filmpair tutorial and now this amazing project thank you very much i have learned a lot from this project and i am about to start another project right away again thank you very much for the amazing tutorials you are providing us.
Thanks again for your dedicated time to make such a great tutorial like this. I replicated the project but, instead of using javascript, i took the road on typescript and the things just worked fine so far. Oh, and i already deployed on Vercel! So, thanks again for help us all achieve success in programming. Big hug my friend!!
I didn't understand what you meant by your post as Webflow still requires a different skill set. I do both Webflow and code and they're still different.
@@denniszenanywhere Oh I am just saying it looks like one of those sites that would have the tag "Made with Webflow" as a premium site and because not all those who codes gets to code such complicated layout. Designs like this are so common in webflow
@@waifufx The reason you see many of this in Webflow is because you can focus on the design in Webflow as it has already done most of the coded things in there. Even when I do Webflow, I get to design better than when I code from scratch. But that's the amateur coder in me. But here's what I like about Javascript Mastery. He has both the coding and design chops and that's rare even among web developers. Usually, you're just one or the other because it's just a lot of work to do both. Doable but lots of work.
@@denniszenanywhere NO OFFENSE I did not mean to offend you or anyone, Yeah you are right, and also the man has a lot of design sense with code very inspiring to me
My personal fav is portfolio video because it's just stunning...and next the main project which landed me onto intern is the website of Ethereum trasfer
@@javascriptmastery Mhm, you should've done more detailed intro on the files you wanted people to include externally, like have us do a little part of em on ourselves so we can learn too on how to make those files. But still overall great video, watching it rn
Thank you for such great content👍. I appreciate all your work btw but I just want to tell that do increase the content in which a full project is made.
was waiiting soo much for any content from you... i am in love with your methodolody and have aligned my learning only with your videos... i pray as a youtuber you get the ideas and resources for endless content and u keep growing.... much love from pakistan.
you are not teaching lot of things by giving the setup files. all the basic things like how to set up theme, font, basic startup CSS all is given. How would we learn this basic things if its just provided?
ok you will need to go to the tailwind installation page and follow extra steps that are not covered in this video. There is a part 4 onwards in the docs that requires you to run the CLI and build your CSS...... something like this > npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Thank you so much. I have been looking for this video I made UI on figma but I don't know how to change to website. Now I can learn from you 😉. Again Tnxs
Sir can you make a tutorial for a PERSONAL PORTFOLIO/ PERSONAL WEBSITE that we can add to our resumes. AMAAZING video as always. lots of love and thank you once so much!
This is not a good tutorial, here it says that its even for beginners and thats a fake, firstoff u need to learn tailwinds otherwise ull never be able to do your own design or manipulate the tailwinds tags. Ive been seen several videos and this channel is not able to help to any beginner
This is absolutely not a good way to teaching . You said you are making things from scratch, this is a lie. You provide a lot of CSS files and those files are complicated to understand. I don't see anyone who use .js files for only write CSS . No one is hurry to catch the plane. People have enough time to learn new things . This is not a beginner level tutorial.
The thing is.. since modern JS, you can do one thing 100 ways (find the one that suits you) so please keep an open mind and don't be a broke hater, nobody likes that
so theres a lot of comments here saying that it's not pulling up the hello world, well my solution was to add a couple of the tailwind extensions in vs code and then someone had mentioned you have to save the files which i saved each and every one seperately, then saved the folder as well. i then ran npm run dev and wallah. One day gone to that bug. oh well either way i appreciated the experience. Good Luck, and happy coding.
to be hones the video is focusing more in tailwind than is for react js . however, your videos are awsome and you made the complex easy to understand and pick up. thanks and keep it up
For anyone facing the issue with CSS not showing the same as it is in the video
I think we all followed what was mentioned in the latest docs of tailwind website
To be able to get things work the same way as in this video, please do this:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
npm i
and then finally
npm run dev
bro, thank you so much! this was actually the ONLY thing that worked for me.
Thank you so much!!!
Thank you! :)
Thank you so much 👀
Thanks bro, this was very helpful.
Thank you so much jsmastery,I am just 17 yrs and you have made me one the youngest and incredible developers in my state. With a lot of people asking me how I learn so fast
Wow, thank you!
Bro I wanna ask an question : can I build this modern website in wordpress with kindly the same design/looks and function of this modern website? I'm still new so I don't really understand the concept bro.
@@yokoso2386 Yes, but u need to know php cuz wordpress built on top of that and then learn how to develop wordpress themes, please note that php and wordpress will be ur backend and this video is just frontend so with decent amount of knowladge u can implement that
@@zendark8651 so for the front end side I need : html css javascript, react js three js, next js etc
But from back end side = need php, and wordpress to build and launch my own website right bro?
Can I use wordpress for back end while I am using html css js react js?
@@yokoso2386 Yes, you can u can make your own theme in html css js or react and use it inside wordpress wordpress will act as your backend or you can build your very own backend like wordpress
I've been following you since your node js how to create pdf video, and since then I've learned a lot from you. You're the reason I've come into the field of freelancing, and let me tell you, the things I've learned from you helped me a lot in my career. You are really an inspiration to me because you are the only person that helps me a lot in my career, and I still wait for you to upload because there are many things to learn from you.
Lastly, thank you so much for providing such high-quality content!
Thank you so much! I wish you all the best!
Man. I did all your React projects and have learnt SO DAMN MUCH!! Some courses taught concepts, but yours really helped me to put these concept into use. Thank you so much!! Really appreciate that you made all these content free. It has been a big help in my career! Thank you!
congrats on your milestone.. Can a person follow his react videos and learn javascript along with it.. haivng some basic knowledge of js
@@ImranKhan-ft7ns No. You need to know JavaScript well beforehand to follow through his tutorials.
did you build that one Premium Landing | Business | or Portfolio website that used that Startup Landing starter code by chance?
Yes! I am not sure why the other person said no. I had minimal knowledge on JS less than 2 months ago, I have been going at it 30-40 hr a week for the last 1.5 months and I could easily follow along and understand the concepts. BUT there are many issues with getting this project to work correctly. This video should have a follow up video with the corrections.@@mostafizurrahman2694
Here comes my favourite line "Welcome to a project video" 🤩❤
You got it!
@@javascriptmastery @adrian you are the boss mahn! Much love from Cape Town, South Africa! to you mahn!
Yeah mine too !
I swear along with "HI THERE"
Much love from Nigeria
For the task at 1:54:54, you can make the images pop on hover by playing with the opacity.
Here are the classes I added to the tag
opacity-50 hover:opacity-100
Many thanks for this tutorial, Sir
As a new comer of tech who is trying hard to build my own portfolio, this is the first web development video that I followed all the way through. Your tutorial is super organized and easy to comprehend from scratch. I even felt this 2-hr video is not long enough lol. Can't wait to watch other videos of yours. Thank you Thank you!
When I say no one does it better than you, I mean every single word of it. You are the best, I recently started learning web development, but I can tell you that I've never seen a page that takes it time to educate people like yours, all your projects are amazing, how do one even thank you? I sincerely want to use this medium to say a big thanks for all you do, I know its time consuming but you still take it upon yourself to dedicate these times to teach and educate us, God bless and enrich you wherever you are. Thank you so so much, the best channel so far.
Awesome video :-) A small correction; On minute 131:00, you've forgot to include the actual link. of each social network. What I would suggest is to wrap the img component with an , add the link to it using href={social.link}, move the class name and the key to it as well, and inside just include the icon of the social network 🙂 Other than that, I learned SO MUCH! Thank you!
This looks beautiful, props to the designer. I'm inspired. I always wanted to use tailwind, great weekend project
Thank you! Cheers!
I too will give it a go this weekend... Gratitudes JSM
A WEEKEND PROJECT?! For me it will take a month 😅
@@KeskilChnProgram Naah, if i can do it, you can do it! go for it!
@@alfabettabe you finished it in one weekend ?
“Thank you” would be an understatement of the year
No, no. Thank you!
Just yesterday I was looking for tailwind tutorials but I couldn't find any latest videos and today I got a discord notification about your video and I'm super excited to follow along! Thanks
Enjoy! 😊
Bro you are really good at teaching us how to build a project from scratch, as a beginner, i love the way you already declare all the tailwind styles and make it to look so easy to use, this video is gold if you're browsing for some mind refreshing with react + tailwind and responsive design, 100/10 bud, thanks again
Just a day ago I was browsing entire TH-cam for at least one good video to learn tailwind. Tada 🎉 now you upload this amazing course 🤩
you can't even imagine how excited I'm rn!! Thank you so muchhh
Awesomee, enjoy! 😊
Great video! Learned a lot from it. Something that might help some people is that instead of doing a margin right and margin bottom with the flexed items, you could just use the gaps utility class instead to save you typing a lot. For example 'flex gap-6' will flex the items and then give you a gap of 1.5rem or 24px between the flexed items, and you can use gap-x-6 for example, if you only want the gaps to affect horizontally flexed items and gap-y-6 to target the gaps on the y-axis (vertical gaps).
However, gap-6 is great if you want the gap irrespective of the orientation of the flexed items.
I never knew this before. Such a wonderful new way to create website with React. Amazing!
Thank you, enjoy!
Instead of using index to figure out which item is the last and conditionally apply margin you may use tailwind's 'space-between' utilities.
If you will apply 'space-x-4' on parent div then all children except first will have css value 'ml-4' (prefer margin-left over margin-right and margin-top over margin-bottom, because it's easy to override them)
or just use gap on the flex container
My whole portfolio and GitHub are full of your projects 🥺🥺❤️❤️ you are literally god who made to start my career at this age ❤️
Thank you so much! :)
You can simply use the gap property if you are using flex or grid to give space between items. Don't need to check whether the item is last or not with conditional.
Another thing I want to add here, use semantic tags whenever possible.
we are not using grid or flex here
Bro I wanna ask an question : can I build this modern website in wordpress with kindly the same structure, design/looks and function of this modern website? I'm still new so I don't really understand the concept bro.
@@yokoso2386 yeah of course....but you won't be getting the single page application functionalities as we see in ReactJs... although the design and structure will be same
I don't usually comment on videos, but I got say thank you for this. Just finished this project and added it to my portfolio. A lot of knowledge acquired
if I wanna highlight one thing from your every project video. it's Your file & folder structure are really unique which I have seen ever also learn much think and I'm trying to apply them to my everyday project. take love and respect :)
Thanks a lot 😊
I don't want to generalize, but this is one of the best channels out there. I just watched 2 videos and had to subscribe. Thank you.
PS: I'm curious about something: how much does it cost a website like this one? I'm in college and I don't know exactly how to set prices.
I learnt a lot from this video. Some of the tricks like making the get started button with two divs with padding and adding the linear gradient :) But, like any other video, I would like to see the process of your development. Not type the long list of classes for the divs without knowing why they are typed. There are certain principles that tailwind is built on. For example, mobile is the default design that tailwind is for and then you can expand to bigger screens. The sm: or md: modifiers say "from medium screens apply this class" or "from small screen onwards apply these classes". They do not say "Apply this class for small screen or apply this class for the medium screen". This was a bit confusing in the video. Anyways :) Wonderful job in developing the website, organising it, sharing the design so it became easy for us to follow :)
That was confusing why sm:hidden is the mobile view, thanks for clarify!
This guy has a way of coming up with tutorials I need when I need em
I literally just started using tailwind with react
Perfect! :)
I am thrilled when i see your new post notification on my screen. This project is amazing thank you for sharing these free
Glad you like it! 😊
One more thing tailwind has feature called @apply it adds up multiple tailwind classes in one class so you didn't need to add a javascript file to add object keys for those tailwind classes, simple could have added in css file using apply ,
Your course was good but still searching for best folder structure and approach for reactjs/nextjs to make design from figma , landing pages, then their dashboards how security will work, how state management will work, how perfectly theme design can be confugred in tailwind, and only person i know can make this beatiful beast project is you, cuz you lot better than most of youtube content, you talk to the point and give practical and professional things om platter
man I just started learning to code because I want to develop on the web and the truth is that your video has motivated even more to go after my dreams. I have no idea about half of the things you do in this video haha but I have many ideas that I want to execute and what you teach in your videos man is simply gold! Thank you with all my heart for sharing your knowledge to the world.
Perfect! This is the kinda thing I've been waiting for. Thanks JSM et al.
Glad you like it!
Love this. 👏😃🔥This will sound weird because I’ve seen and followed along with your project videos and they are much ambitious in scale, but this is becoming my favorite because it’s allowing me to see how you are coding the design from figma which makes me see how something like a graphic or ux design is coded. It’d be great to be see more tailwind or design centric sites. Not many do this and I can see how the site comes to life. You are amazing. Please make this site evolve with e-commerce or do something similar with e-commerce. So far my favorite are your tiktik and portfolio videos.
Thank you so much!!
Covered almost 1hr of the video. And I must say, this is one of the best projects/tutorials I have done on React. His style makes me want to learn more. Thanks a lot man!
How did you get it to npm run dev? I'm on Mac OS and get an error every time. followed the video step by step up to that point and now I'm stuck.
Teach us your thought process of how you first design the website and then how you approach each and every part so that we will get that skill as well
Great suggestion!
Big thanks, Brother Adrian. The voice is very clear, its very helped me because my English is not good enough. Then, I see very detailed explanation. As a beginner, I think step by step of this tutorial makes it easier for me to understand. Once again, thank You 🙏🙏🙏
Thank you for sharing such a wonderful tutorial using React JS and Tailwind CSS and I really like how you manage your file and folder structure, I found this unique and really love how you structure them and thanks once again and hope more will come ! :)
You're very welcome!
Bro I wanna ask an question : can I build this modern website in wordpress with kindly the same structure, design/looks and function of this modern website? I'm still new so I don't really understand the concept bro.
Thanks Adrian. You're my goto React Js guide as long as you provide the free course lol
You have 383K subs in just 81 videos,Do you know why?? Cause all you provide is quality , you are godsend for the developers.
Thank you so much! ❤️
I was looking for something else on TH-cam. Then I came upon this video........... Guess what? Whatever I was looking for has been postponed until further noticed. That's how great Adrian's content is............ Cheers
Thank you, enjoy!!! :)
I love how you made styling more fun by making it dynamic! Please do more projects just like this with react and tailwind!
very helpfull with this tutor for making my first proto when i've learned about html, css and a bit of js.
guys,This guy diserves a appreciation 👏👏👏
Thanks! :)
This is Awesome, 💯💯, I have been following you a while, But In this Project I just Fully noticed that how your Explanation of a latest tech-stack and provided Resources can make a 4-year kid to a Fully-grown dev, I highly Appreciate Your Work, For You i could easily Understand such Complex Activity, Love and Respect From India 😇😇
Thank you so much! Greetings to India! :)
More around MERN please Master! ( Also Material UI ) And big thanks for all that you bring us ❤️
36:36, instead of checking last element with index, you can use tailwind pseudo-class 'last'
Example: 'mr-10 last:mr-0'
Great tutorial, explaining how to build an amazing looking page!
Small feedback: It would be nice if you also explain a little more of "why" you are using those CSS classes. I know the focus of this tutorial is on React but since we are also trying to understand Tailwind, it would be even better to understand the reasoning behind the CSS.
The reason of using Tailwind? thousand times faster than a normal css build
I suggest you learn css, and build some projects around normal CSS , then tailwind classes will automatically make sense.
My passion was graphic design and I have taken up Computer Technology in college coz of scholarship. I learn web development, but after I graduate I become a Graphic Designer.
It's been 5 months now that I have abandoned web development. But Hey! I am here right now watching again with your tutorial. I really love your tutorial, you are the channel I love the most and I have pinned for my college years. Thank you and I am back again🎉❤️❤️❤️❤️
Either way I am a Graphic Designer or Web Developer 🙃
That's amazing! Go for it!!! :)
Just started your tutorial...You should mention to have the tailwind intellisense for the quick snippets. Overall, it's a good tutorial.
Thanks!
Such a amazing lecture i ever meet. I from sril lanka 🇱🇰. I really respect you for these lv you so much ❤️🌸
Your are always fully loaded with content that is always so rich yet you do not charge even a penny!!! You are just awesome!! Your channel is like a university for us developers to learn the skills that help us to grow in our careers phenomenally. Thank you for all your glorious efforts.
P.S. Please try and add GSAP animtions in your websites and teach us that too.
finally, i finished my project now, love this channel so much!
i have been following all this tutorial for a while and i must thank you for that. it really helps my practice.
i would very much like to see tutorials on other than just reactJS . Next js would be fun. some backend technology tutorials would be great...
🤗
You are welcome!
I learned react for the first time in your mini filmpair tutorial and now this amazing project thank you very much i have learned a lot from this project and i am about to start another project right away again thank you very much for the amazing tutorials you are providing us.
Thank you so much! Feel free to provide us a review on TrustPilot as well www.trustpilot.com/review/jsmastery.pro
Thanks again for your dedicated time to make such a great tutorial like this. I replicated the project but, instead of using javascript, i took the road on typescript and the things just worked fine so far. Oh, and i already deployed on Vercel! So, thanks again for help us all achieve success in programming. Big hug my friend!!
Nice! Can you please share how your folder structure might be different for typescript?
My favourite stack at the moment is Next JS, TypeScript, and Tailwind CSS 😍
It looks like a standard site that webflow users would say they can build. Nice work sir
Thank you!
I didn't understand what you meant by your post as Webflow still requires a different skill set. I do both Webflow and code and they're still different.
@@denniszenanywhere Oh I am just saying it looks like one of those sites that would have the tag "Made with Webflow" as a premium site and because not all those who codes gets to code such complicated layout. Designs like this are so common in webflow
@@waifufx The reason you see many of this in Webflow is because you can focus on the design in Webflow as it has already done most of the coded things in there. Even when I do Webflow, I get to design better than when I code from scratch. But that's the amateur coder in me. But here's what I like about Javascript Mastery. He has both the coding and design chops and that's rare even among web developers. Usually, you're just one or the other because it's just a lot of work to do both. Doable but lots of work.
@@denniszenanywhere NO OFFENSE I did not mean to offend you or anyone, Yeah you are right, and also the man has a lot of design sense with code very inspiring to me
My personal fav is portfolio video because it's just stunning...and next the main project which landed me onto intern is the website of Ethereum trasfer
Thanks for sharing!
Love from India 🇮🇳🇮🇳🇮🇳🚩🚩🚩🙏🙏
Greetings to India! :)
Bro let's collaborate
I'm so happy when see your new video on my notifications.
I'm so happy to hear that! 😊
36:41
I'd rather type it like this => mr-10 last:mr-0
Looks cleaner imo :)
Appreciate your videos, thanks so much for the content!
Good tutorial. I'm always waiting new video every week from your channnel.
Glad you like them!
this is the best tutorial for react x tailwinds. Awesome bro, thank you!!
Intro: You will do everything on your own and you will learn everything....
A few moments later....
I have already made half the project for you
Cmon, it's not like that.. :)
@@javascriptmastery Mhm, you should've done more detailed intro on the files you wanted people to include externally, like have us do a little part of em on ourselves so we can learn too on how to make those files.
But still overall great video, watching it rn
Great sir... You are my super hero in learning frontend design and react... Thank you very much ❤❤❤❤
You are most welcome
This is superb ! But can you make a tutorial of making a website where we can stream and download music?
An app exactly like that is coming soon! 🔜
man you're awesome and your teaching skills are on next level you're one of my favorite teachers
Thank you so much!
Best combo reacTailwind
It is! 😊
I admire your dedication and desire to help us improve as front-end developers, thank you so much.
Thank you for such great content👍. I appreciate all your work btw but I just want to tell that do increase the content in which a full project is made.
Thanks for the tip!
Amazing tutorial from start to finish. And even shows you how to deploy the application. ⭐⭐⭐⭐⭐
Yess!
Good JSM
next video on electronjs and reactjs project
Great idea!
@@javascriptmastery please make soon
I am waiting
was waiiting soo much for any content from you... i am in love with your methodolody and have aligned my learning only with your videos... i pray as a youtuber you get the ideas and resources for endless content and u keep growing.... much love from pakistan.
Greetings to Pakistan! :)
Great working👨💻
Thank you! Cheers!
I freaking love your videos please do not ever stop making them.
Thank you!
God bless you Adrian brother
Thanks! :)
Damn, the fact that you share the assets on github and start doing it along with you, because the fact is not just copying code but to learn
you are not teaching lot of things by giving the setup files. all the basic things like how to set up theme, font, basic startup CSS all is given. How would we learn this basic things if its just provided?
WTF! Another video already man😲 You're the undisputed goat fr
Thank you!
Amazing job sir
So nice of you
Whenever i think what project i do next Adrian just come and say, I got you brother 😀
Awesome thank you!
Why bg-primary not showing the background color?
ok you will need to go to the tailwind installation page and follow extra steps that are not covered in this video. There is a part 4 onwards in the docs that requires you to run the CLI and build your CSS...... something like this > npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Hey @@joshuagornall260 thank you for the reply, I was really stuck, I'll let you know if it works for me
Thank you so much. I have been looking for this video I made UI on figma but I don't know how to change to website. Now I can learn from you 😉. Again Tnxs
Let's make it to 20K Likes guys. 😁😁❤️❤️❤️❤️
Hopefully soon! 🔜
Sir can you make a tutorial for a PERSONAL PORTFOLIO/ PERSONAL WEBSITE that we can add to our resumes. AMAAZING video as always. lots of love and thank you once so much!
This is not a good tutorial, here it says that its even for beginners and thats a fake, firstoff u need to learn tailwinds otherwise ull never be able to do your own design or manipulate the tailwinds tags. Ive been seen several videos and this channel is not able to help to any beginner
U definetly know how to hype up a coding tutorial video! Theese 2 hours have flown
This is absolutely not a good way to teaching . You said you are making things from scratch, this is a lie. You provide a lot of CSS files and those files are complicated to understand. I don't see anyone who use .js files for only write CSS . No one is hurry to catch the plane. People have enough time to learn new things . This is not a beginner level tutorial.
You’re right brother. It’s crazy how only us two see that 😂
The thing is.. since modern JS, you can do one thing 100 ways (find the one that suits you) so please keep an open mind and don't be a broke hater, nobody likes that
Love your channel from Egypt ❤❤❤🇪🇬🇪🇬
Bro you give all the code which you should write in the video before. What kind of tutorial is this. Highly disappointed
🥺🥺🥺i don't know how to thank you sir ...i am 19 and i got my first paid intern just because of watching 4 videos of yours ❤️❤️
Keep it up
Это Словно Рождество))) ПРАЗДНИК!
Excellent tutorial, I really liked it. You are a reference on how a good web application should be developed.
so theres a lot of comments here saying that it's not pulling up the hello world, well my solution was to add a couple of the tailwind extensions in vs code and then someone had mentioned you have to save the files which i saved each and every one seperately, then saved the folder as well. i then ran npm run dev and wallah. One day gone to that bug. oh well either way i appreciated the experience. Good Luck, and happy coding.
I'm having trouble right from the beginning. Where is bg-primary defined?
Always waiting for your project videos. In every video, there are many amazing things to learn always. Thank you so much, Sir.
Thank you! 😊
Looks great, thanks for sharing jsmastery.
Hope to see more applications on ReactJs and React Native too❤️.
Might come soon! 🔜
to be hones the video is focusing more in tailwind than is for react js . however, your videos are awsome and you made the complex easy to understand and pick up. thanks and keep it up
dont mind this comment, this just a bookmark i can use later XD!!
25:22 export components
39:44 set Toggle
I just completed making my own version of this. Your videos are awesome!!!
Btw, please make another social media app, but with react native! Please
Love from India
Thank you! Will do!
JavaScript mastery is a life changer
Glad to hear that! :)
Your way of teaching is great and beginner friendly.thank you so much bro
Best channel handsdown
Thank you!
Thankyou JavaScript mastery . Thanks a lot sir for your hardly work . We will learn huge knowledge from you.