Create React App Using Vite: Complete Beginner's Guide (2026)

Image
How to Create a React App Using Vite: Step-by-Step Tutorial 1. Introduction React.js is a popular JavaScript library used to create interactive and modern websites. Many beginners want to learn React but feel confused about how to install it and start their first project. Before writing React code, we need a proper development environment. In this tutorial, you will learn how to create a React app using Vite from the beginning. We will cover the basic requirements, installation process, project structure, important features, advantages, disadvantages and practical code examples. 2. What Is React.js? React.js is an open-source JavaScript library used to build user interfaces, especially for websites and web applications. It was originally developed at Facebook (now Meta ) to make it easier to manage complex and interactive website interfaces. React allows developers to divide a website into smaller parts called components. Each component can manage its own structure and behaviour. Fo...

About us page design

  How to create  About page using  html and CSS, JS

about page


how to Create About  page using  html and CSS ,JS

👇ஃ Create a  About us page  with source codeஃ

Source Code 


<!DOCTYPE html>
<html>

<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible"
content="IE=edge" />
  <!-- Mobile Metas -->
  <meta name="viewport"
content="width=device-width,
initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <link rel="shortcut icon"
href="images/favicon.png" type="image/x-icon">

  <title>
About Me
  </title>
  <meta name="viewport"
content="width=device-width, initial-scale=1">
<meta charset="utf-8">
  <meta name="viewport"
content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
href="css/style.css">
  <link rel="stylesheet" type="text/css"
href="https://
cdnjs.cloudflare.com/ajax/libs/font-awesome
/5.15.1/css/all.min.css">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


</style>

  <!-- slider stylesheet -->
  <link rel="stylesheet" type="text/css"
href="https://
cdnjs.cloudflare.com/ajax/libs/OwlCarousel2
/2.3.4/assets/owl.carousel.min.css" />

  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css"
href="css/bootstrap.css" />

  <!-- Custom styles for this template -->
  <link href="css/style.css" rel="stylesheet"/>
  <!-- responsive style -->
  <link href="css/responsive.css"
rel="stylesheet" />
</head>

<body>
<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img\backgroundimagejpg2.jpg"
style="width:100%">
 
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img\anarkali salwar
suitbackground.jpg" style="width:100%">
 
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img\backgroundimg1.jpg"
style="width:100%">
</div>

</div>


<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

       
<script>
let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.
getElementsByClassName("mySlides");
  let dots = document
.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length)
{slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].
className.replace(" active", "");
  }
  slides[slideIndex-1].style.display =
"block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); //
Change image every 2 seconds
}
</script>

  <div class="hero_area">
     

  </div>
 

  <section class="contact_section
layout_padding">
   
    <div class="container container-bg">

      <div class="row">
        <div class=" col-md-3 px-0">
         
        </div>
        <div class="col-md-9 px-0 p-3">
            <center ><b><h1>ABOUT US
</h1></b></center>
           
            <p><center><b>
            Shree Saree shop this product
at home with the help of different type of
saree. we are able to view unique and
attractive design.
The owner of the macarme product 2years
experience for created the Shree
saree shop product but she as working on this
</center></b>
            </p><br>
            <div>
        <center><b><h1>My Vision :
</h1></b> </center>
        <p><center><b>
         Shree saree shop product
is made creative and innovative way
fulfillment of customer orders
</center></b>
        </p>  
    </div>
        </div>
      </div>

   
  </section>


  <script src="js/jquery-3.4.1.min.js">
</script>
  <script src="js/bootstrap.js"></script>
  <script src="https://cdnjs.cloudflare.com/
ajax/libs/OwlCarousel2/2.3.4/
owl.carousel.min.js">
  </script>
  <script src="js/custom.js"></script>

</body>

</html>


how to make About  page using  html and CSS,JS

Output :-

contact us page


Related Post :-

Comments

Popular posts from this blog

HTML Tag

CSS Text Color Explained with Syntax and HTML Examples

CSS Outline Offset Property with Practical Examples