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

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

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

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

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

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

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

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

[@gubatenkov]

It’s a lie

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

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

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

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

[@PauloJsx]

Thank you, Adrian! Brazilian here!

[@javascriptmastery]

My pleasure!

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

[@halohalo4976]

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

[@javascriptmastery]

Amazing!

[@evans3995]

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

[@javascriptmastery]

Thank you so much!

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

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

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

[@kafe96]

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

[@waltergree]

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

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

[@nikolapesic3512]

Svaka čast! Ovo je sjajno, sve pohvale!

[@javascriptmastery]

Hvala ti Nikola!

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

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

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

[@jrom_ai]

Time to modernize again our website portfolio!!! 😍

[@javascriptmastery]

Yes please!

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

[@azlanj]

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

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

[@NikhilPandey-u2x]

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

[@javascriptmastery]

Thank you, I will

[@fedev1312]

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

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

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

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

[@BliitzPint]

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

[@ismatqasim5147]

OMGGGG OUTT OF THISS WORLDDDD !! THIS IS INSANEE

[@javascriptmastery]

Thank you!

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

[@iontaetu8334]

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

[@javascriptmastery]

Thank you so much!

[@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 🖤🌚🗿🙌🏻.

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

[@prabodhsharma8354]

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

[@javascriptmastery]

Thank you!

[@OPGAMER.]

WOW! the design looks so sick!

[@javascriptmastery]

Thanks!

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

[@adminpower7154]

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

[@javascriptmastery]

Welcome back!

[@jazymhmd1944]

okay he is unstoppable at this point 😵

[@javascriptmastery]

As always!

[@sawi494]

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

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

[@DevAmbience]

I love your SaaS application

[@javascriptmastery]

Thank you!

[@samuelbaquero6313]

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

[@sjshdhehbesjks]

great video for beginners to learn

[@javascriptmastery]

Glad you think so!

[@LeoMcPherson-uv5qm]

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

[@sammer-gr5qj]

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

[@kiransalve403]

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

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

[@akatskipain5893]

I Love your Course and explanation man

[@javascriptmastery]

I appreciate that!

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

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

[@run-with-santhosh]

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

[@javascriptmastery]

Amazing!

[@ohyeahyousef]

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

[@javascriptmastery]

You can build it in Nextjs!!! 👌

[@kushaltanna5569]

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

[@javascriptmastery]

Enjoy!

[@hamaadafzal2490]

Sir kindly make complete functional website like eccomerce, booking application etc using react Your teaching style is very good 😊

[@javascriptmastery]

Sure I will

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

[@aliasjal8765]

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

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

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

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

[@-CSE-BurhaanWani]

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

[@javascriptmastery]

Thank you so much 😀

[@iojavis]

Coding with love from Uganda. 🤟

[@SahilManhotra]

Truly a masterpiece.. More powers to you :)

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

[@cajaaib1]

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

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

[@LuigiNicoletti-c1x]

LETSGOOOOOOOOOOO!, PLEASE MAKE MORE THAT, TEACH US TO USE CREATIVE DEVELOPERS FEATURES.!!!

[@javascriptmastery]

Yess!!

[@AhmadMaartmesrini]

OMG, This is so impressive ❤

[@javascriptmastery]

Thank you!

[@ChukumelaWilson]

God bless you for all your efforts.

[@javascriptmastery]

Thank you!

[@jonathandajome690]

Oh, yeah! Let's to code 🔥

[@javascriptmastery]

Awesome! 🔥

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

[@guntikovelamohankrishna]

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

[@javascriptmastery]

You are most welcome

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

[@dwirekulynyn]

Sehr lehrreich, wie immer.

[@MolecularDev]

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

[@russtheceo4246]

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

[@uminhtetoo]

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

[@javascriptmastery]

Appreciate it

[@Md.-Tazul-Islam]

A lot of thanks for your useful tutorials.

[@deltaranzyd1587]

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

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

[@Cr7Nih]

Thank you bro 🔥🔥

[@javascriptmastery]

No problem 👍

[@naishabbas8759]

I prefer if you complete the layout of the design and then style. Personally, it makes much more sense plus adding too many classes distracts our mind about the design to be created.

[@DevMadeEasy]

Great Content, thanks for sharing it!!!

[@BlackMessiah122]

That is one amazing website bro!!!!

[@javascriptmastery]

Glad you like it!

[@technoscience2229]

amazing ! this is something really cool

[@javascriptmastery]

Happy to hear!

[@alman_harbi]

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

[@ShivansMaurya24]

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

[@javascriptmastery]

Enjoy@

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

[@xwdxt0]

Love your content. Keep sharing

[@javascriptmastery]

Thank you!

[@selimpy8105]

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

[@javascriptmastery]

Thanks for the idea!