React Website Tutorial - Beginner React JS Project Fully Responsive

Подписаться 113 тыс.

Просмотров 1,7 млн

50% 1

Learn how to build a React website from scratch in this tutorial. We will use React Hooks and React Router for this beginner React JS Project. The website is fully responsive as well. Feel free to refactor the code and send me your versions!
Timeline
0:00 What we are building
2:58 Creating React app in terminal
7:50 Getting the source files
24:10 Creating the Button Component
45:00 Creating the Hero Component
52:04 Creating our Pages
59:30 Creating the Card Components
1:16:10 Creating the Footer Component
1:40:36 Replace Video Background with Image
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Here is the source code
github.com/briancodex/react-w...
Codeacademy Pro Review
• Codecademy Pro Review ...

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 2,1 тыс.

@briandesign 3 года назад

Get the source code here: www.codavilla.com/posts/react-website-travel-website-design

@CreativeWorkersBest 3 года назад

css codes where? I cannot find in your github.

@briandesign 3 года назад

@@CreativeWorkersBest check the master branch

@CreativeWorkersBest 3 года назад

@@briandesignI found thank you

@drunkpanda3686 3 года назад

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 3 года назад

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

@alques-dias 2 года назад

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 2 года назад

Thanks! Wish I saw this comment 30 minutes sooner!

@nadamm6555 2 года назад

Also component is changed into element

@jk480p 2 года назад

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?

@alques-dias 2 года назад

@@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 2 года назад

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

@jalenmickey3813 6 месяцев назад

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 2 месяца назад

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

@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 11 месяцев назад

It says Home is not defined. How to solve?

@michaellam4082 11 месяцев назад

@@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 11 месяцев назад

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 10 месяцев назад

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

@severedghost 3 года назад

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 3 года назад

true!

@anasizmaz5594 3 года назад

Thanks, was really Helpful

@Matin1999_unique 2 года назад

thank you very much.

@nicholasobrien5914 Год назад

Feeling emotional lol great video

@stayalivewithjohn3039 3 месяца назад

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

@icyrealm7 3 года назад

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

@briandesign 3 года назад

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

@imaninjakinda9640 3 года назад

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

@paulburg5741 2 года назад

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

@urbanadventures2023 2 года назад

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!

@j-williamsuckau3963 2 года назад

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!

@fernandosegre9116 3 года назад

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

@scotianwheels 3 месяца назад

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!

@urmomapollo 2 года назад

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

@jwhubert91 3 года назад

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 3 года назад

Thanks James!

@pekwind 3 года назад

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 3 года назад

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

@pekwind 3 года назад

@@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 3 года назад

@@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 2 года назад

Thanks for Sharing! :)

@joaomarcoscarvalho10 2 года назад

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

@notmanymore1521 10 месяцев назад

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!

@arianmm-1 8 месяцев назад

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

@OMorningStar 3 года назад

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

@briandesign 3 года назад

nice!

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

@eliseerickson5994 3 года назад

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

@nechetv6268 2 года назад

Nice can you be of help to me please

@latinstuff1 2 года назад

It’s not 3 hours -____-

@ghfranklin 2 года назад

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

@latinstuff1 2 года назад

@@ghfranklin I guess so

@linusyong4731 Год назад

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

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

@fernandocoelho8791 3 года назад

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

@briandesign 3 года назад

Thanks Fernando!

@MrFsudude 3 года назад

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

@marcusramirez3911 3 года назад

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

@efrainlemus3047 2 года назад

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.

@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 6 месяцев назад

I totally agree

@michaeljensen8867 5 месяцев назад

Totally. He need structure

@Darvis227 12 дней назад

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

@sappasa 3 года назад

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

@mikee1of1 2 года назад

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

@santoshnakka7431 2 года назад

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.

@dairoarleygarciavergara373 3 года назад

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

@briandesign 3 года назад

Thanks Dairo!

@nocturno7887 3 года назад

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

@attilaviniczai7215 3 года назад

When they should be using Typescript.

@marothimahlake7458 3 года назад

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

@nadin3amanda 2 года назад

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!

@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 10 месяцев назад

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

@kwandamadela7707 8 месяцев назад

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 7 месяцев назад

Thank you!

@eldionevruzi 3 года назад

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

@Aj-po9dc 2 года назад

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!

@techthred6595 3 года назад

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

@Giroudgiroud8 3 года назад

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

@clairesingson3331 Год назад

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

@bunlongpheng5394 Год назад

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

@stryker2k2 3 года назад

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 3 года назад

It really helped me a lot . Thanks !

@Calebinator1999 3 года назад

THANK YOU. This issue was driving me crazy.

@adrienesquerre5790 3 года назад

Thank you !

@stryker2k2 3 года назад

@@ziraddingulumjanly8432 I'm glad it helped!

@stryker2k2 3 года назад

@@Calebinator1999 My pleasure!

@shifairtheprogrammer5571 3 года назад

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 3 года назад

Thanks!

@divyakumar1653 3 года назад

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

@GlocOr33 7 месяцев назад

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👍

@suryapanday9722 2 года назад

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

@aaronsoto3823 3 года назад

Man keep up the good work! great things are coming for you!

@briandesign 3 года назад

Aye thanks Aaron!

@burgeractivity 9 месяцев назад

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

@tf7788 3 года назад

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

@briandesign 3 года назад

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 2 года назад

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

@Plopi 11 месяцев назад

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

@user-ej3zt7ho9l 3 года назад

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 3 года назад

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

@user-ej3zt7ho9l 3 года назад

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

@yellowrice8633 10 месяцев назад

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

@tonyrm2027 3 года назад

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

@panosbsds9536 8 месяцев назад

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

@yhr4052 3 года назад

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

@briandesign 3 года назад

Thanks!

@debanjandey64 2 года назад

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

@dlos8357 2 года назад

You saved me!!! Thanks bro

@emreturhan8570 2 года назад

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

@adammansell9310 2 года назад

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

@debanjandey64 2 года назад

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

@ahra_ 2 года назад

you're a lifesaver, thank you!

@snackdaddy1260 Год назад

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

@Barcie. 19 дней назад

One of the greatest tutorials. Thank you for this!

@Italya3343 3 года назад

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

@briandesign 3 года назад

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

@annieperdue6140 2 года назад

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

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

@letsgobowling7 2 года назад

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

@DJMrTen 2 года назад

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

@yanisleb5507 2 года назад

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 2 года назад

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_unique 2 года назад

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.

@jamesgriesedieck5116 6 месяцев назад

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!

@zachmccaughan5854 3 года назад

Thanks for the tutorial Brian!

@gagankashyap2401 3 года назад

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

@briandesign 3 года назад

Thanks Gagan!

@shreyanshparashar1152 3 года назад

Hey can you share your source code please???

@briandesign 3 года назад

@@shreyanshparashar1152 I did in the description

@shreyanshparashar1152 3 года назад

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

@briandesign 3 года назад

@@shreyanshparashar1152 it's on the master branch

@vladislavbutorin7350 2 года назад

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

@sanskarbhatt5935 Год назад

did your project is running completely

@smbdcry 3 года назад

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 RU-vid react video but this is so far the most fluent decent speed English taught web-react.

@michaelnti5616 3 года назад

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 3 года назад

sure yeah I'll add that to my video list

@siamazing0828 2 года назад

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?

@Pro_Rust_Addict 3 года назад

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

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

@peirdenaasem 3 года назад

I know what i'm watching tonight ;)

@excelaror8593 3 года назад

Thank you very much bro, you're giving me a new practice lesson on how to code using React.js

@gerdakasselman3411 2 года назад

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

@braddygabrielabarcaaraniba6322 3 года назад

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

@avinashgupta6361 3 года назад

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 3 года назад

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

@Mr77igor 3 года назад

@@ramazangenis3421 it worked! thanks!

@mdeeds1313 3 года назад

@@ramazangenis3421 thank you

@mzakysyukur3417 3 года назад

thanks bro

@mistersir3185 3 года назад

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

@user-ci2vb2rh6d 2 месяца назад

I had loads of fun with this project thank you.

@user-yz8pc9ev4p Год назад

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!

@oladapoayodeji4841 Год назад

Is the video in the public folder or src or component folder? How did you apply route to the page?

@janllever7938 Год назад

@@oladapoayodeji4841 Have you addressed this issue?

@oladapoayodeji4841 Год назад

@@janllever7938 Yes I have, but it's been long I did it, I can't remember how I did it.

@oladapoayodeji4841 Год назад

Put the video in the src folder

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

@GrandofTheftHero 3 года назад

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 3 года назад

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 3 года назад

@@kylenhu916 Thanks! It worked for me.

@bernardozelaya2685 3 года назад

Thanks !!!

@ThrillerNotLive 3 года назад

@@kylenhu916 Is there a reason why that worked?

@ryanxvx 2 года назад

Man this was so awesome, thanks for the tutorial!

@timreed9722 2 года назад

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 2 года назад

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

@DJAndyO 2 года назад

Tim did you get the background videos working?

@timreed9722 2 года назад

@@DJAndyO Yes.

@DJAndyO 2 года назад

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

@stevethach3340 2 года назад

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

@theookelola5985 3 года назад

Yo! This was dope! Thank you!

@antareephasan7536 3 года назад

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

@luongbich3223 3 года назад

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

@Unknown-vg9um 3 года назад

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

@leonardodossantos703 3 года назад

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

@charmz973 3 года назад

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 3 года назад

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 3 года назад

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

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

@nerdytech7836 3 года назад

Cant wait to try it out and experiment with it :)

@moroka-dd2zn Год назад

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

@ImpeRiaLGoD 3 года назад

For those whose video doesn`t work, do this "import myVideo1 from '/videos/video-1.mp4'" then ""

@lucasmota9475 3 года назад

OMG man, i tried to fix this for hours and never thought to import the video like that. Ty!

@christephpemmanuvel6711 3 года назад

You are GOD....Thanks man

@deeqmohamed823 10 месяцев назад

thank you man, i was fixing this problem for an hour

@davidkroods811 3 года назад

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

@maheryrickyrafanomezantsoa6814 3 года назад

Thank you for this tutotrial!! you just saved my life!! :-D

@benbenitez2945 Год назад

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

@prestonmoore7962 3 года назад

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

@arthurlage5859 3 года назад

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 3 года назад

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

@df3ink 3 года назад

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 2 года назад

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 2 года назад

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

@codecodeworld22 8 месяцев назад

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

@angelarojas1603 3 года назад

Hi Brian, great video. All your videos have been so helpful. Keep it up with your great job.

@briandesign 3 года назад

Thanks!

@anontough6907 2 года назад

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 2 года назад

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