🔥Create an NFT Collection Website Landing page with React JS [Mobile Responsive]

Опубликовано: 03 Март 2022
на канале: CodeBucks

53,408

1.6k

React JS NFT Collection Website Landing Page Tutorial😇

Demo Link🖤: https://the-weirdos.netlify.app/
-----------------------------------------------
Need Web Development or AI Solutions Services? 🚀
Let's bring your ideas to life!
Contact Me From Here: https://tally.so/r/wdlj0N
-----------------------------------------------
Blog📖: https://devdreaming.com

Hi there 👋,

In this video,
I am going to create a whole NFT Collection Landing Page with ReactJS.
Here I have used very few libraries and made a unique design, You can check the demo link.

-----------------------------------------------------------------------------------------------------------
NOTE 🔴:
There is one change in the Button.js File.
Wrap Btn inside Link component for the link to work.
-----------------------------------------------------------------------------------------------------------
Starter CODE:
https://github.com/codebucks27/The-We...

Final CODE:
Get Website from below Link 👇

Starter Code:
➡ Link💚: https://github.com/codebucks27/The-We...

Final Code:
➡ Link 1💚: https://codebucks.lemonsqueezy.com
➡ Link 2💚: https://codebucks.gumroad.com/l/auvqv
🔰[Click Above Link to get final code]🔰
-----------------------------------------------------------------------------------------------------------

For this project, we're going to use,
▶️ React JS (CRA)
▶️ GSAP for smooth scrolling animations
▶️ styled-components for styling
▶️ Typewriter-Effect
▶️ React-Confetti
▶️ React-Use

Don't forget to watch the whole video, we're going to learn a lot of stuff like,
▶️ Complex Animaitions in React
▶️ How to create Scrolling effects using Gsap
▶️ How we can leverage advantages of component structure
▶️ How to use confetti in React JS for awesome background effects
▶️ Uses of Lazy and suspense in reactJS to make components load faster
▶️ How to use different Hooks from react-use
▶️ How to draw SVG path on scroll

Watch the full video to understand, so that you can easily build and customize your own website.

[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]

🟢Click on below link🤩 to get more resources💻 (Weekly Updates)👇
https://linktr.ee/codebucks

Timestamps⏳
Channel Intro: @0:00:00
Demo: @0:00:10
Let's get started @0:06:48
Code Clean Up @0:09:00
Creating Global Styles @0:11:06
Creating Necessary Files @0:19:05
Navigation Component @0:22:52
Home Section @0:41:34
About Section @1:09:14
RoadMap Section @1:32:54
Showcase Section @2:21:36
Team Section @2:44:50
Faq Section @3:03:50
Banner & Footer Section @3:22:46
Working With Navbar @3:47:15
Scroll To Top Component @3:52:00
Making it Responsive @4:01:34

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
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,

Build awesome🔥 landing page for Apple iphone using ThreeJS + ReactJS
   • 🔥Build awesome 3D landing page for Ap...

🔥Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]
   • 🔥Build a Stunning Portfolio Website w...

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

If you want to learn Redux as a beginner here is a 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! 😉

Buy me a coffee and Support this channel🥰:
https://www.buymeacoffee.com/CodeBucks

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

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

#NFTCollectionWebsite
#ReactWebsite
#WebsiteInReact