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
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
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?
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!
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
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
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 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
When I use "npx tailwindcxx init -p" I get "tailwind.config.js" and "postcss.config.js" instead "tailwind.config.cjs" and "postcss.config.cjs". Also after running np create vite@latest, and after selecting "React" I get different options: "Javascript", "Typescript", "Javascript + SWC", "Typescript + SWC" instead of "React" and "ReactT". I choose "Javascript + SWC", I continued but then when I install tailwind I get "postcss.config.js" instead of .cjs and an error code after adding
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!
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
@@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
this is not beginner friendly when someone has not used tailwind, I am running into issues and my css styles are not applying, It would have been helpful to know what kind of errors you would run into while using tailwind
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.
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.
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.
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 :)
Hello. I followed your tutorial and made this website. The only problem I have is the images with svg--> xlmns and their paths. This is so confusing for me. Why can't we use regular png images and how did you make those svg files? I tried to make another project but I don't know how to solve the image part.
Thank you very much for this beautiful website !! I was wondering if the "navbar" class had a style after all? Because I don't see what properties it brings .. Can someone tell me ? Thank by advance !
In my terminal after selecting react frame work it's showing typescript Typescript SW JavaScript JavaScript SW I'm extremely beginner here I don't know how to get plain react here😕
You've basically pasted all the code at the beginning. I'm disappointed. Also, you've run away from TailwindCSS's proposal to keep the css in the HTML itself instead of creating a separate style.js and calling the variable in the HTML, which is basically the pure programming of HTML and CSS
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 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 :)
I came to this video to look how to use Tailwind. I was under the impression that Tailwind is like bootstrap, but I see is not ? Do you have to declare your stylings in a js file as objects and use them from there ?
I feel like most things in this video that really need explaining just get provided. "We type this here.", ok but why, what does it mean. Copying you doesnt teach me anything. Example, We give this item these classnames. >inserts random list of classnames without explanation
Just a day ago I was browsing entire UA-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
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
I close the original terminal where I downloaded the tailwind css and now npm run dev does not work. Any idea how to fix it is says Missing script: "dev"
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.
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
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)
I must conmfess that your setup of Tailwind was very CONFUSING. The 'postcss.config.js' file did not create automatically and creeating it manually was giving errors. And after everything, the Tailwind just does not work
Great video here. I was wondering if such a nice interface can be achieved using only Tailwind CSS, html and Django and some little javascript of course without necessarily using React.
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 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
Hi sir, Im trying to follow this guide, and I have encountered a problem. In the Navbar section, when I tried to create the ul for the desktop view, it wouldn't show up on screen. From what I learn, the class "hidden" will hide the ul, while "sm:flex" will give the ul "display: flex" style if it's a small device, and I dont understand how it showed up on your desktop screen with the class "hidden", please help. Thanks.
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.
why in my browser is blank , no error. I've just follow this tutorial until minutes 30 Navbar. Last error is Failed to resolve import "../assets" from "src\App.jsx". Does the file exist?. Anyone relate or have this experience ? Please help me. Im' using latest Vite & Tailwind
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.
Can anyone help me? In @16:25 my VSC wont autocomplete anything under the """ and my "Hello, World" comes out unformatted (White background instead of black)
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!!
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.
Hi, thanks for the video, after i choose react this shows ? Select a variant: » - Use arrow-keys. Return to submit. TypeScript TypeScript + SWC > JavaScript JavaScript + SWC What I need choose ?
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.
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
Hello there, first of all thank you for an amazing tutorial, really great; second: I have got a problem with TESTIMONIALS.js, where this line of code: is causing me an headache, when this would result in side scroll and empty white space, the problem seems to be with -right-[50%], any idea how to fix it?
can someone explain what " ss: " in tailwind classes do? I didn't find it in tailwind's search or on google and I don't seem to find any difference with or without it
Trying to follow very closely. However, I can't see any colors specified in the div when running the application. Is there something I am missing while linking the tailwind file to my app.jsx? Also I am getting 4 warnings when copying the tailwind file from github. Though I am not too worried about that as I see the same error messages pop up in the video. Some help would be very much appreciated.
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.
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
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?
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
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!
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 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 ?
Love from India 🇮🇳🇮🇳🇮🇳🚩🚩🚩🙏🙏
Greetings to India! :)
Bro let's collaborate
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 have added bg-primary classname but it is not working nor any tailwaind css property. How can I make them work.
For me too
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 Tutorial Is not Good Its Just Copy Past And Not From Scratch.
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
When I use "npx tailwindcxx init -p" I get "tailwind.config.js" and "postcss.config.js" instead "tailwind.config.cjs" and "postcss.config.cjs".
Also after running np create vite@latest, and after selecting "React" I get different options: "Javascript", "Typescript", "Javascript + SWC", "Typescript + SWC" instead of "React" and "ReactT".
I choose "Javascript + SWC", I continued but then when I install tailwind I get "postcss.config.js" instead of .cjs and an error code after adding
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!
Anyone had problem using the bg- primary color?
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
I love you more than my imaginary girlfriend
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
this is not beginner friendly when someone has not used tailwind, I am running into issues and my css styles are not applying, It would have been helpful to know what kind of errors you would run into while using tailwind
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.
16:24 what is the autocomplete extension you used? Please tell me.
Tailwind CSS IntelliSense 😉
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!!
you always saying "on small devices" when typing "sm:" while actually "sm:" means breakpoint for bigger devices. It was very confusing
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 was waiting for a new video from this channel 🔥also please marry me
Thank you! 😊
Great working👨💻
Thank you! Cheers!
For the Navbar, I think you overcomplicate it a bit with the chunk of logic for margins... Just use gap!!!!
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 😊
Hello. I followed your tutorial and made this website. The only problem I have is the images with svg--> xlmns and their paths. This is so confusing for me. Why can't we use regular png images and how did you make those svg files? I tried to make another project but I don't know how to solve the image part.
I never knew this before. Such a wonderful new way to create website with React. Amazing!
Thank you, enjoy!
Thank you very much for this beautiful website !! I was wondering if the "navbar" class had a style after all? Because I don't see what properties it brings .. Can someone tell me ? Thank by advance !
Just started your tutorial...You should mention to have the tailwind intellisense for the quick snippets. Overall, it's a good tutorial.
Thanks!
In my terminal after selecting react frame work it's showing typescript
Typescript SW
JavaScript
JavaScript SW
I'm extremely beginner here I don't know how to get plain react here😕
Any updates?
Good tutorial. I'm always waiting new video every week from your channnel.
Glad you like them!
You've basically pasted all the code at the beginning. I'm disappointed. Also, you've run away from TailwindCSS's proposal to keep the css in the HTML itself instead of creating a separate style.js and calling the variable in the HTML, which is basically the pure programming of HTML and CSS
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.
very helpfull with this tutor for making my first proto when i've learned about html, css and a bit of js.
Best combo reacTailwind
It is! 😊
Is anybody else struggling to get the gradient to show up? at 1:03:00
guys,This guy diserves a appreciation 👏👏👏
Thanks! :)
the black rectangle not shown in my "Hello, World!"😅
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!
I came to this video to look how to use Tailwind.
I was under the impression that Tailwind is like bootstrap, but I see is not ? Do you have to declare your stylings in a js file as objects and use them from there ?
Oh, I was looking on wrong tailwind page that's why I couldn't find the classes. I was on tailwindui instead of tailwindcss
Good JSM
next video on electronjs and reactjs project
Great idea!
@@javascriptmastery please make soon
I am waiting
I feel like most things in this video that really need explaining just get provided. "We type this here.", ok but why, what does it mean. Copying you doesnt teach me anything.
Example, We give this item these classnames. >inserts random list of classnames without explanation
Just a day ago I was browsing entire UA-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! 😊
Looks alright but there is no point using react you miswell use HTML
I like the file and folder structure and the code readability more with React
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 got a problem... neither some images nor "__gradient" attributes were loaded, and I did find the problem. Someone?
Yes, I downloaded the asset file but it is empty.
And no png Or svg file is opening on github.
@@abhiskekkumar5611 the wierder part is that I have the files, and the path is correct
More around MERN please Master! ( Also Material UI ) And big thanks for all that you bring us ❤️
I am not able to download assests folder
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! 🔜
Wery cool app now i am making it!
I like to you tailwind it is mobile first , but the way you upgrate it is really buatiful !
Thank you, enjoy! 😊
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! :)
just wanna say u are the bestttttttttttttttttttttt made it easy for me ! thanks a lott
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
Make react native Cli video
Great idea!
Thanks for replying I will be eagerly waiting for the video
Let's make it to 20K Likes guys. 😁😁❤️❤️❤️❤️
Hopefully soon! 🔜
I close the original terminal where I downloaded the tailwind css and now npm run dev does not work. Any idea how to fix it is says Missing script: "dev"
Mahn….facing the same issue rn, have you been able to solve this?
just do first npm i then do npm run dev@@ogidiademola2433
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.
Perfect! This is the kinda thing I've been waiting for. Thanks JSM et al.
Glad you like it!
Completed!! Thats all ima say lol
Congrats!
Did it work
God bless you Adrian brother
Thanks! :)
JSM the GOAT!!!
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! 😊
Started.........17:24
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
Thank you so much it was so helpful
Amazing job sir
So nice of you
is anyone having trouble with "bg-primary
yes, I have the same
Yes, I do.
It appears the classNames are not linked to the App.jsx file. I've been battling with the problem for the past 3 days.
@@obimakindecelina4651 any luck fixing it?
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! 😊
I must conmfess that your setup of Tailwind was very CONFUSING. The 'postcss.config.js' file did not create automatically and creeating it manually was giving errors. And after everything, the Tailwind just does not work
Bro you give all the code which you should write in the video before. What kind of tutorial is this. Highly disappointed
Thanks Adrian. You're my goto React Js guide as long as you provide the free course lol
I love how you made styling more fun by making it dynamic! Please do more projects just like this with react and tailwind!
Great video here. I was wondering if such a nice interface can be achieved using only Tailwind CSS, html and Django and some little javascript of course without necessarily using React.
of course... 😉
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!
The best UA-camr all time strike again !!!
Thank you! 😊
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
Hi sir,
Im trying to follow this guide, and I have encountered a problem.
In the Navbar section, when I tried to create the ul for the desktop view, it wouldn't show up on screen. From what I learn, the class "hidden" will hide the ul, while "sm:flex" will give the ul "display: flex" style if it's a small device, and I dont understand how it showed up on your desktop screen with the class "hidden", please help. Thanks.
+1 have no clue how it's working
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.
why in my browser is blank , no error. I've just follow this tutorial until minutes 30 Navbar. Last error is Failed to resolve import
"../assets" from "src\App.jsx". Does the file exist?. Anyone relate or have this experience ? Please help me.
Im' using latest Vite & Tailwind
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!
Can anyone help me? In @16:25 my VSC wont autocomplete anything under the """ and my "Hello, World" comes out unformatted (White background instead of black)
Same here bro
same for me
same
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?
38:39
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.
Hi, thanks for the video, after i choose react this shows ? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
> JavaScript
JavaScript + SWC
What I need choose ?
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.
You are the best
Thank you so much! :)
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 mind is on fire, I TRIEDDDD 2-3 TAILWIND AND REACT PROJECTS BUT TAILWIND IS NOT WORKINGGGGGGGG. I AM EXHAUSTED
My favourite stack at the moment is Next JS, TypeScript, and Tailwind CSS 😍
Beautiful video but my bg-primary is not coming up and i also keep getting unknown at rule @tailwind.
What can i do please
helpp
same problem here
4 years of university vs this video and this video wins by 0-10
lol
Hello there, first of all thank you for an amazing tutorial, really great; second: I have got a problem with TESTIMONIALS.js, where this line of code: is causing me an headache, when this would result in side scroll and empty white space, the problem seems to be with -right-[50%], any idea how to fix it?
can someone explain what " ss: " in tailwind classes do? I didn't find it in tailwind's search or on google and I don't seem to find any difference with or without it
look on your `tailwind.config.cjs` file. It's a custom breakpoint.
Thank you!
No, no. Thank you!
Trying to follow very closely. However, I can't see any colors specified in the div when running the application. Is there something I am missing while linking the tailwind file to my app.jsx? Also I am getting 4 warnings when copying the tailwind file from github. Though I am not too worried about that as I see the same error messages pop up in the video. Some help would be very much appreciated.