React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive
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.
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
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
Host your React Website for Free
https://youtu.be/C0CNIhRzhYg
VS Code Theme I use
https://youtu.be/6etaWaiMkvM
React Website with Styled Components using only React Router
https://youtu.be/iP_HqoCuRI0
Видео React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive канала Brian Design
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
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
Host your React Website for Free
https://youtu.be/C0CNIhRzhYg
VS Code Theme I use
https://youtu.be/6etaWaiMkvM
React Website with Styled Components using only React Router
https://youtu.be/iP_HqoCuRI0
Видео React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive канала Brian Design
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Web Developer Reacts to Incredible Personal Websites // Personal PortfoliosTema light/dark com React, Styled Components e TypeScript | Code/Drops #16React Website Tutorial - Beginner React JS Project Fully ResponsiveBeginner React.js Coding Interview (ft. Clément Mihailescu)How to Make a Website using HTML, CSS, & GSAP with Scroll Animation EffectComplete Responsive Blooger Website Using HTML/CSSBuild a React Accordion Component Dropdown from ScratchWhy you should look into these React component styling options!Learn useState In 15 Minutes - React Hooks ExplainedReact Website Using Styled Components - Beginner React JS Project Fully ResponsiveReact Tutorial For BeginnersReact Bootstrap TutorialReact Form Validation Using Custom Hooks Tutorial - Beginner React JS ProjectReact Sidebar with Dropdown Menu Tutorial - Create Sub NavigationLet's Build a Full-Stack AMAZON Clone with REACT JS for Beginners (Full E-Comm Store in 8 Hrs) 20216 Pro Tips from React DevelopersLearn Styled Components In 15 Minutes! | React TutorialsBuild a Responsive Website Using HTML & SASS/SCSS TutorialReact Website Responsive Tutorial - Beginner React JS Project Using Hooks and Router