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!

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 🙂

Here is the source code

Codeacademy Pro Review



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


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

    <Route path="/" element={<Home/>}/>

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

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

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

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

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

  8. For those using react router v6:

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


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

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

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

Leave A Reply

Please enter your comment!
Please enter your name here