Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind
HTML-код
- Опубликовано: 12 июн 2024
- Master modern web development by building a responsive React JS application consisting of a stunning hero section, high-quality assets and gradients, business stats, reusable feature sections with call-to-action buttons, testimonials, and more!
⭐ Hostinger - hostinger.com/javascriptmastery
⭐ Discount Code - JAVASCRIPTMASTERY
📙 Get the ultimate free resources, guides, and eBooks: www.jsmastery.pro/resources
Showcase your dev skills with practical experience and land the coding career of your dreams:
💻 JS Mastery Pro - jsmastery.pro/youtube
✅ A unique RUclips discount code is automatically applied!
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
Figma Design: www.figma.com/file/bUGIPys15E...
GitHub Gist Code Snippets: gist.github.com/adrianhajdin/...
Assets: minhaskamal.github.io/DownGit...
Filmpire course - www.jsmastery.pro/ultimate-re...
🎨 Design by: www.oneweekwonders.com | dribbble.com/OWWStudio
In this course, you’ll learn:
- React functional components and their reusability
- React file and folder structure
- You’ll achieve mastery using Tailwind CSS
- Fundamental CSS properties to master flex
- From soft and pleasant animations to complex gradients
- Perfectly placed media queries for satisfactory responsiveness on all devices
- And at the end, you'll learn how to deploy your websites to extremely fast servers and give them a custom domain name using Hostinger
💻 Join JSM on Discord - / discord
🐦 Follow JSM on Twitter - / jsmasterypro
🖼️ Follow JSM Instagram - / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
👇 Time Stamps
00:00:00 Intro & Setup
00:16:00 Structure & Layout
00:30:53 Navbar
00:44:23 Hero Section
01:07:24 Stats
01:12:36 Business section
01:27:15 Billing section
01:35:34 Card Deal
01:40:41 Testimonials
01:55:28 CTA Section
01:59:18 Footer
02:12:11 Deployment
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!
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
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.
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
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
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
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.
I love how you made styling more fun by making it dynamic! Please do more projects just like this with react and tailwind!
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 ?
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.
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.
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!!
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! 😊
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.
Your tutorials are easy to follow and provide amazing results!
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.
I never knew this before. Such a wonderful new way to create website with React. Amazing!
Thank you, enjoy!
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
Just a day ago I was browsing entire RUclips 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! 😊
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!
Perfect! This is the kinda thing I've been waiting for. Thanks JSM et al.
Glad you like it!
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 🙏🙏🙏
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! 😊
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?
I admire your dedication and desire to help us improve as front-end developers, thank you so much.
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 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!
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
Always waiting for your project videos. In every video, there are many amazing things to learn always. Thank you so much, Sir.
Thank you! 😊
Lama Dev, this is amazing. Seeing it in a real proyect will be amazing. Thanks.
More around MERN please Master! ( Also Material UI ) And big thanks for all that you bring us ❤️
Love from India 🇮🇳🇮🇳🇮🇳🚩🚩🚩🙏🙏
Greetings to India! :)
Bro let's collaborate
Your way of teaching is great and beginner friendly.thank you so much bro
I freaking love your videos please do not ever stop making them.
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
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!
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.
this is the best tutorial for react x tailwinds. Awesome bro, thank you!!
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 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.
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
guys,This guy diserves a appreciation 👏👏👏
Thanks! :)
Good tutorial. I'm always waiting new video every week from your channnel.
Glad you like them!
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
“Thank you” would be an understatement of the year
No, no. Thank you!
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! ❤️
Great working👨💻
Thank you! Cheers!
Excellent tutorial, I really liked it. You are a reference on how a good web application should be developed.
man you're awesome and your teaching skills are on next level you're one of my favorite teachers
Thank you so much!
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.
Just started your tutorial...You should mention to have the tailwind intellisense for the quick snippets. Overall, it's a good tutorial.
Thanks!
Thank you very much for your tutorial , you are my favorite RUclips channel!
Looks great, thanks for sharing jsmastery.
Hope to see more applications on ReactJs and React Native too❤️.
Might come soon! 🔜
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
Best combo reacTailwind
It is! 😊
very helpfull with this tutor for making my first proto when i've learned about html, css and a bit of js.
Amazing tutorial from start to finish. And even shows you how to deploy the application. ⭐⭐⭐⭐⭐
Yess!
God bless you Adrian brother
Thanks! :)
Amazing job sir
So nice of you
What a beautiful site and a great job as always you content and delivery is simply amazing Thank you so much
Thanks Adrian. You're my goto React Js guide as long as you provide the free course lol
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! 🔜
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
Thanks for this amazing video. I've completed it with you and enjoyed alot.
Good JSM
next video on electronjs and reactjs project
Great idea!
@@javascriptmastery please make soon
I am waiting
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
My favourite stack at the moment is Next JS, TypeScript, and Tailwind CSS 😍
Really a nice and fruitful quick training. Many thanks.
Let's make it to 20K Likes guys. 😁😁❤️❤️❤️❤️
Hopefully soon! 🔜
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 for this tutorials. It looks beautiful !
Glad you like it Victor! :)
Awesome... just completed it. Many many thanks.
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
Bro you give all the code which you should write in the video before. What kind of tutorial is this. Highly disappointed
Such a amazing lecture i ever meet. I from sril lanka 🇱🇰. I really respect you for these lv you so much ❤️🌸
Amazing! i just really enjoyed the tutorial :)
Your tutorial is very helpful. I am benefitted. Thank you very much.
I'm so happy when see your new video on my notifications.
I'm so happy to hear that! 😊
Great sir... You are my super hero in learning frontend design and react... Thank you very much ❤❤❤❤
You are most welcome
Thank you! Man, your channel is amazing.
Thank you very much for sharing this type of content, the application is fantastic, congratulations on the content.
man, you are the best! Thank you so much for that amazing video.
First here! This is amazing! Thank you for this @JavascriptMastery🔥🔥
My pleasure!
best teacher ever! thanks god i found this channel!!
I have been following your videos for quite some time. I really enjoy them and learn a lot from them. Would you be willing to do a CSS video? Or a video of you troubleshooting your dev containers on how to get the right sizes for everything?
You are really a pro.
I have learned so much from you.
Thank You Bro
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! :)
36:36, instead of checking last element with index, you can use tailwind pseudo-class 'last'
Example: 'mr-10 last:mr-0'
Wonderful, amazing, marvelous, incredible, exceptional. Thanks alot! 😘
Thankyou JavaScript mastery . Thanks a lot sir for your hardly work . We will learn huge knowledge from you.
Love your channel from Egypt ❤❤❤🇪🇬🇪🇬
you are so good at teaching and explaining.
This man is a true legend!
Thank you so much for your wonderful work! It really help us beginner a lot
You're very welcome!
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! :)
Amazing Tutorial! Awesome Job Brother!
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
what a nice tutorial 10/10 thank you, nice design