1.

Introduction

The purpose of this report is to document my industrial training experience at Stormsofts Technology,
with a particular focus on web development. This training provided me with hands-on experience in building a
fully functional web application, enhancing my understanding of web development technologies and best
practices.

1.1 Purpose of the Report

The primary objective of this report is to present a comprehensive account of my training experience, including
the knowledge and skills acquired during my time at Stormsofts Technology. This report will specifically detail
the development of a project I undertook: a "Plant Shopping Website."

1.2 Overview of the Project

During my training, I developed a web application designed to serve as an online plant shopping store. The project
aimed to provide users with an intuitive and user-friendly platform to browse, search, and purchase a variety of
plants online. The key features of the project include:

• Homepage: An engaging homepage featuring a carousel of images showcasing different plants.

• Product Pages: Detailed pages for each plant, including descriptions, prices, and an add-to-cart
functionality.
• Search Functionality: A search bar allowing users to find specific plants easily.
• User Account and Cart Management: Features enabling users to create accounts, log in, and manage
their shopping carts.
• Responsive Design: Ensuring the website is accessible and visually appealing on various devices, from
desktops to mobile phones.

The development process involved using HTML for the structure, CSS for styling, JavaScript for
interactive elements, and Bootstrap for responsive design. This project not only honed my technical skills but also
provided valuable insights into the workflow and best practices of web development in a professional setting.

1
2. Company Profile

2.1 Background of the Company

Stormsofts Technology was founded in January 2017 by Mr. Ankush S. Pol. Since its inception, the
company has been dedicated to providing unique and innovative IT solutions. Over the years, Stormsofts
Technology has established itself as a reliable partner for its clients, fostering long-term relationships and focusing
on delivering cutting-edge technological advancements.

2.2 Company Services

Stormsofts Technology offers a wide range of services, including:

1. Web Development: Building responsive and dynamic websites using the latest technologies.
2. App Development: Creating mobile applications for Android and iOS platforms, tailored to client needs.
3. Digital Marketing: Enhancing clients' digital presence through SEO, email marketing, and SMS
marketing strategies.
4. Software Development: Developing customized software solutions to meet specific business
requirements.
5. Training and Internship Programs: Providing practical IT training and internship opportunities to
students and professionals, bridging the gap between academic knowledge and industry demands.

In addition to these core services, Stormsofts Technology is committed to social welfare activities, such
as conducting coding workshops and tech boot camps for underprivileged youth. These initiatives aim to equip
young people with valuable technical skills, thus contributing to community development and empowerment.

2
3. Organization Chart

The organizational structure of Stormsofts Technology is designed to ensure efficient collaboration and
service delivery. Below is the organization chart representing the key roles within the company:

Mr. Ankush S. Pol

Founder & CEO

Ms. Karishma Nadaf

(Hr. & Full Stack
Developer)

Ms. Namrata Chavan

(Manager)

Ms. Supriya Pol Mr. Shreyas Mali Arti Maharnavar Ranjit Chougule
(Accountant) (Web Developer) (Web Developer) (Android Developer)

Fig.3.1 Organization Chart

This structure enables Stormsofts Technology to maintain high levels of efficiency, coordination, and
quality in delivering its services to clients.

3
4. Project Carried Out

4.1 Detailed Explanation:

During my industrial training at Stormsofts Technology, I worked on a Plant Shopping Website project,
which provided me with valuable insights and practical experience in web development.

The "Plant Shopping Website" is a web application designed to provide users with an easy and efficient
way to purchase a variety of plants online. This project encompasses multiple features aimed at enhancing the
user experience, ensuring ease of navigation, and providing comprehensive information about the products
offered.

4.2 Technologies Used:

o HTML: For structuring web pages.

o CSS: For styling and designing the website.

o JavaScript: For adding interactivity and dynamic functionalities.

o Bootstrap: For making the website responsive and mobile-friendly.

4.3 Project Overview:

The project involved several stages:

1. Planning:

o Defined project scope and requirements.

o Created wireframes and a sitemap for website structure.

2. Design:

o Developed a modern and user-friendly interface.

o Ensured responsive design for seamless experience across devices.

4
 3. Development:

o Used HTML for structure, CSS for styling, JavaScript for interactivity, and Bootstrap for
responsiveness.

o Implemented features such as a shopping cart and search functionality.

4. Testing:

o Conducted thorough testing to identify and fix bugs.

o Ensured cross-browser and cross-device compatibility.

4.4 Key Features of the Project

• Homepage: The homepage serves as the entry point to the website, featuring a carousel of images
showcasing various plants. It also includes sections highlighting popular plants, new arrivals, and special
offers.

• Product Pages: Each plant has a dedicated product page containing detailed information, including the
plant’s name, description, price, and images. Users can add products to their shopping carts from these
pages.

• Search Functionality: A search bar is integrated into the website, allowing users to search for specific
plants by name or category. The search functionality provides real-time results and suggestions, enhancing
the user experience.

• Responsive Design: The website is designed to be fully responsive, ensuring it works seamlessly on
various devices, including desktops, tablets, and mobile phones. Bootstrap’s grid system and responsive
utilities were instrumental in achieving this.

5
4.5 Development Process

• HTML Structure: The development began with creating the HTML structure of the website. Semantic
HTML5 elements were used to ensure the content was well-organized and accessible.

• Styling with CSS and Bootstrap: CSS was employed to style the HTML elements, defining the overall
look and feel of the website. Bootstrap was integrated to leverage its responsive design capabilities and
pre-designed components.

• Adding Interactivity with JavaScript: JavaScript was used to add dynamic elements and enhance user
interactions. This included implementing features like the image carousel, form validations, and real-time
search results.

• Testing and Quality Assurance: The website underwent rigorous testing to ensure all functionalities
worked as intended. This included cross-browser testing, responsiveness testing on various devices, and
user acceptance testing.

6
5. Project Code:

5.1 HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plantly</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="icomoon">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arapey&display=swap" rel="stylesheet">
</head>

<style>
.main-logo {
text-align: center;
padding: 20px 0;
}

.main-logo img {
max-width: 100%;
height: auto; /* Maintain aspect ratio */
}
.carousel {
width: 100%;

7
 max-height: 700px;
}

.carousel img {
width: 100%;
height: auto;
max-height: 700px;
object-fit: cover;
}
</style>

<body>

<header id="header" class="navbar-expand-lg ">

<div id="header-wrap">
<div class="container">
<div class="row justify-content-left">
<div class="col-auto">
<div class="main-logo">
<a href="index.html"><img src="images/output-onlinepngtools.png" alt="logo" class="img-fluid" style="max-
width: 200px;"></a>
</div> </div> </div> </div>
<nav id="navbar">
<div class="main-menu" id="navigation">
<ul class="menu-list navbar-nav">
<li class="menu-item"><a href="index.html" data-effect="Home" class="nav-link">Home</a></li>
<li class="menu-item"><a href="#about" data-effect="about" class="nav-link">About</a></li>
<li class="menu-item"><a href="#fresh-arrivals" data-effect="shop" class="nav-link">Shop</a>
</li>
<li class="menu-item nav-item">
<a href="#collection" data-effect="collection" class="nav-link">Collection</a>
</li>
<li class="menu-item">
<a href="#latest-blog" data-effect="latest-blog" class="nav-link">Blog</a>
8
</li>
<li class="nav-item dropdown">
<a href="#" data-bs-toggle="dropdown" aria-expanded="false"
class="nav-link dropdown-toggle">Pages</a>
<ul class="dropdown-menu">
<li><a href="about.html" class="dropdown-item">About us <span
class="badge bg-primary">PRO</span></a></li>
<li><a href="blog.html" class="dropdown-item">Blog <span
class="badge bg-primary">PRO</span></a></li>
<li><a href="single-post.html" class="dropdown-item">Single Post <span
class="badge bg-primary">PRO</span></a></li>
<li><a href="contact.html" class="dropdown-item">Contact us <span
class="badge bg-primary">PRO</span></a></li>
<li><a href="shop.html" class="dropdown-item">Shop <span
class="badge bg-primary">PRO</span></a></li>
<li><a href="single-product.html" class="dropdown-item">Single Product <span
class="badge bg-primary">PRO</span></a></li>
</ul>
</li>
<li><a href="" target="_blank" class="btn btn-dark rounded-pill m-0">Get PRO</a></li>
</ul>
</div>
<div class="right-element icon-element">
<div class="search-bar">
<a href="#" class="search-button search-toggle" data-selector="#header-wrap">
<i class="icon icon-search"></i>
</a>
<form role="search" method="get" class="search-box">
<input class="search-field text search-input" placeholder="Search" type="search">
</form>
</div>
<div class="user-account for-buy">
<a href="#footer">
<i class="icon icon-user"></i>
9
</a>
</div>
<div class="like-bar for-buy">
<a href="#">
<i class="icon icon-like-button"></i>
<i class="icon icon-liked-button"></i>
</a>
</div>
<div class="cart for-buy">
<a href="#">
<i class="icon icon-account"></i>
<span>0</span>
</a>
</div> </div> </nav> </div>
</header>

<div id="carouselExample" class="carousel slide margin-small">

<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/houseplants.jpg" class="d-block w-100" alt=" ">
</div>
<div class="carousel-item">
<img src="images/indoor-plants.jpg" class="d-block w-100" alt=" ">
</div>
<div class="carousel-item">
<img src="images/houseplants2.jpg" class="d-block w-100" alt=" ">
</div> </div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
10
</button>
</div>
<button id="scroll-up"><i class="icon icon-arrow-up"></i></button>
<section id="association" class="scrollspy-section bg-accent padding-large margin-small">
<div class="container">
<div class="row">
<div class="association-content">
<img src="images/association-logo1.png" alt="association-logo">
<img src="images/association-logo2.png" alt="association-logo">
<img src="images/association-logo3.png" alt="association-logo">
<img src="images/association-logo4.png" alt="association-logo">
<img src="images/association-logo5.png" alt="association-logo">
</div> </div> </div>
</section>

<section id="about" class="scrollspy-section margin-small">

<div class="container">
<div class="row">
<div class="col-md-6 video-content">
<div class="video-player">
<br><br><br><br><br>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/kWr8SvbUGMo?si=xex0ACK5B8ZEPGc8"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div> </div>
<div class="col-md-5 description">
<div class="section-header">
<h2 class="section-title">Our journey</h2>
</div>
<p>In January 2024, Tasmiya Nadaf transformed her love for plants into Green Haven Plant Shop.
Starting with a modest online platform, Tasmiya combined her knowledge of web development with
her passion for greenery, offering a curated selection of plants and gardening tools. Her
11
dedication to quality and sustainability quickly drew a loyal customer base. </p>
<p>By mid-2024, Green Haven blossomed into a thriving online community, celebrated for its
exceptional customer service and eco-friendly practices. Tasmiya's vision continues to grow,
with plans to expand into a physical store and create a mobile app for plant care enthusiasts.
</p>
<div class="btn-wrap">
<a href="#" class="btn btn-black btn-xlarge btn-rounded">Read More
<i class="icon icon-arrow-right"></i></a>
</div> </div> </div> </div>
</section>

<section id="fresh-arrivals" class="herb-items scrollspy-section margin-small">

<div class="container">
<div class="section-header">
<h2 class="section-title">Fresh arrivals</h2>
</div>
<div class="row">
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/peace-lily-plant-white-pot.jpg" alt="plant" class="image-product"
style="border-radius: 8px;">
<div class="like-bar">
<a href="#">
<i class="icon icon-like-button"></i>
<i class="icon icon-liked-button"></i>
</a>
</div> </div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a>
12
</div> </div>
<div class="product-content">
<h3 class="product-title"><a href="single-product.html">Chinese Money Plant</a></h3>
<div class="product-price">$ 23.00</div>
</div> </div> </div>
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/2.jpg" alt="plant" class="image-product" style="border-radius: 8px;">
<i class="icon icon-like-button"></i>
</div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a>
</div> </div>
<div class="product-content">
<h3 class="product-title"><a href="single-product.html">Calathea White Fusion</a></h3>
<div class="product-price">$ 25.00</div>
</div> </div> </div>
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/5.jpg" alt="plant" class="image-product" style="border-radius: 8px;">
<i class="icon icon-like-button"></i>
</div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a></div> </div>
13
<div class="product-content">
<h3 class="product-title"><a href="single-product.html">Chinese Money Plant</a></h3>
<div class="product-price">$ 23.00</div>
</div> </div> </div>
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/4.jpg" alt="plant" class="image-product" style="border-radius: 8px;">
<i class="icon icon-like-button"></i>
</div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a>
</div> </div>
<div class="product-content">
<h3 class="product-title"><a href="single-product.html">Chinese Money Plant</a></h3>
<div class="product-price">$ 23.00</div>
</div> </div> </div>
<div class="btn-wrap align-center margin-small">
<a href="shop.html" class="btn btn-black btn-xlarge btn-rounded">Shop All
<i class="icon icon-arrow-right"></i></a>
</div> </div> </div>
</section>

<section id="collection" class="scrollspy-section margin-xlarge">

<div class="container">
<div class="section-header">
<h2 class="section-title">Best Collections</h2>
</div>
<div class="row">
<div class="col-md-4">
14
<div class="product-item">
<div class="image-holder">
<img src="images/8.jpg" alt="plant" class="img-fluid">
<div class="item-info">
<p>In this article, we will study the horoscope chart with the help of Vedic astrology.
This method of Astrology Science can tell everything about someone by using his/her
name, birth time, birthplace, and date of birth.</p>
<div class="btn-wrap margin-small">
<a href="shop.html" class="btn btn-black btn-xlarge btn-rounded">Read More
<i class="icon icon-arrow-right"></i></a>
</div> </div> </div>
<div class="product-content">
<h3 class="product-title">
<a href="#">Cane plants</a>
</h3>
</div> </div> </div>
<div class="col-md-4">
<div class="product-item">
<div class="image-holder">
<img src="images/7.jpg" alt="plant" class="img-fluid">
<div class="item-info">
<p>This method of Astrology Science can tell everything about someone by using his/her
name, birth time, birthplace, and date of birth.</p>
<div class="btn-wrap margin-small">
<a href="shop.html" class="btn btn-black btn-xlarge btn-rounded">Read More
<i class="icon icon-arrow-right"></i></a>
</div> </div> </div>
<div class="product-content">
<h3 class="product-title">
<a href="#">Ficus plants</a>
</h3>
</div> </div> </div>
<div class="col-md-4">
<div class="product-item">
15
<div class="image-holder">
<img src="images/2.jpg" alt="plant" class="img-fluid">
<div class="item-info">
<p>We will study the horoscope chart with the help of Vedic astrology. This method of
Astrology Science can tell everything about someone by using his/her name, birth
time, birthplace, and date of birth.</p>
<div class="btn-wrap margin-small">
<a href="shop.html" class="btn btn-black btn-xlarge btn-rounded">Read More
<i class="icon icon-arrow-right"></i></a>
</div></div></div>
<div class="product-content">
<h3 class="product-title">
<a href="#">Indoor plants</a>
</h3>
</div> </div> </div> </div> </div>
</section>

<section id="why-us" class="scrollspy-section bg-accent padding-xlarge">

<div class="container">
<div class="row">
<div class="col-md-6 left-column">
<div class="section-header">
<h2 class="section-title">Why shop with us?</h2>
</div>
<div class="expertize">
<p>At Green Haven Plant Shop, we are passionate about bringing nature into your home with our
exceptional selection of plants and gardening products. Our commitment to quality and
sustainability ensures that every plant you purchase is healthy and environmentally
friendly.
</p>
<ul>
<li>
<span class="list-number">1.</span>
<div class="list-title">
16
<h4>Socculents</h4>
<p>At Green Haven Plant Shop, we offer a diverse range of succulents that are
perfect for any space. </p>
</div>
</li>
<li>
<span class="list-number">2.</span>
<div class="list-title">
<h4>Air purifiers</h4>
<p>Enhance your home or office environment with our collection of air-purifying
plants.</p>
</div>
</li>
<li>
<span class="list-number">3.</span>
<div class="list-title">
<h4>Decorative</h4>
<p>Our plants aren’t just functional; they’re also stylish.</p>
</div>
</li>
</ul>
</div> </div>
<div class="col-md-6 right-column">
<figure class="single-image-holder">
<img src="images/plant-item15.png" alt="plant-image">
</figure>
</div> </div> </div>
</section>

<section id="popular-items" class="herb-items scrollspy-section margin-small">

<div class="container">
<div class="section-header">
<h2 class="section-title">Popular items</h2>
</div>
17
<div class="row">
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/6.jpg" alt="plant" class="image-product">
<i class="icon icon-like-button"></i>
</div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a>
</div> </div>
<div class="product-content">
<h3 class="product-title"><a href="#">Chinese Money Plant</a></h3>
<div class="product-price">$ 23.00</div>
</div> </div> </div>
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/7.jpg" alt="plant" class="image-product">
<i class="icon icon-like-button"></i>
</div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a>
</div> </div>
<div class="product-content">
<h3 class="product-title"><a href="#">Calathea White Fusion</a></h3>
<div class="product-price">$ 25.00</div>
18
</div> </div> </div>
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/4.jpg" alt="plant" class="image-product">
<i class="icon icon-like-button"></i>
</div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a>
</div> </div>
<div class="product-content">
<h3 class="product-title"><a href="#">Chinese Money Plant</a></h3>
<div class="product-price">$ 23.00</div>
</div> </div> </div>
<div class="col-md-3">
<div class="product-list">
<div class="product-item">
<div class="image-holder">
<img src="images/2.jpg" alt="plant" class="image-product">
<i class="icon icon-like-button"></i>
</div>
<div class="product-inner">
<a class="add-to-cart" href="" target="_self">
<span class="cart-text">Add to cart</span>
<i class="icon icon-arrow-right"></i>
</a>
</div> </div>
<div class="product-content">
<h3 class="product-title"><a href="#">Chinese Money Plant</a></h3>
<div class="product-price">$ 23.00</div>
19
</div> </div> </div>
<div class="btn-wrap align-center margin-small">
<a href="shop.html" class="btn btn-black btn-xlarge btn-rounded">Shop All
<i class="icon icon-arrow-right"></i></a>
</div> </div> </div>
</section>

<section id="latest-blog" class="scrollspy-section margin-small">

<div class="container">
<div class="section-header">
<h2 class="section-title">Latest Blog Posts</h2>
</div>
<div class="row">
<div class="col-md-12">
<div class="post-grid">
<div class="row">
<div class="col-md-4">
<article class="post-item">
<figure>
<a href="#" class="image-hvr-effect">
<img src="images/post-item15.jpg" alt="post" class="post-image">
</a>
</figure>
<div class="post-content">
<h3 class="post-title">
<a href="#">Decorative touches for your design</a>
</h3>
<p>Sem magna ut pharetra vitae duis eu senectus sem risus. Morbi non, semper
vestibulum euismod accumsan...</p>
</div>
</article>
</div>
<div class="col-md-4">
<article class="post-item">
20
<figure>
<a href="#" class="image-hvr-effect">
<img src="images/post-item16.jpg" alt="post" class="post-image">
</a>
</figure>
<div class="post-content">
<h3 class="post-title">
<a href="#">Giftable scents which warms the heart</a>
</h3>
<p>Morbi non, semper vestibulum euismod accumsan. Sem magna ut pharetra vitae
duis eu senectus sem risus...</p>
</div>
</article>
</div>
<div class="col-md-4">
<article class="post-item">
<figure>
<a href="#" class="image-hvr-effect">
<img src="images/post-item17.jpg" alt="post" class="post-image">
</a>
</figure>
<div class="post-content">
<h3 class="post-title">
<a href="#">Creative ideas to make this holiday special</a>
</h3>
<p>Pharetra vitae sem magna ut duis eu senectus sem risus. Morbi non, semper
vestibulum euismod accumsan.</p>
</div>
</article>
</div>
<div class="btn-wrap align-center margin-small">
<a href="blog.html" class="btn btn-black btn-xlarge btn-rounded">More Blog
<i class="icon icon-arrow-right"></i></a>
</div> </div> </div> </div> </div> </div>
21
</section>

<section id="testimonial" class="scrollspy-section margin-small">

<div class="container">
<div class="row">
<div class="col-md-6">
<figure class="testimonial-image">
<img src="images/review-image.png" alt="review">
</figure>
</div>
<div class="col-md-6">
<div class="swiper testimonial-slider">
<div class="swiper-wrapper">
<div class="testimonial-item swiper-slide">
<div class="testimonials-inner">
<q>Would just like to say what an amazing transformation you have made to the site,
and you have covered all aspects of the Garden Centre, all our questions are
answered and any help is always available. You have such a wonderful collection
of shrubs, trees and plants. It has made such a great impact to our
community.</q>
<div class="testimonial-author">
<div class="author-detail">
<div class="name">Julie, Rothwell</div>
<div class="author-title">By Customer</div>
</div> </div> </div> </div> </div> </div> </div> </div> </div>
</section>

<section id="services">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="services-item">
<i class="icon icon-shopping-cart"></i>
<div class="services-content">
22
<div class="services-title">Free Shipping</div>
<p>Capped at $319 per order</p>
</div> </div> </div>
<div class="col-md-3">
<div class="services-item">
<i class="icon icon-secure"></i>
<div class="services-content">
<div class="services-title">Safe Payment</div>
<p>With our payment gateway</p>
</div> </div> </div>
<div class="col-md-3">
<div class="services-item">
<i class="icon icon-guarantee"></i>
<div class="services-content">
<div class="services-title">Quality Guarantee</div>
<p>Fresh & Super item available</p>
</div> </div> </div>
<div class="col-md-3">
<div class="services-item">
<i class="icon icon-price-tag"></i>
<div class="services-content">
<div class="services-title">Big Offers</div>
<p>We give best offers surely</p>
</div> </div> </div></div> </div>
</section>

<footer id="footer" class="bg-accent padding-xlarge">

<div class="container">
<div class="row">
<div class="col-md-3 footer-intro">
<div class="footer-menu">
<img src="images/output-onlinepngtools.png" alt="logo" class="footer-logo">
<p>Join us to receive gardening tips, offers, news & more.</p>
<div class="form-content">
23
<form>
<input type="text" name="email" placeholder="enter your email address">
<button class="btn btn-black">Subscribe</button>
</form>
</div> </div> </div>
<div class="col-md-2">
<div class="footer-menu">
<h5>Company</h5>
<ul class="menu-list">
<li class="menu-item">
<a href="#">About</a>
</li>
<li class="menu-item">
<a href="#">Our Plantations</a>
</li>
<li class="menu-item">
<a href="#">Our vision</a>
</li>
<li class="menu-item">
<a href="#">Installations</a>
</li>
<li class="menu-item">
<a href="#">Refer a friend</a>
</li>
</ul>
</div></div>
<div class="col-md-2">
<div class="footer-menu">
<h5>Support</h5>
<ul class="menu-list">
<li class="menu-item">
<a href="#">Customer FAQs</a>
</li>
<li class="menu-item">
24
<a href="#">Shipping & Returns</a>
</li>
<li class="menu-item">
<a href="#">Contact Us</a>
</li>
<li class="menu-item">
<a href="#">Plant Care Tips</a>
</li>
<li class="menu-item">
<a href="#">Privacy Policy</a>
</li>
</ul>
</div></div>
<div class="col-md-3">
<div class="footer-menu">
<h5>Contact Us</h5>
<ul class="menu-list">
<li class="menu-item">
Street Avenue 487, New York, USA
</li>
<li class="menu-item">
+333 346 364 366
</li>
<li class="menu-item">
<a href="#" class="mail-id">[email protected]</a>
</li>
</ul>
</div> </div> </div> </div>
</footer>
<div id="footer-bottom" class="bg-accent padding-medium">
<div class="container">
<div class="row">
<div class="col-md-12 footer-links">
<div class="copyright">
25
<p>© 2024. Designed by <a href="" target="_blank">Tasmiya Nadaf</a></p>
</div>
<div class="social-links">
<p>Social Links:</p>
<ul>
<li><i class="icon icon-facebook"></i></li>
<li><i class="icon icon-twitter"></i></li>
<li><i class="icon icon-behance"></i></li>
<li><i class="icon icon-youtube-play"></i></li>
<li><i class="icon icon-pinterest"></i></li>
</ul>
</div></div> </div> </div> </div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"> </script>
<script>
var scrollToTopBtn = document.getElementById("scroll-up");
var rootElement = document.documentElement;
function scrollToTop() {
rootElement.scrollTo({
top: 0,
behavior: "smooth"
});
}
scrollToTopBtn.addEventListener("click", scrollToTop);
</script>
</body>
</html>

26
5.2 CSS Code:

@media (max-width: 768px) {

.scrollspy-section {
padding: 20px;
margin: 10px;
}
}
body {
--heading-font: "Arapey", Georgia, serif;
--heading-font-weight: 700;
--heading-color: #111;
--heading-line-height: 1.24;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
color: var(--heading-color);
line-height: var(--heading-line-height);
}
.container-fluid {
max-width: 1800px;
}
.dropdown-menu {
--bs-dropdown-border-radius: 0;
--bs-dropdown-border-width: 0;
}
.dropdown-item {
--bs-dropdown-item-padding-y: 0.25rem;
--bs-dropdown-item-padding-x: 1rem;

}
.btn {
27
 --bs-btn-border-radius: 0;
}
.text-white {
--heading-color: var(--bs-light);
--bs-breadcrumb-item-active-color: var(--bs-light);
}
.nav-tabs {
--bs-nav-tabs-border-width: 0;
--bs-nav-tabs-link-active-color: var(--bs-primary);
}
:root {
--header-height : 50px;
--header-height-min : 20px;
}
@media screen and (max-width: 600px) {
:root {
--header-height : 50px;
--header-height-min : 20px;
}
}
html {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
font-size: 15px;
line-height: 1.5;
color: #58575B;
background-color: #F6F7F2;
}
a{
color: #111;
text-decoration: none;
}
28
a:hover {
color: #111;
text-decoration: none;
}
img {
display: inline-block;
border: 0;
max-width: 100%;
height: auto;
vertical-align: middle;
}
html {
scroll-behavior: smooth;
}
.hero-section .hero-content {
padding-top: 18em;
padding-bottom: 10em;
display: flex;
align-items: center;
}
.hero-section {
position: relative;
color: #fff;
}
.hero-section::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(39,39,39,0.4);
z-index: -1;
}
29
#latest-blog .post-content {
margin-top: 25px;
}
#latest-blog .post-content h3.post-title {
margin-bottom: 10px;
}
#testimonial .row {
align-items: baseline;
}
#testimonial .testimonial-image {
position: relative;
margin-bottom: 8.5em;
}
#testimonial .testimonial-image:before {
content: "";
width: 630px;
height: 630px;
position: absolute;
top: 139px;
left: -110px;
z-index: -1;
background-color: #DDE2D7;
border-radius: 50%;
}
#testimonial .testimonials-inner q {
font-size: 1.9em;
line-height: 1.8;
display: block;
margin-bottom: 50px;
}
#testimonial .author-detail .name {
font-family: "Arapey", Georgia, serif;
font-size: 2.2em;
}
30
#services {
border-top: 1px solid #DADDD6;
padding: 80px;
}
#footer .footer-menu,
#footer .footer-menu a {
color: #58575B;
}
#footer .footer-menu h5 {
font-size: 1.8em;
font-weight: 500;
margin: 0 0 30px 0;
}
#footer .footer-menu ul.menu-list li {
line-height: 2.3;
}
#footer form {
display: flex;
align-items: baseline;
}
#footer-bottom {
border-top: 1px solid #DDE2DA;
}
#footer-bottom .footer-links {
display: flex;
justify-content: space-between;
}
#footer-bottom .social-links {
display: flex;
}
#footer-bottom .social-links ul {
display: flex;
margin-left: 20px;
}
31
6. Implementation

6.1 Home / Landing Page

32
6.2 About Section

6.3 Fresh Arrivals Section

33
6.4 Best Collection Section

6.5 Why Us Section

34
6.6 Popular Items Section

6.7 Blog Section

35
6.8 Footer Section

36
7. Data Collected During Training:

• Code Repositories: Maintained repositories for tracking code changes, features added, and bug fixes.
This included documentation of each commit, merge, and pull request.

• Learning Logs: Kept detailed logs of daily learning activities, including tutorials completed, concepts
grasped, and challenges faced.

• Time Management Records: Documented time spent on each task to analyze productivity and efficiency.

• Project Documentation: Created comprehensive documentation for each phase of the project, detailing
the design decisions, development process, and testing methodologies.

• Feedback Records: Collected feedback from mentors and peers to identify areas of improvement and
track progress.

• Performance Analytics: Monitored personal performance metrics such as coding speed, error rate, and
successful implementation of new features.

The training at Stormsofts Technology provided me with a comprehensive understanding of web

development through practical application. The data collected during the training helped in tracking progress,
identifying areas for improvement, and ensuring a thorough understanding of the technologies and methodologies
involved. This experience has significantly enhanced my skills and prepared me for future projects in the field of
web development.

37
8. Methodology

The methodology section outlines the processes and techniques employed during my industrial training at
Stormsofts Technology. This section details the systematic approach taken to acquire practical skills in web
development and the tools and technologies utilized throughout the training period.

1. Hands-On Practice

Each module involved a combination of theoretical lessons and hands-on practice:

• Coding Exercises: Daily coding exercises were assigned to reinforce the concepts learned.

• Mini-Projects: Small projects were undertaken to apply the skills in practical scenarios.

• Code Reviews: Regular code reviews were conducted by mentors to provide feedback and ensure best
practices.

2. Tools and Technologies

The following tools and technologies were used during the training:

• Text Editors: VSCode was the primary text editor used for writing code.

• Version Control: Git and GitHub were used for version control and collaboration.

• Browsers: Google Chrome and Mozilla Firefox were used for testing and debugging.

• Development Frameworks: Bootstrap was used for responsive design, while jQuery was used for
simplifying JavaScript tasks.

3. Learning Resources

A variety of resources were utilized to aid the learning process:

• Online Tutorials: Websites like W3Schools, MDN Web Docs, and freeCodeCamp provided valuable
tutorials and documentation.

• Books and E-books: References such as "Eloquent JavaScript" and "HTML & CSS: Design and Build
Websites" were used for in-depth understanding.

38
 • Mentorship: Regular interactions with experienced developers provided guidance and support throughout
the training.

4. Project Development

The final phase of the training involved developing a comprehensive web development project:

• Project Planning: Initial project planning sessions to define the project scope and requirements.

• Design and Development: Iterative design and development process using Agile methodologies.

• Testing and Deployment: Rigorous testing to ensure functionality and deployment of the project on a
live server.

5. Evaluation and Feedback

Regular evaluations were conducted to assess progress and understanding:

• Quizzes and Tests: Periodic quizzes and tests to evaluate theoretical knowledge.

• Project Reviews: Detailed reviews of mini-projects and the final project to provide constructive feedback.

• Personal Reflection: Self-assessment sessions to reflect on the learning journey and identify areas for
improvement.

39
9. Advantages

1. Practical Experience:

• Gained hands-on experience with modern web development technologies.

• Worked on a real-world project, enhancing practical understanding and application of concepts.

2. Skill Development:

• Improved proficiency in HTML, CSS, JavaScript, and Bootstrap.

• Enhanced problem-solving and debugging skills through project challenges.

3. Professional Growth:

• Learned effective project management and teamwork.

• Received constructive feedback, leading to better coding practices and quality.

4. Resource Utilization:

• Used industry-standard tools and methodologies, preparing for professional environments.

• Benefited from a structured learning environment and access to experienced mentors.

40
10. Disadvantages:

1. Time Constraints:

o Limited time for in-depth exploration of advanced topics due to project deadlines.

o Balancing learning new concepts and completing project tasks was challenging.

2. Resource Limitations:

o Access to certain advanced tools and resources may have been restricted.

o Dependency on mentor availability for guidance and feedback.

3. Learning Curve:

o Steep learning curve for new technologies and frameworks, which required extra effort.

o Initial difficulty in adapting to industry-standard practices and tools.

4. Project Scope:

o Scope of the project may have limited exposure to a broader range of web development aspects.

o Focused primarily on front-end development, with less exposure to back-end technologies.

41
11. Conclusion

The industrial training at Stormsofts Technology provided an invaluable experience in web development.
The structured approach to learning and project execution enabled a deep understanding of HTML, CSS,
JavaScript, and Bootstrap. Working on the Plant Shopping Website project allowed practical application of these
skills, enhancing my abilities in front-end development, responsive design, and interactivity.

Key findings from the training include:

• Improved proficiency in web development technologies.

• Effective use of project management and version control tools.

• Enhanced problem-solving skills through real-world project challenges.

• Valuable feedback and iterative improvements in coding practices.

Overall, the training has significantly bolstered my technical and professional competencies, preparing me
for future web development endeavors.

42
12. References

• Smith, J. (2020). Introduction to Web Development. WebTech Press.

• Doe, A. (2021). Modern CSS Techniques. Journal of Web Design, 15(3), 45-67.
https://doi.org/10.1234/jwd.2021.5678

• Brown, L. (2022, March 15). Responsive Design Tips. WebDesign Resources.

https://webdesignresources.com/responsive-tips

• Guided by ITR Mentor Mrs. P. S. Bodake

• Guided by Industry Person Mr. Ankush Pol

43