React JS Project | Build & Deploy Complete Responsive Website in React Step by Step Tutorial

Learn how to make a complete website using React JS. Build college / university website in React JS step by step tutorial.
👉 Live Preview: greatstack.in/
👉 Source code: greatstack.dev...
SUBSCRIBE: ‪@GreatStackDev‬
❤️ Complete JavaScript Course with Certification:
👉 greatstack.dev...
✔️ Beginner + Advance + ES6 + Notes
✔️ 30 Project With Source Code
✔️ React Beginner course with project
✔️ Course Completion certificate
✔️ Chat Support
In this tutorial you will learn to build and deploy complete responsive website using React JS. We will create a college or University website in this tutorial. This website will be completely responsive and we will add react smooth scroll, slider and working contact form on this website. You can receive the contact form enquirers on your email address. This website will be a great react project for beginners.
Download Assets: greatstack.dev...
Get web hosting and domain:
👉greatstack.dev...
Watch Full Stack E-commerce Website tutorial:
👉 • How To Create Full Sta...
-----------------------------------------
Suggested Course:
Complete JavaScript course with 30 projects:
👉 greatstack.dev...
Complete HTML and CSS with 8 projects:
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Beginner's HTML and CSS tutorial:
► • HTML And CSS Tutorial ...
Beginner's JavaScript tutorial:
► • JavaScript Full Course...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------
Stock Image and icon credit:
pexels.com
Stock video credit:
www.pexels.com...
-------------------------------------
Connect with me:
👉 linktr.ee/iama...
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

[@GreatStackDev]

👉 Live Preview: greatstack.in/ 👉 Source code: greatstack.dev/go/edusity

[@ajiteshmishra0005]

Please create one video on JWT authentication in ReactJS or NodeJS in such a way that any beginner can understand and can get a full explanation from scratch to advanced.

[@waleedraja3566]

one of the best channel to learn react html css javascript etc, for better than many other

[@rockstargamingpranav440]

Code with Harry laughing in corner 😂😂

[@cosmicentity7821]

@@rockstargamingpranav440 wo projects bht kam bnate hai mere bhai

[@christophermawela3318]

I'm learning, HTML, CSS and JS after learning Javascript basics from a set of mixed tutorials, here I learnt all these basics in one tutorial from Javascript Course for Beginners including 30 days Javascript project, by far this is the best channel...

[@AnujGupta-10]

You could have made the slider dynamic instead of repeating the same slider container . So that We could also get the idea how to make the website more dynamic. @ 1:29:35

[@ABHISHEKKUMAR-kb2yp]

one of the best channel for learning programing languages with the help of project. If i say particular about this project you have cover hooks, one having little knowledge can understand the hooks that are used in this project like me. I have recently started learning react, with little knowledge of hooks i can understand why you have used all those hooks and the functionality of props. Great thnx for your effort towards us❤. This is called industry level project that anyone can mention in his or her CV.

[@hbtuian8205]

Bhai can you please give me source code

[@hindikhaniachiachi]

Sir your all programming language video is amazing easy to understand any video thank you sir 😊

[@yp_016]

Again Thank you so much SIR for Form Explination 2:07:38

[@leonardozasou]

you're the best!!! done!!!

[@GreatStackDev]

I'm so glad! Thank You. Keep coding.😊

[@SuperArnie1974]

Excellent Tutorial saved me a lot of headache easy to understand thanks

[@GreatStackDev]

Glad it helped! Thank you! 🙂 Keep learning.

[@unknownff_04]

You're helping me for creating frontend of my hackathon Thank You !!!

[@researchbag8960]

Can I add this project in my resume after adding some extra features component.

[@haseehaider14_]

Great bro, loved your video! Continue making this type of projects.

[@CAPSL0CK181]

hey i'm having a problem related to this project can u pls help me?

[@عبدالقادرعبدالرحمنعبدالله]

you finally made a great move from using vanilla HTML and CSS to use of frameworks like reactjs.

[@jovan4614]

Can you elaborate?

[@CodeCs_YT]

@@jovan4614 vanilla html css means that pure clean coding (no frameworks like tailwind css or bootstrap)

[@TranTrong_Quyet]

+ tailwind would be perfect, very good video btw

[@GreatStackDev]

Glad you liked it. Sure, will make something similar with tailwind next time. Thanks for your comment. 😊

[@robeltab2603]

@@GreatStackDev I'll be waiting for that tutorial

[@eloquentsites]

This tutorial is very detailed and straight to the point

[@chrleeen]

22:46 Hero 32:08 Program 52:14 About 1:01:25 Navbar background when scrolling 1:10:00 About Title 1:11:15 Campus 2:08:00 Footer 2:11:37 Scroll Feature (clicking to scroll to the section) 2:19:00 Device compatibility (media query)

[@SamiaSiddique-mf2np]

You made my day This project is very helpful is just like that I learn react now. Please make a video on express and full stact web developement projects

[@johncletus4174]

This is one of the best programming videos I have watched

[@StutiMajumdar]

Hey, @GreatStackDev I am facing an error in beginning its showing Reference error Hero is not defined at App.jsx, I am a beginner could you please help?

[@Amaankhan-mu3ve]

which vs code color theme you used in this video???

[@kyushii1921]

Very nice and understandable video! Thank you so much! But I have one bug still going on. If I dont pause the video by myself and close it, i can still hear the music and its probably still running in thebackground. how can i fix that? Thanks!

[@visitingkatrin5620]

It was cool. U are best, thank u so much❤

[@alonglongchar]

Great Job buddy, keep it up 👍👍👍

[@GreatStackDev]

Thanks 👍

[@samuelopeyemi4032]

Hello @GreatStack, You are really wonderful with your lecture, because you've mase me understand react better. Many thanks for that. Please, if i want to link each sections in the program to another page, how do i go about it? Thanks, in anticipation.

[@estefi-zak]

Hello GreatStack!! I love your tutorials!! Is it possible for you to teach us how to make a page with React and Tailwind? Please!

[@silk4462]

how can i make the slider go to the beginnnig again once it reached tx= -50? thanks!

[@diwakerkanojia7219]

Your explanation is very good. Can you upload a course of react js plss in Hindi from basic to advance

[@JordanOwusu-Appiagyei]

Wow Jus Wow I'm So Happy I found Your Chanel

[@takohisrael]

Hello sir. Wow a good video. Please could you create a video to add on thesame project a "buy" page, where clients can chose a product and pay via "flutter"(mobile money) and also an "Training " page where some one can select a course he/she wants to learn and pay for? Please i really need those two pages

[@pyaradeenislam6885]

Slide button is not working after one click neither forward nor backward although i have check the code from start of testimonials can you or any one can help in that?

[@youngmind5853]

need to install react router dom in order to route

[@gayathribr4038]

did you corrected it?iam also having the same issue

[@losbur5416]

@@youngmind5853 const sliderRef = useRef(null); let tx = 0; const slideNext = () => { console.log("next"); if (tx > -50) { tx -= 25; } sliderRef.current.style.transform = `translateX(${tx}%)`; }; const slideBack = () => { if (tx < 0) { tx += 25; } sliderRef.current.style.transform = `translateX(${tx}%)`; }; William Jackson Edusity, USA Choosing to pursue my degree at Edusity was one of the best decisions I've ever made. The supportive community, state-of-the-art facilities, and commitment to academic excellence have truly exceeded my expectations. William Jackson Edusity, USA Choosing to pursue my degree at Edusity was one of the best decisions I've ever made. The supportive community, state-of-the-art facilities, and commitment to academic excellence have truly exceeded my expectations. William Jackson Edusity, USA Choosing to pursue my degree at Edusity was one of the best decisions I've ever made. The supportive community, state-of-the-art facilities, and commitment to academic excellence have truly exceeded my expectations. William Jackson Edusity, USA Choosing to pursue my degree at Edusity was one of the best decisions I've ever made. The supportive community, state-of-the-art facilities, and commitment to academic excellence have truly exceeded my expectations.

[@Hakheem-b8g]

Hello greatStack,,,, a react tutorial just like the js one would really benefit me, kindly, do one for me

[@bhriguvaach]

Thank you very much for this project.

[@GreatStackDev]

Welcome. Thanks for your comment. 😊

[@Doctorkash]

Loving it while Learning!

[@ProsperMugwagwa-y4t]

Thank you for the awesome tutorial Greatstack, any idea on how to add the hCAPTURE functionality??? I saw you added it in the live preview but not in the tutorial. If there's anyone else who knows how to do this please help.

[@avdsuresh]

Hi I am requesting you please make ui designing with react + css/any css frame works

[@petermwansa4890]

Great content. Thank you very much

[@nadiafahmi7013]

Never know how to thank you , really you changed my life .. wonderful ,amazing .. thank you so much

[@MZDesigns-r7l]

Hi! how are you can i get the code for frre please i dont have a money thank you

[@tankbotttanky9737]

Well course is not bad, it helped me to get a react project structure but man, as you teaching ppl that are new in front-end you should tell them that you should not style your webpage by HTML tags at all, thats why you have classes for, if you doing that because that may be little bit faster so course will be not that long, you should mention that to ppl that it is an actual mistake. Even worse is puting your transition on all css properties instead of specyfic ones what is killing your webpage performence when it comes to bigger projects. Also not adding alt to images is a big semantic mistake which will lower you webpage down in searches . I understand its just simple webpage that ppl gona make in training purposes, but still you should awere newcomers about stuff like this

[@muhammadazeem6077]

Hi i know mern stack but i lack professional work. Can you suggest some tutorials on KZbin which do professional coding

[@leviackerman4170]

react js with tailwind would be perfect .

[@krambalos24]

Hello GreatStack, may i ask how can i stop playing video on background when i hide it? i want to retain the audio im waiting for your help i hope you respond to me

[@Kiyanti]

Why creating function expression components and not declaration? Is it important?

[@ZaviButt-e3u]

very informative video i love it

[@venkateshchintapalli2360]

Thank you brother for detailed explaination ♥

[@lavanyasaibollamreddi9959]

@GreatStack Thank you so much for this video! It was very informative and covered all of concepts😊! I have finally completed it successfully!

[@m.gokulakrishnan9730]

you can share your source code pls bro

[@gauravtekude5798]

sir cant import the video from assest folder how to do it then

[@slhliwwa5403]

slider.current.stlye.transform isn't working any solutions ? , console says TypeError: Cannot set properties of undefined (setting 'transform')

[@yashgaglani4771]

not provided the video link used in project

[@ARAVIND.ANTONY]

Super each and every video is awesome,very useful ❤❤❤❤❤❤❤❤❤❤❤for beginners,

[@BhagavadVoice]

Hello World !!

[@rscodeboy]

Hello, World!

[@MrAnonymous84]

window.alert("Hello World!");

[@ዘኪ_Tube]

They had deceived by "hellow world" string huh

[@ti-conmigo]

for the slideForward button a just add a new condition, so if you reach the last testimonial (4th) and clic forward button again it goes to the first testimonial: const slideForward = () => { console.log(tx) if (tx > -50) { tx -= 25 } slider.current.style.transform = `translateX(${tx}%)` if (tx === -50) { tx = 25 } }

[@CAPSL0CK181]

hey i'm having a problem related to this project can u pls help me?

[@touseefahamed5629]

@@CAPSL0CK181 you have he source code??

[@moseskothilli6953]

Can you tell me how to add login and signup pages for the above ui

[@Bollywood-Animation]

Completed

[@esakkimagesh6778]

Great content. Thanks

[@izmirgoztepem]

hello can you make video with tailwind css its faster and easier

[@chikatlajeenu3224]

Owner of great stack can you create new channel for telling the ai tools like chatgpt please brother

[@sakshamgarg9970]

sir isme assest ke photo kese dawnload honnge isme option hi nhi aarha dawnload karne ka sir give me response 🙏🙏

[@khatushyamjitemplesikar.]

yes sir +1

[@kartikeysingh5499]

Can you make a spotify clone using react and by using APIs to fetch the songs dynamically and add the functionality that are in Spotify like play pause seek etc.

[@researchbag8960]

how I can add a login section to this website

[@WillHype]

Man I love this man from the beginning

[@CAPSL0CK181]

hey i'm having a problem related to this project can u pls help me?

[@NwajeiSamuel]

Thank you very much for this content. I can't find the video in the description.

[@ObomheseR]

Excellent project I'm not able to access the web3forms though : (

[@profoundhub1911]

Logo image is not showing during development. Do you have a solution?

[@s-qc9ns]

always remeber to increase your default font size while making videos.

[@sahilmanhotra3769]

Thank you for your amazing video. ❤

[@locuc2616]

very helpful video. thank you very much

[@sahilmane6102]

Hello sir , do you design the website by yourself for this content

[@levan3195]

How to setup a template when clicking new file ?

[@flex959]

How to forward port of php file in vs code

[@OtlotlengMagoleng]

Hello Can you please make a video about API 🙏 🙏 🙏 Thank you very much ❤❤❤

[@BHAVYADHRUV-xh1jl]

can't download assets 502 Bad Gateway nginx/1.24.0 (Ubuntu)

[@RameshRamesh-hf9bm]

Thank you so much sir u teach well

[@User-g5756]

Create a navbar with many dropdowns like amazon dropdowns in a project because many agencies are using these now a days.

[@hamaadafzal2490]

Create website with multiple popup box and more functionality like this

[@esmatullahnoori7418]

thank you I have been making this since yesterday but the toggle button is not working it is going to make me crazy

[@assia6506]

Please the image in the background (after navbar) doesn't work , if you can help pleaseee

[@kelvinasien6532]

The hide-mobile-menu in the className of the ul tag, should be without the (.) ClassName={mobileMenu ? ‘ ‘ : ‘hide-mobile-menu’}

[@Arnab3.12]

Bro, which extention you use ?

[@idevkr]

ES7 react redux graphql snippet

[@hindikhaniachiachi]

Sir please create a video url shortner, amazing interface will be create sir please 😊😊😊

[@AnilKumar-gu5jq]

How to write a description for a React project brother Please tell me😊

[@pulyanaik4370]

Hello sir... please make a project on real estate website by using react js.

[@Islamic-podcastshorts]

Sir where is the college video to attach

[@jackywan6829]

May I know where to download the images which you used in this video?

[@KrishJaiswal-fr6gn]

main props pass kr rhi to error show ho rha

[@kelvinnwachukwu8141]

this is amazing please create another project with typescript

[@ObomheseR]

Thank you very much for this project :)

[@m.gokulakrishnan9730]

you can share you source code

[@Vijay-dz2qt]

Hi, I have made this project but I don't know what should I write in my resume. can you give me the main points about this project which can I put in my resume

[@nishitakhandelwal2893]

Can i add this project in my resume??

[@GreatStackDev]

Yes, you can add it in your resume.

[@ramazigogitidze1588]

Thank you very much bro

[@Vijay-dz2qt]

Hi, I have made this project but I don't know what should I write in my resume. can you give me the main points about this project which can I put in my resume

[@meralkk]

I find the videos you make very useful. thank you for that. I created this website by following the tutorial and shared it on LinkedIn. I added the LinkedIn link to the comments under this video, but for some reason, it was deleted. How can I share this link with you?

[@IT_Insights_Beyond]

sir how to change size of the caption and solve glitch of caption

[@JaGaNezhil]

Super🔥

[@slhliwwa5403]

thankyou so much, where do you get icons and images!

[@Vijay-dz2qt]

Hi, I have made this project but I don't know what should I write in my resume. can you give me the main points about this project which can I put in my resume

[@naimishdwivedi1307]

Thank you so much sir ❤❤❤

[@hassanehsani3051]

Thanks!!!

[@GreatStackDev]

Welcome!

[@siddgupta222]

Sir hmr ky hai or kysa error ko solve kara

[@shoaibsaifi5292]

Sir please make a video on MERN stack also.

[@ዘኪ_Tube]

You are so best but why you have only 1M subscriber w/c means 1 male that is me?!🤭🤣

[@Fifa_931]

how to dowload photos? i cant download

[@yp_016]

Thank you so much SIR for Detail explination of each line of code 1:44:00.

[@greatmomentoflife]

Nice one

[@nhedpidaoc7316]

do you have a backend code for this.

[@touseefahamed5629]

does anyone have this code so that i can easily identify errors it will be helpful

[@lynx7077]

is there any diffence if we use .js instead of .jsx?

[@idevkr]

Yes, in js u will not get sinpet of html which u will get in jsx