INDUSTRIAL TRAINING REPORT

ON

“F RONT-E ND D EVELOPMENT (FED)”

Submitted to
RAJASTHAN TECHNICAL UNIVERSITY

In Partial Fulfilment of the Requirement for the Award of

BACHELOR’S OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY

BY

Manav Jain
20ESKIT060

UNDER THE GUIDANCE OF

Mr. Vipin Jain
(ASSOCIATE PROFESSOR)

DEPARTMENT OF INFORMATION TECHNOLOGY

SWAMI KESHVANAND INSTITUTE OF TECHNOLOGY,
MANAGEMENT & GRAMOTHAN, JAIPUR

2023-2024
 CERTIFICATE

Letter number – AICTE - 2851 Date of Issue – 24th August 2023

Internship Completion Letter

Dear Manav Jain

This letter is to acknowledge that you have successfully completed a Project Based
Learning/Internship under the IBM SkillsBuild program.

The program was brought to you by Edunet Foundaon in partnership with AICTE (All India
Council for Technical Education)

Details of Project Based Learning / Internship

Program Title: IBM SkillsBuild 6 Weeks Internship for Emerging Technologies in Front End
Development (FED)
Program Duration: 6 Weeks

Start Date: 12th June,2023 End Date: 24th July,2023

Student Name: Manav Jain

SkillsBuild Email ID: jainmanav2512@gmail.com
College Name: Swami Keshvanand Institute Of Technology, Management & Gramothan

This acknowledgement letter is provided as a document for administrative purposes as proof

of completion prior to the issuance of cerficates.

Warm Regards,

Nagesh Singh,
Execuve Director
Edunet Foundaon

Edunet Foundaon, A-11-1105, Arcadia, South City 2, Gurgaon 122018

Registered Office: House Number F-63, Kh. No. 694/205/2 Flat No. 12, 3rd Floor, Right Side Lado Sarai, New Delhi 110030

This is to certify that Mr. Manav Jain, a student of B.Tech(Information Technol-

ogy) 7th semester has submitted his Industrial Training Report entitled ”Front End
Development” under my guidance.

Mr. Vipin Jain

(ASSOCIATE PROFESSOR)

Department of Information Technology, SKIT, Jaipur i

 Acknowledgement

It is my pleasure to be indebted to various people, who directly or indirectly con-

tributed in the development of this work and who influenced my thinking, behavior,
and acts during the course of study.

I express my sincere gratitude to Dr. (Prof.) Anil Chaudhary, HOD (IT), for
providing me an opportunity to work in a consistent direction and providing all nec-
essary means to complete my presentations and report thereafter.

I would like to thank my esteemed supervisor Mr. Vipin Jain (Associate Pro-
fessor), Department of Information Technology ,Swami Keshvanand Institute of
Technology, Management and Gramothan ,Jaipur for her valuable suggestion,keen
interest,constant encouragement,incessant inspiration and continuous help through-
out this work. Her excellent guidance has been instrumental in making this work a
success.

I express my sincere heartfelt gratitude to all the staff members of Department of

Information Technology who helped me directly or indirectly during this course of
work.

I would also like to express my thanks to my parents for their support and bless-
ings. A special thank goes to all my friends for their support in completion of this
work.

Manav Jain
20ESKIT060

Department of Information Technology, SKIT, Jaipur ii

 List of Figures

3.1 HTML source code . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2 CSS Source Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3 JavaScript Source code . . . . . . . . . . . . . . . . . . . . . . . 19
3.4 Final Output of the Website . . . . . . . . . . . . . . . . . . . . . 21

Department of Information Technology,SKIT, Jaipur iii

 Contents

1 INTRODUCTION 2
1.1 Introduction to Project: . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Intended users: . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.5 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Methodology/Technique 5
2.1 Procedure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Technologies used . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.1 HTML-5 . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3 Project Screenshots 11

4 CONCLUSION 23
4.1 TAKEAWAYS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2 FUTURE SCOPE . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

REFERENCES 25

Department of Information Technology,SKIT, Jaipur iv

 Chapter 1

INTRODUCTION

1.1 Introduction to Project:

This ambitious front-end project emulates the renowned Amazon website, utiliz-
ing a blend of HTML, CSS, and JavaScript to recreate its visual and interactive com-
ponents. The implementation of HTML establishes a structural foundation, defining
the layout and organization of the webpage. CSS then steps in to enhance the aes-
thetic appeal by styling elements, ensuring a faithful replication of Amazon’s dis-
tinctive design. The incorporation of JavaScript introduces dynamic features, such
as interactive sliders, dropdowns, and responsive elements, bringing the clone to life
with a seamless and engaging user experience.
In this endeavor, attention to detail was paramount, as the project aimed not
only to mirror the surface-level appearance of Amazon but also to encapsulate the
site’s essence. The use of JavaScript goes beyond static representation, infusing the
clone with interactive elements that mimic the behavior of the original, contributing
to a user interface that closely mirrors the functionality of the authentic Amazon
platform. This hands-on development exercise not only hones skills in HTML, CSS,
and JavaScript but also underscores the developer’s ability to synthesize these tech-
nologies to replicate a complex and widely-utilized e-commerce interface.

1.2 Need
This project aimed to fulfill crucial learning objectives in web development by
providing a hands-on experience with key technologies. The primary need was to
develop practical proficiency in HTML, CSS, and JavaScript through the creation
of a tangible project. By undertaking the challenge of replicating the Amazon web-
site’s front end, the goal was to gain insights into the intricacies of crafting visually

Department of Information Technology,SKIT, Jaipur 1

appealing and responsive web pages, while also delving into the dynamic function-
alities that JavaScript brings to the forefront.
The project addresses the need for practical application, offering a platform
to apply theoretical knowledge to real-world scenarios. Through mimicking Ama-
zon’s user interface and design, it sought to unravel the complexities of e-commerce
platforms, allowing for a deeper understanding of the challenges inherent in such en-
deavors. This hands-on approach is pivotal in cultivating a comprehensive skill set,
equipping the developer with the ability to navigate and innovate within the dynamic
landscape of web development.

1.3 Objective
This project aims to cultivate a strong skill set in web development, specifically
focusing on HTML, CSS, and JavaScript. The primary objective is to replicate the
Amazon website’s front end, fostering a comprehensive understanding of structuring
web content, styling elements, and implementing dynamic functionalities. Through
hands-on experience, the goal is to enhance proficiency in creating responsive and
visually appealing web pages, providing practical insights into the complexities of
e-commerce platforms.

1.4 Intended users:

There are four types of Users that interact with system firstly.There is a Cus-
tomer,Admin, Seller and Delivery partner.

• Customer interacts with system directly in order to confirm order, modify in

cart, make payment and give feedback.

• Admin’s responsibility is for maintaining Online product pricing plans ensuring

that price changes are implemented in an accurate timely manner.

• A seller helps customers and then offers the best solution in regards to the
products being sold.

• The delivery partner has the responsibility of delivery the defined requirements
on time without any defects.

Department of Information Technology, SKIT, Jaipur 2

1.5 Problem Statement
The aim is to address the need for practical application and skill development in
web development. Key challenges include accurately replicating the intricate design
elements, ensuring responsiveness across various devices, and implementing dy-
namic features to mimic the user interface functionality of the original e-commerce
platform.

Department of Information Technology, SKIT, Jaipur 3

 Chapter 2

Methodology/Technique

2.1 Procedure
1. Research and Analysis:
Examine the layout, design, and features of the original Amazon site, identify-
ing key components such as headers, navigation bars, and product listings.

2. HTML Structure:
Implement a basic HTML structure with semantic elements, breaking down the
webpage into manageable sections that mirror the original’s hierarchy.

3. CSS Styling:
Apply CSS to replicate visual aesthetics, including colors, fonts, and spacing.
Ensure a responsive design using media queries for adaptation to various screen
sizes.

4. JavaScript Interactivity:
Implement JavaScript for dynamic features such as sliders, dropdowns, and in-
teractive buttons. Utilize event handling to capture user interactions and update
the UI dynamically.

5. Testing:
Conduct cross-browser testing for compatibility. Test responsiveness on differ-
ent devices, including desktops, tablets, and mobile phones. Thoroughly test
interactive elements to ensure expected behavior.

6. Refinement:
Gather user feedback to identify areas for improvement. Optimize code for
performance, considering factors like page load times.

Department of Information Technology,SKIT, Jaipur 4

 7. Documentation:
Document the codebase for future reference or collaboration. Create a user
guide explaining how to interact with the clone and any replicated functionali-
ties.

8. Deployment:
Choose a hosting solution for accessibility on the web. Configure domain set-
tings if using a custom domain.

9. Continuous Improvement:
Incorporate feedback and continuously refine the clone to enhance accuracy
and functionality.

2.2 Technologies used

2.2.1 HTML-5
HTML, or HyperText Markup Language, forms the backbone of this project by pro-
viding the essential structure for web content. Through semantic elements like head-
ers, paragraphs, and lists, HTML facilitates a well-organized document hierarchy,
enhancing both developer comprehension and browser interpretation. The inclusion
of hyperlinks enables seamless navigation, while form elements support user interac-
tions, such as data submission and registration. HTML’s versatility extends to mul-
timedia integration, allowing the seamless embedding of images, audio, and video.
With a commitment to accessibility, global attributes, and consistent cross-browser
compatibility, HTML plays a pivotal role in creating a robust and user-friendly front-
end clone of the Amazon website.
Key Attributes of HTML:

• Markup Language: HTML (HyperText Markup Language) serves as a funda-

mental markup language for structuring content on the web.

• Semantic Elements: HTML provides a range of semantic elements (e.g., header,

nav, article) that convey the meaning of content, aiding both developers and
browsers in understanding the document structure.

• Document Structure: It defines the basic structure of a web page, including

headings, paragraphs, lists, and links, facilitating clear organization.

• Hyperlinks: HTML allows the creation of hyperlinks (’a’ tags) for navigation,
enabling users to move seamlessly between different pages and resources.

Department of Information Technology, SKIT, Jaipur 5

 • Multimedia Integration: It supports multimedia embedding through elements
such as ’img’ for images, ’audio’, and ’video’ for sound and video content.

• Accessibility Features: HTML includes attributes and elements that enhance

accessibility, enabling the creation of web content that is perceivable and navi-
gable by users with disabilities.

• Global Attributes: HTML provides global attributes applicable to various el-

ements, offering flexibility and consistency in coding practices.

• Versioning: HTML evolves with different versions (e.g., HTML5), introduc-

ing new features and improvements to meet the changing demands of web de-
velopment.

• Cross-Browser Compatibility: HTML ensures cross-browser compatibility,

allowing web pages to be displayed consistently across different browsers.

2.2.2 CSS
CSS, or Cascading Style Sheets, is the artistic force behind this project, providing
the means to shape the visual identity of the front-end Amazon clone. Through its
selectors and properties, CSS grants precise control over the styling of HTML ele-
ments, ensuring a faithful reproduction of Amazon’s unique design. This includes
the customization of colors, fonts, margins, and padding for a polished appear-
ance. CSS’s responsiveness shines through media queries, allowing the adaptation
of styles across diverse devices seamlessly. Features like Flexbox and Grid layout
further enhance the project’s ability to mirror the intricate structure of the origi-
nal site. Notably, CSS supports animations, transitions, and preprocessors, offering
dynamic interactivity and streamlined development. In the pursuit of accessibility,
CSS facilitates the creation of styles tailored to diverse user needs, contributing to
an inclusive and visually appealing user experience.
Key Components of CSS:
Selectors and Properties: CSS employs a variety of selectors, such as class, ID, and
element selectors, to precisely target HTML elements for styling. Properties like
color, font-size, margin, and padding enable detailed customization of the appear-
ance.

Layout Control: CSS provides two powerful layout mechanisms—Flexbox and Grid.
Flexbox is ideal for one-dimensional layouts, such as rows or columns, while Grid

Department of Information Technology, SKIT, Jaipur 6

is designed for two-dimensional layouts, allowing for complex arrangements of ele-
ments.

Responsive Design: Media queries in CSS facilitate responsive web design. By

adjusting styles based on the characteristics of the device, such as screen width or
orientation, developers can create layouts that adapt seamlessly to various screen
sizes.

Animations and Transitions: CSS supports the creation of animations and transi-
tions without the need for JavaScript. Keyframe animations allow developers to
define custom animations, while transitions enable smooth changes in property val-
ues, enhancing the overall user experience.

Preprocessors: CSS preprocessors like Sass and Less extend the capabilities of tra-
ditional CSS. They introduce features like variables for reusable values, mixins for
reusable style patterns, and modular styling for organized and maintainable code.

Cross-Browser Compatibility: CSS ensures consistent styling across different browsers,

thanks to its standardized rules. However, vendor prefixes may be required for ex-
perimental or early-stage features to maintain compatibility during development.

Box Model: The CSS box model defines how elements are rendered on the page.
It includes content, padding, borders, and margins, influencing the overall layout
and spacing of elements.

Typography and Fonts: CSS offers precise control over typography, allowing de-
velopers to define font families, sizes, weights, styles, and line heights. This control
contributes to a harmonious and readable presentation of text.

Transparency and Opacity: CSS supports transparency and opacity through prop-
erties like opacity and rgba(). This capability allows developers to create visually
layered designs and subtle overlays.

Vendor Prefixes: Vendor prefixes like -webkit-, -moz-, and -ms- are used to en-
sure compatibility with different browsers during the experimental or draft stages of
new CSS features.

Department of Information Technology, SKIT, Jaipur 7

Accessibility Features: CSS plays a role in creating accessible designs by allow-
ing developers to define styles that cater to users with varying needs. For example,
high-contrast styles or larger fonts can improve readability for users with visual im-
pairments.

2.2.3 JavaScript
Introduction: JavaScript (JS) serves as the dynamic force in this project, adding
interactive functionalities to the front-end Amazon clone. Through its event-driven
model, JS responds to user actions, enabling features like sliders, dropdowns, and
real-time updates. The language supports asynchronous programming, crucial for
handling tasks without disrupting the user experience. With the Document Object
Model (DOM), JS manipulates HTML and CSS, dynamically altering page content.
Its versatility extends to AJAX for seamless data retrieval, enhancing the project’s
ability to mirror the original website’s dynamic behavior. JS empowers developers to
create a responsive and engaging user interface, fostering a dynamic and interactive
browsing experience.
Key Features of JavaScript (JS):

• Event-Driven Programming: JS follows an event-driven paradigm, responding

to user actions like clicks, inputs, and page loads, enabling interactive and dy-
namic web pages.

• Asynchronous Programming: JS supports asynchronous operations through

features like callbacks, promises, and async/await, crucial for non-blocking ex-
ecution, especially when dealing with time-consuming tasks like data fetching.

• Document Object Model (DOM) Manipulation: With the DOM, JS can dynam-
ically manipulate HTML and CSS, allowing for real-time updates and changes
to the structure and style of web pages.

• Cross-Browser Compatibility: JS is designed to work across different browsers,

ensuring consistent functionality and behavior for users regardless of their cho-
sen browser.

• Functions and Closures: JS allows the creation of functions, supporting reusable

and modular code. Closures enable the encapsulation of variables, enhancing
data privacy and code organization.

Department of Information Technology, SKIT, Jaipur 8

 • Dynamic Typing: JavaScript is dynamically typed, allowing variables to change
types during runtime. This flexibility simplifies development but requires care-
ful consideration for robust code.

• Prototypal Inheritance: Instead of classical inheritance, JS uses prototypal in-

heritance. Objects can inherit properties and methods from other objects, con-
tributing to a more flexible and extensible codebase.

• AJAX (Asynchronous JavaScript and XML): JS facilitates asynchronous data

retrieval through AJAX, enabling the exchange of data with a server without
refreshing the entire web page.

• JSON (JavaScript Object Notation): JSON is a lightweight data interchange

format in JS, simplifying data exchange between the server and the client.

• ES6+ Features: The ECMAScript 6 (ES6) and later versions introduce mod-
ern features like arrow functions, template literals, destructuring, and classes,
enhancing code readability and developer productivity.

• Error Handling: JS includes mechanisms for error handling, such as try-catch

blocks, enabling developers to manage and respond to runtime errors effec-
tively.

• Browser Console Interaction: JS can be executed directly in the browser con-

sole, facilitating debugging and experimentation during development.

• Responsive Design: JS contributes to responsive design by handling events re-

lated to viewport changes, allowing developers to adjust the layout and behavior
based on the device’s screen size.

• Frameworks and Libraries: A rich ecosystem of frameworks (e.g., React, An-

gular, Vue.js) and libraries (e.g., jQuery) extends JS functionality, simplifying
complex tasks and promoting efficient development.

Department of Information Technology, SKIT, Jaipur 9

 Chapter 3

Project Screenshots

Department of Information Technology,SKIT, Jaipur 10

Department of Information Technology, SKIT, Jaipur 11
Department of Information Technology, SKIT, Jaipur 12
Department of Information Technology, SKIT, Jaipur 13
Department of Information Technology, SKIT, Jaipur 14
 Figure 3.1: HTML source code

Department of Information Technology, SKIT, Jaipur 15

 Figure 3.2: CSS Source Code

Department of Information Technology, SKIT, Jaipur 16

Department of Information Technology, SKIT, Jaipur 17
 Figure 3.3: JavaScript Source code

Department of Information Technology, SKIT, Jaipur 18

Department of Information Technology, SKIT, Jaipur 19
 Figure 3.4: Final Output of the Website

Department of Information Technology, SKIT, Jaipur 20

Department of Information Technology, SKIT, Jaipur 21
 Chapter 4

CONCLUSION

In conclusion, the successful execution of this project, featuring a front-end clone

of the Amazon website, showcases a proficient integration of HTML, CSS, and
JavaScript. The meticulous use of HTML establishes a structured foundation, en-
abling the faithful reproduction of Amazon’s content hierarchy. CSS, with its array
of styling options and responsive design capabilities, breathes life into the clone,
mirroring the visual aesthetics and ensuring a seamless user experience across de-
vices. JavaScript, as the dynamic force, introduces interactive elements and real-time
updates, capturing the essence of the original site’s dynamic behavior. The project’s
methodology involved in-depth research, meticulous coding, and rigorous testing,
fostering a holistic understanding of front-end technologies.
Through this endeavor, a comprehensive skill set has been cultivated, encom-
passing not only the technical aspects of web development but also the practical
challenges of replicating a complex e-commerce platform. This project serves as a
testament to the developer’s proficiency in web technologies and their ability to cre-
ate a user-friendly interface, setting the stage for further exploration and innovation
in the dynamic field of front-end development.

4.1 TAKEAWAYS
• Practical Application: The project provided hands-on experience in applying
HTML, CSS, and JavaScript to create a real-world web development project,
enhancing practical skills.

• Understanding E-commerce Platforms: Replicating an e-commerce giant

like Amazon deepened the understanding of the complexities involved in de-
signing and implementing user interfaces for such platforms.

Department of Information Technology,SKIT, Jaipur 22

 • Responsive Design Mastery: Implementing responsive design principles us-
ing CSS and media queries enhanced the ability to create web pages that adapt
seamlessly to various screen sizes and devices.

• Dynamic Functionality with JavaScript: JavaScript was leveraged to intro-

duce dynamic features, interactive elements, and real-time updates, showcasing
its role in enhancing user engagement.

• Versatility of CSS: CSS was explored extensively for its ability to style and
layout elements, showcasing its versatility in creating visually appealing and
responsive designs.

• Cross-Browser Compatibility Awareness: Ensuring cross-browser compati-

bility heightened awareness of the need for consistent user experiences across
different browsers.

4.2 FUTURE SCOPE

• Back-End Integration: Integrating a functional back-end can transform the
project into a fully-featured e-commerce platform with user authentication,
product databases, and transaction processing.

• Advanced JavaScript Features: Incorporating advanced JavaScript features

and frameworks can further enhance interactivity, introducing features like dy-
namic content loading, user personalization, and improved user engagement.

• Mobile Application Development: Transitioning the project into a mobile

application expands its reach. Utilizing frameworks like React Native or Flutter
enables the development of cross-platform mobile applications with a shared
codebase.

• Progressive Web App (PWA): Transforming the project into a Progressive

Web App offers an opportunity to provide a native app-like experience, includ-
ing offline functionality and push notifications.

• Enhanced User Experience: Implementing features like a personalized user

dashboard, recommendation engines, and advanced search functionality can
elevate the overall user experience, emulating the sophistication of modern e-
commerce platforms.

Department of Information Technology, SKIT, Jaipur 23

 • Internationalization and Localization: Expanding the project to support mul-
tiple languages and currencies facilitates a broader user base, catering to diverse
audiences globally.

• Security Measures: Strengthening security measures, including encryption

protocols, secure user authentication, and secure payment gateways, ensures
the project meets the highest standards of data protection.

• Optimization for Accessibility: Further optimizing the project for accessibil-

ity by adhering to WCAG guidelines ensures inclusivity, making the platform
usable for individuals with diverse abilities.

Department of Information Technology, SKIT, Jaipur 24

 References

[1] Amazon Clone, https://sharmakushagra2002.netlify.app/

[2] HTML Tutorial, https://www.w3schools.com/html/

[3] Flanagan, David (August 17, 2006). JavaScript: The Definitive Guide: The
Definitive Guide. ”O’Reilly Media, Inc.”. p. 16. ISBN 978-0-596-55447-7.
Archived from the original on August 1, 2020. Retrieved March 29, 2019.

[4] Meyer, Eric A.; Weyl, Estelle (2017). Cascading Style Sheets: The Definitive
Guide, Fourth Edition. O’Reilly Media, Inc. ISBN 9781449393199.

[5] ”HTML5 – Hypertext Markup Language – 5.0”. Internet Engineering Task

Force. 28 October 2014. Archived from the original on October 28, 2014.

Department of Information Technology,SKIT, Jaipur 25