React Responsive Real Estate Website Tutorial Using ReactJs | React Projects for Beginners | Deploy
HTML-код
- Опубликовано: 13 июн 2024
- In this Reactjs project, we will make an awesome responsive real estate website step-by-step. We learn React hooks, modern CSS, framer motion, and many more. We will use the Swiper js library for the slider to make this site more functional and practical.
No prior knowledge of react is required to follow this project. The project is surely suitable for beginners.
Fullstack version: • React Full Stack Respo...
Demo: real-estate-web.pages.dev/
📚 Materials/References:
Starter pack: github.com/ZainRk/RealEstate-...
Complete Source Code :
/ zainkeepscode
www.buymeacoffee.com/zainkeep...
Time Stamps 👇
00:00 Intro
05:00 Installing Requirements
13:40 Header
26:50 Hero
53:00 Companies
55:40 Slider/Residencies
01:17:38 Value
01:36:21 Contacts
01:51:45 Get Started
01:57:21 Footer
02:01:40 Making Responsive
02:26:25 Animations
02:30:10 Deployment
More Tutorials:
React Responive Portfolio Website tutorial:
• React Responsive Portf...
Reactjs Tailwindcss Music App Landing page:
• Animated React Website...
Reactjs Ecommerce Store tutorial for beginners:
• Ecommerce Store Tutorial
React Sidebar Tutorial:
• React js Sidebar | Ani...
INSTAGRAM :
/ zainkeepscode
FACEBOOK:
/ zainkeepscode-10757083...
#reactjs #fullstack #webdevelopment #zainkeepscode
The arrangement of the project is just ughhhhh from the top to bottom and his teaching is so clean and not to mention the shortcuts so helpful
1:03:18 i am getting no output for carousal (Swiper ) any solution ?
only started to watch this video, but I already happy with it: NO cra, just vite and author made special starter pack for this project, detail explanation for dependencies, AND FOR EVERYTHING. thank you so much. liked and subscribed
Great Effort and Good tutorial! Looking forward to the full stack version.
Easy to learn and Thanks a lot brother for making this tutorial.
22mins into this project, I had to look at your page and subscribe... The way you explain things in details is so awesome!! I really had to comment
I appreciate you using the CLI to execute this project, reminds us self-learners that knowing how to navigate our machines is just as important as the language technologies we know
This is absolutely the best tutorial video I have watched so far.... From beginning with clarity.... I wish I knew you before I missed an opportunity to secure a react job... But I'm happy now... I can go further to lookout for more remote jobs.
Should appreciate his effort and time spend on creating the videos and websites for us.. Simple teaching.. Easy for beginners to understand🤩
Thank you for this amazing tutorial with amazing details from your side.
Thanks for this great tutorial. Looking for the full stack project soon ☺
Amazing tutorial. Thank you!
Yes full stack, back-end included ❤️
Thank you very much for taking the time to share this top content, the project was great, congratulations to you, hugs!!!
Thanks to your support, I am learning React.js
FUll stack tutorial needed!!
Thanks for this great tutorial. Looking for the full stack project soon 🤩🤩
Your Teaching is so clean. Thank you. So appreciate it.
Thanks
Hey, a great project for beginners with simple logic and almost without functions and etc. A little bit React (few useState / few functions) and a pretty job with pure css. Thank you. See you in the next part :) Hope to see navigation / redux / styled components and material ui.
Finally i got someone to rely on thank you for your efforts! ❤
Welcome
This is a great tutorial, fullstack would be amazing
Nice one. This is a really cool project.
this tutorial is one of the best
way to go !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
great tuto i've learn a lot of new things , thank you so much !
Your welcome 😃
Awesome...completed with so much simple explanations
Glad it helped
A big yes for backend
Love your tutorials
Glad you like them!
Full stack will be so much appreciated
Looking forward to the full stack version.
Good tutorial! Looking forward to the full stack version.
Noted
@@ZAINKEEPSCODE why use state in accordian component is not working when we place use state on top of component?
@@umardaraz7913 the problem same here. 😔 😔
super genius and generous ..... backend next please
goof tuto cant wait for the fullstack version
Your videos are really helpful for people who are eagerly wanted to learn React, but I was hoping what if you make a series on Website Remake of Awwwards websites.❤
@ZAINKEEPSCODE why use state is not working when we place it on top of component according to documentation in accordian component?
This is such a great tutorial, I've just finished the project and learnt so many new things from U, I especially liked how you set up the universal css in the index.css, is so neat and tidy to work with once setup, much appreciated for all of this hard work, looking forward for more to learn in the future! You have a new subscriber!👍👍😊
heyy have you done the whole project?
can you help me when I am running yarn related commands on terminal it is showing error "yarn is not recognised" what should I do ?
first install yarn in your terminal using yarn commands this might solve your problem
@@l.m.t.d6653
@@l.m.t.d6653lmao, just install yarn or npm..
1:03:18 i am getting no output for carousal (Swiper ) any solution ?
MAke it a full stack!!!😍
needed backend too
Awesome bro🔥🔥
📚Please bring backend part also
🙏Guys pls like and share this video
thanks for hard work , make it full backend
Great Efforts Sir Please Bring the Backend Part Also
Great content !!!
Thanks!
Wonderful project!!! i am very excited about future projects. i have totally done this project and also deployed this project.
thank you very much for this wonderful tutorial and guridence!!!
Hare krishna
Harsh Sharma
at 52:45 if you don't see a gradient it is because of the z-index of the header and Hero section so what you need to do is in the css make the gradient a z-index of 2
Thank you so much bro
Thank you so much!!!!!!!!!!
ok bro its working
Full stack needed!!!
Great Video!!! Please make Full Stack Version of this.
Excellent video! help me too much. do also tutorials fullstack.
Amazing bro👍👍
Thanks ✌️
Dear brother, I extend my heartfelt gratitude to you! Your mastery is truly exceptional. May Allah bestow His blessings upon you and your channel, leading you to achieve all your dreams. Wishing you peace always.
Thanks for the wishes :)
@@ZAINKEEPSCODEit's very important error
This tutorial is really help full sir please make the full stack application on the website. Thank you so much
Very nice project sir
thank you for your amazing tutorial, may I know, is it any plan for back -end tutorial?
buttons no displaying 1:15:00
Ufff I love this video!
Well done 👍 look excellent is creative design
Thanks!
Great effort zain, keep it up.
Is it possible for you create same website in Angular ?
Is it possible for you to explain in Hindi as well in videos ? i think if you do that, more person will view. its suggestion.
Another problem after using the outside click the hamburgee menu option to disapper the menu item not working o had to click on the outside to make it disapper. Before implementing the outsideclick the hamburger menu was working but after that its not
what is the logic behind when I clicked on header section as like residencies, value, contact us, get started , after clicking one of them it goes to that section but also scroll the above and below of that section and see all the UI or section please help me , I didn't getting on my project.
fullstack would be amaziing sir eaglery waiting for full stack course
WHAT A TUTORIAL!!!!!
Backend please!
Thanks
Soon
at 1:22:00 how is the image container class which is in hero working in the value.jsx file
adorei seu video, não falo ingles, mas com legenda do youtube e a maneira que você fez, fica muito fácil de entender
thank you!
At 2:07:32 I also had to use z-index: 100; to ensure that the h-menu was in front of all other elements.
Thank u so much
Thank you so much!!!!! really appreciate it
Were you able to complete the project successfully following the tutorial?
Does it provide references to all the resources used i.e.images, icons, animations?
At 01:34:57, useState hook is used in map Method. React 'useState' hook cannot be called inside a callback.
I have tried the same way but compiler showing error.
Could anyone help for the same
hey are you able to solve the above mentioned problem? i am getting the same issue.
AWESOME
Thank you! Cheers!
Yes sir plaeese make the backend part also
Thank you. God bless you, dear.
You are so welcome!
@@ZAINKEEPSCODE Now I'm seeing your Full stack project on it. I appreciated and liked your teaching method. I think, you always try to understand what audiences really want to learn and how. You are awesome. Thank you again,sir.
hello borther please help me im uable to apply flexcentre and padding in the header
We need a tutorial like this but connected to API and functioning search bar 😉
Noted!
Yess please
NICE JOB
Thanks!
at 1:15:21 buttons are not visible it is hidden behind the container how to fix it
any solution
You are superb broo❤
Thanks
Yes for back-end
To manually create a React app including TSX can i just use npx create-react-app my-app --template typescript?
thanks a lot
Thers a problem in the code first of all the usestate cannot be used inside the return thats why ita showing an error. So you have to write it before the return despite writing that the shadow of the accordion is showing only for the last accordion, i.e whenever you expand the third accordion you will see the shadow only for the third one and also for the collapsed 1st and 2nd one but whenever you exand the 1st and the 2nd accordion the shadow will disappear.
I am facing some problems with slider.json file. The image is not rendering on the webpage and because of it I can't see the working of other components. Please can you help me with it.
At 1:33:14 the method of styling the icon described here didn't work for me i.e. adding a blue fill with padding of 10px and border radius of 5px around the icon. Instead of a uniform blue fill around the icon, the fill took 100% of the maximum width of the available space on the left/right of the item heading (primary text). To correct this, I placed the {item.icon} and MdOutlineArrowDropDown size={20} between a . Thereafter, I added a className = iconButton and styled the .iconButton with border: none; border-radius: 5px. The icons then appeared exactly as they should do in the tutorial.
can you show the code .. it's sounding good to me.. @gavinkalaher7314
Yes 🎉🎉🎉
Is expand/collapse state working for you? Is there any error? however, in the demo, it also doesn't collapse.
great
@ 1:31:27 the border of the accordion item is not going, anyone plz help
the best
#zainkeepscode, sir 1:44:47 when we change the hi2 that not work, again the error mssg display the browser.... why????????????
i am having issue of h-menu overflowing towards right side ,any solutions for this?
can u make mobile menu ..like that where it cover the whole screen and slides from one side. that would be great for mobile part ..pls cover this in your next video ok..
how to add swiper libarary in this project bro. When I add swiper.css in residencies.jsx. plz solve this problem. thanks for ur sharing this react project.
need full stack !!!!!
from where you got complete design ?
thanks
Welcome
Hello ,
My name is Youssou Diallo , and I am currently a student in information management. I recently watched your tutorial on creating a comprehensive website on the theme of transportation, and I find the content very informative and well-explained. Considering the development of a thesis project for my third-year license, I would like to seek your permission to use your tutorial as a foundation for developing a similar website.
Certainly, I commit to crediting your work appropriately in my thesis and adhering to any conditions you may have for the use of your content. If you have specific guidelines or preferences, please feel free to let me know.
Thank you in advance for your response and consideration.
Please bring its backend tutorial man.
Do you have a full stack e-commerce website app maybe with MERN
Yes for backend
Noted
1:06:26 display of photos is not in center what mistake am i doing i dont know
Hello sir thanks for this wonderful video but in demo project you have added the function to redirect one to another but in this project you have not completed that as you said in starting of this video that in the anchor tag in href you would add latter but you forget to do that please update
I too want to know about that.. I am stuck at that point.. And I have 1 more question Do I need to write media query for every screen size? because in my phone the deployed version of mine project is not so responsive..
At 1:51:03 changing "flexColStart row" to "flexStart row" did not work for me. Instead, I used and placed two cards within this div. The method was then applied to the next two cards to create the second row.
Can u send details I didn't get in mine also not working using those css
yes we want backend
At 52:10 unfortunately, the white-gradient with blur effect only appeared within the Header as a horizontal rectangular strip rather than as a square in the Hero section as intended. Triple-checked my code, and everything matches exactly. Has anybody else encountered this problem?
Solved by @floppitommi7969 below. Adding z-index: 2; to .white-gradient fixes the issue.
thank u so much @@gavinkalaher7314
very good and inspiring work, only that I had an error in the part of the button of the carrucel, it appears that it is positioned in the place that it should according to the video, at the top right, but it cannot be seen. HELP !!
i set it to be top:0
same issue facing,, as i set my top property it just disappear and come top of the head section text and not able to click on that.. help plz.. have u solved it.. ? @lex8699
hmm i am also thinking to set to 0 .. did it worked after this everything as output @@real_deal3336
bro can u inform about extensions you use
we can not call state in call back function
For anyone whose h-menu disappears when they comment out the pages at 2:07:08, change the position to fixed and it will reappear. I've since changed it back however for the duration of the pages being commented it, I had it set to fixed
bro you are the man I wasted my 20min on that only .thanks.