React Website Tutorial – Beginner React JS Project Fully Responsive

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

damn cant get the solution to get the images displayed as cards.. 🙁

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

why after i add {button && <Button buttonStyle='btn–outline'>How It Works?</Button>} my localhost turn into white page? 🥲

goood

uf you can send me the link to the font awsome cdn or do you have to upgrade to pro

For future people, if your nav-menu is not rendered as 42:42, remember to add justify-content: start to the .nav-menu.active in Navbar.css as following:

.nav-menu.active {

background: #242222;

left: 0;

opacity: 1;

transition: all 0.5s ease;

z-index: 1;

justify-content: start;

}

it doesn't show on browser

Thanks for your tutorial!
And for everyone who got stuck at 54:20: if your page doesn't show up, at first try using Routes (don't forget to import it from react-router-dom) instead of Switch. And in <Route/> use element instead of component. And if it still doesn't work try adding < and /> around Home. This helped for me, so maybe this will prevent u guys from searching and searching on google! Code example below:

<Router>
<Navbar/>
<Routes>
<Route path="/" element={<Home/>}/>
</Routes>
</Router>

If you are failing to render image at 1:15:29 and your images folder is in the public folder, go to the App.css file and change
this 👉🏾 .services {

background-image: url("/images/img-2.jpg"); ….to this 👉🏾 .services {

background-image: url("/public/images/img-2.jpg");

Module not found: Error: You attempted to import /videos/video-1.mp4 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

You can either move it inside src/, or add a symlink to it from project's node_modules/.

Pleease help me on this tq

The video arent displaying foe me but i followed correctly every steps.. Any idea what can be my problame?

What emmet extension are you using?

Very good night <3
I'm like your way of thinking, how you organize your projects. Thanks)

1. Instead of component={Home} you need use element={<Home />} in App.js;
2. Also instend of <video src="./example"></video>, you need import video in HeroSection.js: import video from "../assets/videos/video-1.mp4" – format required!!! And after import use: <video src={video}></video>
—————–
I don't know why it's working, but it's working :0

Thank you , very much dear bro 💙

Hey im trying to follow along, but when I’ve followed the button components building, its still displaying as a bullet point list any fix appreciated or suggestions

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:

<Route path='/' exact element={<Home/>} />

For those using react router v6:

function App() {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />} />
</Routes>
</Router>

</>
);
}

above will fix your path so that the Home page will show up every time.

Anyone else having issues with <video src> part, or the backgroun-image: url(), I tried moving the files to src but no luck

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?

Hey – how are you getting the elements to create simply by typing some kind of alias? It's not working for me

i put npx create in the terminal but its not working

Can I use this project in my portfolio? Is it legal?

I think I managed to learn the essentials through this video…

where to write code, can some one reply me please i m new for this but i wanted to create aa website on my own.

which theme are you using in vscode?

having issues with this error – Module not found: Error: Can't resolve './Components/Navbar' in '/Users/admin1/website/src'

Hi, could you make a video on,How to fetch data from sql server database stored procedure to react app frontend

what is the type={type} attribute in the button for? it's never used. wouldn't it give you error?

Thanks for thanks

for those who has problem to display the video, change the code like this and it will work

import Video from '../videos/video-2.mp4' ;
<video src={Video} autoPlay loop muted />

does anyone got the navbar css. he deleted it in git

Excellent work 🙏