React Website Tutorial - Beginner React JS Project Fully Responsive

[@briandesign]

Get the source code here: www.codavilla.com/posts/react-website-travel-website-design Favorite Resource for Learning React: v2.scrimba.com/?via=briandesign

[@CreativeWorkersBest]

css codes where? I cannot find in your github.

[@briandesign]

@@CreativeWorkersBest check the master branch

[@CreativeWorkersBest]

@@briandesignI found thank you

[@drunkpanda3686]

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

[@briandesign]

@@drunkpanda3686 you could set a fixed width and height for your images that matches the size of your card

[@lucas_diass]

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';

[@mitchskizzy]

Thanks! Wish I saw this comment 30 minutes sooner!

[@nadamm6555]

Also component is changed into element

[@jk480p]

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?

[@lucas_diass]

@@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.

[@jk480p]

@@lucas_diass 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');

[@jwhubert91]

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.

[@briandesign]

Thanks James!

[@linusyong4731]

For those stuck at 53:16, you have to change the component to element, like this: . I hope this helps

[@michaellam4082]

well that helped out a lot!

[@dylaneamos]

It says Home is not defined. How to solve?

[@michaellam4082]

​@@dylaneamos do you know where you created the `Home.js` file? in this video the directory of that is`src/components/pages/Home.js`.

[@SmashAdams]

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

[@mohamedalitalbe739]

Thank you so much man, I wwas stuck for 30min looking for the problem

[@icyrealm7]

Yes! A nice modern reactjs tutorial (others were from 2 years ago!), straight to point and effective! THanks!

[@briandesign]

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

[@severedghost]

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.

[@briandesign]

true!

[@anasizmaz5594]

Thanks, was really Helpful

[@Matin1999_T]

thank you very much.

[@nicholasobrien5914]

Feeling emotional lol great video

[@stayalivewithjohn3039]

i am still having hard time to link pages home service products sign up what should i do

[@BoostHealthHorizon]

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!

[@paulburg5741]

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!!

[@fernandosegre9116]

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!!

[@eliseerickson5994]

I feel like I just learned an entire semester's worth of web development in 3 hours

[@nechetv6268]

Nice can you be of help to me please

[@latinstuff1]

It’s not 3 hours -____-

[@ghfranklin]

@@latinstuff1 pausing and coding along can make it 3 hours XD

[@latinstuff1]

@@ghfranklin I guess so

[@linusyong4731]

​@@ghfranklin for me it's like 1 week XD

[@j-williamsuckau3963]

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!

[@jalenmickey3813]

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'

[@MauroMaculan]

i don't see my hamburger, and the code is this BlueBay Home

[@pokerabend1]

well to keep it easier to follow, and I hope I didn't fall over my own feet there, I imported 'Routes as Switch'

[@OMorningStar]

I'm sure I can recreate this, but I love coding along. Thank you, jumping in soon.

[@briandesign]

nice!

[@scotianwheels]

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]

in which class I should do manually export and importing?

[@scotianwheels]

@@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.

[@arianmm-1]

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

[@urmomapollo]

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!!!

[@imaninjakinda9640]

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 !!!

[@fernandocoelho8791]

This was amazing man, thank you so much for this awesome work! Good job!

[@briandesign]

Thanks Fernando!

[@MrFsudude]

This is really well explained and a beautiful site. Excellent content, thanks Brian

[@burgeractivity]

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

[@yhr4052]

Man, I don't know why I'm saying this, but I like you! You give off such positive energy.

[@briandesign]

Thanks!

[@stryker2k2]

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}

[@ziraddingulumjanly8432]

It really helped me a lot . Thanks !

[@Calebinator1999]

THANK YOU. This issue was driving me crazy.

[@adrienesquerre5790]

Thank you !

[@stryker2k2]

@@ziraddingulumjanly8432 I'm glad it helped!

[@stryker2k2]

@@Calebinator1999 My pleasure!

[@mitchdrxms]

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:

[@boyzrulethawld1]

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?

[@X4R80]

@@boyzrulethawld1 you gotta do import Home from ‘./components/pages/Home‘; but that should be in the video

[@boyzrulethawld1]

@@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.

[@X4R80]

@@boyzrulethawld1 well, if you sign up and paste the link it gives you, everything should work

[@janllever7938]

@@X4R80 Hey bro. it still doesn't work. Do you have any clue to fix this?

[@B4rci3]

One of the greatest tutorials. Thank you for this!

[@notmanymore1521]

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!

[@dairoarleygarciavergara373]

This is a beautiful tutorial a page, Thank you very much!!! I watched until end

[@briandesign]

Thanks Dairo!

[@sappasa]

Thank you, Brian! The content is focused and engaging!

[@techthred6595]

Thank you brian. I enjoyed this. I also love your clear english

[@marothimahlake7458]

Quality content right here. I even watched as as many ads as I can. You deserve it mate!

[@pokerabend1]

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

[@kwandamadela7707]

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

[@rmnvishal]

Thank you!

[@debanjandey64]

53:16 : (2022) if not showing, replace component={Home} by element={}

[@dlos8357]

You saved me!!! Thanks bro

[@emr3-turhan]

If one day I will be a good frontend designer, it's because of you bro

[@adammanselll]

Thank you! Could you possibly explain why we need to do this / what exactly it is doing?

[@debanjandey64]

@@adammanselll As I think probably it's due to upgrade in react / router version

[@ahra_]

you're a lifesaver, thank you!

[@ГеоргийМихайлов-д6с]

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]

I dont have an option to select javascript react. Do I have to get some sort of extension for this autocompletion?

[@ГеоргийМихайлов-д6с]

@@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

[@Kheldc]

So far the best React JS beginner tutorial video here in KZbin! keep it coming bro. ✌️

[@snackdaddy1260]

yooo this tutorial just showed me every single thing i needed to learn in one place much appreciated

[@shifairtheprogrammer5571]

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.

[@briandesign]

Thanks!

[@pekwind]

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]

That's weird, because the video is playing perfect but images doesn't work..

[@pekwind]

@@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.

[@frankiecostoya4591]

@@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.

[@scienceofpsi2148]

Thanks for Sharing! :)

[@joaomarcoscarvalho10]

wow. I spent nearly 2 hours trying to solve this. Thanks

[@nocturno7887]

Thank you! I love it, you are using modern JS.

[@attilaviniczai7215]

When they should be using Typescript.

[@Aj-po9dc]

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!

[@codecodeworld22]

Much appreciated for this tutorial, looking forward to more contents like this to come! Thx a lot😊

[@annieperdue6140]

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".

[@suryapanday9722]

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

[@Italya3343]

Many thanks for sharing bro!!👏👏👏 Please more videos like that! 🤩✌🎂

[@briandesign]

I made a few more react websites on my channel, so feel free to check those out

[@AP_Aman33]

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👍

[@clairesingson3331]

i would like to express my deepest appreciation for creating this tutorial and also including the source code ... .thankyou again

[@AnkitRegmi-pj8lz]

how do I use the fontawseome cdn as it is now kits , I cannot use the icons from the font cdn

[@ishitashetty8499]

Great explanation! btw if you are having problem with video bg not showing up, fix it with:

[@shaman75]

This is THE ONE! Been battling that issue with non-working suggestions for two days!

[@andressierra4850]

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!

[@SignorPao]

thanks dude

[@kingsleyseatsntreats7156]

Cheers man!!

[@monikantagogoi7858]

its not working for me

[@aecho5955]

Thanks alot my man! 🙌🙌🙌

[@aecho5955]

@@monikantagogoi7858 Do you see that there is not component={Home} but exactly element={}. Not component. Element.

[@Giroudgiroud8]

thank you so much !! modern react html css wow just wow !!!

[@panosbsds9536]

Thanks Brian for sharing your knowledge. I created my first ever react static website cause of this video. Thanks a lot!

[@최지우-r6b]

I had loads of fun with this project thank you.

[@gagankashyap2401]

Thank You Sir, i Created a react app in a one day, love from INDIA

[@briandesign]

Thanks Gagan!

[@shreyanshparashar1152]

Hey can you share your source code please???

[@briandesign]

@@shreyanshparashar1152 I did in the description

[@shreyanshparashar1152]

@@briandesign yes sir but can you share all the code?? You just shared the images and all!!

[@briandesign]

@@shreyanshparashar1152 it's on the master branch

[@avinashgupta6361]

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]

Try moving the images folder into src and change path like this background-image: url("/src/images/img-2.jpg");

[@Mr77igor]

@@ramazangenis3421 it worked! thanks!

[@mdeeds1313]

@@ramazangenis3421 thank you

[@mzakysyukur3417]

thanks bro

[@mistersir3185]

@@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...

[@zombiegeekboy]

For those using react router v6: function App() { return ( ); } above will fix your path so that the Home page will show up every time.

[@mariiakrater9579]

thank you! was just about to start looking for an answer to that!

[@boyzrulethawld1]

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]

@@boyzrulethawld1 Hey did you find the solution for this?

[@boyzrulethawld1]

@@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.

[@abhayhiredesai7648]

@@boyzrulethawld1do you know how you got TRVL to show up, mine doesn’t, I’ve done . But nothing shows up still

[@abdulganiuganikale9311]

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..

[@lakdiniarambawaththa1536]

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...

[@Silv3rSurf3r]

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

[@Bettys_artjournal]

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

[@HelghastSon]

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

[@mitchdrxms]

​@@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:

[@janllever7938]

@@mitchdrxms Hey bro the error still persists. On the import area, what should be the exact code?

[@ingollc5616]

@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 👍

[@braddygabrielabarcaaraniba6322]

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

[@santoshnakka7431]

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.

[@eldionevruzi]

Thanks for this tutorial Brian, turned out really great and learned a bunch of stuff.

[@yellowrice8633]

If you are having errors with the hero section video. Use this

[@midhatdjafar294]

thanks

[@imike964]

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.

[@MrWood10]

I totally agree

[@michaeljensen8867]

Totally. He need structure

[@Darvis227]

Bro I was half way through and I just gave up because it was just back and forth I'll find another tutorial

[@josephezra1701]

Please I copied and pasted the navbar.css code but the text and trvl logo are not displaying just a black bar on screen

[@marcusramirez3911]

Thanks Brian! Smooth and easy to follow. I look forward to watching more of your content!

[@benbenitez2945]

loved! had to find a few thing because its outdated by that part of being a web dev thanks man!!!!

[@yanisleb5507]

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.

[@GameChanger-ep3tf]

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

[@Matin1999_T]

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.

[@luongbich3223]

i cant import image to css like: url('/images/img-2.jpg'), the compiler error. anyone know why?

[@Unknown-vg9um]

copy images folder and add it to src. then add dot in path to image

[@leonardodossantos703]

@@Unknown-vg9um I added the dot and it's still not working :c

[@charmz973]

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")]

[@charmz973]

Try moving the images folder into src and change path like this background-image: url("/src/images/img-2.jpg"); answer from Ramazan Genis

[@yashnistane6728]

@@charmz973 It worked for me....but can you tell me what's the issue when images folder is in public folder

[@Hamiscool]

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.

[@nadin3amanda]

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!

[@divyakumar1653]

Excellent video Brian.. my first try in the reactjs and learnt a lot.. looking forward to many in the future

[@Elnur.Zarabi]

Font awesome cdn does not show up for me. anyone find a solution to this?

[@legacys24]

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 👍

[@letsgobowling7]

App.js needs to be update to the new version of react router, should be like this:

[@DJMrTen]

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.

[@dagi_works]

Thank you dearly for this comment, I was stuck for a while. You're a king!

[@hashinisigera2342]

Thank you so much😀

[@monikantagogoi7858]

still didn't solve..can u please help me

[@jonnymcshu9148]

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."

[@nargesnavidi9388]

I have the same issue. While moving the img to the src folder, it works but not in the image folder.

[@tina360]

Me too, how do i fix this issue

[@jonnymcshu9148]

@@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

[@tina360]

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'

[@jannoriko7465]

Me

[@M1GGY-TV]

I'll sub. You deserve it. When I found out I could make a website I was so happy. Thank you

[@moroka-dd2zn]

just finished this tutorial BIG UP BRO !...GREAT WORK !

[@michaelnti5616]

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?

[@briandesign]

sure yeah I'll add that to my video list

[@GrandofTheftHero]

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.

[@kylenhu916]

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")

[@veenakatti2825]

@@kylenhu916 Thanks! It worked for me.

[@bernardozelaya2685]

Thanks !!!

[@ThrillerNotLive]

@@kylenhu916 Is there a reason why that worked?

[@sjonniesjonnie4378]

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?

[@mattr9887]

I am having the same problem. Were you able to fix it?

[@mikeyjpk_]

Are you talking about the nav-bar items being misaligned?

[@ananyasahay]

@@mikeyjpk_ yeah any solutions?

[@malouette3991]

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.

[@smajin28]

I'm already stuck on the first link at 16:30. There's nothing different at all with my code. But I didn't use npx. I used npm to set everything up and chose JS. So my file structure and files were different from yours when starting.

[@timreed9722]

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.

[@HriCode]

This will correct the errror . I also had the same problem

[@DJAndyO]

Tim did you get the background videos working?

[@timreed9722]

@@DJAndyO Yes.

[@DJAndyO]

@@timreed9722 can you share your project? I must be doing something wrong.

[@stevethach3340]

@@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

[@siamazing0828]

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!

[@HCOSalsa]

Any luck in getting the answer to this?

[@tonyrm2027]

Thanks, my first app in React, best wishes from Costa Rica ! 😃

[@vladislavbutorin7350]

I did this from start to finish. Great and understandable video!

[@sanskarbhatt5935]

did your project is running completely

[@mistersir3185]

can anybody please tell me why my cards aren't the same height? They are all so disproportional to one another...

[@KevinOmyonga]

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.

[@prestonmoore7962]

How do you get the autofill when you type ".navbar-container" etc

[@arthurlage5859]

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

[@Submersed24]

@@arthurlage5859 dude thanks... saved me sooo much time

[@dzoza777]

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!

[@annavardaxoglou7291]

I struggle with the videos and images too. Did you figure it out?

[@zeeshanhasankhan]

Yes, I also struggle with that especially video is not rendering?

[@stayalivewithjohn3039]

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

[@stayalivewithjohn3039]

but i am having issues with linking the pages my footer is showing on every pages

[@tf7788]

Great video ! I love the way we can create re-usable components like you do for the Button component.

[@briandesign]

yeah if you check out my recent react website vids I refactored a lot of code and made it even easier to reuse buttons

[@adriablake]

@@briandesign yes but the buttons all link to the same place how can I change the link :(

[@Plopi]

@@adriablake just change the 'to="/page-name"

[@jamesgriesedieck5116]

Thanks for the great video! Awesome project and easy to follow along! Would have been stuck if not for the comments about replacing the switch with routes. Would also love to see how to do this by looping through the info instead of hardcoding it in the cards, but would be a fun challenge to try to set that up for myself. Will definitely be checking out more of your videos!

[@df3ink]

I'm following along with this tutorial, but for some reason when I've added the images and other card content, the row of two cards is not centered with the row of three underneath it. Also, the cards are all different sizes depending on the text entered. I copied and pasted the CSS into the Cards.css file, but can't seem to figure out what the issue is.

[@lamdoan4233]

I got the same issue, i played around with the code, it might be of the CardItem.js, normally the code would be wrapped in fragment by default, it caused the problem. If you wrap the code in empty fragment , it would solve the problem (to be honest i have no idea why)

[@df3ink]

@@lamdoan4233 thanks for taking the time to reply! I’ll try that, thanks!

[@harshitsingh618]

I am getting this error: Can't resolve '/images/img-2.jpg' in 'C:\Users\HARSHIT SINGH\travel-blog\src'

[@AsianSensationz]

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.

[@khoadao2381]

i got the same problem. pls help !!!

[@harshitsingh618]

@@khoadao2381 I moved my images folder to src and now it does work

[@khoadao2381]

thanks bro

[@timevora1316]

@@harshitsingh618 That does not work for me

[@Pavankumar-xl4ov]

For the images to work in local I moved images mentioned in App.css to src/images path. and images mentioned in cards.js i moved to public/images folder. if i didnt do like that, i was ran into errors. why is it so.

[@HFQca]

I am having a similar issue the images for my cards work but in my app.css the background images give me a failed to compile error. i tried to create a src/images folder but I still have the same error

[@abhishekchitara3253]

same error hai

[@abhishekchitara3253]

please solve me

[@antareephasan7536]

I learned a lot from this video. Thanks man :D , keep blessing us with this kind of video.

[@slatercolt]

Definitely Subscribed after finishing this! Thank you!!

[@peirdenaasem]

I know what i'm watching tonight ;)

[@Paragonx89]

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"));

[@kurtishoover6060]

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?

[@farokhcooper8788]

thanks man

[@dreamgood130]

@@kurtishoover6060 I have a similar problem what did you do?

[@anontough6907]

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.

[@felipeklopper5173]

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

[@yakisobro]

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

[@chandrakant6283]

Thanx man, immediately noticed it along with a couple other changes.

[@siowjerhan]

this is the comment i was looking for!

[@arparthur]

thank you very much, man.

[@bunlongpheng5394]

This is a really good tutorial. Really appreciated. It helps me a lot in terms of my first website portfolio. Thank you

[@gerdakasselman3411]

Thank you for sharing! I enjoyed coding along with you!

[@davidkroods811]

Better find some GIF for background cuz video loads browser a lot