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 ✊🏽🙏🏽
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 TH-cam!
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 👌
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
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. 💯👊🏾🙏🏾
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!
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!
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.
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
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?
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 ?
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
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?
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.
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.
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 .
@@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.
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
this is just a front end design. If you were getting data for real estate houses or collecting info, then you could implement backend, but that's a completely different topic
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.
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...
@@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/
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?
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.
what do you mean by hero isn't working? I don't have mind reading superpowers, so you gotta tell me some code you wrote or errors or else I have no idea what you're referencing
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?
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
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.
@@briandesign I don't really have a good example. But I was watching this youtube video the other day. th-cam.com/video/Q5y6pwoE3cM/w-d-xo.html The first example he shows in the video caught my interest.
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
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!
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 TH-cam!
Thanks!
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!
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
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!
purchased the second part will work on it later! thank you!
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 :)
Please keep making more of such React projects and tutorials on various react topics and packages, helps alot of us in our learning.
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.
Truly Appreciate your effort. Keep rocking man!
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!
You deserve to be at 1 million subscribers. Great video
Thanks!
You’re the goat bro. Appreciate you for making these videos 🙌🏼
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
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 😣
Please create a Portfolio Website using React.
The design is so beautiful and fluid...
Best Xmas present ever, thank you!
Thanks!
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!
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
exactly what i needed to continue learning react!
This is what i wanted to see. Animation on scroll
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
great tutorial Brian, I learned a ton for my next project!
Great to hear! thanks Anthony!
thankyou! this helps my portofolio!!
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?
I loved the site, excellent video
Thanks!
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
I've always wanted to understand animation scroll without jQuery. Thanks Broman.
Beautiful design. Thanks for the tut.
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
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?
Man you're on fire lately.
🔥🔥🔥
28:30 you can install the kit using :
npm install --save-dev babel-plugin-macros
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?
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
Hey Bryan, would you please add features like search, and filter your search based on the house of your choice?
Wonderful project
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.
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 .
Thank you so much for the amazing project!
What about the second part with scrolling animation?
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.
What color theme do you use?
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
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
Man this is awesome 🔥
Thanks 🔥
Perfect video, i learnt a lot... How should look backend for this website ? How to create backend for this site ? Is it impossible and necessary ?
this is just a front end design. If you were getting data for real estate houses or collecting info, then you could implement backend, but that's a completely different topic
@@briandesign OK, Thank you so much...
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
amazing tutotials tanx a lot... lets leave the next video please!
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
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
I'm not getting css properties suggestion, i'am struggling to type manually all the stylings....Any suggestions?
You deserve more bro
Hi Brian,
do you no what is my problem?
'slides.map is not a function'
help:
Failed to compile
./src/globalStyles.js
Attempted import error: 'createGlobalstyle' is not exported from 'styled-components'.
This is amazing thank you Brian
Thanks!
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.
I ran into issues with Position absolute it kept removing images... cant find a solution :/
is it solved
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
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.
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...
great content, keep that level!
Can you build some innovative web apps using ML
or even websites will work
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/
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)
always great, thx for your video
Thanks Gan!
where is the second part of this video? It will be very helpful if i get that
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!
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!
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
Can you give full access of this project without payment
You're amazing!!! wow
I am from indonesia 🇮🇩, look good turorial. Thanks you
Thanks!
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.
It is a great content. Thank you very much.
Thanks Oksana!
Thanks
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
check out object-position with the cover css property.
Brain , is the second part of the project free ???
Thanks bro! nice video)
Thanks
hey brian could you tell me why HeroContent is not working? because I check everything but I don't know what is wrong?
thank you
what do you mean by hero isn't working? I don't have mind reading superpowers, so you gotta tell me some code you wrote or errors or else I have no idea what you're referencing
@@briandesign Thank you for your reply I am not able to see the content on the slider but I fixed it.
@@Jadavg55 Hello, please how did you solve the hero section not working?
I am facing the same challenges.
thank you brian,
brian can you create a video for dropdown submenu why the nav stay at the top. you are creating awesome video
thanks man!!!
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
But sir where i can find the answer animation part for this website
Hi Brian, are you going to continue part 2 of this video ?
It’s on my site
Great !!!Cloud you give source code. Thank you.
Awesome...thank you
welcome!
Perfect, man!
Thanks a lot!
I did follow you but I can not load the image from file SliderData.js to the hero section
is the promblem solved?
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
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. th-cam.com/video/Q5y6pwoE3cM/w-d-xo.html
The first example he shows in the video caught my interest.
Brian you will post the second part?
Rest of content is on my website in the bio
Hey Brian super job
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
Waiting for React Native tutorials also 💓