Sign up
Sign up
Still Confused?
Affiliate IconRequest a Callback

Add Default HTML and Font (index.html)

Add Default HTML and Font (index.html)

Update index.html inside the public/ folder like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gen-Z Image Carousel</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="bg-black font-[Poppins]">
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Share

You can share this topic with your family and friends on Social Media.

Share in

Building a GenZ Carousel App in React

author

Building a GenZ Carousel App in React

MODULE 1 : Introduction
lessonWhat is ReactJS and Why Use It?
lessonWhat is an Image Carousel App?
lessonAim of the Project
MODULE 2 : Pre-requisites and Tech Stack Used
lessonBasic Requirements for our GenZ Carousel App
lessonTech Stack Used for the Carousel App
lessonInput and Output for our GenZ Carousel App
MODULE 3 : Necessary Concepts
lessonUnderstanding Components in React
lessonState Management in ReactJS
lessonEvent Handling in React
lessonJSX and Styling in React
lessonAnimating Slides with Framer Motion
MODULE 4 : Step-by-Step Implementation
lessonSetting up the Environment
lessonInstall and Configure Tailwind CSS
lessonCreate the Application Structure (Directory Overview)
lessonBuild the Carousel in App.jsx
lessonStyling the Carousel App With index.css
lessonSetup Entry Point (main.jsx)
lessonAdd Default HTML and Font (index.html)
lessonTest and Run the Carousel App Locally
MODULE 5 : Deployment
lessonUploading Your Carousel App to GitHub
lessonDeploying the Carousel App to Netlify
MODULE 6 : Conclusion
lessonLearning Outcomes of the Project
lessonLive Link & Output Screenshot
lessonMCQs
lessonResources for Future Learning

Building a GenZ Carousel App in React

MODULE 1 : Introduction
lessonWhat is ReactJS and Why Use It?
lessonWhat is an Image Carousel App?
lessonAim of the Project
MODULE 2 : Pre-requisites and Tech Stack Used
lessonBasic Requirements for our GenZ Carousel App
lessonTech Stack Used for the Carousel App
lessonInput and Output for our GenZ Carousel App
MODULE 3 : Necessary Concepts
lessonUnderstanding Components in React
lessonState Management in ReactJS
lessonEvent Handling in React
lessonJSX and Styling in React
lessonAnimating Slides with Framer Motion
MODULE 4 : Step-by-Step Implementation
lessonSetting up the Environment
lessonInstall and Configure Tailwind CSS
lessonCreate the Application Structure (Directory Overview)
lessonBuild the Carousel in App.jsx
lessonStyling the Carousel App With index.css
lessonSetup Entry Point (main.jsx)
lessonAdd Default HTML and Font (index.html)
lessonTest and Run the Carousel App Locally
MODULE 5 : Deployment
lessonUploading Your Carousel App to GitHub
lessonDeploying the Carousel App to Netlify
MODULE 6 : Conclusion
lessonLearning Outcomes of the Project
lessonLive Link & Output Screenshot
lessonMCQs
lessonResources for Future Learning
Gift IconUnlock Your Exclusive Rewards!

You have exclusive rewards which you can unlock by earning Geekoins. Explore your rewards now!

Explore Rewards