Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Learn to create modern websites with sleek parallax effects and bento box layouts. This course covers everything from stylish UI design to mobile-first principles while strengthening your React.js and Tailwind CSS skills.
⭐ Hostinger - hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
🌟 Become a top 1% Next.js 14 developer: jsmastery.pro/next14
🚀 Skyrocket your career in 4 months: jsmastery.pro/masterclass
🎨 Full Brainwave Design: ui8.net/ui8/products/brainwav...
🎨 Other UI8 Designs: www.ui8.net/?rel=jsm
📚 Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/brain...
README (assets & code): github.com/adrianhajdin/brain...
Deployed website: jsm-brainwave.com/
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: [e-mail]
Time Stamps 👇
00:00:00 - Intro
00:04:24 - Setup
00:22:07 - Header
00:44:28 - Skeleton Section Component
00:50:25 - Hero Section
01:26:00 - Benefits Section
01:41:30 - Collaboration Section
02:01:00 - Bento Box Section
02:30:35 - Pricing Section
02:51:30 - Roadmap Section
03:05:20 - Footer
03:10:10 - Deployment

[@shadowslayer2248]

Sir there are literally no words to express when you keep bringing these exciting videos!! Been going through a lotta YT channels to see which projects are the best to practicr React and now found this video!! 🎉🎉

[@javascriptmastery]

Thank you!

[@ranipal3505]

This is one of the best highquality tailwind website course in youtube I could find right now! Thank you so much for your effort!

[@prashantbhadauriya4193]

Your clear explanations make it easy to follow along and understand the concepts. Keep up the great work, looking forward to more tutorials from you. thankyou so much!

[@karolisbutvinskas3614]

omg omg omg! I can't believe it! I'm actually feeling a bit overwhelmed by having access to such high-quality tutorial without any cost. :) Thank you so much! This is exactly what I was searching for right now

[@javascriptmastery]

Glad I could help!

[@preciousbanigo]

Same here. I'm overwhelmed. I have liked, saved and shared.

[@a-factoracademy]

😂.... You are dealing a genius human robot tutor respect Adrian

[@anime_edits_0962]

​@@javascriptmasterysir we want more

[@opereznet]

Absolutelly Karol, Adrian is the best not only as a master developer but as human being, sharing his huge knowledge is a blessing

[@jawadkhan1907]

Man really you're the only reason I don't give up and keep coding . Your content quality is top tier . Best wishes for you my brother ❤

[@javascriptmastery]

Thank you!!

[@Tapadar.Monsur]

Awesome choice of design! The step-by-step guidance on building and deploying this modern UI/UX website with React and Tailwind CSS is going to be very helpful.

[@javascriptmastery]

Thanks!

[@azlanj]

you never ceased to amaze me. thank you and keep them coming. please do more courses like this in the future.

[@arielelias2413]

We need more courses like this, because we need to improve our visual skills. The classic layouts are the easiest way to build something, but the clients (in 2024) needs modern stuff. Thx teacher for all of this

[@navneetkaur20]

Bro I didn't get the motive of creating this project Is it just a ui aur is it all working.....can you please just explain me🙃

[@devzone7]

I was looking for new design like vercel's website and finally I got here ! Thank you so much Adrian for making this course for free to us ! May God bless You ! ❤❤

[@evans3995]

What a wow! Unmatched beyond! This is insane! Free to the world just like that. Commend you, Adrian.

[@javascriptmastery]

Thank you so much!

[@TheRobBrennanLive]

Absolutely amazing. This was the first JSM tutorial I've checked out, and was initially wondering if perhaps it was waaaay too long. The answer? NO! You nailed it - not just showing and building, but explaining why and the intent behind choices. Excellent work, m'man ::fist bump:: So refreshing to see a tutorial that has a polished look and feel to it versus something purely "developer built and designed."

[@hash001k]

asdasdas

[@hash001k]

asdasdas

[@uhk2150]

You are unbelievable andrian. Yesterday i finished your last project. Now you came up with another masterpiece.. you have teach me all frontend. Thabks ❤❤❤

[@javascriptmastery]

Thank you!

[@ohyeahyousef]

This channel is my saviour actually ! your videos helps me a lot with my graduation project and I'm 100% relaying on it, keep going and I'm waiting for more amazing videos like this maybe food ordering website is your next tutorial !😆

[@javascriptmastery]

Happy to hear that!

[@drtwist1071]

Thank you Adrian for you time sharing your expertise to us all! your tutorials are truly magnificent and my learning skills are improving tremendously following your channel 🙂

[@nikolapesic3512]

Svaka čast! Ovo je sjajno, sve pohvale!

[@javascriptmastery]

Hvala ti Nikola!

[@rahulagarwal3338]

Adding a bit more detail regarding why certain classes are used in certain situations ( I know there is already some explanation but as a beginner i still felt a bit unfamiliar with the usage of other classes), why its used there and some alternatives would make it much more understandable. Kudos tho. great work

[@russtheceo4246]

Thank you. I learned a lot while completing this project!

[@sawi494]

Thanks for providing such an amazing tutorial without any cost.....valuable content🙌🙌

[@adminpower7154]

Thx! I was checking your channel every day after your last tutorial ❤

[@javascriptmastery]

Welcome back!

[@prabodhsharma8354]

This is amazing. Modern, Aesthetics with eye catching details. Thankyou so much ❣️

[@javascriptmastery]

Thank you!

[@ameykatre4499]

The best Frontend development channel on KZbin... Grateful ❤

[@javascriptmastery]

Thank you so much 😀

[@gubatenkov]

It’s a lie

[@PauloJsx]

Thank you, Adrian! Brazilian here!

[@javascriptmastery]

My pleasure!

[@deltaranzyd1587]

just wow bro. out of words. you ser, keeps inspiring me in pushing to learn coding.

[@shadowslayer2248]

Guys it's only 3 hrs for us(which in itself is a lotta time) but it would have taken him weeks to first design all the inbuilt react components that he already gave the code for and for making the awesome Robot images and other svgs. It would have taken him another few days to figure out the CSS for each component and what works and what doesn't work for each section. There's a lotta UI/UX work going on in the foreground so the least we can do is to like, share and try out these projects ourselves!! 💫💫👍

[@antemasq6520]

This is amazing! thanks for everything you explain things really well, I honestly copypasted a lot because all this css is funky to write along, maybe you could do a followup when tailwind 4 is released soon, keep doing the best tutorials on yt!

[@OPGAMER.]

WOW! the design looks so sick!

[@javascriptmastery]

Thanks!

[@jav1978]

Excellent channel, you are one of the best mentors in web development, I am grateful for the knowledge you bring to the community, success and many blessings, greetings from Venezuela

[@javascriptmastery]

My pleasure!

[@user-ob4hr5ck5p]

keep going brother. You are truly a life-save for many college students like me.

[@javascriptmastery]

Thank you, I will

[@PSPeeks]

Thank you! Great work and guide

[@SahilManhotra]

Truly a masterpiece.. More powers to you :)

[@manasseakpovi7015]

Oh Guy I don't know how to say it clearly. You are amazing 🔥🔥🔥 Amazingly skilled. It is just insane how many things become possible once you become an expert. That's just beautiful !!!

[@javascriptmastery]

Thank you so much 😀

[@dav.i]

loved it! one suggestion: it would be better if your autocomplete box stay below the text. sometimes I cant keep the pace and have to wait you finish typing and pause the video when the autocomplete isnt over the tailwind properties

[@kiransalve403]

This is how code should be written down, ossam man✌️

[@kenshalom6098]

cool stuff so much appreciative for the time and dilligence you put in these beautiful sleek projects

[@navneetkaur20]

Bro I didn't get the motive of creating this project...can you just please explain me ??🙃

[@DevMadeEasy]

Great Content, thanks for sharing it!!!

[@-CSE-BurhaanWani]

Your content is absolutely fantastic! I appreciate the effort and creativity you put into it.

[@javascriptmastery]

Thank you so much 😀

[@kushaltanna5569]

always comes up with something unique..! WIll do it this weekend only

[@javascriptmastery]

Enjoy!

[@fedev1312]

We no need structure nav>ul>li>a for navigation header or footer ser?

[@user-kl5ze4tf2c]

Super! Respect! Tnx Adrian!!!👍👍👍

[@ismatqasim5147]

OMGGGG OUTT OF THISS WORLDDDD !! THIS IS INSANEE

[@javascriptmastery]

Thank you!

[@Mychannel-jg1wo]

Always a great mentor💯💯, Your dedication to providing clear explanations, insightful examples, and engaging demonstrations truly sets your channel apart. Your approach makes the learning process enjoyable and accessible for a wide audience

[@FedoxDieEnte]

Im doing the full react course right now, and i learned so much thanks!

[@javascriptmastery]

Happy to hear that!

[@Graymatter707]

Where are you learning?

[@braveitor]

Really interesting. I see the power of tailwind but sometimes the long lines and styles can be overwhelming. I coded the full site following along in almost real time, so this worked for me quite well. Excellent video and result. Thank you.

[@navneetkaur20]

Bro I didn't get the motive of creating this project Is it just a ui aur is it all working.....can you please just explain me🙃

[@braveitor]

@@navneetkaur20 it's just a way to learn react and tailwind. The result is just a web page with really nice effects, but by building it, you can learn the basics of react and tailwind. Obviously you can change the contents to addapt it for a new project, but it's just an static project, with no data base access nor CRUD system.

[@thegooseisblue]

I am loving these tutorials, they are helping me learn JS and React. I would love it though if you could provide a tutorial on building a backend and for a SaaS and integrating the backend with your front end designs.

[@javascriptmastery]

We've done many already, check out the channel :)

[@LeoMcPherson-uv5qm]

this is so cool man, i will be happy if you can build a dj booking website next

[@iontaetu8334]

Adrian, this is one of the best content on youtube 👍👍👍

[@javascriptmastery]

Thank you so much!

[@jrom_ai]

Time to modernize again our website portfolio!!! 😍

[@javascriptmastery]

Yes please!

[@user-je8nu5er7c]

looking forward for more react(and tailwindcss) contents:>

[@MauricioSalas-rl3qe]

Hello, I've been following your content for the past few months and I'm really impressed with it. I've learned a great deal and I wanted to express my gratitude. I was wondering if you could create a video demonstrating how to clone an application for translating videos into multiple languages. Thank you.

[@uminhtetoo]

Thank you so much for sharing your experience and knowledge, Sir.

[@javascriptmastery]

Appreciate it

[@sammer-gr5qj]

More modern react projects please... Keep them coming my boy... Keep them coming... We want more react projects... 🙏😌

[@halohalo4976]

Okey will come back here after studying the tailwind course 🙇🏻‍♀️🙇🏻‍♀️

[@javascriptmastery]

Amazing!

[@BliitzPint]

At around 28:00 you get an error, because the index.js in the constants folder wants to load something from "../../public/assets". But we don't have that folder. So change line 37 in the index.js to "} from "../assets"

[@rohangupta629]

Thanks!

[@robertmensah8119]

Was stuck on that for about 10 minutes before I decided to look throught the comments. Thanks for the find 😁

[@yeetwoodmack4197]

Good looking out. You just saved me a lot of frustration lol thank you!

[@SAHIL-fz6mo]

Do we need to buy the UI design from UI8? or we can access it for free for this building this application.

[@akatskipain5893]

I Love your Course and explanation man

[@javascriptmastery]

I appreciate that!

[@AjaySingh-jz8qx]

OMG its UI/UX are beating Next UI style system without actually using Next UI. I like this tutorial very much thank you JSM

[@javascriptmastery]

Enjoy!

[@ErnTrgt]

dude you are awesome, please come more often videos where we use ai api's, like for example the 3d t-shirt model and the project we built using dall-e, I hope you see this message and take my suggestion into consideration, you are the best...

[@hxntw]

Love your content. Keep sharing

[@javascriptmastery]

Thank you!

[@HimanshuKumar-yh7ox]

woow.. This is insane. thanks bro

[@robert1diego]

You are amazing!Thank so much.

[@technoscience2229]

amazing ! this is something really cool

[@javascriptmastery]

Happy to hear!

[@Prabhakaran-r]

Awesome, you always great, thank you very much!!

[@javascriptmastery]

Thank you too!

[@darrenbyrne6540]

Thanks - Excellent tutorial.

[@javascriptmastery]

Glad you enjoyed it!

[@metaaffinity]

really its a good design concept . thank you

[@javascriptmastery]

Happy to hear that!

[@_suraj.3x]

The best channel or learning real life projects ❤ Can you make videos on awwwards modern animated website?

[@waleedzaky]

Great tutorial ever, thank you

[@ChriScar1979]

Awesome! Thank you very much for your tutorials! Could you make one for barber appointment bookings? Make it scalable, where many businesses can have their account by paying a subscription with their own homepage, and many clients can register to book their appointments!

[@lubu2960]

Your work is amazing

[@javascriptmastery]

Thank you so much 😀

[@taiwojolomi2638]

Grateful as always for the new videos JSM... At this point, I just prefer watching your videos to other website building videos😂

[@javascriptmastery]

Haha you're great!

[@sjshdhehbesjks]

great video for beginners to learn

[@javascriptmastery]

Glad you think so!

[@AhmadMaartmesrini]

OMG, This is so impressive ❤

[@javascriptmastery]

Thank you!

[@abdoadel6254]

thats some good stuff. thank you

[@javascriptmastery]

Glad you enjoyed it

[@weebdown.]

great work as always

[@javascriptmastery]

Thank you!

[@nuzairibrahim7522]

Lovely design 😍

[@javascriptmastery]

Yess!

[@mohammedamin3908]

Thank you for the amazing content Adrian! Could you please create a tutorial on how to deploy a Next.js app (that uses server side features) to hostinger?

[@guntikovelamohankrishna]

Literally one of the best channel to learn web development i have ever seen... Thanks a lot sir 🎉🎉🎉❤

[@javascriptmastery]

You are most welcome

[@nishantchaudhari3510]

Thank you bro 🔥🔥

[@javascriptmastery]

No problem 👍

[@digitalsahara6670]

thank you so much for this. would you be able to do a tailwind tutorial covering the config file and how to approach creating a design system ?

[@javascriptmastery]

Check out our Tailwind Crash Course

[@thesourcecodestudio]

This is awesome, thanks for all the amazing content you put out everytime. Please what browser where you using while building the app i'd love to try it out. 💙

[@ChukumelaWilson]

God bless you for all your efforts.

[@javascriptmastery]

Thank you!

[@khouchanemahmoud9475]

Cool as always

[@javascriptmastery]

Thanks!

[@BlackMessiah122]

That is one amazing website bro!!!!

[@javascriptmastery]

Glad you like it!

[@jazymhmd1944]

okay he is unstoppable at this point 😵

[@javascriptmastery]

As always!

[@andresdallarizza1526]

amazing shit brotha

[@kevinndanyi498]

Thank you so much Mr Adrian and the Team. I love what you're doing and I'm really inspired by it. Thank you again for this high quality tutorials.

[@javascriptmastery]

Glad you enjoy it!

[@Applecitylightkiwi]

Another amazinf project i am going to recreate it with typescript and nextjs. Forpractice purposes

[@Code-Hub-Tamil]

I'm motivated on you so I recreated my KZbin channel in my own mother tongue you are just awesome ✨✨✨✨✨✨

[@javascriptmastery]

Amazing!

[@ShivansMaurya24]

It is very nice video to learn and build project for frontend developer.

[@javascriptmastery]

Enjoy@

[@stilltiger]

It would be really cool if you made a video on creating an app on next js and using wordpress as an admin area

[@jonathandajome690]

Oh, yeah! Let's to code 🔥

[@javascriptmastery]

Awesome! 🔥

[@tewogbadeoluwadamilare2772]

Good stuff!

[@amrutkhot992]

Great one .... please make a video on new react 19 features 😊

[@javascriptmastery]

Sure 😊

[@biancastefania1392]

Thank you!

[@almannazyrov394]

@javasctiptmastery It would be fantastic if you teach and show how to secure react/next apps via tokens, safe authentication, sensitive data, like incomes, expenses, antifraud methods and hacks! You built a ton of projects and brought invaluable experience as mentor for portfolio. What if to make special video for make app into production phases, stages, with security practices?

[@aliashfaque1746]

I can't believe this is free! Can I cry and send you a video of it? Is it okay for me to use 90% of the elements for my own agency?

[@DevAmbience]

I love your SaaS application

[@javascriptmastery]

Thank you!

[@RadjiMubarakElMobizy]

It would be great if you could do a video showing how to handle multiple languages using NEXTJS

[@ohyeahyousef]

AMAZIIING!! what about publishing the NEXT js version of this video :(

[@javascriptmastery]

You can build it in Nextjs!!! 👌

[@selimpy8105]

awesome I think you should make this functional ai project for continue the series

[@javascriptmastery]

Thanks for the idea!

[@Listen_It_Up]

Bro you are literally the most fantastic coder and ux/ui designer, I am willing to purchase your course because it made me think what will be in that course, I will in a period of 1 month going to apply as a front end developer and after any company hires me I will definitely buy your course for full stack. Once again thanks bro ^_^

[@javascriptmastery]

You're great!

[@AristotelianLogic]

*Sets aside 4 hours on the calendar*

[@javascriptmastery]

Haha, amazing!

[@Daker11Gamer]

Those are like 8 hours if you wanna keep this information in your brain

[@aftab_alam48]

4? takes me about 8-10 just to follow through