Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will be using React Hooks and React Router for this project. The main sections are reusable components that you can customize and reuse anywhere on your site.

Access Source Code Here (Scroll to bottom of page)
https://www.codavilla.com/posts/react-website-using-styled-components-and-smooth-scroll

Timeline

  • 0:00 Website Design we’re building
  • 4:26 Creating React Project
  • 9:18 Creating our Project Files
  • 10:44 Creating Navbar
  • 16:10 Styling Navbar
  • 46:51 Creating Sidebar/Dropdown Menu
  • 48:15 Styling Sidebar
  • 1:07:22 Creating Home Page
  • 1:14:21 Creating Hero Section
  • 1:16:55 Styling Hero Section
  • 1:32:50 Creating Button Element
  • 1:43:12 Creating Reusable Info Section
  • 1:47:22 Styling Info Section
  • 2:06:08 Adding Data to Info Section
  • 2:18:43 Adding Smooth Scroll to Info Section Buttons
  • 2:33:18 Creating Services Section
  • 2:37:06 Styling Services Section
  • 2:47:53 Creating Sign In Page
  • 2:48:39 Adding React Routes to Website
  • 2:52:08 Creating Footer
  • 2:59:15 Styling Footer
  • 3:20:18 Changing Navbar background on scroll
  • 3:24:52 Adding React Scroll to our site
  • 3:34:20 Creating Sign In Component
  • 3:38:52 Scroll to Top on Page/Route Change

#react #javascript #web-development #programming #developer

React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive
3.00 GEEK