Page 1 of 31
INTERNSHIP REPORT
A report submitted in partial fulfillment of the requirements for the Award of Degree of
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
By
Mershesha.M.M
Regd No:963323104065
Under Supervision of
Page 2 of 31
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
ROHINI COLLEGE OF ENGINEERING AND TECHNOLOGY
(An Autonomous Institution)
Page 3 of 31
CERTIFICATE
This is to certify that the “Internship report” submitted by
Mershesha.M.M(Regd. No.963323104065) is work done by her and submitted
during 2024 – 2025 academic year, in partial fulfillment of the requirements for the
award of the degree of BACHELOR OF TECHNOLOGY in COMPUTER
SCIENCE AND ENGINEERING, at AK Infopark Pvt. Ltd., Parvathipuram.
College Internship Coordinator Department Internship
Coordinator
Page 4 of 31
Page 5 of 31
ACKNOWLEDGEMENT
First and foremost, I would like to express my sincere gratitude to Mr.
[Supervisor’s Name], Internship Coordinator at AK info park, for
giving me the opportunity to carry out my internship within the
organization.
I also extend my thanks to all the team members and staff at
Ak info park for their support, guidance, and for providing a
professional and friendly working environment. Their valuable
suggestions and constructive feedback helped me throughout the
development of the project.
I am deeply thankful to Prof. , Director of Rohini College of
Engineering and Technology, and to our Principal Dr Rajesh for
their encouragement and the facilities provided.
I sincerely thank Dr., Head of the Department of Computer Science and
Engineering, for his motivation and valuable suggestions throughout the
internship.
Mershesha.M.M
[963323104065]
B.E. – CSE
Rohini College of Engineering and Technology
ABSTRACT
Page 6 of 31
This internship project involved the development of a Flipkart Clone, a
fully responsive e-commerce website using front-end technologies such
as HTML, CSS, Bootstrap, and JavaScript. The main aim of this project
was to simulate the core design and basic functionality of the Flipkart
platform, one of the leading e-commerce websites in India.
The project focuses on building key features such as the homepage
layout, product categories, navigation bar, product detail sections, and a
basic cart interface. Throughout the project, I followed standard UI/UX
principles and responsive design techniques to ensure that the website
looks and functions well on different devices.
This internship allowed me to gain hands-on experience in real-time web
development, improve my technical skills, and understand the software
development lifecycle in a professional working environment like AK
info park.
ORGANIZATION PROFILE – AK INFOPARK
AK info park is a professional IT services provider that offers a range
of technology solutions including software development, web
development, mobile applications, training, and placement services. The
company is committed to delivering quality services to meet the
changing technological demands of the industry.
AK info park is known for:
Its practical approach to project development.
Training programs that bridge the gap between academic learning
and real-world application.
Providing internship and job-ready skills to engineering students.
With a team of skilled developers and mentors, the company focuses on
emerging technologies and builds custom software solutions for various
business needs.
Page 7 of 31
OBJECTIVES OF THE INTERNSHIP
To gain practical exposure to real-time web development projects.
To understand the front-end development process using HTML,
CSS, Bootstrap, and JavaScript.
To learn how user interface elements are structured in an e-
commerce website.
To experience working in a company environment and collaborate
with professionals.
To strengthen problem-solving and web design skills.
METHODOLOGY
The project was developed following a structured approach that
included:
1. Requirement Gathering: Studying the Flipkart platform and
identifying key features to replicate.
2. Planning and Design: Creating a design layout and structuring the
site architecture.
3. Development: Coding the web pages using HTML and CSS, using
Bootstrap for responsiveness.
4. Interactivity: Adding JavaScript for basic user interactions like
clicking product buttons or navigation.
5. Testing: Ensuring the website is responsive and visually consistent
across various devices.
6. Final Review: Polishing UI, validating HTML/CSS code, and
ensuring cross-browser compatibility.
INDEX
Page 8 of 31
S.no CONTENTS Page no
1. Introduction………………………………………………….12
1.1 Modules………………………………………………….13
2. Analysis………………………………………………………15
3. Software requirements specifications…………………………17
4. Technology……………………………………………………5
5. Coding………………………………………………………..6
6. Screenshots…………………………………………………….7
7. Conclusion……………………………………………………...8
8. Reference……………………………………………………….8
Internship Objectives
Page 9 of 31
1. Internships are generally thought of to be reserved for college
students looking to gain experience in a particular field. However, a
wide array of people can benefit from Training Internships in order to
receive real world experience and develop their skills.
2. An objective for this position should emphasize the skills you already
possess in the area and your interest in learning more
3. Internships are utilized in a number of different career fields,
including architecture, engineering, healthcare, economics, advertising
and many more.
4. Some internship is used to allow individuals to perform scientific
research while others are specifically designed to allow people to gain
first-hand experience working.
Page 10 of 31
03/06/2025 Tuesday
09/06/2025 Monday
10/06/2025 Tuesday
11/06/2025 Wednesday
12/06/2025 Thursday
13/06/2025 Friday
16/06/2025 Monday
1.Introduction:
In today’s digital era, e-commerce platforms have transformed the way
people shop by offering convenience, variety, and accessibility. Flipkart
is one of India's leading e-commerce websites, providing a wide range of
products across various categories. Recreating a clone of such a platform
offers valuable insights into front-end web development and user
interface design.
This project, titled "Flipkart Clone Website", aims to replicate the
visual and basic functional aspects of the original Flipkart website using
HTML, CSS, Bootstrap, and JavaScript. The purpose of this project is to
gain practical experience in designing responsive layouts, styling
elements effectively, and adding interactivity to web pages.
Page 11 of 31
The project emphasizes learning by doing, which involves analyzing the
structure of the Flipkart website, planning a similar layout, and
implementing it using modern front-end technologies. Through this, the
project not only enhances technical skills but also fosters an
understanding of real-world application design and development
workflows.
Page 12 of 31
1.1 Modules
The Flipkart Clone website is structured into various functional
modules, each representing a key section of an e-commerce platform.
These modules are designed to simulate the user interface and
experience of the original Flipkart website. The major modules of the
project are:
🔹 1. Home Page Module
Displays banners, featured products, and promotional content.
Includes navigation bar, search bar, and product categories.
Designed using Bootstrap for responsiveness.
🔹 2. Product Listing Module
Shows a list of products under specific categories (e.g., electronics,
fashion).
Includes product images, names, prices, and ratings.
Uses grid layout for organizing products.
🔹 3. Product Details Module
Displays detailed information about a selected product.
Contains product images, descriptions, specifications, price, and
buy options.
Implemented using HTML and dynamic JavaScript rendering (if
applicable).
🔹 4. Cart Module (Static)
Simulates the shopping cart functionality.
Users can view selected items, quantity, and total price.
UI designed with Bootstrap and placeholder JavaScript functions.
Page 13 of 31
🔹 5. Navigation and Search Module
Includes a top navigation bar with links to different sections.
A search bar allows users to simulate searching for products.
Uses JavaScript to handle simple search input (if implemented).
🔹 6. Footer Module
Displays links such as "About Us", "Contact", "Help", and social
media icons.
Common across all pages and styled using CSS.
Page 14 of 31
2. Analysis:
This section presents a detailed analysis of the Flipkart Clone project in
terms of design goals, user requirements, system behavior, and
limitations. The main objective is to understand how an e-commerce
platform works and how it can be imitated using front-end technologies.
🔹 2.1 Problem Statement
With the increasing demand for skilled front-end developers, gaining
real-world project experience has become essential. The challenge was
to design and develop a visually similar version of the Flipkart website,
focusing on structure, styling, and user interaction.
🔹 2.2 Objectives
To replicate the user interface of Flipkart using HTML, CSS,
Bootstrap, and JavaScript.
To implement responsive design for mobile and desktop users.
To simulate product listings, details, and navigation experience.
To enhance skills in front-end development and UI/UX design.
🔹 2.3 Target Users
Users looking to browse products and explore categories.
Developers aiming to learn front-end development through project-
based learning.
Intern reviewers or mentors evaluating basic web development
skills.
🔹 2.4 Functional Requirements
A responsive homepage with navigation and product banners.
Category-wise product display grid.
Product detail section with relevant information.
Static cart page and simple search simulation.
Page 15 of 31
🔹 2.5 Non-Functional Requirements
The website should be responsive across different screen sizes.
User-friendly layout and consistent UI.
Fast loading with minimal external dependencies.
🔹 2.6 Limitations
Backend functionalities such as user login, payment gateway, or
dynamic database integration are not implemented.
Cart functionality is static (not storing or calculating real-time
data).
Search results and filters are simulated or not dynamic.
Page 16 of 31
3. Software Requirements Specifications:
This section describes the functional and non-functional requirements of
the Flipkart Clone website, as well as the hardware and software
environment in which the system will operate.
3.1 Functional Requirements
The Flipkart Clone website must fulfill the following functional
requirements:
FR1: Display a responsive homepage with navigation bar, banners,
and product categories.
FR2: Show a list of products based on categories.
FR3: Provide product detail pages with images, description, and
pricing.
FR4: Simulate a cart interface where users can view added items
(static).
FR5: Include a basic search bar to simulate product searching
(optional filtering).
FR6: Provide footer links like About, Contact, and Help (non-
functional).
3.2 Non-Functional Requirements
The system must meet the following non-functional requirements:
NFR1: The website should be responsive on all screen sizes.
NFR2: Load time should not exceed 3 seconds on modern
browsers.
NFR3: The UI should be user-friendly and visually appealing.
NFR4: The design should follow W3C web standards.
Page 17 of 31
NFR5: The application should be compatible with major browsers
like Chrome, Firefox, and Edge.
3.3 Software Requirements
Software Component Purpose
HTML5 Structure and content layout
CSS3 Styling and visual design
Bootstrap 5 Responsive design and components
JavaScript Interactivity and dynamic behavior
VS Code Code editor for development
Web Browser Platform to test and run the website
Git (optional) Version control and backup
3.4 Hardware Requirements (Basic for Development)
Hardware Minimum Requirement
Processor Intel i3 or above
RAM 4 GB or more
Storage 2 GB free space
Display Minimum 13” screen, 1366×768 resolution
Internet Required for referencing online tools
Page 18 of 31
4. Technology:
This section highlights the core technologies and tools used in the
development of the Flipkart Clone website. Each technology played a
specific role in building a responsive, structured, and interactive front-
end interface.
4.1 Front-End Technologies
🔹 HTML5 (HyperText Markup Language)
Used to create the basic structure and layout of the web pages.
Provided semantic tags for better content organization and
accessibility.
🔹 CSS3 (Cascading Style Sheets)
Used for styling the HTML elements to make the website visually
appealing.
Handled layout, fonts, colors, margins, animations, and hover
effects.
🔹 Bootstrap 5
A popular front-end framework used for building responsive and
mobile-first websites.
Provided ready-made components like navbar, grid system,
buttons, and cards.
Helped in speeding up development and ensuring cross-device
compatibility.
🔹 JavaScript
Used to implement basic interactivity in the website.
Page 19 of 31
Enabled dynamic behaviors like search bar simulation, button
actions, and UI feedback.
4.2 Development Tools
Tool Purpose
VS Code Code editor for writing and organizing code
Google Chrome Browser used for testing and debugging
Version control and source code
Git (optional)
management
Font Awesome / CDN
For adding icons and external styles
Links
Page 20 of 31
5.Coding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Wedsite</title>
<style>
.footer-table {
background-color: black;
color: white;
}
.footer-table h3 {
color: gray;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<th><img src="D:\Ak info park\AK info park\Webpage\image1\
flipkart-logo2.png" style="width:150px;height:150px"></th><th
style="width:50px;"></th>
<th><input type="text" placeholder="search for
products,brands and More" style="width:500px;height:30px"></th><th
style="width:50px;"></th>
<th><img src="D:\Ak info park\AK info park\Webpage\image1\
login.png" style="width:150px;height:100px"> </th><th><h1>login
</h1></th><th style="width:50px;"></th>
<th><img src="D:\Ak info park\AK info park\Webpage\image1\
download.png"
style="width:70px;height:65px"></th><th><h1>cart</h1></th><th
style="width: 50px;"></th>
Page 21 of 31
<th><img src="D:\Ak info park\AK info park\Webpage\image1\
seller.png" style="width:70px;height:65px"></th><th><h1>become a
seller</h1></th><th style="width:50px;"></th>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th style="width:150px;"></th><th><a href="Kilos.html"><img
src="D:\Ak info park\AK info park\Webpage\image1\surf.png"
style="width:120px;height:120px" ><h3>kilos</h3></th><th
style="width:50px;"></th></a>
<th><a href="mobiles.html"><img src="D:\Ak info park\AK info
park\Webpage\image1\mobile-sale.jpg"
style="width:120px;height:120px"><h3>mobiles </h3></th><th
style="width:50px;"></th></a>
<th><a href="fashion.html"><img src="D:\Ak info park\AK info
park\Webpage\image1\Website-size-4-1920x1024.png"
style="width:120px;height:120px" ><h3>fashion </h3></th><th
style="width:50px;"></a>
<th><a href="Electronics.html"><img src="D:\Ak info park\AK
info park\Webpage\image1\names-of-electronic-devices-in-english.jpg
"style="width:120px;height:120px"><h3>electronics </h3></th><th
style="width:50px;"></th></a>
<th><a href="Furnitures.html"><img src="D:\Ak info park\AK
info park\Webpage\image1\design-cafe-modular-furniture-benefits.jpg"
style="width:120px;height:120px"><h3>furnitures </h3></th><th
style="width:50px;"></th></a>
<th><a href="toys.html"><img src="D:\Ak info park\AK info
park\Webpage\image1\a-myriad-of-vibrant-toys-carefully-curated-and-
proudly-displayed-generative-ai-photo.jpg"
style="width:120px;height:120px" ><h3>toys </h3></th><th
style="width:50px;"></th></a>
<th><a href="Cosmetics.html"><img src="D:\Ak info park\AK
info park\Webpage\image1\makeup.webp" style="width:120px;height:120px"
><h3>cosmetics</h3></th><th style="width:50px;"></th></a>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th><img src="D:\Ak info park\AK info park\Webpage\
image1\sofa1.jpg" style="width:1500px;height:200px"></th>
Page 22 of 31
</tr>
</table>
</div>
<div>
<table>
<tr>
<h1>499 only</h1>
<th style="width:80px;"></th>
<th><a href="fashion.html"><img src="D:\Ak info park\AK info
park\Webpage\image1\saree.jpg"
style="width:120px;height:120px"><h4>sarees</h4><h4>Under
499</h4></th><th style="width:80px;"></th></a>
<th><a href="trendingfootwear.html"><img src="D:\Ak info
park\AK info park\Webpage\image1\shoes.webp"
style="width:120px;height:120px"><h4>Shoes</h4><h4>Under 499</h4></th><th
style="width:80px;"></th>
<th><a href="fashion.html"><img src="D:\Ak info park\AK info
park\Webpage\image1\shirt.webp"
style="width:120px;height:120px"><h4>Shirts</h4><h4>Under
499</h4></th><th style="width:80px;"></th></a>
<th><a href="trendingfootwear.html"><img src="D:\Ak info
park\AK info park\Webpage\image1\heals.webp"
style="width:120px;height:120px"><h4>Womens heals</h4><h4>Under
499</h4></th><th style="width:80px;"></th></a>
<th><a href="trendingfootwear.html"><img src="D:\Ak info
park\AK info park\Webpage\image1\flats.webp"
style="width:120px;height:120px"><h4>Womens Flats</h4><h4>Under
499</h4></th><th style="width:80px;"></th></a>
<th><a href="trendingfootwear.html"><img src="D:\Ak info
park\AK info park\Webpage\image1\top shoes.webp"
style="width:120px;height:120px"><h4>trending shoes</h4><h4>Under
499</h4></th><th style="width:80px;"></th></a>
<th><a href="fashion.html"><img src="D:\Ak info park\AK info
park\Webpage\image1\hottest steal.webp"
style="width:120px;height:120px"><h4>hottest steals</h4><h4>Under
499</h4></th><th style="width:80px;"></th></a>
</th>
</tr>
</table>
</div>
<div>
<table class="footer-table">
<tr>
Page 23 of 31
<th>
<h3>ABOUT</h3><h4>Contact Us</h4><h4>About
Us</h4><h4>Careers</h4><h4>Flipkart
Stories</h4><h4>Press</h4><h4>Corporate Information</h4></th><th
style="width:10px;"></th>
<th><h3>GROUP COMPANIES</h3><h4>Myntra</h4>
<h4>Cleartrip</h4><h4>Shopsy</h4></th> <th
style="width:80px;height:80"></th>
<th><h3>HELP</h3><h4>Payments</h4>
<h4>Shipping</h4><h4>Cancelling and Return</h4><h4>FAQ</h4></th> <th
style="width:80px;height:80"></th>
<th><h3>CONSUMER POLICY</h3><h4>Cancelling and
Returns</h4> <h4>Terms Of
USE</h4><h4>Security</h4><h4>Privacy</h4><h4>Sitemap</h4><h4>Grievance
Redressal</h4><h4>EPR Compliance</h4></th> <th
style="width:80px;height:80"></th>
<th><h3>Mail Us</h3><h4>Flipkart Internet Private
Limited,</h4> <h4>Buildings Alyssa,Begonia &</h4><h4>Clove Embassy Tech
Village,</h4><h4>Outer Ring Road,Devarabeesanahalli
Village,</h4><h4>Bengaluru,560103,</h4><h4>Karnataka,India</h4><h4>Social
:</h4></th> <th style="width:80px;height:80"></th>
<th><h3>Registered Office Address:</h3><h4>Flipkart
Internet Private Limited,</h4> <h4>Buildings Alyssa,Begonia
&</h4><h4>Clove Embassy Tech Village,</h4><h4>Outer Ring
Road,Devarabeesanahalli
Village,</h4><h4>Bengaluru,560103,</h4><h4>Karnataka,India</h4><h4>CIN:U5
1109KA2012PTCO66107</h4><h4>Telephone:044-45614700/044-67415800</h4></th>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Kilos</title>
Page 24 of 31
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<a href="page.html" class="btn btn-secondary">← Back to
Home</a>
<div class="row">
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\kajal.webp"
style="width:250px;height:300px">
<h6> kajal</h6>
<p>₹200</p>
<p>10% off</p>
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\
lipbalm.webp" style="width:250px;height:300px">
<h6> Lipbalm</h6>
<p>₹300</p>
<p>10% off</p>
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\
lipstick.webp" style="width:250px;height:300px">
<h6> Lip stick</h6>
<p>₹500</p>
<p>20% off</p>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\eyebrow
pencil.webp" style="width:250px;height:300px">
<h6> Eye brow pencils</h6>
<p>₹700</p>
<p>10% off</p>
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\
eyeliner.webp" style="width:250px;height:300px">
Page 25 of 31
<h6> eyeliner</h6>
<p>₹400</p>
<p>20% off</p>
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\maskara.webp"
style="width:250px;height:300px">
<h6> maskara</h6>
<p>₹500</p>
<p>20% off</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>mobiles</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<a href="page.html" class="btn btn-secondary">← Back to Home</a>
<div class="row">
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\mob1.webp"
style="width:250px;height:300px">
<h6> Oppo A17K</h6>
<p>₹32,200</p>
<p>30% off</p>
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\mob2.webp"
style="width:250px;height:300px">
<h6> Oppo A3x</h6>
<p>₹12,200</p>
<p>20% off</p>
Page 26 of 31
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\mob3.webp"
style="width:250px;height:300px">
<h6> Oppo A18x</h6>
<p>₹10,200</p>
<p>20% off</p>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\mob5.webp"
style="width:250px;height:300px">
<h6> Oppo Reno13</h6>
<p>₹40,200</p>
<p>20% off</p>
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\mob7.webp"
style="width:250px;height:300px">
<h6> realme N65</h6>
<p>₹23,200</p>
<p>20% off</p>
</div>
<div class="col">
<img src="D:\Ak info park\AK info park\Webpage\image1\mob6.webp"
style="width:250px;height:300px">
<h6> realme </h6>
<p>₹60,800</p>
<p>18% off</p>
</div>
</div>
</div>
</body>
</html>
Page 27 of 31
6.Screenshots:
Home page:
Page 28 of 31
Footer
Page 29 of 31
Page 30 of 31
7.Conclusion:
The development of the Flipkart clone website using HTML, CSS,
Bootstrap, and JavaScript provided valuable hands-on experience in
front-end web development. This project helped me understand the
structure and functionality of an e-commerce platform and enhanced my
skills in responsive design, layout creation, and interactivity.
By replicating the Flipkart website's user interface, I learned how to
manage grid systems using Bootstrap, apply custom styling with CSS,
and make the site dynamic and interactive using JavaScript. This project
also improved my problem-solving abilities and gave me insights into
real-world UI/UX standards followed in large-scale commercial
platforms.
Overall, the project was a successful learning experience
that contributed significantly to my development as a web developer and
increased my confidence in building professional-looking web
applications.
8.References
1. Flipkart Official Website – For UI/UX inspiration and layout
reference.
2. W3Schools – For learning and implementing HTML, CSS,
Bootstrap, and JavaScript concepts.
3. Bootstrap Documentation – For responsive layout and components.
Page 31 of 31
