React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about styled-components, react-scroll with React Router, and layout problems that people hit while following this same tutorial.
Recommended by 4 people across 4 different months, 2021 to 2022.
What it is
A 3 hour 44 minute beginner project tutorial from Brian Design that builds a fully responsive React website from scratch. It uses styled-components, React Router, React Hooks and react-scroll, with reusable navbar, sidebar, hero, info, services and footer components.
What people said
Recommends Mekel Ilyasa · 2021-02 · Stack Overflow · on “I'm trying to include CSS code in js file. But not working”
There are some typos in your code, you must be following this [this video] Youtube tutorial right? CMIIW. Before learn react you should have a basic understanding of how JSX [LINK] works in react and how to styling a component [LINK] in react. In this case, you're using CSS-in-JS library called styled-components , you can learn more about styled-components in this link [LINK] . Here some of your code that I already fix it: // navbarElements.js import styled from 'styled-components'; import {Link as LinkR} from 'react-router-dom' export const Nav = styled.nav` background: #000; height: 80px; /*margin-top: -80px;*/ display: flex; justify-content: center; align-items: center; postiion: sticky; top:
Recommends DylanD · 2021-11 · Stack Overflow · on “React passing img src from Data.js to index.js but is showing as [object model] in page source”
I'm trying to pass the path name from a Data file to my index page for a page section, all the other things being passed like text and true or false variables work fine, but passing the "require(../../images/svg-1.sv)" shows up as [object model] in the page source instead of the require and image source. Page Source Error [LINK] Following this tutorial video: [this video] Data.js: export const homeObjOne = { id: "about", lightBg: false, lightText: true, lightTextDesc: true, topLine: "Premium Bank", headline: "Unlimited Transactions with zero fees", description: "Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees.", buttonLabel: "Get sta
Recommends JonayahJ · 2022-02 · Stack Overflow · on “React (HTML) video tag won't autoplay on mobile devices”
I primarily used styled-components when working on this project. To do so, you need to import styled from "styled-components" in the file where you are creating the styles for your component (basically, using JSX to style instead of CSS). It's a lot to explain in a comment, but this tut video explains how to use react styled-components: [this video]
Recommends Johan · 2022-05 · Stack Overflow · on “is there a way to implement react scroll along with react router dom?”
there is a youtube tutorial if you would like to have to a look, it build website from scratch using router and react-scroll: [this video]