Get the source code here: www.codavilla.com/posts/react-website-travel-website-design Favorite Resource for Learning React: v2.scrimba.com/?via=briandesign
i copied the cards.css file as in the video but my image is too big and the adventure label is not showing..what is the problem can u suggest?if i decrease the padding of image then there is a gap in the container and image
Some notes from people who are going to code this now: In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from import { Switch, Route } from "react-router-dom"; to import { Routes ,Route } from 'react-router-dom';
When I got to the Cards section nothing displays using Brian's code. Was there any updated for v6 that needed code changes that you did to get the Cards showing?
@@jk480p Not for me, one thing that is not mentioned in this comments above is that you also have to change Switch tag, like this: For this It might by just , i don't remeber exacltly.
@@alques-dias Hey did your cards show up super big? Mine did-not like his. If so, did you change any Css to fix this? I'm also having issues with the images showing up. He has the coding as url('/images/img-1.jpg');
I'm 20 minutes in this video as of 11/8/2023 and some things have changed. I will post more along this thread as I go through the video. Please upvote this comment to help those looking to learn by using this video! Must change App.js import to: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; The app.js file should instead look like the following, Switch is no longer part of React-Router:
To get the hamburger menu working correctly, I'm sure it doesn't appear for most of you: 'fa-solid fa-bars' instead of 'fas fa-bars'
Holla for the peeps who made it to 1:37:20 and were just soldiering on when Brian said "If you've made it this far go ahead and hit that like." So well deserved. Thanks for this awesome tutorial.
this helped thanks. Really important to have Home formatted like inside the curly braces. Without it your passing in the function Home, not the React.element
As a beginner frontend developer this video increase my awareness. I can figure out the ReactJS better and I am encouraged about my development journey with this video. Many thanks!
For anyone still struggling with the images or video files, my fix was creating an index.js file within the assets or public folder (whichever you chose to use) and manually exporting them all like: export { default as img1 } from './images/img-1.jpg' The same can be done for all the images and videos, as long as you keep the paths correct! Then you can import them all to any component like: import { img1, img2, img3, img4, img5, img6, img7, img8, img9 } from './assets' and set the 'src' attribute of any tag like this: Hope this helps!
@@eva42sh Not sure what you mean by this, but if you follow the instructions above and create an index.js file in the ‘assests’ or ‘public’ folder you can then import them into any other file using the correct relative path.
I have been struggling with coding for rmonths, not getting the hang of it. Your video just enlightened the path!! Thank you very much for sharing your know-how Brian!!
Your Button components were really interesting, the way you used the functions to change the CSS was brilliant. I'm new to React, but I'm definitely taking a lot from this! Thanks so much for the upload!!
Amazing tutorial Brian!! I've spent like 4 hours trying to understand all the code and solve hundreds of errors, but it was totally worth it! U won a subscriber
If you're following along now, you'll also need to make sure your Route in App.js is using an element prop in order to ge your page content to display. So for home for example, it would be this:
Hey, thanks for the tip! I still need your help though, I get the error: "'Home' is not defined" when I type what you recommended. Is there something I should be importing?
For those having issues finding images assets under public folder, this seems to be an issue with upgrades associated with react-scripts 4.0.0. The current solution is to move assets under src folder, and redirect to url("/src/images/img-home.jpg") for your css files. This will resolve compiling issues for css files. Please make a pinned message about this.
@@juanantoniomartin2988 I am only guessing react-scripts 4.0.0 affects only css url. The video url is in the js file which still works. Again, only guessing. The css issue seems to be still an outstanding issue on github.
@@juanantoniomartin2988 i totally moved both images and videos over in the beginning when images weren't working for me. I was going nuts when video wasn't working. Moved videos back to public and we are good to go. your comment saved me! thanks.
Just a quick tip: if emmet isn't working for you on the .js files, just rename the file to .jsx. The extensions are pretty much the same thing so you won't have to change your code
You killing it man, everything is super clear, and I have never worked with React and everything makes sense and I am making my own sites and doing more things with the skeleton example you provided. Thank you so much man !!!
IF YOU ARE GETTING AN ERROR about not being able to resolve images (about 40 min into the tutorial) it's because of that code you've just imported into App.css. There are three typos: the beginning period is missing in each image import. In other words "/images/img-1.jpg'" should be "./images/img-1.jpg".
Hey! In order to fix problem with autocompleting in VS Code you can change your language mode(on the bottom-right corner of the status-bar) from 'JavaScript' to the 'JavaScript React'.
@@jennifervaldez2554 are you sure you don't have it? when you click on a 'JavaScript' usaualy there should be a pop out on the top of the screen where you should type out name of your language
I saw all the videos, then I found your video, You told me, you have done a good reaction in it. In the rest of the video, I used it in HTML, I wrote the link in the response, as I do it in HTML, you have adopted the correct date. i think your video is awesome
Heads up - some of the updated ReactJS packages aren't showing images properly. In order for them to show up now, you have to write them in like this: src = {require('../images/img-9.jpg').default} or depending on what your file structure looks like: src = {require('images/img-9.jpg').default}
Thank you so so much! I'm a student of web dev and I've just started learning React, while I got the basic concepts of how it works and the general syntax, it was hard to see how it actually works but your video really helped me put it all together! Huge thanks!
17:05 It is probably because of the .js extension in the component filename. If you change the component filename to .jsx then it might solve the problem. eg: NavBar.js to NavBar.jsx
Hey, thanks for the tip! I still need your help though, I get the error: "'Home' is not defined" when I type what you recommended. Is there something I should be importing?
@@janllever7938 Hey buddy nah I've been busy with work, let me know if something works for you, I'll keep looking for a solution. I've narrowed it down to the icons because "TRVL" is showing up successfully.
This video is all over the place lol, sign up here, delete this here, then there. type some random letters "poof" theres a command. Good video if you have experience but definitely not beginner.
I've found a solution to anyone experiencing certain sections not displaying: Check the CSS for any "url(image path)". Removing the "url()" and just leaving the "image path" fixed this issue for me.
This tutorial is cool to watch, but I prefer watching a project where you start from 0 and then you are really showing us the real workflow behind your work. Cause here, most of the time, the code makes sense only long time after we wrote it. So yes, I learned some things, but it's hard for me to keep following actual non sense code (even if I understand it) without watching point by point what's those lines are actually doing to the page.
i agree with your comment but i think most of the parts where he skipped the codes and just copied and pasted them in his VS Code was actually the style and CSS parts to save some time.
after somebody helped me setting up the same environment, everything is being perfect. the rest is to learn the database.. anyway. I have tried to find other TH-cam react video but this is so far the most fluent decent speed English taught web-react.
Holy moly!!! 1million % the best comment ever on YT. Thank you so very much! I have been on this for two days and couldn't figure out why nothing from HeroSection was being sent.
Brian, it is an awesome video. It is quite lengthy but every second matters from this Brilliant session. Thanks very much, God bless you. Keep it up. I can't wait to watch more videos like this.
background-image: url('/images/img-2.jpg'); I am trying to add this but it shows a error Error: Can't resolve '/images/img-2.jpg' in 'E:\React eact-demo\src'
@@ramazangenis3421 it fixes that particular issue, but adds a new problem where the css card images won't load. it would've been ideal for the image folder to be in the public folder...
Buddy! This is the video I been looking for! First time watching your videos and I loved it! Def liked, subbed and hit the bell. Looking forward to watching more of your video man , thanks for your service to the dev world!
I had trouble with the video until I figured out everything was working, I only had to click on home. I know this is stupid, but it could save some other 'genius-like-me' a little time. Great stuff, good video. I'm taking a little more time with it, in order to read some things up and or goof around with them to figure out how they work. Do another one XD
Another thing worth noting, "ReactDOM.render" is no longer supported in React 18. use createRoot instead. In your index.js file: import ReactDom from "react-dom"; to import createRoot from "react-dom"; AND ReactDOM.render(, document.getElementById("root")); to createRoot.render(, document.getElementById("root"));
Hey, at around 40:47, he runs the code after importing Navbar.css and ./Button. I am able to folow up until this step, but once I import both of these files and run the code, the screen just goes white. Any suggestions?
Hey Brian, thanks for the tutorial video. It’s amazing…. But I keep having issues with my Herosection part, it’s not giving me any errors and it’s not displaying either. I have read the code line by line, still can’t find the issue
I am also stuck on this. None of that component seems to show up and I have copy and pasted his github files to try and replicate exactly what he did. Still nothing. Hero section just doesnt display for some reason
@@HelghastSon I just figured it out, with V6 you can't use the component prop anymore, and you have to use element. So the route in App.js needs to be this:
@Hugh G. Rection ///////WORKS//////// Big Thanks Hugh! This worked for me to get the video working and the cards to display. Now I just need the card images 👍
It was cool! I was doing it in 2022 and sometimes I struggled a lot, cuz some stuff changed. But google helps as usually. Thank you very much for such a nice material!
ok, can somebody please tell me why to use react or what the advantage is ? I can do this in a quarter of the time with simple html, css and js, why would I need react and all this weird setup
Amazing tutorial! I'm using the latest versions of both React and React Router (v6), and it seems that "Switch" is no longer found in the module. "Routes" is what is used now.
@@DJAndyO Yeah, my code compiles as well, but I also cannot get the video playing. I'm at the HeroSection, and everything looks fine, but I only see my navbar
1. Instead of component={Home} you need use element={} in App.js; 2. Also instend of , you need import video in HeroSection.js: import video from "../assets/videos/video-1.mp4" - format required!!! And after import use: ----------------- I don't know why it's working, but it's working :0
same issue here,finished copying images to the public folder but still no success. error is originating from the App.css[background-image: url("/images/img-2.jpg")]
Module not found: You attempted to import ../../images/img-1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. me sale este error alguan solucion porfas
idk if you found a solution yet, but if you look up "font awesome cdn link" the first link is "Install Manually | Font Awesome Docs". And if you scroll down some, you'll find the link 👍
Hi! Can someone please explain why videos and photos work only when image and videos folders are in public and background image only works when the image is in src folder? I wanted to put everything in src folder and my paths were correct but it didn't work until I moved it to the public folder. Otherwise, it's a great tutorial, everything else works fine!
Hey I'm not sure if you still react to comments on here but, When actually using a logo for the header instead of the text with the font awesome icon, the image does not scale with the rest and makes everything misaligned, I also would like the logo to stay on mobile view as well. The issues with normal scaling is that the black bar shortens more than the end of the screen does (so you start to see the background) and when even smaller the image just floats away. Any tips to fix it?
I am doing this right now! Thank you for this tutorial! I am looking forward that I can finish this and can make something similar in the future! More power to you! Thank you!
Hey man I love your video but do you mind if I ask what extensions do you use to be able to implement the "nav.className" and automatically creates the JSX snippet. Thanks in advance!
Did anyone else have an issue around 43 minutes where you get the error "Module not found: You attempted to import ../public/images/img-1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."
@@tina360 you can either create a SRCimages folder within src folder or you can, instead of setting background-image in css, just set the image in the JS file using the tag and that you can use the public image folder files. Hope that helps
Sorry to bother you, I got this error message. ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css) Error: Can't resolve '/images/img-2.jpg' in 'C:\Users\tina3\Desktop\React project eact-website-yt-1\src'
React has a special restriction when developed by create-react-app. This restriction ensures files used are within src/ You have to either disable/eject this feature or move the image files within the src folder.
For anyone who's having an error with importing pictures: - Move the images and videos folder into src - Replace the background-image URLs with: url('./images/img-2.jpg'); Hope that helps!
in the bottom right corner of vscode, there will be a little text "javascript", click on it and write react javascript in the input that will appear in the top. Press enter and now the code will recognize .navbar-container
omg, beware at 7:50, in the Narbar.css in the @media he didn't repositioned the justify-content to start. it really is majjor, otherwise you mobile navbar look like shit if you leave it with the actual css. remember Put justify-content start in nav-menu in @media in the Navbar.css file. Thx me later.
thank you so much!!! i was trying to fix this but didn't know how. i changed the height:80vh to 60hv but it was not that beautiful, looked like a trash job. thank you so much again
Get the source code here:
www.codavilla.com/posts/react-website-travel-website-design
Favorite Resource for Learning React: v2.scrimba.com/?via=briandesign
css codes where?
I cannot find in your github.
@@CreativeWorkersBest check the master branch
@@briandesignI found thank you
i copied the cards.css file as in the video but my image is too big and the adventure label is not showing..what is the problem can u suggest?if i decrease the padding of image then there is a gap in the container and image
@@drunkpanda3686 you could set a fixed width and height for your images that matches the size of your card
Some notes from people who are going to code this now:
In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
Thanks! Wish I saw this comment 30 minutes sooner!
Also component is changed into element
When I got to the Cards section nothing displays using Brian's code. Was there any updated for v6 that needed code changes that you did to get the Cards showing?
@@jk480p Not for me, one thing that is not mentioned in this comments above is that you also have to change Switch tag, like this:
For this
It might by just , i don't remeber exacltly.
@@alques-dias Hey did your cards show up super big? Mine did-not like his. If so, did you change any Css to fix this? I'm also having issues with the images showing up. He has the coding as url('/images/img-1.jpg');
I'm 20 minutes in this video as of 11/8/2023 and some things have changed. I will post more along this thread as I go through the video. Please upvote this comment to help those looking to learn by using this video!
Must change App.js import to: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
The app.js file should instead look like the following, Switch is no longer part of React-Router:
To get the hamburger menu working correctly, I'm sure it doesn't appear for most of you:
'fa-solid fa-bars' instead of 'fas fa-bars'
i don't see my hamburger, and the code is this
BlueBay
Home
well to keep it easier to follow, and I hope I didn't fall over my own feet there, I imported 'Routes as Switch'
Holla for the peeps who made it to 1:37:20 and were just soldiering on when Brian said "If you've made it this far go ahead and hit that like." So well deserved. Thanks for this awesome tutorial.
Thanks James!
For those stuck at 53:16, you have to change the component to element, like this: . I hope this helps
well that helped out a lot!
It says Home is not defined.
How to solve?
@@dylaneamos do you know where you created the `Home.js` file? in this video the directory of that is`src/components/pages/Home.js`.
this helped thanks. Really important to have Home formatted like inside the curly braces. Without it your passing in the function Home, not the React.element
Thank you so much man, I wwas stuck for 30min looking for the problem
Don't forget to take the Footer component out of the Home component, and put it into the App component. That way the footer is on every page.
true!
Thanks, was really Helpful
thank you very much.
Feeling emotional lol great video
i am still having hard time to link pages home service products sign up what should i do
As a beginner frontend developer this video increase my awareness. I can figure out the ReactJS better and I am encouraged about my development journey with this video. Many thanks!
Yes! A nice modern reactjs tutorial (others were from 2 years ago!), straight to point and effective! THanks!
Thanks! This was my first ever react website vid. I’ve made a lot more since and refactored a lot of code, so feel free to check those out
For anyone still struggling with the images or video files, my fix was creating an index.js file within the assets or public folder (whichever you chose to use) and manually exporting them all like:
export { default as img1 } from './images/img-1.jpg'
The same can be done for all the images and videos, as long as you keep the paths correct!
Then you can import them all to any component like:
import { img1, img2, img3, img4, img5, img6, img7, img8, img9 } from './assets'
and set the 'src' attribute of any tag like this:
Hope this helps!
in which class I should do manually export and importing?
@@eva42sh Not sure what you mean by this, but if you follow the instructions above and create an index.js file in the ‘assests’ or ‘public’ folder you can then import them into any other file using the correct relative path.
I have been struggling with coding for rmonths, not getting the hang of it. Your video just enlightened the path!! Thank you very much for sharing your know-how Brian!!
I'm sure I can recreate this, but I love coding along. Thank you, jumping in soon.
nice!
Your Button components were really interesting, the way you used the functions to change the CSS was brilliant. I'm new to React, but I'm definitely taking a lot from this! Thanks so much for the upload!!
Honestly so great. This helped me get started in so many ways- thank you for putting so much effort into this tutorial, it is much appreciated!
Amazing tutorial Brian!! I've spent like 4 hours trying to understand all the code and solve hundreds of errors, but it was totally worth it! U won a subscriber
If you're following along now, you'll also need to make sure your Route in App.js is using an element prop in order to ge your page content to display. So for home for example, it would be this:
Hey, thanks for the tip! I still need your help though, I get the error: "'Home' is not defined" when I type what you recommended. Is there something I should be importing?
@@boyzrulethawld1 you gotta do
import Home from ‘./components/pages/Home‘;
but that should be in the video
@@X4R80 Ah right, basically I’m at minute 16ish in the video. I can see the TRVL text in the Navbar now, but not any of the images from Font Awesome.
@@boyzrulethawld1 well, if you sign up and paste the link it gives you, everything should work
@@X4R80 Hey bro. it still doesn't work. Do you have any clue to fix this?
For those having issues finding images assets under public folder, this seems to be an issue with upgrades associated with react-scripts 4.0.0. The current solution is to move assets under src folder, and redirect to url("/src/images/img-home.jpg") for your css files. This will resolve compiling issues for css files. Please make a pinned message about this.
That's weird, because the video is playing perfect but images doesn't work..
@@juanantoniomartin2988 I am only guessing react-scripts 4.0.0 affects only css url. The video url is in the js file which still works. Again, only guessing. The css issue seems to be still an outstanding issue on github.
@@juanantoniomartin2988 i totally moved both images and videos over in the beginning when images weren't working for me. I was going nuts when video wasn't working. Moved videos back to public and we are good to go. your comment saved me! thanks.
Thanks for Sharing! :)
wow. I spent nearly 2 hours trying to solve this. Thanks
Just a quick tip: if emmet isn't working for you on the .js files, just rename the file to .jsx. The extensions are pretty much the same thing so you won't have to change your code
Thank you!
This is great demonstration of React and its various uses! Also great for new engineers like myself that want a simple and clean website. GREAT JOB!!!
Man, I don't know why I'm saying this, but I like you! You give off such positive energy.
Thanks!
You killing it man, everything is super clear, and I have never worked with React and everything makes sense and I am making my own sites and doing more things with the skeleton example you provided. Thank you so much man !!!
IF YOU ARE GETTING AN ERROR about not being able to resolve images (about 40 min into the tutorial) it's because of that code you've just imported into App.css. There are three typos: the beginning period is missing in each image import. In other words "/images/img-1.jpg'" should be "./images/img-1.jpg".
Hey! In order to fix problem with autocompleting in VS Code you can change your language mode(on the bottom-right corner of the status-bar) from 'JavaScript' to the 'JavaScript React'.
I dont have an option to select javascript react. Do I have to get some sort of extension for this autocompletion?
@@jennifervaldez2554 are you sure you don't have it?
when you click on a 'JavaScript' usaualy there should be a pop out on the top of the screen where you should type out name of your language
Excelente video, hay una pequeña actualización para renderizar en App.js :
En el video vemos asi
y ahora para que funcione (año 2022):
Saludos!
thanks dude
Cheers man!!
its not working for me
Thanks alot my man! 🙌🙌🙌
@@monikantagogoi7858 Do you see that there is not component={Home} but exactly element={}. Not component. Element.
I saw all the videos, then I found your video, You told me, you have done a good reaction in it. In the rest of the video, I used it in HTML, I wrote the link in the response, as I do it in HTML, you have adopted the correct date. i think your video is awesome
Heads up - some of the updated ReactJS packages aren't showing images properly. In order for them to show up now, you have to write them in like this:
src = {require('../images/img-9.jpg').default}
or depending on what your file structure looks like:
src = {require('images/img-9.jpg').default}
It really helped me a lot . Thanks !
THANK YOU. This issue was driving me crazy.
Thank you !
@@ziraddingulumjanly8432 I'm glad it helped!
@@Calebinator1999 My pleasure!
This was amazing man, thank you so much for this awesome work! Good job!
Thanks Fernando!
I feel like I just learned an entire semester's worth of web development in 3 hours
Nice can you be of help to me please
It’s not 3 hours -____-
@@latinstuff1 pausing and coding along can make it 3 hours XD
@@ghfranklin I guess so
@@ghfranklin for me it's like 1 week XD
This is really well explained and a beautiful site. Excellent content, thanks Brian
Thank you so so much! I'm a student of web dev and I've just started learning React, while I got the basic concepts of how it works and the general syntax, it was hard to see how it actually works but your video really helped me put it all together! Huge thanks!
So far the best React JS beginner tutorial video here in TH-cam! keep it coming bro. ✌️
17:05
It is probably because of the .js extension in the component filename. If you change the component filename to .jsx then it might solve the problem.
eg: NavBar.js to NavBar.jsx
For those using react router v6:
function App() {
return (
);
}
above will fix your path so that the Home page will show up every time.
thank you! was just about to start looking for an answer to that!
Hey, thanks for the tip! I still need your help though, I get the error: "'Home' is not defined" when I type what you recommended. Is there something I should be importing?
@@boyzrulethawld1 Hey did you find the solution for this?
@@janllever7938 Hey buddy nah I've been busy with work, let me know if something works for you, I'll keep looking for a solution. I've narrowed it down to the icons because "TRVL" is showing up successfully.
@@boyzrulethawld1do you know how you got TRVL to show up, mine doesn’t, I’ve done . But nothing shows up still
Quality content right here. I even watched as as many ads as I can. You deserve it mate!
One of the greatest tutorials. Thank you for this!
This video is all over the place lol, sign up here, delete this here, then there. type some random letters "poof" theres a command. Good video if you have experience but definitely not beginner.
I totally agree
Totally. He need structure
Bro I was half way through and I just gave up because it was just back and forth I'll find another tutorial
Please I copied and pasted the navbar.css code but the text and trvl logo are not displaying just a black bar on screen
This is a beautiful tutorial a page, Thank you very much!!! I watched until end
Thanks Dairo!
Thank you! I love it, you are using modern JS.
When they should be using Typescript.
i would like to express my deepest appreciation for creating this tutorial and also including the source code ... .thankyou again
I am blown away by the way you do it so easily. The explanations are very fluid. I even improved my CSS skills! Thank you for sharing this tutorial.
I've found a solution to anyone experiencing certain sections not displaying: Check the CSS for any "url(image path)". Removing the "url()" and just leaving the "image path" fixed this issue for me.
Thank you, Brian! The content is focused and engaging!
Thank you brian. I enjoyed this. I also love your clear english
I had loads of fun with this project thank you.
Thanks Brian for sharing your knowledge. I created my first ever react static website cause of this video. Thanks a lot!
This tutorial is cool to watch, but I prefer watching a project where you start from 0 and then you are really showing us the real workflow behind your work. Cause here, most of the time, the code makes sense only long time after we wrote it. So yes, I learned some things, but it's hard for me to keep following actual non sense code (even if I understand it) without watching point by point what's those lines are actually doing to the page.
It is basically not for beginner level in my opinion, u must have atleast 3 month practice of react before building this on ur own
i agree with your comment but i think most of the parts where he skipped the codes and just copied and pasted them in his VS Code was actually the style and CSS parts to save some time.
Thank you for the great tutorial that you made. I can't thank you enough for your time. Hopefully, I could catch up with your other great videos.
Thanks!
If you are having errors with the hero section video. Use this
thanks
yooo this tutorial just showed me every single thing i needed to learn in one place much appreciated
after somebody helped me setting up the same environment, everything is being perfect.
the rest is to learn the database.. anyway. I have tried to find other TH-cam react video but this is so far the most fluent decent speed English taught web-react.
Thank You Sir, i Created a react app in a one day, love from INDIA
Thanks Gagan!
Hey can you share your source code please???
@@shreyanshparashar1152 I did in the description
@@briandesign yes sir but can you share all the code?? You just shared the images and all!!
@@shreyanshparashar1152 it's on the master branch
App.js needs to be update to the new version of react router, should be like this:
Holy moly!!! 1million % the best comment ever on YT. Thank you so very much! I have been on this for two days and couldn't figure out why nothing from HeroSection was being sent.
Thank you dearly for this comment, I was stuck for a while. You're a king!
Thank you so much😀
still didn't solve..can u please help me
thank you so much !! modern react html css wow just wow !!!
Brian, it is an awesome video. It is quite lengthy but every second matters from this Brilliant session. Thanks very much, God bless you. Keep it up. I can't wait to watch more videos like this.
Thanks Brian! Smooth and easy to follow. I look forward to watching more of your content!
Many thanks for sharing bro!!👏👏👏 Please more videos like that! 🤩✌🎂
I made a few more react websites on my channel, so feel free to check those out
background-image: url('/images/img-2.jpg');
I am trying to add this but it shows a error
Error: Can't resolve '/images/img-2.jpg' in 'E:\React
eact-demo\src'
Try moving the images folder into src and change path like this
background-image: url("/src/images/img-2.jpg");
@@ramazangenis3421 it worked! thanks!
@@ramazangenis3421 thank you
thanks bro
@@ramazangenis3421 it fixes that particular issue, but adds a new problem where the css card images won't load. it would've been ideal for the image folder to be in the public folder...
Hey there Brian, great video! I have everything working, except the video that should play in the background and I can't seem to figure out why.
Here is how to fix it. Copy the video folder into the public folder and use the same link as Brian (src="/videos/video-2.mp4")
@@kylenhu916 Thanks! It worked for me.
Thanks !!!
@@kylenhu916 Is there a reason why that worked?
Buddy! This is the video I been looking for!
First time watching your videos and I loved it! Def liked, subbed and hit the bell.
Looking forward to watching more of your video man , thanks for your service to the dev world!
I had trouble with the video until I figured out everything was working, I only had to click on home. I know this is stupid, but it could save some other 'genius-like-me' a little time.
Great stuff, good video. I'm taking a little more time with it, in order to read some things up and or goof around with them to figure out how they work.
Do another one XD
Another thing worth noting,
"ReactDOM.render" is no longer supported in React 18. use createRoot instead.
In your index.js file:
import ReactDom from "react-dom";
to
import createRoot from "react-dom";
AND
ReactDOM.render(, document.getElementById("root"));
to
createRoot.render(, document.getElementById("root"));
Hey, at around 40:47, he runs the code after importing Navbar.css and ./Button. I am able to folow up until this step, but once I import both of these files and run the code, the screen just goes white. Any suggestions?
thanks man
@@kurtishoover6060 I have a similar problem what did you do?
Hey Brian, thanks for the tutorial video. It’s amazing…. But I keep having issues with my Herosection part, it’s not giving me any errors and it’s not displaying either. I have read the code line by line, still can’t find the issue
I am also stuck on this. None of that component seems to show up and I have copy and pasted his github files to try and replicate exactly what he did. Still nothing. Hero section just doesnt display for some reason
@@HelghastSon I just figured it out, with V6 you can't use the component prop anymore, and you have to use element.
So the route in App.js needs to be this:
@@mitchdrxms Hey bro the error still persists. On the import area, what should be the exact code?
@Hugh G. Rection ///////WORKS//////// Big Thanks Hugh! This worked for me to get the video working and the cards to display. Now I just need the card images 👍
It was cool! I was doing it in 2022 and sometimes I struggled a lot, cuz some stuff changed. But google helps as usually. Thank you very much for such a nice material!
Is the video in the public folder or src or component folder?
How did you apply route to the page?
@@oladapoayodeji4841 Have you addressed this issue?
@@janllever7938 Yes I have, but it's been long I did it, I can't remember how I did it.
Put the video in the src folder
Thank you very much for pulling this up bro, I gained a lot. I recreated and I added it as my project on my LinkedIn. thanks so much..
Great explanation!
btw if you are having problem with video bg not showing up, fix it with:
This is THE ONE! Been battling that issue with non-working suggestions for two days!
ok, can somebody please tell me why to use react or what the advantage is ? I can do this in a quarter of the time with simple html, css and js, why would I need react and all this weird setup
how do I use the fontawseome cdn as it is now kits , I cannot use the icons from the font cdn
Amazing tutorial! I'm using the latest versions of both React and React Router (v6), and it seems that "Switch" is no longer found in the module. "Routes" is what is used now.
This will correct the errror . I also had the same problem
Tim did you get the background videos working?
@@DJAndyO Yes.
@@timreed9722 can you share your project? I must be doing something wrong.
@@DJAndyO Yeah, my code compiles as well, but I also cannot get the video playing. I'm at the HeroSection, and everything looks fine, but I only see my navbar
thanks so much for this tutorial! It helped me build my first react website and I'm still finding it useful when building the second one.
Thanks, my first app in React, best wishes from Costa Rica ! 😃
Better find some GIF for background cuz video loads browser a lot
Instead of this is outdated
Use element instead of component
Saved me so much work with that comment. Thanks!
do you know why at this step, the herosection video is not showing up? even when i commented the background img out.
when i moved video folder as well, problem occurs, then i moved video folder back to original place. Solved. For images folder, i moved to src
Which is this home folder?
53:16 : (2022) if not showing, replace
component={Home}
by
element={}
You saved me!!! Thanks bro
If one day I will be a good frontend designer, it's because of you bro
Thank you! Could you possibly explain why we need to do this / what exactly it is doing?
@@adammanselll As I think probably it's due to upgrade in react / router version
you're a lifesaver, thank you!
Thanks for this tutorial Brian, turned out really great and learned a bunch of stuff.
1. Instead of component={Home} you need use element={} in App.js;
2. Also instend of , you need import video in HeroSection.js: import video from "../assets/videos/video-1.mp4" - format required!!! And after import use:
-----------------
I don't know why it's working, but it's working :0
I tried this way but it says it falls outside the src/
@@fenydani hey bro im having the same issue, lets figure this thing out
@@razor8192 Hi dude, i figured already it out. I forgot a duckin' return tag😂😂😂 Lemme help u
@@razor8192
I have used this code, and it works perfectly.
@@fenydani Yeah it's true...
Thanks bud...
i cant import image to css like: url('/images/img-2.jpg'), the compiler error. anyone know why?
copy images folder and add it to src. then add dot in path to image
@@Unknown-vg9um I added the dot and it's still not working :c
same issue here,finished copying images to the public folder but still no success. error is originating from the App.css[background-image: url("/images/img-2.jpg")]
Try moving the images folder into src and change path like this
background-image: url("/src/images/img-2.jpg");
answer from Ramazan Genis
@@charmz973 It worked for me....but can you tell me what's the issue when images folder is in public folder
Module not found: You attempted to import ../../images/img-1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. me sale este error alguan solucion porfas
Hey Brian I loved your tutorial, it was amazing. Could you also make a vid on how you come up with the design? and what tools/software do you use?
sure yeah I'll add that to my video list
It is a super easy to understand..... Thank u very much..... I was in the bottom and this gave me a fresh start.... thank u again...
Much appreciated for this tutorial, looking forward to more contents like this to come! Thx a lot😊
For those whose video doesn`t work, do this "import myVideo1 from '/videos/video-1.mp4'" then ""
OMG man, i tried to fix this for hours and never thought to import the video like that. Ty!
You are GOD....Thanks man
thank you man, i was fixing this problem for an hour
Font awesome cdn does not show up for me. anyone find a solution to this?
idk if you found a solution yet, but if you look up "font awesome cdn link" the first link is "Install Manually | Font Awesome Docs". And if you scroll down some, you'll find the link 👍
Great video ! I love the way we can create re-usable components like you do for the Button component.
yeah if you check out my recent react website vids I refactored a lot of code and made it even easier to reuse buttons
@@briandesign yes but the buttons all link to the same place how can I change the link :(
@@adriablake just change the 'to="/page-name"
I did this from start to finish. Great and understandable video!
did your project is running completely
I know what i'm watching tonight ;)
Hi!
Can someone please explain why videos and photos work only when image and videos folders are in public and background image only works when the image is in src folder? I wanted to put everything in src folder and my paths were correct but it didn't work until I moved it to the public folder.
Otherwise, it's a great tutorial, everything else works fine!
I struggle with the videos and images too. Did you figure it out?
Yes, I also struggle with that especially video is not rendering?
i think it based upon the path u set i did tried setting to my component folders but it was not showing until i moved to public folder
but i am having issues with linking the pages my footer is showing on every pages
Hey I'm not sure if you still react to comments on here but,
When actually using a logo for the header instead of the text with the font awesome icon, the image does not scale with the rest and makes everything misaligned, I also would like the logo to stay on mobile view as well.
The issues with normal scaling is that the black bar shortens more than the end of the screen does (so you start to see the background) and when even smaller the image just floats away. Any tips to fix it?
I am having the same problem. Were you able to fix it?
Are you talking about the nav-bar items being misaligned?
@@mikeyjpk_ yeah any solutions?
this is just what i needed to practice after studying some theory part of the hooks and all that help me with gaining confidence. Thanks Man👍
I am doing this right now! Thank you for this tutorial! I am looking forward that I can finish this and can make something similar in the future! More power to you! Thank you!
Hey man I love your video but do you mind if I ask what extensions do you use to be able to implement the "nav.className" and automatically creates the JSX snippet. Thanks in advance!
Any luck in getting the answer to this?
Did anyone else have an issue around 43 minutes where you get the error "Module not found: You attempted to import ../public/images/img-1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."
I have the same issue. While moving the img to the src folder, it works but not in the image folder.
Me too, how do i fix this issue
@@tina360 you can either create a SRCimages folder within src folder or you can, instead of setting background-image in css, just set the image in the JS file using the tag and that you can use the public image folder files. Hope that helps
Sorry to bother you, I got this error message. ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Error: Can't resolve '/images/img-2.jpg' in 'C:\Users\tina3\Desktop\React project
eact-website-yt-1\src'
Me
can anybody please tell me why my cards aren't the same height? They are all so disproportional to one another...
This is likely caused by the use of div tags at the base of your CardItem (CardItem.js function). Replace the with and you shall be alright.
Excellent video Brian.. my first try in the reactjs and learnt a lot.. looking forward to many in the future
loved! had to find a few thing because its outdated by that part of being a web dev thanks man!!!!
I am getting this error: Can't resolve '/images/img-2.jpg' in 'C:\Users\HARSHIT SINGH\travel-blog\src'
React has a special restriction when developed by create-react-app.
This restriction ensures files used are within src/
You have to either disable/eject this feature or move the image files within the src folder.
i got the same problem. pls help !!!
@@khoadao2381 I moved my images folder to src and now it does work
thanks bro
@@harshitsingh618 That does not work for me
For anyone who's having an error with importing pictures:
- Move the images and videos folder into src
- Replace the background-image URLs with: url('./images/img-2.jpg');
Hope that helps!
hmm do you happen to know why it doesn't work in the public folder? moving img to source brings up a lot of connectivity problems for me
How do you get the autofill when you type ".navbar-container" etc
in the bottom right corner of vscode, there will be a little text "javascript", click on it and write react javascript in the input that will appear in the top. Press enter and now the code will recognize .navbar-container
@@arthurlage5859 dude thanks... saved me sooo much time
in case anyone wondering, Switch in react-route-dom is now Routes
After learning ReactJs, as a beginner this is very helpful to me
great project for beginner thanks dear ?
I want to ask you some: I Noob in React JS, how I can to lean React JS fast?
just gotta code all day and build projects
@@briandesign Thanks y
@@briandesign how can I get projects on React as I am noob in React, please guide me
omg, beware at 7:50, in the Narbar.css in the @media he didn't repositioned the justify-content to start.
it really is majjor, otherwise you mobile navbar look like shit if you leave it with the actual css.
remember
Put justify-content start in nav-menu in @media in the Navbar.css file.
Thx me later.
thank you so much!!! i was trying to fix this but didn't know how. i changed the height:80vh to 60hv but it was not that beautiful, looked like a trash job.
thank you so much again
You're a lifesaver man, so glad I read your comment. I've been on it for a couple hours already and it was bugging me out
Thanx man, immediately noticed it along with a couple other changes.
this is the comment i was looking for!
thank you very much, man.