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

[@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.

[@parukazziyi]

omg thank you so much😂

[@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!

[@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!!

[@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!

[@ameykatre08]

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

[@javascriptmastery]

Thank you so much 😀

[@tenkkov]

It’s a lie

[@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!! 💫💫👍

[@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🙃

[@namjotsingh]

​@navneetkaur20 just design, front end only

[@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!

[@satyam7637]

Really nice experience Building it while watching and figuring out errors and fixing them was very Enjoyable .... A proper knowledge of using and reusing it This video given me a proper knowledge how developers in company think to design their websites

[@hiroyamao6878]

I just finished watching this video and followed instructions. Thank you for this amazing free video. You're amazing.

[@darrenbyrne6540]

Thanks!

[@javascriptmastery]

Thank 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!

[@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

[@robel_asefa]

I used to avoid those long tutorials on KZbin because, honestly, most of them are boring. They either skip explaining the 'why' behind the code, use poor teaching techniques, or focus on just getting things to work without showing the best practices. But this channel? It’s a game-changer. The level of detail, the clear explanations, and the high-quality production - everything is top-notch. It really feels like the projects are built for real-world use, not just as tutorials. I watched the Next.js 14 full course and was blown away. It was so good that I ended up downloading 11 more videos from the channel! I've already watched a few, and they’ve all been fantastic. Very very huge thanks to the entire team behind this channel for your incredible work. You’re truly helping the JS community grow. Keep it up!

[@PauloJsx]

Thank you, Adrian! Brazilian here!

[@javascriptmastery]

My pleasure!

[@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!

[@waltergree]

Recuerden que para los cards en 1:32 el backgroundUrl correcto es: backgroundUrl: "src/assets/benefits/card-1.svg" y asi sucesivamente con los demas

[@OwaisWork]

Hey guys you're facing the same error as is see at 1:32:47 bakgroundimageURL issue.. So the solution is you have to fixed the path at index.js at between 245-296 in code line Re-path it like "./src/assets/benefits/card-1.svg" Hope its fixed the issue thanks :)

[@aum387]

Thank you!

[@maile8766]

thanks so much !

[@EmptyWorrds]

You're the best.

[@chavamartinez3102]

Thanks a lot!!!

[@bucketshoptrading]

thank you so much lol

[@azlanj]

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

[@nikolapesic3512]

Svaka čast! Ovo je sjajno, sve pohvale!

[@javascriptmastery]

Hvala ti Nikola!

[@DWWebInnovations]

Bro, good work but you must give us understanding on the different containers within containers. For example, when styling a div, add a border to the container, to show what styles you are applying to the container in real time. Because adding borders will be so much easier to see how we style containers and render images within them etc.

[@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!

[@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!

[@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

[@waltergree]

Creo que es el mejor curso que he llevado de Usted. Thank you so much!!!

[@me4llox320]

Probably the best project ive ever built from scratch. Loved the way you broke down every tiny bit of detailing, and also enjoyed building this. Learnt a lot of new things. Thank you for this amazing experience XD!!

[@prabodhsharma8354]

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

[@javascriptmastery]

Thank 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 😀

[@istiqueahmed3919]

the design was fully perfect, I did the whole code with the video, learned a lot about modern coding and design which is truly extra ordinary. I would lie to ask if you could speed up your talking speed, although it is ok. I am listening and coding at 2x speed. all good.

[@BliitzPint]

5:20 You don't necessarily need the slash. Only the dot does the job.

[@adminpower7154]

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

[@javascriptmastery]

Welcome back!

[@iontaetu8334]

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

[@javascriptmastery]

Thank you so much!

[@sawi494]

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

[@jrom_ai]

Time to modernize again our website portfolio!!! 😍

[@javascriptmastery]

Yes please!

[@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.

[@shorocalled]

Here is the code for settings.json -> (If your confused) 8:12

[@shorocalled]

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.addMissingImports": "explicit" }, "prettier.tabWidth": 2, "prettier.useTabs": false, "prettier.semi": true, "prettier.singleQuote": false, "prettier.jsxSingleQuote": false, "prettier.trailingComma": "es5", "prettier.arrowParens": "always", "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "vscode.css-language-features" }, "[svg]": { "editor.defaultFormatter": "jock.svg" } }

[@fedev1312]

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

[@NikhilPandey-u2x]

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

[@javascriptmastery]

Thank you, I will

[@halohalo4976]

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

[@javascriptmastery]

Amazing!

[@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 :)

[@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!

[@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

[@kafe96]

This is one of the best project i found in youtube.

[@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

[@GhulamHussain-k5s]

😮​@@javascriptmastery

[@Intrade.x]

I did a 7 hours css course in 24 hours

[@ismatqasim5147]

OMGGGG OUTT OF THISS WORLDDDD !! THIS IS INSANEE

[@javascriptmastery]

Thank you!

[@mrcherry9388]

Bruh bruh bruh step aside. You just kicked the old web development on the butt. If i have to create any website then definitely i will follow this for modern AI based 3D web. Hats off to you sir for providing that much valuable source code for free 🖤🌚🗿🙌🏻.

[@OPGAMER.]

WOW! the design looks so sick!

[@javascriptmastery]

Thanks!

[@martinyates353]

Many many many thanks for this tutorial😁😁 I've learned so much and have a greater understanding of reusable components! keep up the great work.

[@christiangoran6621]

Thanks a lot for this. Very impressive skills and a pleasure to follow along. I put the video on 75% speed and code along. One video request that would be highly appreciated: To see how you do the preparations for such a website, now everything is like putting together an IKEA furniture for me following the instructions, all the svg's and content is there already. But I would love to see more of the preparations going into creating such a website, especially by React/Design masters such as yourself. Thanks again.

[@IamnotOC]

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!

[@muhamedmouzoun]

This is amazing! I can't thank you enough! I really enjoyed this project! Next month I'll join your JS Masterclass! Thanks a lot!

[@-CSE-BurhaanWani]

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

[@javascriptmastery]

Thank you so much 😀

[@akatskipain5893]

I Love your Course and explanation man

[@javascriptmastery]

I appreciate that!

[@cajaaib1]

Thank You so much, this was Amazing tutorial with a lot of practical and information.

[@LucasTakaki-e8y]

Very informative and simple, thanks for video

[@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 🙂

[@DevMadeEasy]

Great Content, thanks for sharing it!!!

[@LeoMcPherson-uv5qm]

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

[@aliasjal8765]

Incredible Video brother I have learned so much and am actually shocked that how can such quality content be free.

[@jazymhmd1944]

okay he is unstoppable at this point 😵

[@javascriptmastery]

As always!

[@samuelbaquero6313]

I like this! You don't only show how to do things, you also explain the reasoning behind them. 👏

[@feeeedox]

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

[@javascriptmastery]

Happy to hear that!

[@Graymatter707]

Where are you learning?

[@JT-gl5ou]

I wasn't able to run your code..it says fontfamily not defined. I hate how these setting up processes always break constantly.

[@fbenfrank]

His font family never works. Set up your own.

[@zainshah4172]

Why do we need the component separately in the app.jsx for it to surround the button? You tend to miss alot of important details, and you didnt go through how the classes are defined the tailwindconfig file and i even went through your tailwind course, didnt explained the syntax in this tailwind config file.

[@sammer-gr5qj]

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

[@kushaltanna5569]

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

[@javascriptmastery]

Enjoy!

[@kiransalve403]

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

[@deltaranzyd1587]

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

[@adilahamed2677]

Adrian bro, why did you stopped with frontend only, I wish you also include node, express, MongoDB bro ☹️

[@javascriptmastery]

More to come

[@alexiasattic]

Do you know any good examples of fullstack web step by step courses?

[@sjshdhehbesjks]

great video for beginners to learn

[@javascriptmastery]

Glad you think so!

[@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 ! ❤❤

[@AhmadMaartmesrini]

OMG, This is so impressive ❤

[@javascriptmastery]

Thank you!

[@russtheceo4246]

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

[@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

[@Md.-Tazul-Islam]

A lot of thanks for your useful tutorials.

[@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!

[@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!

[@uminhtetoo]

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

[@javascriptmastery]

Appreciate it

[@jonathandajome690]

Oh, yeah! Let's to code 🔥

[@javascriptmastery]

Awesome! 🔥

[@taiwojolomi]

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!

[@sparebutspecial]

Everything's great but I do think that you can increase your recording quality a bit (probably by slightly increasing the bitrate). Don't know much but I feel the text feels a little blurred out at 1080 p :)

[@amrutkhot992]

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

[@javascriptmastery]

Sure 😊

[@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 ??🙃

[@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!

[@yorvych]

Congratulations on your great work and contribution to the community. I wanted to ask you what browser you use to see the work results.

[@javascriptmastery]

Arc

[@DevAmbience]

I love your SaaS application

[@javascriptmastery]

Thank you!

[@27sclub]

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!

[@Cr7Nih]

Thank you bro 🔥🔥

[@javascriptmastery]

No problem 👍

[@Davidcody-if4sg]

Big fan I love your tutorial

[@ChukumelaWilson]

God bless you for all your efforts.

[@javascriptmastery]

Thank you!

[@ohyeahyousef]

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

[@javascriptmastery]

You can build it in Nextjs!!! 👌

[@nuzairibrahim7522]

Lovely design 😍

[@javascriptmastery]

Yess!

[@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.

[@dwirekulynyn]

Super Beitrag, danke für die Infos!

[@RajatSK-p5x]

Everything you make is awesome, but do focus more on React Native too, you have only made two videos of React Native , please make more some advance and long duration videos on React Native , with advance features like e-commerce using Redux toolkit , payment gateway etc etc , that will be great , btw your React Native Job Portal App tutorial made big impact to crack my new job , Thank you so much🤝

[@javascriptmastery]

More RN coming soon!

[@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

[@MolecularDev]

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

[@xcz.tradie]

Love your content. Keep sharing

[@javascriptmastery]

Thank you!

[@darrenbyrne6540]

Thanks - Excellent tutorial.

[@javascriptmastery]

Glad you enjoyed it!