Build and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSS
HTML-код
- Опубликовано: 14 июн 2024
- Build a feature-rich travel app with Next.js 14 and Tailwind CSS, covering everything from a sleek UI to mobile-first best practices.
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
⭐ Hostinger - hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
📚 Materials/References:
Tailwind CSS Starter Kit: resource.jsmastery.pro/tailwi...
GitHub Code (give it a star ⭐): github.com/adrianhajdin/trave...
GitHub Gist Code Snippets: gist.github.com/adrianhajdin/...
Deployed website: camptraveler.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:39 - Setup
00:13:54 - Navbar
00:32:41 - Components setup
00:34:16 - Hero section
00:51:34 - Camp section
01:09:22 - Guide section
01:19:14 - Features section
01:33:31 - Call to action section
01:39:46 - Footer
01:52:24 - Deployment
01:54:56 - Performance testing
01:55:41 - The end
It's deffo a good practice to have a set of pre-defined tailwind classes to use on our components. but as a person who's learning how you do your amazing UIs, it would be so much more convenient for me to have all tailwind classes right there on the component to see exactly what is happening rather than having to take a min and find the class in globlas and analyse it. It's just my opinion/ suggestion. love your videos keep up the great work
For the last month I attend your JSM master class also following you more than a year , I must say that you are the one of the best educator I have ever seen thanks again for such a great content.I will always follow your lead brother❤
Wow, thank you!
And also may I recommend to you will you make e tutorial about stand alone api including authentication pricing and logging logic using with NextJS 13 inside of the course so that we can learn how to build api and contribute to ours portfolio.
@@javascriptmasteryhey bro I have a work for you
We are a team of experts in copywriting, graphic design, website development, design, interior design, translation and we want to do partnership with you in this partnership you have to get clients and we will fulfill their requirements and in order to refer client to us we will give you commission
hey bro I have a work for you
We are a team of experts in copywriting, graphic design, website development, design, interior design, translation and we want to do partnership with you in this partnership you have to get clients and we will fulfill their requirements and in order to refer client to us we will give you commission
learnt so much from this project, thanks for making it explanatory as always.
"Great video! Looking forward to more tutorials on Next.js projects, especially ones related to inventory management. Your content is always top-notch!"
More to come!
I just wanna say thank you very much for this project, I have learned a lot
and I also made some changed to make sure that I understand the layout well and improve my design skill
finally I have used this as my landing page for my own website! it turned out really wonderful !
Genuinely loved your video..keep going! Yours skills are really commendable...subscribed already!!
Awesome tutorial. Completed it without any issues & really enjoyed the way you explain things. Thank you!
Did you downloaded the public folder from github
@@jyoticharan4881 That's one way to do it. He also provided the google drive link for the public folder on his github gist. The only file missing is the favicon, but that doesn't affect the build itself.
Completed the video and it was such a great experience learning from you. I really enjoyed the layout and the clean code part which I wish myself to work upon on the future projects I will be doing, thanks and cheers 🥂
I already watching it right now. A very informative tutorial especially for those beginners like me. Love from Philippines bro! Thank you for creating this.
Awesome, thank you!
It was an amazing build, I learned a lot, and the code structure was super clean, keep bringing more stuff, and make a portfolio app just as simple
What are the pre requisites for making this project?
Thank you so much for providing such a great tutorial (added my own little drawer nav at mobile and will create a new social media link in index!)
Im bless that I found this channel!❤
plz bring video on LMS (Learning management system) site using MERN stack.
Will do!
Please bro
@@javascriptmasteryplease !!
yes bro ❤
Awesome! You are a legend, thanks for your lessons. 🥳🚀
My pleasure!
These videos are AMAZING! Only thing I was wondering if you could make these videos in 1440p so I it would work better on my monitor.
This video is fantastic! I learned a lot of things. Thank you so much.
You are the best!💪
In addition to Frontend, I study English from your videos!
You pronunciation is just excellent!
Thank you so much ❤
Thank you! 😃
Phenomenal build, thanks for the video.
I'm a huge fan of your channel. I really appreciate your quality content. I am actually going to buy your NextJS course and I have no doubt that I will learn awesome things!
As an idea for a future project, maybe something different...for example, a timesheet-type platform for employee would be interesting to approach. using new technologies - next js 13.5, clerk, tailwind, shadcn, appwrite/supabase or mongoDB.😉🙏
If you made another part for animations that would be amazing but already this looks super good thanks for the tutorial.
I really like the way u now teach how to do something and explaining it keep it up
you are the best content creator in field of Next.js, I have started watching your videos since last 7 months. and am about to complete REACT soon, with Next.js in a bit of time
Welcome aboard!
Brooh... Your tutorials are awesome 🤩
Another high quality Course! 🤩
Thanks! 😃
Thanks. It’s fantastic lesson 🎉
Great Work! Thank you sir.
Just completed. And I can still recommend it as other JSM projects👍
always waiting for your video
amazing learning website
thanks for this amazing knowledge 🔥👍🏻
Thanks!
Great as usual❤
Thank you so much 😀
Hi! Thank you for this amazing project.
Glad you like it!
i fell in love with nextjs bcz of you thanks
That's the goal 👌
Thank you so much for the great content
Came here as soon as i got the notification. I believe this is going to be fun
Enjoy!
Good as usual. Bring more tutorials on react native..
hello sir, amazing content as always but there is no public folder zip as in the description as you have mentioned in the video
You are awesome. Wishing someday I can be as good as you. Thanks for sharing the knowledge and skills.
I appreciate that!
love your vids. please make a video on study management system system, cheers!
Noted!
you are so amazing adrian thank you too much 🤩🤩🤩🤩
No problem 😊
Big love sir you never disappoint me you always bring new ideas ❤❤❤❤❤
Thank you! Cheers!
please if you can give clarification on what is going on between JavaScript and Rust.... I want to know if I should learn Rust or Golang as my second programing language. I was planning to learn Golang before but i don't know if I should chose Rust with what I'm hearing concerning rust and JavaScript
Thank you so much
This video is very helpful for students like me
Wonderful project Mate. ❤
Would you please create a project management application using React and NextJs? Something like monday or similar.
Thanks for the idea!
Next video on an ecommerce website please and in the mean time I'll be practicing this one ❤
Coming really really soon! :)
Thank god you exist!
Very awesome !!
Thank you! Cheers!
To make the Hero content in the center with the side margins, did you put a 1440px Max container?
Starting from the start of the video, I'm already feeling excited on this project😮😮
Hope you enjoy it!
Great work, am just wondering where can i find the new favicon ?
Thanks buddy 😊🎉
Welcome 😊
Thanks ! You are really legend
You're welcome!
I'm curious, why in global.css (at your pre-selected classes) you use different text syntax, like "camelCase", "kebab-case" and "snake_case". It is quite confusing as I used to keep files consistent. Is there a reason for that? Like some pattern or smth?
One of the best web development channels I have come across. I am currently working on my own project based of your Threads clone and it is looking great.
Btw, is your Discord link expired? I am unable to join, it says invite invalid.
Check now :)
this man is great
Which extension do you use to get those little coloured squares preceding the classnames inside your code?
Damn how did I miss this, dang I got to step up my game lol frr
Man I can't find the zip file of public folder in the description where is it?!
This is fantastic! If I were to use some of this as a starting point for my website how would you want me to give you credit? Would you prefer a link to the repository or a link to this video? Thanks man!
Hi Adrian, will the Nextjs13 course be in sale again?😅
how do you stick the navigation bar to the top though? when the user scrolls down the page, they cant navigate to other pages unless they scroll all the way up
Thank you! I've learned so much from your channel, and now I've started my own.
Feel free to join me on my teaching journey!
Thank you! Will do!
Thanks a lot !
You are welcome!
at 44:37 you have:
But I have an error which says the first button does not have icon prop included
Option ‘-resolveJsonModule’ cannot be specified without ‘node’ module resolution strategy.ts error on typescript tsconfig.json file, should i change the moduleResolution from "bundler" to "node"?
Every time jsm provide globals.css file , atleast on tutorial like this where purpose is to create UI / UX every thing should be styled from scratch, this is helpful in learning
Bro, have you considered including a single-product selling website in our upcoming project, as a startup venture?
Cool idea!
before copying your global.css and tailwind.config my tailwind properties works find, but after copying it don't work. why? anyone?
Hi. Some classes arent defined in the global.css how do i make sure all of them are correctly defined ? Im suing the global css used in the github link itself.
Amazing. Can you build a full stack next project with Typescript along with redux.
That will be very good for beginner like us
I agree!!!
Do you need to install Nodejs and TailwindCSS on the server in order to display this site?
I followed the whole tutorial, and built the full website, and looks awesome. I have been looking at how to animate the image carrousel, but no luck so far. Can you please guide me or show me the code to animate the image gallery, please.
You are the best❤
You are!
thank you for this video!
Could you make a video with next.js and redux toolkit?
No need to use Redux with Next.js :)
your explanation is awesome, One request can you explain through a video of backend from scratch, Love from INDIA
Noted!
🎉 thank you
You’re welcome 😊
Exists a big difference to do this in Next.js 14? Btw, u are incredible man.
Its amazing
thanks you
Please bring video on learning management system (LMS) using MERN Stack. I'm big fan of you man..❤
Noted
❤ awesome
Thanks!
i can t find the zipped public folder on the descreption
can you make a good video to build a website with cms incl. hosting? maybe payload? that would be cool
30:39
saving for later
This is some really good content but its impossible to keep up with if we are coding along. Slow down for us trying to code along and still comprehend 🙏
Nice job. How do you get the UX UI design you work with?
Find it on UI8 or Dribbble
thx
Can you add framer motion for the design
Thank bro
Thank you for watching!
ThankYou
Sir is your React.js MasterClass Over I didn't find it in your website??
I've been struggling with the hamburger menu display. Done several attempts to make it functional with no success. Anyone knows a good tutorial that will align with this one to learn how to do it? Thank you.
Hi , excuse me can you share your vscode extenstions?
About mouse courser .
I tried hosting multi-page website on hostiger all the pages did not load
add
"lg:[&>*:nth-child(2)]:rounded-5xl"
in the parent div of element to get rounded corners in the second image in large devices.
My perfectionism wont let me ignore it🙂
How am I supposed to create a new page if there is no pages folder?
Zip folder is missing.
I love the websites you make, but everytime I try to deploy them, there's 150+ eslint errors and I'm not sure how to fix them.
Please create a video for nextjs and nextra. ❤
Please make a video about how to create payment gatewao
my globals.css is not working the components cannot be used , what to do