React Website🤩 : Build Responsive website with ReactJS, Styled-Components & GSAP❣️

Опубликовано: 13 Май 2021
на канале: CodeBucks

30,796

891

Build ReactjS website with GSAP for cool scrolling animations😇

Demo Link🖤: https://agency-website-eta.vercel.app/

Blog📖: https://devdreaming.com

Hey Guys,

In this video we're going to build cool Agency Landing page in ReactJS. We will use GSAP for awesome scrolling animations and parallax effects.

Code Files👇:
https://devdreaming.com/videos/respon...

For this project we're going to use,
▶️ React Hooks
▶️ GSAP for scrolling animations
▶️ Styled-Components
▶️ React-slick for Carousal
▶️ DOM methods

Don't forget to watch whole videos, we're going to learn a lot of stuff like,
▶️ React Hooks
▶️ Folder structure for React Projects
▶️ How to create Hamburger Menu with only css
▶️ How we can leverage advantages of component structure
▶️ How to use GSAP in React JS for awesome animations while scrolling
▶️ Many awesome CSS animations

TimeStamps🕒:

Intro: @0:00:00
Demo: @0:00:10
Installation & Setup: @0:04:50
Folder Structure: @0:07:40
Header Section (Navigation Bar): @0:19:15
Hero Section : @0:45:36
About Section : @1:16:10
Services Section : @1:37:40
Testimonials Section : @2:04:04
Contact Section & Footer: @2:24:18
ScrollToTop Component : @2:52:40
Testimonials Section : @2:04:04
Adding Gsap Animation in Header and Service Section: @3:01:30

Watch whole video in order to understand so that you can use GSAP freely on your own projects.

Final CODE:
https://github.com/codebucks27/Agency...
[ Please give appropriate credit for all assets which are used in this website, You can find them in GitHub Repo Description ]
[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

In upcoming videos, I'm going to create lots of cool stuff with JavaScript and react so make sure to subscribe.

Like, Sub🥂 & Share! ♥

Learn More About,

If you want to learn Redux as a beginner here is Tutorial for you 💖:
   • React Redux Tutorial for beginners

Build Devto Clone in React:
   • Build Dev.to Clone in React

Build Awesome stuff with ReactJs (Playlist) :
   • Build with ReactJs

React Advanced Topic (Playlist) :
   • React Advanced Concepts | Every React...

If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.

Thank You for watching! 😉

Music Credits🎵:

SwuM - Skates https://chll.to/20f1eaba

Stan Forebee, The Field Tapes, azula, Francis - Harbor https://chll.to/ff7bc9f7

Sleepy Fish - Rest Until Dark https://chll.to/aaa2a412

Montell Fish - Imagination https://chll.to/dbed443e

Psalm Trees, Guillaume Muschalle - Desire https://chll.to/575d082f

Song: Markvard - Take A Chance
Music provided by Vlog No Copyright Music.
Video Link:    • Markvard - Take A Chance (Vlog No Cop...

C Y G N - Roses n Flames https://chll.to/f94ddc93

Get more awesome music from https://chillhop.com

Where else you can find me:
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

Disclaimer:
All videos are for educational purpose and use them wisely. Any Resources used in this video are for educational purpose only.

#ReactWebsite
#HowToCreateWebsiteInReact
#WebsiteInReactJS