Make a React Website with Animations - Responsive React Project Real Estate Design
HTML-код
- Опубликовано: 12 июн 2024
- Learn how to make a React website with animations. This React JS project is completely responsive and focuses on a real estate design. We will use React hooks, styled components, and React Router to create this web design.
Get access to the full content & source code
briandesigns.gumroad.com/l/HX...
Check out this awesome tech gear
Macbook M1: amzn.to/3nBvfkM
Wireless Keyboard: amzn.to/2Wxf5g1
Wireless Mouse: amzn.to/3r6VRfj
Wireless Earphones: amzn.to/3gZlLgt
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Timeline
0:00 What we are building
4:00 Creating React App
9:26 Creating Project Files
10:20 Creating Navbar
48:22 Creating Hero Image Slider
1:28:11 Creating Dropdown Menu
1:43:28 Creating Info Section
2:00:47 Get Access to the rest of the content
Check out my other website tutorials
Build a React Website with Smooth Scroll
• React Website using St...
Build a Travel Site with React, Gatsby, and GraphQL
• Build a Responsive Web...
Build a Gym website with HTML, CSS, & Javascript
• How to Make a Website ...
Some links in the description are affiliate links, which means that if you click on them and make a purchase, I'll receive a small commission.
Your work is too good man, I literally searched the whole web for react projects but you just killed it man. All the projects are awsm
Thanks! glad to hear
Brian, I'd really like to thank you. I've learnt so much React from your many videos.
Thank you so much
Happy to hear that!
Man, you are the absolute GOAT. Being someone just starting out with comp sci, you're a huge inspiration. Thanks for sharing all this amazing content on RUclips!
Thanks!
Please keep making more of such React projects and tutorials on various react topics and packages, helps alot of us in our learning.
Just going through brad traversys react course, and im looking forward to finish that so i can jump on these tutorials to get some practice in, before i do some stuff on my own!! Its great to see you do so many React videos 👌
thanks!
You’re the goat bro. Appreciate you for making these videos 🙌🏼
Truly Appreciate your effort. Keep rocking man!
Please create a Portfolio Website using React.
purchased the second part will work on it later! thank you!
exactly what i needed to continue learning react!
The design is so beautiful and fluid...
Thanks so much for the video, as well as being great at React your CSS skills are boss! CSS is a never ending battle for me 😣
Best Xmas present ever, thank you!
Thanks!
Hey Brian! Thanks for all your uploads of React Js Tutorials, I'm starting to feel comfortable with this technology mostly because of your lessons. Could you start doing some Backend videos also? Great Content!
Thanks Luiz
I do have an entire folder on my PC dedicated to all videos of Brian Design, you are the best
Aye thanks Jimmy!
Did you just admit to illegally pirating his videos ... Lol. He is a creator and it benefits him as well if you watch it on here. Ads could him too.
I have made a new friend who is teaching me (and other thousands of thousands of people in the world) React for free. It's BRIAN DESIGN. Thank you Bro ✊🏽🙏🏽
Appreciate it Claude!
You started learning React six months ago, I started three months ago. I need to start building projects like you!
yeah mate just gotta build
great tutorial Brian, I learned a ton for my next project!
Great to hear! thanks Anthony!
Beautiful design. Thanks for the tut.
thankyou! this helps my portofolio!!
You deserve to be at 1 million subscribers. Great video
Thanks!
This is amazing thank you Brian
Thanks!
great content, keep that level!
Hi Brian thankyou for all this ,, plz make more videos on making websites with react
I love your videos !!! The truth is that you are a genius! I would like you to make more videos about react animations. I send you a big greeting from Argentina.
Thanks Martin! I'm just learning code just like you. I got some future vids on animations that I plan on making
Damn! Brian u r slowly taking the react king crown. Hope I’ll do the Gatsby netlify CMS I voted for strapi CMS but majority wins. I love the way u brake down and explain ur methods really easy to grasp. 💯👊🏾🙏🏾
Thanks!
amazing tutotials tanx a lot... lets leave the next video please!
Thank you so much for the amazing project!
What about the second part with scrolling animation?
Man this is awesome 🔥
Thanks 🔥
You deserve more bro
thank you brian,
Wonderful project
At 1:42:00 inside your DropdownContainer, you set the z-index value to 999 to get the nav bar icon to disappear. However, when you do that, there’s a weird glitch where if you have your mobile phone in landscape, the whole navbar becomes a toggle for the drop down menu. It was driving me crazy for the longest time from another tutorial so I just got rid of the x button when toggling the drop down menu and set the z-index to a low number. Other than that, great videos!
This is what i wanted to see. Animation on scroll
always great, thx for your video
Thanks Gan!
I loved the site, excellent video
Thanks!
thanks man!!!
Man you're on fire lately.
🔥🔥🔥
Thanks
You've literally just saved my life and I really appreciate this video im currently in a bootcamp and we have solo projects and I had no idea how to design anything 😅 please do a tumblr clone with react I'd rlly appreciate it
awesome! once I have some free time I'll make more website vids
I've always wanted to understand animation scroll without jQuery. Thanks Broman.
It is a great content. Thank you very much.
Thanks Oksana!
Perfect, man!
Thanks a lot!
Awesome...thank you
welcome!
You're amazing!!! wow
Hey Brian super job
Love from Bangladesh. Most welcome and many many thanks for beautiful react project tutorial. go ahead keep best wish from me.
Appreciate it! Thanks Nayamat
Hi Brian, great tutorial! My humble suggestion for the next ones. Please specify the level you think is required to enter each tutorial.
Something like Beginner, Lower-intermediate, Intermediate, Upper-intermediate, Advanced.
It would be super useful for everyone :) Thank you
Thanks Damiano! I thought about adding that, but how would someone define what beginner, intermediate, advanced means? Cause someone could have a mentor and they learned React quickly in 2 months and understand this video easily vs. someone does it part time for 1 year and they can't understand this at all. It's hard to put a label to the difficulty level because some people grind 20 hours a day studying, while others only study for 2 hours a day, so it's much easier to just show them what I'm making, and then they can determine if they are capable of understanding it or not
I think everyone has a rough idea about his own level regardless of the time having spent on it. And you, having a good understanding of the subject, are surely more capable of suggesting the content to the right user. Anyway, mine was just a constructive assumption rather than a critic. Keep up the good work! If you feel like answering, what's the best way to have a solid foundation with React? What are your suggestions? Thanks
forsure! the best way to learn is just to build your own projects without watching any tutorial or course. Just straight up reading documentation, google or stackoverflow. Just pick an idea you want to create and then start coding it out piece by piece. You'll start to realize what you know and don't know very quickly
@@briandesign That's a good suggestion! Thanks! Watching your videos helps as well :)
Thanks bro! nice video)
Thanks
what to do if I want to add a logo instead of the text in the logo tag, I tired adding img tag inside logo tag the nav section got rearranged and jumbled up.
thx for the video broh, you really outdid yourself !!! For more videos of this type!
Thanks Mateus! yeah this one took a while to make
@@briandesign Brother, thank you for meeting you in the year 2020, I made this site based on Elixr. Thank you very much, keep bringing content using hooks please, I learned a lot with you!
thearchitecture.netlify.app/
28:30 you can install the kit using :
npm install --save-dev babel-plugin-macros
Thanks Brian for sharing these react web sites,
I have a question about CSS extension.
Which extension are you using for auto completing CSS style inside "styled.div`` " section ?
Install this extension in VScode: vscode-styled-components
Hey Bryan, would you please add features like search, and filter your search based on the house of your choice?
Great !!!Cloud you give source code. Thank you.
How could I add a transition effect to the images? That white screen when images change is not the best for users' eyes .. but since I am new to react, I have no idea where to add this style or how to connect it with the components .. could you guide me a bit?
help:
Failed to compile
./src/globalStyles.js
Attempted import error: 'createGlobalstyle' is not exported from 'styled-components'.
Nice project! I am a beginner in React and this tutorial helped me a lot to understand it better.
What extensions do you use?
Check my vid I made on my extensions
check out object-position with the cover css property.
Waiting for React Native tutorials also 💓
Hey Brian, I was wondering why in some projects for components you use RFCE and in this one you use RAFCE. What difference does it make?
rfce creates a boiler plate code for a normal function in javascript and rafce creates a boilerplate code for arrow functions
This was very helpful! I wonder if you can do any "parallex" with react tutorial. Parallex not with image in background but like texts, that are maybe scrolling in different speed.
any website examples of the effect you are trying to replicate?
@@briandesign I don't really have a good example. But I was watching this youtube video the other day. ruclips.net/video/Q5y6pwoE3cM/видео.html
The first example he shows in the video caught my interest.
Great channel and project! Btw when you said, look not hands I was like, wait a second am I watching a magician channel..ha ha
Haha thanks!
Cool
It's been only a week, but we missed you man keep em coming!! Also, e-commerce with react anytime soon?
It's on my list!
@@briandesign do it man with mongoDB and nodeJs , will have so many views
I'm not getting css properties suggestion, i'am struggling to type manually all the stylings....Any suggestions?
Hey Brian,
I was wondering what extension do you use so it helps you to format your code and auto add the ; at the end?
use prettier
What color theme do you use?
hello brian first of all thanks for the tutorial I really enjoyed it. but there's one issue that I cant resolve issue is first item of slider not working properly (first data of sliders or slides) it renders but content not have any response.
Hey Brian, in this example, is this a better way of making the dropdown menu, or just a different way, cause in other vids you didn't make a separate component for the dropdown
Every new vid I make I refactor the code so this is much better for me cause you can add a lot of additional styles with a separate component and it’s easier to manage
Man I have a problem I am not getting the html option as you are getting in 39:45 I'm not getting that options instead I am getting -ms-hyphenate-limit-chars and all can you help me fix it...
hi dear, I really appreciated all the websites you have created, so where we could find the rest of the project above please share it link below. Thanks much again
brian can you create a video for dropdown submenu why the nav stay at the top. you are creating awesome video
Great result brian!
What is the reason to use styled.div styling instead of use .css (CSS3) files or SCSS / LESS?
it's styled components and you can add javascript with it and update values within the styles vs. regular css
@@briandesign ah oke, but do you always use styled components? Or sometimes also regular css for the non updated styling?
@@nickveldkamp5396 I started with css but found styled components a lot better with react. There’s also something called emotion that people use as well and it’s kinda similar to styled components.
hello i am trying to follow along but when i try to create the slider buttons i get this error ReferenceError: styled is not defined
Nice content as usual Brian. Keep up. BTW where did you get the images?? I wanna code along. Please, just the images without the code.
check out pexels or unsplash
I am from indonesia 🇮🇩, look good turorial. Thanks you
Thanks!
good job man thank you very much can you give us the second part of this tuto and thank you again
rest of content is on my site
Plz Help Me Bro ....
There are 16 boxes of color blue and if u click any box,then that particular
box color changes to red and maximum 2 boxes can be red at a time .If u click any 3rd box then it's color changes to red and the first red box will be blue.
How to do this in react.Plz help me .
But sir where i can find the answer animation part for this website
Hi Brain . Can U make Hero Image slider without react ? If yes please make a video on it , i have searched entire internet but didn't find this slider
where is the second part of this video? It will be very helpful if i get that
Hi Brian,
do you no what is my problem?
'slides.map is not a function'
Thanks for the video.
Small query. The same can be done using just HTML and CSS.
Why to use React here. Thanks.
lots of reasons. Reusability with less code, speed, structure.
Hi Brian, I follow along your tutorial. It is a great content. Thank you very much. I just had very small query. It could be nice if you can clarify. In the App.js the Hero and the InfoSection it stack. How can I fix that?
can you copy the code that you're referring to? I'm not sure what you are asking
@@briandesign thanks Brian for your reply. I already fix it. In the globalstyle, body tag, I change overflow hidden to auto
Can you update the link component for the logo syntax, since it throws error
did u got the solution if yes thn help me out
Is anyone else getting the error - Cannot find module '/static/media/house1.c4817440.jpg'? Followed step by step, researching says it's a problem with webpack but I checked the config and the url, file and style loaders look legit. Also downloaded the dependancies to double check. So frustrating lol
I ran into issues with Position absolute it kept removing images... cant find a solution :/
is it solved
is the website you create in this video fully responsive i mean the end product of this video and not the full source code one on your page that costs money?
At 1:02:25 I get an error 'ReferenceError: styled is not defined' after typing the css code
css={`
max-width: 160px;
`}
I've checked over the code so many times but cannot find the problem. Any help please. The error goes when I comment out this code.
Did you find solution for this?
i put logo tag and i saw only white blank screen in my application
Hey Brian,
I've been inspired by your videos to start learning HTML and CSS. One question I have is how do you stay on the grind? Where do you get the motivation from?
You seem to have a constant motivation to learn/improve and I hope that I can also gain this kind of motivation.
it's different for everybody. First thing I'd recommend is setting short term goals that you can easily achieve. So that could be as simple as code for 1 hour a day for 30 days straight. Depending on how much time you have, you could increase this to 4 hours or even 8+, but if you're just starting 2-4 hours is a good mark to aim for. I did when I first started and whenever I didn't study for 4 hours for one day because I was busy or just messing around, I'd get mad and then go super hard the next day and do like 6 hours to make up for the 2 hours I didn't put in.
Eventually if you do this long enough you will get "burnt out" or "bored" and lose all motivation. I found the trick is to do sprints. So, now I figure out something I want to build, for example this real estate website in the video. Then, I'd spend the next week just trying to complete this project. After 100's of hours of work put in, then I'd take a break and usually it's a day off where I barely do any code or just basic stuff that isn't super tasking on the brain, and after a day or two I'm refreshed and can get back on the grind.
Also, one thing I found that will kill your motivation with coding is not understanding anything. I almost quit coding when I learned Javascript because I didn't understand anything that was going on and I lost all motivation to even watch the tutorials and courses, but eventually I found that I just didn't study hard enough and I needed to put more hours in. So if you ever feel super confused or lose motivation, just start doing things that you understand. So with HTML and CSS, try building basic projects like a simple button that changes when you hover over it. Then move into something more complex like building a navigation menu. Then creating a hero section, then footer etc. until you gain the confidence to tackle a more complex project or watch a more advanced course online.
Please upload the part 2
please can youshare these pictures you used to built this website
I did follow you but I can not load the image from file SliderData.js to the hero section
is the promblem solved?
Hi Brian, are you going to continue part 2 of this video ?
It’s on my site
Hi I have a problem at the time of putting since it does not show me the menu only when I place the image, and it does not show me the changes in the what could be due to?
is there any errors in your console?
@@briandesign No, none, is there any way you can see it? I'm starting in React and I would like to learn from you x)
Hey Brian, I followed the tutorial, but the navigation bar gets covered when I add images. Can you please tell what might be the mistake I made?
did you check your styling to make sure you didn't leave anything out?
@@briandesign yes! I was missing the z-index. I understood after I rechecked properly. Thank you!
Please where is the v2 because I need it very urgent?
Thanks bro for this content, but I don't know why my images ain't showing. I did exactly what you did and even tried other options as I was trying to troubleshoot, but they still don't show.
did you find a solution for this? I am running into the same problem