React Website Tutorial From Scratch - Responsive React Js 18 & React Router 6 Project Tutorial

React Website Tutorial From Scratch - Responsive React Js 18 & React Router 6 Project Tutorial

In this practical beginner react js project tutorial, I'm going to teach you, step-by-step, how to build and deploy a complete, modern, responsive react website using react version 18 and react router dom version 6. Throughout this project tutorial, you will learn how to create react apps or websites using react 18, how to use react router 6 for your routing, how to create re-usable react components, how to use the react icons library in your react projects, some react js best practices, how to use react hooks (useState), how to add easy contact options on your website (Facebook messenger, WhatsApp, and email), how to build responsive react website using css media queries, how to use CSS variables for easy theme customization, how to use CSS transitions and keyframes, how to use CSS3 flexbox and grid system, and more!

This is a Beginner React JS project tutorial. No prior react knowledge is required, as I will be explaining every step along the way!
Now let's build The Best React Website Project on YouTube!

Timestamps:
00:00 Intro (Project Overview)
12:03 Buying Hosting & Free Domain Name
15:03 Create React App & Project Structure
30:40 Responsive React Navbar & Routing (React Router Dom 6)
41:07 General CSS Styles & Variables
01:25:00 Main Header Component
01:43:00 Programs Component
02:06:25 Values Component
02:17:07 FAQs Component
02:32:30 Testimonials Component
02:50:45 Footer Component
03:01:47 General CSS Media Queries (Responsive Design)
03:04:50 Home Page Components Media Queries
03:15:35 About Component
03:38:50 Contact Component
03:46:24 Gallery Component
03:53:30 Not Found Component
03:56:24 Plans Component
04:05:10 Trainers Component
04:20:27 Adding Background Texture
04:22:30 Deploying To Hostinger's Fast Server

#reactjs #website #tutorial

[blackopss]

This is what a production-grade project looks like. I learned so many things from your design pattern of the webpage.
✅ Day 1: 1:01:54
✅ Day 2: 3:15:13
✅ Day 3: 4:23:00
Finally Completed the project🎉🎉

[dfuzatorul]

Thank you for taking in consideration my suggestion to do some more React based Projects!
This kind of projects are very useful for people that are trying to learn more about Front-End.
Thanks again and keep it up!!

[olurotimiwilliams]

Your workflow is better than most if not all I've seen, and you're very meticulous. Thank you for this video. One plate of jollof rice for you!

[TravisKowalenko]

This is my second react project i've done through your tutorials and I am blown away with your work flow. Thank you for your efforts and being along on the journey with us who are students!

[mikenorthwood]

Thanks a lot for the video, it helped me learn many new things.
Just a few notes:
*under 1080px and over 1024px the page breaks because of the footer
*you can take advantage of using 'auto-fit in CSS grid, it will make responsiveness easier to implement

[josecardons]

I wanted to take a moment to express my sincere thanks for creating such a fantastic video tutorial. Your expertise and attention to detail really shone through in every step of the tutorial, making it incredibly easy to follow and understand.

Thanks to your hard work and dedication, I was able to learn in no time at all. I truly appreciate the effort you put into creating this tutorial, and I know that I will be able to apply what I learned in my future projects.

Once again, thank you so much for sharing your knowledge and expertise with the world. Your tutorial has made a real difference in my life, and I'm sure many others feel the same way.

Best regards

[Ed-xyjf]

I didn't even started the video yet, but I wanna thank you for this project. Your work have been a great way to study these technologies. Thank you!!!

[poisedhoneii]

I really love your teaching style! Can you please create a video on how to attach a full stack live demo to a portfolio? Like if you click on "Live Demo" it takes you to a new page built with react and python or any language? I'm not sure how to create multiple pages to show the projects I worked on.

[MGdriver]

Thank you Egator. You're a beast.

It took me a few days to get through this. But I'm proud to say it followed it end to end (I did use AWS amplify to deploy it).
I needed this to create react js skills within myself.
I had a job interview last week. Ultimately they said no. I know it was because my react skills were low. But I promised my self, that will never happen again.
I will be ready for whenever the next react interview is.

I really appreciate you taking the time to make this. I learned a great deal. I'm going to go through more of your tutorials!
Subscribed!

[konradhylton]

FYI, Swiper which is used in the testimonials section has some bad docs and didn't mention that they changed how to import when it changed versions. If you're having trouble use the code below

import { Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react'



import 'swiper/swiper.min.css'
import

[thewebspatialist]

I am just about to start the tutorial...from your previous tutorial, I have appreciated your teaching style. Thank you.

[virajghadge]

Thank you EGATOR ❤️ always learning from you and your design concepts also help me improve my designs!

[piuspolocha]

I will be very glad of you create a website that have admin and user dashboard at the same time which less routes on the website
Thanks you the best so far

[mkwaliyo]

Your tuts are just very straight forward.

[Dragulamp]

Maravilloso tutorial. La verdad que me ha motivado a crear mis propios proyectos, muchas gracias. Veré de conseguir los cursos en Udemy de ser posible
Saludos

[KwameGyanko]

Blessings to you country brother. Now starting on my coding journey

[tapantorbangla]

Thanks for your tutorial. It helps me a lot to understand grid concept and color variable..

[awaisrajput]

Amazing brother u don't know how much this video help's beginners
💕💕

[KiKEEkikee]

I followed from the beginning until the end; it is straightforward; thank you! I really gain valuable knowledge!

[udayan]

Love this tutorial. This tutorial is very helpful for us.