Travel Website using React JS | Vercel Deployment | 10 Days of Learning React JS # 10 🔥
Hey Everyone! In this video, we're diving deep into creating a visually captivating and responsive landing page for a travel website.
Throughout this series, we've covered various concepts and techniques, and now it's time to put them all together.
But that's not all! We'll also walk you through the process of deploying your React app to Vercel, making the final step of sharing your creation with the world incredibly simple.
Chakra UI : https://chakra-ui.com/
Chakra Templates: https://chakra-templates.vercel.app/
CSS Gradient Generator: https://cssgradient.io/
Transform tool (ts to js): https://transform.tools/typescript-to...
"10 Days of Learning React JS" Playlist
Click here: • 10 Days of Learning React JS 🔥
"JavaScript Complete Course For Beginners" Playlist
Click here: • JavaScript Complete Course For Beginners
"HTML Complete Course For Beginners" Playlist
Click here: • HTML Complete Course For Beginners
"CSS Complete Course For Beginners"
Click here: • CSS Complete Course For Beginners
"Send Email Using Node Js"
Click here: • How to send Email using React JS | Nodemai...
"Read Google Sheet in React Js"
Click here: • Read Google Sheet in React JS | Google She...
"Responsive Website Using HTML and CSS Only"
Click here: • Responsive Website Using HTML & CSS Only |...
"Responsive Navbar using HTML and CSS Only"
Click here: • Responsive Navbar using HTML and CSS Only ...
"CSS Animation Card HTML and CSS Only"
Click here: • CSS Animation Card | Easy Tutorial | HTML ...
If you want to know the trick to send the "Blank message on Whatsapp"
Click here: • How to send blank message from WhatsApp | ...
Click here to Subscribe Callback Coding:
/ @callbackcoding
Source Code: https://github.com/callbackcoding/Tra...
TIMESTAMPS
00:00 Introduction
00:18 Demo of website
01:09 Create react app
01:40 Run react app
01:55 Creating component
03:22 Remove unnecessary CSS
03:36 Reuse Components
04:29 Chakra UI (Library)
04:39 Install Chakra UI
05:50 Chakra Templates
06:10 i. Navbar
07:20 Install Chakra icons
07:38 i. Navbar (continue)
07:47 i. Navbar (modify)
13:18 ii. Hero
14:10 ii. Hero (modify)
14:19 How to import images?
14:38 ii. Hero (modify)
16:48 CSS Gradient
17:30 ii. Hero (modifiy)
17:56 iii. Companies
20:10 iv. Top Destination Section
22:33 Install React Icons
22:46 iv. Top Destination (continue)
25:12 v. Travel Point Section
29:13 vi. Features
32:37 vii. Testimonial
34:28 viii. Newsletter
36:12 ix. Footer
37:50 Create other pages
38:45 Add path to Navbar
39:27 Reuse Components in other pages
40:07 Deploy on Vercel
41:43 The End!!
If you guys have any query or suggestion for me, feel free to comment and subscribe to my channel. Thanks
SOCIAL LINKS:
Instagram ➤ / callbackcoding
Facebook Page ➤ / callbackcoding