Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind
Вставка
- Опубліковано 21 тра 2024
- 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: contact@jsmastery.pro
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
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"
Thanks!
Was stuck on that for about 10 minutes before I decided to look throught the comments. Thanks for the find 😁
Good looking out. You just saved me a lot of frustration lol thank you!
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
Glad I could help!
Same here. I'm overwhelmed. I have liked, saved and shared.
😂.... You are dealing a genius human robot tutor respect Adrian
@@javascriptmasterysir we want more
Absolutelly Karol, Adrian is the best not only as a master developer but as human being, sharing his huge knowledge is a blessing
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!! 🎉🎉
Thank you!
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!
This is one of the best highquality tailwind website course in youtube I could find right now!
Thank you so much for your effort!
you never ceased to amaze me. thank you and keep them coming. please do more courses like this in the future.
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 ❤
Thank you!!
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.
Thanks!
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 🙂
What a wow! Unmatched beyond! This is insane! Free to the world just like that. Commend you, Adrian.
Thank you so much!
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!! 💫💫👍
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."
asdasdas
asdasdas
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
Thank you. I learned a lot while completing this project!
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 ! ❤❤
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 !😆
Happy to hear that!
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
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🙃
You are unbelievable andrian. Yesterday i finished your last project. Now you came up with another masterpiece.. you have teach me all frontend. Thabks ❤❤❤
Thank you!
just wow bro. out of words. you ser, keeps inspiring me in pushing to learn coding.
Thanks for providing such an amazing tutorial without any cost.....valuable content🙌🙌
This is amazing. Modern, Aesthetics with eye catching details. Thankyou so much ❣️
Thank you!
Svaka čast! Ovo je sjajno, sve pohvale!
Hvala ti Nikola!
Thx! I was checking your channel every day after your last tutorial ❤
Welcome back!
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!
Truly a masterpiece.. More powers to you :)
WOW! the design looks so sick!
Thanks!
Thank you! Great work and guide
We no need structure nav>ul>li>a for navigation header or footer ser?
cool stuff so much appreciative for the time and dilligence you put in these beautiful sleek projects
Bro I didn't get the motive of creating this project...can you just please explain me ??🙃
Im doing the full react course right now, and i learned so much thanks!
Happy to hear that!
Where are you learning?
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
Super! Respect! Tnx Adrian!!!👍👍👍
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
My pleasure!
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
The best Frontend development channel on UA-cam... Grateful ❤
Thank you so much 😀
It’s a lie
Your content is absolutely fantastic! I appreciate the effort and creativity you put into it.
Thank you so much 😀
This is how code should be written down, ossam man✌️
keep going brother. You are truly a life-save for many college students like me.
Thank you, I will
Thank you, Adrian! Brazilian here!
My pleasure!
this is so cool man, i will be happy if you can build a dj booking website next
Great Content, thanks for sharing it!!!
Great tutorial ever, thank you
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.
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🙃
@@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.
always comes up with something unique..! WIll do it this weekend only
Enjoy!
OMGGGG OUTT OF THISS WORLDDDD !! THIS IS INSANEE
Thank you!
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 !!!
Thank you so much 😀
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.
looking forward for more react(and tailwindcss) contents:>
Thank you so much for sharing your experience and knowledge, Sir.
Appreciate it
You are amazing!Thank so much.
I Love your Course and explanation man
I appreciate that!
Adrian, this is one of the best content on youtube 👍👍👍
Thank you so much!
*Sets aside 4 hours on the calendar*
Haha, amazing!
Those are like 8 hours if you wanna keep this information in your brain
4? takes me about 8-10 just to follow through
woow.. This is insane.
thanks bro
More modern react projects please... Keep them coming my boy... Keep them coming... We want more react projects... 🙏😌
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...
Thanks - Excellent tutorial.
Glad you enjoyed it!
Love your content. Keep sharing
Thank you!
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!
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.
Glad you enjoy it!
Time to modernize again our website portfolio!!! 😍
Yes please!
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.
We've done many already, check out the channel :)
Awesome, you always great, thank you very much!!
Thank you too!
amazing ! this is something really cool
Happy to hear!
OMG its UI/UX are beating Next UI style system without actually using Next UI. I like this tutorial very much thank you JSM
Enjoy!
really its a good design concept . thank you
Happy to hear that!
The best channel or learning real life projects ❤
Can you make videos on awwwards modern animated website?
OMG, This is so impressive ❤
Thank you!
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?
Thank you!
Your work is amazing
Thank you so much 😀
great work as always
Thank you!
thats some good stuff. thank you
Glad you enjoyed it
God bless you for all your efforts.
Thank you!
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. 💙
Another amazinf project i am going to recreate it with typescript and nextjs. Forpractice purposes
great video for beginners to learn
Glad you think so!
Grateful as always for the new videos JSM... At this point, I just prefer watching your videos to other website building videos😂
Haha you're great!
Lovely design 😍
Yess!
Okey will come back here after studying the tailwind course 🙇🏻♀️🙇🏻♀️
Amazing!
Good stuff!
Thank you bro 🔥🔥
No problem 👍
incredible 🤩
Cool as always
Thanks!
It would be really cool if you made a video on creating an app on next js and using wordpress as an admin area
That is one amazing website bro!!!!
Glad you like it!
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 :)
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 ?
Check out our Tailwind Crash Course
@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?
okay he is unstoppable at this point 😵
As always!
It is very nice video to learn and build project for frontend developer.
Enjoy@
Literally one of the best channel to learn web development i have ever seen... Thanks a lot sir 🎉🎉🎉❤
You are most welcome
I'm motivated on you so I recreated my UA-cam channel in my own mother tongue you are just awesome ✨✨✨✨✨✨
Amazing!
thank you
Amazing content Man! Ever...
Appreciate it!
Oh, yeah! Let's to code 🔥
Awesome! 🔥
Adrian bro, why did you stopped with frontend only, I wish you also include node, express, MongoDB bro ☹️
More to come
hello thank you for this amazing tutorial i wanna ask just about how to link the pages please for the pricing with vite and react on the main.jsx
5:20 You don't necessarily need the slash. Only the dot does the job.
It would be great if you could do a video showing how to handle multiple languages using NEXTJS