# Create a Mobile Responsive NFT Collection Website with ReactJS

> Learn how to create a mobile responsive NFT collection website landing page with ReactJS in this step by step tutorial. Discover the use of GSAP, styled-components, React-Confetti, and more to create unique animations and background effects.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/create-nft-collection-website-reactjs
- **Author:** CodeBucks
- **Published:** 2022-03-02
- **Topics:** React Js

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=edr2o59Twrs)**

### Overview

In this video, you'll learn how to create a fully responsive NFT collection website landing page using [React JS](/videos/category/react-js). The video covers the entire process of creating the [landing page](/videos/category/website-template) from scratch, including the use of various tools and technologies. This website uses different libraries such as `swiper` for carousel, `react-confetti` to add confetti animation etc. Before starting this video you can checkout the following demo link👇

**Link🔗:** [NFT website template in ReactJS](https://the-weirdos.netlify.app/)

### What You'll Learn

By watching this video tutorial, you will learn the following:

- Complex Animaitions in React.
- How to create [Scrolling effects](/blogs/smooth-scrolling-in-react-js) 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.

### Key Features of This NFT Website

- Multiple sections such as home, about, showcase, team, faq etc.
- Cool Background Effects
- Unique design
- Mobile Responsive
- Unique approach to showcase your NFTs
- Speed optimization by code-splitting
- Smooth animations using gsap
- Animating svg on scroll
- Easy to customize

### Libraries Used

For this project, you will use the following libraries:

- CRA (create-react-app)
- Styled-components
- gsap
- react-use
- typewriter-effect
- react-confetti

### Code Links

You can find the starter code for this project at: [NFT website starter code](https://github.com/codebucks27/The-Weirdos-NFT-Website-Starter-Code) (Give ⭐ to this repo if you like it)

And, for the final code,

**Link-1: Gumroad:** [NFT collection website code](https://codebucks.gumroad.com/l/auvqv)

### Resources

You can find all the resources used to make this website from the following:

- Fonts are from [Fontsource](https://fontsource.org/).
- Special Thanks to [Robert](https://twitter.com/robertbrosma) for creating [Bigheads](https://bigheads.io/).
- All the svg files used in this website are from [Icons8](https://icons8.com) and [FreeSVG](https://freesvg.org/).

### Time Stamps

The video tutorial has the following time stamps for you to follow along:

- Channel Intro: [@0:00:00](https://www.youtube.com/watch?v=edr2o59Twrs&t=0s)
- Demo: [@0:00:10](https://www.youtube.com/watch?v=edr2o59Twrs&t=10s)
- Let's get started [@0:06:48](https://www.youtube.com/watch?v=edr2o59Twrs&t=408s)
- Code Clean Up [@0:09:00](https://www.youtube.com/watch?v=edr2o59Twrs&t=540s)
- Creating Global Styles [@0:11:06](https://www.youtube.com/watch?v=edr2o59Twrs&t=666s)
- Creating Necessary Files [@0:19:05](https://www.youtube.com/watch?v=edr2o59Twrs&t=1145s)
- Navigation Component [@0:22:52](https://www.youtube.com/watch?v=edr2o59Twrs&t=1372s)
- Home Section [@0:41:34](https://www.youtube.com/watch?v=edr2o59Twrs&t=2494s)
- About Section [@1:09:14](https://www.youtube.com/watch?v=edr2o59Twrs&t=4154s)
- RoadMap Section [@1:32:54](https://www.youtube.com/watch?v=edr2o59Twrs&t=5574s)
- Showcase Section [@2:21:36](https://www.youtube.com/watch?v=edr2o59Twrs&t=8496s)
- Team Section [@2:44:50](https://www.youtube.com/watch?v=edr2o59Twrs&t=9890s)
- Faq Section [@3:03:50](https://www.youtube.com/watch?v=edr2o59Twrs&t=11030s)
- Banner & Footer Section [@3:22:46](https://www.youtube.com/watch?v=edr2o59Twrs&t=12160s)
- Working With Navbar [@3:47:15](https://www.youtube.com/watch?v=edr2o59Twrs&t=13635s)
- Scroll To Top Component [@3:52:00](https://www.youtube.com/watch?v=edr2o59Twrs&t=13920s)
- Making it Responsive [@4:01:34](https://www.youtube.com/watch?v=edr2o59Twrs&t=14496s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._