Build and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSS
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 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
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!
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
Genuinely loved your video..keep going! Yours skills are really commendable...subscribed already!!
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 !
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?
Im bless that I found this channel!❤
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!)
Awesome! You are a legend, thanks for your lessons. 🥳🚀
My pleasure!
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!
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.
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.
This video is fantastic! I learned a lot of things. Thank you so much.
Another high quality Course! 🤩
Thanks! 😃
If you made another part for animations that would be amazing but already this looks super good thanks for the tutorial.
Brooh... Your tutorials are awesome 🤩
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.😉🙏
I really like the way u now teach how to do something and explaining it keep it up
Great as usual❤
Thank you so much 😀
always waiting for your video
amazing learning website
thanks for this amazing knowledge 🔥👍🏻
Thanks!
Thanks. It’s fantastic lesson 🎉
Great Work! Thank you sir.
Just completed. And I can still recommend it as other JSM projects👍
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..
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 👌
love your vids. please make a video on study management system system, cheers!
Noted!
plz bring video on LMS (Learning management system) site using MERN stack.
Will do!
Please bro
@@javascriptmasteryplease !!
yes bro ❤
Thank god you exist!
you are so amazing adrian thank you too much 🤩🤩🤩🤩
No problem 😊
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!
Thank you so much for the great content
Very awesome !!
Thank you! Cheers!
Great work, am just wondering where can i find the new favicon ?
Thanks buddy 😊🎉
Welcome 😊
This video is very helpful for students like me
Next video on an ecommerce website please and in the mean time I'll be practicing this one ❤
Coming really really soon! :)
Big love sir you never disappoint me you always bring new ideas ❤❤❤❤❤
Thank you! Cheers!
Damn how did I miss this, dang I got to step up my game lol frr
Wonderful project Mate. ❤
Would you please create a project management application using React and NextJs? Something like monday or similar.
Thanks for the idea!
Starting from the start of the video, I'm already feeling excited on this project😮😮
Hope you enjoy it!
Thanks ! You are really legend
You're welcome!
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!
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
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 :)
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
Thank you so much
Man I can't find the zip file of public folder in the description where is it?!
thank you for this video!
Could you make a video with next.js and redux toolkit?
No need to use Redux with Next.js :)
this man is great
To make the Hero content in the center with the side margins, did you put a 1440px Max container?
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!!!
Hi Adrian, will the Nextjs13 course be in sale again?😅
Please bring video on learning management system (LMS) using MERN Stack. I'm big fan of you man..❤
Noted
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.
Bro, have you considered including a single-product selling website in our upcoming project, as a startup venture?
Cool idea!
Exists a big difference to do this in Next.js 14? Btw, u are incredible man.
Which extension do you use to get those little coloured squares preceding the classnames inside your code?
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!
your explanation is awesome, One request can you explain through a video of backend from scratch, Love from INDIA
Noted!
You are the best❤
You are!
at 44:37 you have:
But I have an error which says the first button does not have icon prop included
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?
can you make a good video to build a website with cms incl. hosting? maybe payload? that would be cool
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🙂
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 🙏
❤ awesome
Thanks!
i can t find the zipped public folder on the descreption
Animation on the Camp section please please please please 🙏🙏🙏🙏🙏, I LOVE YOUR WORK
Can you add framer motion for the design
Its amazing
🎉 thank you
You’re welcome 😊
Sir is your React.js MasterClass Over I didn't find it in your website??
Nice job. How do you get the UX UI design you work with?
Find it on UI8 or Dribbble
Please create a video for nextjs and nextra. ❤
Do you need to install Nodejs and TailwindCSS on the server in order to display this site?
Bring TDD and BDD testing in react application using frameworks (Jest, Jasmine (
Can you please make a video tutorial about expo using firebase for crud operations.
Cool idea!
Zip folder is missing.
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
make a portfolio in next js 13.5 ts tailwind CSS!!!! like your react js portfolio It's amazing work
Thanks for the idea!
Hi, As always excellent, to the topic video. I am beginner to react / next. I saw couple of videos saying express is dead now, If you can guide on this. Keep posting great content. Thanks.
Use Next.js :)
bro he's lying express is not dead
Please make a video about how to create payment gatewao
Soooo... How the button works? like how to make it do stuff on click since its a separate component like lets say Button on click hide or
you can add onClick props on the component and then pass the method to that prop for example you can just do console.log
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.
Hi , excuse me can you share your vscode extenstions?
About mouse courser .
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"?
could you create a package maneger tutorial, yarn, as i m new to web dev.
Please can you also make a video for a school management website
Great idea!
before copying your global.css and tailwind.config my tailwind properties works find, but after copying it don't work. why? anyone?
Bro but you deployed the static version , so I guess people need to see how to deploy the whole nextjs application with dynamic server actions ! am i right ?
i like learning from you. you are a great teacher. But, my major challenge is, most times, you already create the CSS styles and classes and most times, we just copy an past them. what if we learn it all from scratch?\