React Website Tutorial - Beginner React JS Project Fully Responsive

Brian Design · 1.9M views · 2020 · 1:42:17

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it as the tutorial they were following when they hit a specific bug, usually citing a timestamp such as the navbar or hero section steps.

Recommended by 0 people across 0 different months, 2021 to 2024.

What it is

A 1h42m beginner project tutorial by Brian Design that builds a fully responsive multi-page React website from scratch. It uses React Hooks and React Router, and covers a navbar, hero section with video background, card components, buttons and a footer.

What people said

Cites Lộc Nguyễn Thế · 2021-07 · Stack Overflow · on “auto import classname Reactjs”

[link] [this video] Here is the link of this lesson. at the time ** 10:23** i do not know how it works. Thank you

Cites laffytaffy · 2021-08 · Stack Overflow · on “Nav.navbar autocompletion not working in React”

I am following this [this video] React tutorial. At 10:21, he uses the shortcut nav.navbar to create a nav with className "navbar." However, when I try to do this in my code editor (VS Code) it doesn't autocomplete. Does anyone know how to fix this?

Cites Saad Satter · 2021-09 · Stack Overflow · on “How To Align Items To the Top In CSS/HTML Using React js”

I made a navbar in react and I want it so that my list of menu options are aligned to the top. I was following a tutorial on youtube but I can't seem to find where this step was done. (youtube Link for tutorial [this video] ). I tried searching and changing many things, but nothing seems to work. Here is the picture of what I see, the top black border is where I want to align 'Home' with [LINK] . Navbar.js Code import React, {useState, useEffect} from 'react' import { Link } from 'react-router-dom' import { Button } from './Button'; import './Navbar.css' import EnderLogo from '../Logo/EnderLogo.png'; const Navbar = () => { const [click, setClick] = useState(false); const [button, setButton] = use

Cites M.R · 2022-11 · Stack Overflow · on “Error: EPERM: operation not permitted errno:-1”

I wanted to make a react native app so I was following this video [this video] React Website Tutorial. I am primarily on windows I wanted my computer to accept commands just like Brian's. So I figured out a way [LINK] Using Corry's method on installing the Ubuntu app I also installed a couple of things listed below and tried running the command npx create-react-app added 1394 packages in 5m 213 packages are looking for funding run `npm fund` for details node:internal/fs/utils:348 throw err; ^ Error: EPERM: operation not permitted, copyfile '/mnt/c/Users/user/Visual Studio Code Projects/website/react-website/node_modules/cra-template/template/README.md' -> '/mnt/c/Users/user/Visual Studio Code Pro

Cites jefrey hernandez rodriguez · 2024-08 · Stack Overflow · on “React do not render an element”

Context I am creating a web page for a future production project with react by watching this video [this video] . At the moment of merging the navigation menu with the HeroSection (Home) 53:16 in the video [this video] , react only render the Navigation instead of both at the same time. Objective Render Home and the navigation bar. Additional information I get no errors in the web console when rendering the code and I do not get any visual indicator of the video when adding for example a background-color: red in the video tag style of HeroSection.css . Directory structure +---public favicon.ico index.html logo192.png logo512.png manifest.json robots.txt +---images +---videos rings.mp4 +---src App.css