AN INTERNSHIP REPORT ON

“Web Development”

Submitted to Bengaluru City University

In Partial Fulfillment for the Award of B.C.A Degree

By
SANJAY SV
Reg. No: U18GG21S0022

Under the guidance of

Prof. THIMMAPPA N T
Associate Professor
Department of Computer Science
Seshadripuram First Grade College
Yelahanka New Town, Bengaluru

C.A., Site No. 26, SH 9, Yelahanka New Town, Bengaluru,

Karnataka 560064

1
 Seshadripuram First Grade College

Yelahanka New Town Bengaluru 560064

Permanently affiliated to Bengaluru City University and recognized by UGC under 2(f) & 12(B)
NAAC accredited A+ Grade, ISO Certified 9001:2015, AICTE approved Institution

COLLEGE CERTIFICATE

This is to certify that this Internship report on Web Development is carried out by SANJAY SV,
Student of VI Semester B.C.A, bearing Reg.No. U18GG21S0022. He has successfully completed his 8
Weeks organizational study.

The Internship report is submitted to the Bengaluru City University in the Academic Year 2023-24,
in partial fulfilment for successful completion of VI semester B.C.A and award of Bachelor of Computer
Applications Degree of Bengaluru City University.

Place: BENGALURU PRINCIPAL

Date: 21-06-2024

2
 DECLARATION BY STUDENT

I hereby declare that this Internship report on “Web Development” is an original record of my

experience while conducting the internship study at GLOBAL QUEST TECHNOLOGIES.

The organizational study was carried out by me, in partial fulfilment for the successful

completion of VI semester B.C.A of Bengaluru City University. This report is not submitted to any other

university for the award of any Diploma/Degree etc.

Place: BENGALURU SANJAY SV

Date: 21-06-2024

3
 ACKNOWLEDGEMENT

I am deeply indeed to Narendra G R (Chief Executive Officer) for giving me an opportunity

to carry out the organizational study at GLOBAL QUEST TECHNOLOGIES and for giving

vital support and guidance to complete this endeavour.

I would like to express my gratitude to our Principal Dr. S.N Venkatesh for his constant

support and encouragement and I would like to express my gratitude to our HOD Rekha

Raichal, Associate Professor, for her constant support and encouragement and I am extremely

grateful to my supervisor Prof. Thimmappa N T, Associate Professor, Department of

Computer Science, for his/her support guidance provided for the completion and preparation

of this report.

This endeavour would not have been possible without the support of my parents. My special

thanks to them.

I would like to thank my friends for their encouragement and moral support throughout the

work.

SANJAY SV

4
5
6
7
 Log Sheet

Name of Student: SANJAY SV

Name of Organization: Global Quest Technologies

Sn Date Concept learnt Duration

(in hours)

1 3-4-24 HTML-Web Application, HTML5, Browser 2hrs

Software, Basics of HTML, HTML elements.
2 4-4-24 Structure of HTML Document, Responsive 2hrs
website, Boiler Plate Code, Different screen sizes.
3 5-4-24 Basic Editors, Advanced Editors, Creating 2hrs
Workspace for html Programs, How to add
Dummy text, attributes in html.
4 6-4-24 Background color for entire page, super script 2hrs
and subscript tags, comments in html, lists in
html-unordered list, ordered list and nested list
5 10-4-24 Images in html, important attributes of 2hrs
<img>tag, image as a background.
6 11-4-24 Hyperlinks in html, anchor tag, important 2hrs
attributes of <a> tag, Navigating in same web
page
7 12-4-24 Iframe in html, important attributes of iframe, 2hrs
Embedding external web page. content.
8 16-4-24 Embedding our own web page, embedding pdf 2hrs
file, embedding google maps, target attribute,
values associated with target attribute.

8
9 17-4-24 Creating hyperlink for mailing and calling, tables 2hrs
in html, tags in html.
10 18-4-24 Rowspan and Colspan attribute, forms in html, 2hrs
forms in html attributes of <input> tag.
11 19-4-24 Radio buttons, check boxes, image box, reset 2hrs
button.
12 22-4-24 Button tag, drop-down menu, textarea tag, 2hrs
attributes related to form elements and input
tags.
13 24-4-24 Field set and legend tag, audio and video tags. 2hrs
14 25-4-24 CSS-Different ways of applying styles. 2hrs
15 26-4-24 Div and span tag, CSS selectors. 2hrs
16 27-4-24 CSS color properties, CSS background properties. 2hrs
17 1-5-24 CSS border properties, Types of CSS tags. 2hrs
18 2-5-24 text shadow and box shadow, CSS box model. 2hrs
19 3-5-24 CSS test properties, Font properties. 2hrs
20 9-5-24 How to use google tents, Display properties 2hrs
21 10-5-24 Position properties, z-index. 2hrs
22 11-5-24 Flex Box, properties of flex box. 3½hrs
23 14-5-24 Navbar mini project. 2hrs
24 15-5-24 CSS Animations. 3½hrs
25 16-5-24 Keyframes in animation, Bootstrap. 3½hrs
26 17-5-24 Downloading and linking required files, CDN 3½hrs
links.
27 20-5-24 Button classes, block. button or full width 2hrs
button, Butten group.

9
 28 21-5-24 Margin and Padding Masses, Border and Shadow 2hrs
classes.
29 22-5-24 List group classes, Form related classes, read- 3½hrs
only and disabled attributes, checkbox and radio
button.
30 23-5-24 Form input groups, floating-labels, progress bar. 3½hrs
31 24-5-24 Carousel, grid system of bootstrap. 3½hrs
32 25-5-24 Attributes, Pagination, Collapse. 4½hrs
33 30-5-24 Javascript, pop(), filter(), built-in functions. 3½hrs
34 31-5-24 Template String, datatypes in JS, String, Boolean, 3½hrs
null.
35 1-6-24 Operators in Javascript, Relational or conditional 3½hrs
operator.
36 3-6-24 Loops in Javascript, Objects in Javascript. 3½hrs
Total Number of Days:40 108hrs

Declaration:
It is declared that the student completed his internship in our
organization as per above schedule.

Signature of Authority Seal of Organization

10
 CONTENTS

Annexures

Offer Letter

Internship Completion Certificate

Course Completion Certificate

Log Sheet

Serial No. Contents Page No.

1 Introduction of the report 11

1.1 Introduction 11-12

1.2 Scope 13

2 Overview of the Organization 14

2.1 Brief Overview of the Organization 14

2.2 Major activities done by the 15

organization

3 TASK CONDUCTED 18

3.1 TASK-1 , TASK-2 18-29

4 What I have Learned 30

4.1 HTML 30-35

4.2 CSS 36-45

4.3 Bootstrap 46

4.4 JavaScript 47

4.5 React JS 48

5 Recommendation and Conclusion 49

5.1 Recommendation 50

5.2 Conclusion 51

11
 Chapter 1

Introduction of the report

1.1 Introduction:

During the internship of Front-End Technologies at [Global Quest Technologies] which

lasted for [2 months], I had the opportunity to dive deep into the world of web
development. My main focus was on creating user-friendly interfaces and optimizing
website performance. Throughout the internship, I aimed to enhance my coding skills,
collaborate with the development team, and tackle real-world challenges. The front end
stack is made up of many different languages and libraries. While these vary from
application to application, there are only a few generic languages understood by all web
browsers. Front-end is driven by three primary technologies: HTML, CSS and
JavaScript.

HTML is the first layer of any website and creates the code version of a wireframe on a
webpage. The letters in HTML stand for Hypertext Markup Language. The markup
piece of the name is the most important to remember, as markups are the proper name
for HTML elements, which are also called HTML tags. HTML as a whole is the markup
that creates the basic elements we view on a website. However, it’s important to
remember that HTML isn’t particularly intelligent. It doesn’t make decisions or capture
information on its own.

Cascading Style Sheets, or CSS, is what gives our HTML visual appeal and draws in the
user. To put it simply, style sheets dictate the presentation of HTML elements on a page.
CSS is what makes everything not look like a white background with a bunch of Times
New Roman texts and blue hyperlinks .

JavaScript is a runtime language for web browsers. This means that when you open a
web page, the page will load both the foundational JavaScript that is standard with the
page and any new JavaScript added to a page. The new JavaScript will load in parallel

12
with it and can perform actions and make decisions. JavaScript differentiates from back-
end languages such as Java or Ruby in that it’s visible to the user and is not compiled

ahead of time to run secretly behind the curtain. It’s the true programming language of
front-end engineering and the underlying language that ties everything together.

The integration of HTML, CSS, and JavaScript creates a cohesive front-end

development environment where structure, style, and interactivity come together to build
sophisticated web applications. These technologies are supported by various tools and
frameworks that streamline the development process. NPM (Node Package Manager),
Webpack, and Babel are essential tools in modern front-end workflows. npm manages
project dependencies, Webpack bundles JavaScript files and other assets, and Babel
allows developers to write modern JavaScript by converting ES6+ code into backward-
compatible versions for broader browser support.

Moreover, CSS preprocessors like Sass and Less enhance CSS by introducing features
like variables, nested rules, and mixins, which improve code maintainability and
efficiency. Sass, developed in 2006, and Less, introduced in 2009, provide additional
functionality to standard CSS, making it more powerful and easier to manage.

Front-end development also benefits from robust development tools built into modern
web browsers. Chrome DevTools, for example, offers a suite of features for debugging,
profiling, and optimizing web applications, allowing developers to inspect the DOM,
monitor network activity, and emulate different device views.

Together, these technologies and tools form the foundation of front-end development,
enabling the creation of responsive, interactive, and visually appealing web applications.
The ongoing evolution of front-end technology continues to push the boundaries of what
is possible on the web, driving innovation and improving user experiences. As web
standards and best practices evolve, front-end developers must stay updated with the
latest advancements to build efficient and cutting-edge web applications. This synergy
between HTML, CSS, JavaScript, and modern development tools underscores the
dynamic and interdisciplinary nature of front-end technology, making it an exciting and
vital field within web development.

13
1.2 SCOPE:

The scope of front-end is,

1. Designing and implementing user interfaces: This could involve creating visually
appealing layouts, selecting color schemes, and arranging elements in a user-friendly
manner.

2. Developing responsive and accessible websites: You might mention how you
ensured that websites functioned well on different devices and screen sizes, and adhered
to accessibility standards to make them usable for all users.

3. Writing clean and efficient code: Emphasize your experience in using HTML, CSS,
and JavaScript to build interactive and dynamic elements on web pages, and how you
focused on writing code that was maintainable and performant.

4. Collaborating with designers and backend developers: Discuss how you worked
closely with designers to bring their vision to life and collaborated with backend
developers to integrate front-end components with server-side functionality.

5. Testing and debugging: Mention your involvement in testing websites across

different browsers and devices, identifying and fixing any issues or bugs to ensure a
smooth user experience.

14
 Chapter 2

Overview of the Organization

2.1 Brief overview of the organization:

Global Quest Technologies (GQT) is a professional entity providing services across the
Globe

in Training (IT & NON IT) – Campus & Corporates. GQT is constantly investing in improving
its State-of-the-Art knowledge in the domains of its core expertise and advanced technology
areas that would potentially create new business activities, enhancing its service offering.

From the day of inception, GQT has been instrumental in shaping the careers of tens of
thousands of technical graduates by offering industry-ready courses. The group works closely
with SMEs, Academic Institutions, Local Authorities, and Governmental Bodies.

One of the key aspects of GQT is their commitment to delivering practical and industry-relevant
training. They often collaborate with professionals and experts in the respective fields to ensure
that their courses align with the latest industry trends and requirements. This approach helps
students gain valuable insights and hands-on experience that can be applied in real-world
scenarios.

GQT also emphasizes personalized learning experiences, tailoring their courses to meet the
specific needs and goals of individual learners. They offer flexible learning options, including in-
person classes, online courses, and blended learning formats, allowing students to choose the
most suitable mode of learning.

Additionally, GQT boasts a team of experienced instructors who are passionate about sharing
their knowledge and guiding students throughout their learning journey. They provide
mentorship and support to help students succeed in their chosen fields.

It's worth noting that GQT's course offerings may vary over time, so it's best to check
their official website or reach out to them directly for the most up-to-date information on

15
their courses, schedules, and enrollment process.

2.2 Major activities done by the organization:

1. Course Development: GQT creates and develops comprehensive training courses in IT and
non-IT sectors. These courses are designed to cover relevant topics, industry best practices,
and emerging trends.

2. Training Delivery: GQT conducts training sessions through different modes, including in-
person classes, online courses, and blended learning formats. They ensure that the training is
engaging, interactive, and tailored to meet the specific needs of learners.

3. Mentorship and Support: GQT provides mentorship and support to students throughout
their learning journey. Experienced instructors guide and assist students, offering valuable
insights, feedback, and advice to help them succeed in their chosen fields.

4. Skill Enhancement: GQT focuses on enhancing the skills and capabilities of individuals by
providing hands-on experiences, practical assignments, and real-world case studies. This
approach helps students develop the necessary skills and confidence to excel in their respective
industries.

5. Career Guidance: GQT offers career guidance and counselling services to help students
make informed decisions about their professional paths. They provide insights into job market
trends, interview preparation, resume building, and networking opportunities.

6. Internship Programs: The organization runs internship programs that provide students
with practical experience in the IT industry. These internships are designed to give students a
taste of real-world work environments, enhancing their skills and employability.

16
2.3 Organogram of the organization:

An organogram, or organizational chart, visually depicts the hierarchy and relationships

within an organization. At the top is the Board of Directors, led by the Chairman and
comprising various board members responsible for overall governance. Reporting to
the board is the Chief Executive Officer (CEO), who oversees the entire organization.

17
Directly under the CEO are key executive roles: the Chief Operating Officer (COO),
responsible for daily operations; the Chief Financial Officer (CFO), overseeing
financial planning and management; the Chief Information Officer (CIO), managing
IT and information systems; the Chief Marketing Officer (CMO), in charge of
marketing strategies and activities; and the Chief Human Resources Officer.

Each of these executives manages specific departments. Under the COO, you’ll find
the Operations Department, which includes operations managers, project managers,
and operational staff. The CFO leads the Finance Department, with roles like finance
managers, accountants, and financial analysts. The CIO heads the IT Department,
which consists of IT managers, system administrators, developers, and support staff.
The CMO directs the Marketing Department, including marketing managers,
coordinators, social media specialists, and content creators. The CHRO supervises the
Human Resources Department, encompassing HR managers, specialists, and
recruiters.

Additional departments may report to the CEO or other executives, such as Sales,
with sales managers and representatives; Customer Service led by a customer service
manager with a team of representatives; Research and Development (R&D), with
researchers and product developers; and specialized units like Legal, Compliance
and Risk Management, and Facilities Management. Each department has its own
hierarchical structure, ensuring a clear chain of command and efficient workflow
within the organization.

18
 Chapter 3

TASK-1

HTML –

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="z-index.css">

<title>Z-index</title>

</head>

<body>

<div class="container">

<h1 align="center" style="color: white;"><u>SOLAR SYSTEM</u></h1>

<h1 align="center">Z-INDEX</h1>

<div class="general box1">

<h2>EARTH</h2>

</div>

<div class="general box2">

<h2>JUPITER</h2>

</div>

<div class="general box3">

19
<h2>MERCURY</h2>

</div>

<div class="general box4">

<h2>VENUS</h2>

</div>

<div class="general box5">

<h2>MARS</h2>

</div>

<div class="general box6">

<h2>URANUS</h2>

</div>

</div>

</body>

</html>

CSS-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="z-index.css">

<title>Z-index</title>

</head>

<body>

20
<div class="container">

<h1 align="center" style="color: white;"><u>SOLAR SYSTEM</u></h1>

<h1 align="center">Z-INDEX</h1>

<div class="general box1">

<h2>EARTH</h2>

</div>

<div class="general box2">

<h2>JUPITER</h2>

</div>

<div class="general box3">

<h2>MERCURY</h2>

</div>

<div class="general box4">

<h2>VENUS</h2>

</div>

<div class="general box5">

<h2>MARS</h2>

</div>

<div class="general box6">

<h2>URANUS</h2>

</div>

</div>

</body>

</html>

21
22
 Task-2

HTML-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="hover2.o.css">

<title>grayscale animatiion</title>

</head>

<body>

<h1 align="center" style="color: azure;"><u>ROTATION ANIMATION</u></h1>

<div class="container">

<img class="clockwise" src="C:\Users\sanju\Downloads\ar.jpeg" alt="INA">

</div>

<div class="container1">

<img class="anti-clock" src="C:\Users\sanju\Downloads\yoyo.jpeg" alt="INA">

</div>

<div class="container2">

23
 <img class="zoom-in-out" src="C:\Users\sanju\Downloads\speaker-removebg-
preview.png">

</div>

<div class="container3">

<img class="zoom-in-out" src="C:\Users\sanju\Downloads\speaker-removebg-

preview.png">

</div>

</body>

</html>

CSS-

*{

margin-bottom: 0px;

padding: 20px;

box-sizing:border-box;

body{

background-image: url('C:/Users/sanju/Downloads/main3.webp');

background-size: cover;

.container{

height: 300px;

width:400px;

24
 border:10px ,lightpink;

background-color : 0 0 0;

.container img{

height:280px;

width:280px;

margin-top: 190px;

margin-left: 245px;

border-radius: 50%;

.container1 img{

background-size: cover;

height:280px;

width:280px;

margin-top:-107px;

margin-left: 833px;

border-radius: 50%;

.container2 img{

display: flex;

height:150px;

25
 width:150px;

border-radius: 50%;

.container3 img{

display: flex;

height:150px;

width:150px;

border-radius: 50%;

.container .clockwise{

animation-name: forward;

animation-duration: 3s;

animation-iteration-count: infinite;

animation-timing-function: linear;

.container1 .anti-clock{

animation-name: reverse;

animation-duration: 3s;

animation-iteration-count: infinite;

animation-timing-function: linear;

26
.container2 .zoom-in-out{

animation-name: zoom;

animation-duration: 1s;

animation-iteration-count: infinite;

animation-timing-function: linear;

.container3 .zoom-in-out{

animation-name: zoom;

animation-duration: 1s;

animation-iteration-count: infinite;

animation-timing-function: linear;

@keyframes forward{

from{

transform:rotate(0deg);

to{

transform:rotate(360deg);

@keyframes reverse{

0%{

transform:rotate(360deg);

27
 100%{

.container2{

margin-top: -670px;

margin-left: 1200px;

.container3{

margin-top: -195px;

@keyframes zoom{

0%{

transform:scale(1,1);

10%{

transform:scale(0.8,0.8);

28
20%{

transform:scale(0.6,0.6);

30%{

transform:scale(0.4,0.4);

40%{

transform:scale(0.2,0.2);

50%{

transform:scale(0.4,0.4);

60%{

transform:scale(0.6,0.6);

70%{

transform:scale(0.8,0.8);

80%{

transform:scale(1,1);

90%{

transform:scale(1.2,1.2);

29
100%{

transform:scale(1,1);

OUTPUT-

30
 Chapter 4

What I have learned

4.1 HTML

HTML (Hyper Text Markup Language) is the standard language used for creating and
designing web pages and web applications. It structures content on the web by denoting
elements such as headings, paragraphs, lists, links, images, and other multimedia.

Structure of an html Document –

<!DOCTYPE html>: Declares the document type and version of HTML.

<html>: The root element that wraps all the content on the page.

<head>: Contains meta-information about the document, such as its title and links to
stylesheets or scripts.

<title>: Sets the title of the document, which appears in the browser tab.

<body>: Contains the content of the document that is displayed in the web browser

Tags in html

<h1> to <h6>: Define headings, with <h1> being the highest level and <h6> the lowest.

<p>: Defines a paragraph.

<a>: Creates a hyperlink. The href attribute specifies the URL of the linked page.

<img>: Embeds an image. The src attribute specifies the path to the image file, and the alt
attribute provides alternative text.

<ul>: Defines an unordered (bulleted) list.

31
<ol>: Defines an ordered (numbered) list.

<li>: Defines a list item

<div>: A block-level container used to group elements for styling and layout.

<span>: An inline container used to group text or elements for styling purposes.

Hyper link in html

A hyperlink in HTML is created using the <a> (anchor) tag. This tag is used to link one
page to another or to link to different sections within the same page. The key attribute
of the <a> tag is href, which specifies the URL of the page the link goes to.

Basic Structure of a Hyperlink –

<a href="URL">Link Text</a>

Iframe in html –

An <iframe> (short for inline frame) is an HTML element used to embed another
HTML page within the current page. This is useful for incorporating external content
like videos, maps, or other webpages. Here's an overview of how to use <iframe> in
HTML:

<iframe src="URL"></iframe>

Common Attributes:

src: Specifies the URL of the page to embed.

width: Sets the width of the iframe.

height: Sets the height of the iframe.

title: Provides a text description for the iframe, which is important for accessibility.

name: Assigns a name to the iframe which can be targeted by links or scripts.

sandbox: Adds extra restrictions to the content in the iframe for security purposes.

32
allow: Allows specific features to be enabled for the iframe (e.g., camera, microphone,
fullscreen.

Example-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Images with Description</title>

</head>

<body style="background-color: beige;">

<h1 align="center"><u>Animals</u></h1>

<table style="width: 100%;">

<tbody>

<tr align="center";>

<td><h2><u>Lion</u></h2></td>

<td><h2><u>Tiger</u></h2></td>

<td><h2><u>Elephant</u></h2></td>

<td><h2><u>Dear</u></h2></td>

<td><h2><u>Zebra</u></h2></td>

</tr>

<tr>

<td><img src="C:\Users\sanju\Downloads\lion.jpeg" height="200px"

width="300px" alt="image not available"></td>

33
 <td><img src="C:\Users\sanju\Downloads\tigar.jpeg" height="200px"
width="300px" alt="image not available"></td>

<td><img src="C:\Users\sanju\Downloads\elephant.jpeg" height="200px"

width="300px" alt="image not available"></td>

<td><img src="C:\Users\sanju\Downloads\Dear.jpeg" height="200px"

width="300px" alt="image not available"></td>

<td><img src="C:\Users\sanju\Downloads\Zebra.jpeg" height="200px"

width="300px" alt="image not available"></td>

</tr>

<tr>

<td><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit maiores
repellendus culpa aut, accusantium et perferendis iusto molestiae, velit cum totam eveniet
molestias, doloribus tempore soluta ea nostrum quaerat? Laudantium.</p></td>

<td><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ducimus
veritatis culpa officiis iure ex, hic velit. Eum, culpa voluptate! Dolores quidem cumque
eligendi? Placeat in itaque ipsa sequi quas.</p></td>

<td><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi odio
repellendus quos sunt odit corporis unde, accusantium natus cum expedita culpa praesentium
in repudiandae quia. Quod optio dolorem ipsa aspernatur.</p></td>

<td><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam,

dolorem! Autem sint explicabo aspernatur quibusdam expedita! Cupiditate natus neque
debitis. Itaque architecto sapiente deserunt, reprehenderit saepe pariatur maxime rem
earum.</p></td>

<td><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt dolorum
recusandae voluptate harum, omnis ad minus doloribus, architecto debitis unde sapiente optio
molestias aperiam vel provident, blanditiis tempore alias dolorem.</p></td>

</tr>

<tr align="center">

<td><h2><u>Cat</u></h2></td>
34
 <td><h2><u>Dog</u></h2></td>

<td><h2><u>Hamester</u></h2></td>

<td><h2><u>Horse</u></h2></td>

<td><h2><u>Bear</u></h2></td>

</tr>

<tr>

<td><img src="C:\Users\sanju\Downloads\Cat.jpeg" height="200px"

width="300px" alt="image not available"></td>

<td><img src="C:\Users\sanju\Downloads\dog.jpeg" height="200px"

width="300px" alt="image not available"></td>

<td><img src="C:\Users\sanju\Downloads\hamester.jpeg" height="200px"

width="300px" alt="image not available"></td>

<td><img src="C:\Users\sanju\Downloads\horse.jpeg" height="200px"

width="300px" alt="image not available"></td>

<td><img src="C:\Users\sanju\Downloads\bear.jpeg" height="200px"

width="300px" alt="image not available"></td>

</tr>

<tr>

<td><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum

repellendus corporis harum doloribus beatae, consectetur porro magnam error recusandae qui
a illum iusto itaque odit vel reiciendis dolorem? Ratione, recusandae.</p></td>

<td><P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis

assumenda, voluptatum beatae nulla ullam, facilis illum quidem aspernatur voluptatem,
itaque est. Omnis voluptatem quisquam voluptatum illo ipsum, minus cupiditate
suscipit.</P></td>

<td><P>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis eos, hic
aperiam nihil maiores dolorum amet quaerat deleniti inventore. Dicta reiciendis quod eligendi
incidunt id nobis, laudantium distinctio et veniam.</P></td>

35
 <td><P>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis nam
laborum enim accusantium in temporibus repellendus voluptatem tempora? Quo suscipit
quisquam ab sapiente mollitia praesentium nulla recusandae veritatis cupiditate
rerum.</P></td>

<td><P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi,

repellendus? Quas esse neque inventore quos dolore laborum, sint accusantium enim
dignissimos. Alias, vel? Esse saepe rem libero officiis facilis consequatur.</P></td>

</tr>

</tbody>

</table>

</body>

</html>

Output –

36
4.2 CSS –

CSS stands for Cascading Style Sheets. It is a coding language used to describe the visual
appearance and formatting of a document written in HTML (Hypertext Markup Language).
CSS allows web developers to control the layout, colors, fonts, and other design aspects of a
webpage. It provides a way to separate the presentation and structure of a website, making it
easier to maintain and update the design across multiple webpages. With CSS, you can create
beautiful and responsive websites.

Example –

HTML-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>FLIP-TEXT ON HOVER ANIMATION</title>

<link rel="stylesheet" href="demo1.css">

</head>

<body>

<h1><u>FLIP TEXT</u></h1>

<div class="container">

<img src="C:\Users\sanju\Downloads\ram mandir temple.webp" alt="image not

available">

<div class="text">

<h2><u>RAM MANDIR</u></h2>

37
 <p> The Ram Mandir (lit'Rama Temple') is a partially constructed Hindu temple
complex in Ayodhya, Uttar Pradesh, India.[6][7] Many Hindus believe that it is located at the
site of Ram Janmabhoomi, the mythical birthplace of Rama, a principal deity of
Hinduism.[8][9][10] The temple was inaugurated[7] on 22 January 2024 after a prana
pratishtha (consecration) ceremony.[6][10] On the first day of its opening, following the
consecration, the temple received a rush of over half a million visitors,[11] and after a month,
the average number of visitors was reported to be "1 to 1.5 lakh (100,000 to 150,000) on a
daily basis".[12]</p>

</div>

</div>

<div class="container1">

<img src="C:\Users\sanju\Downloads\hawa mahal.cms" alt="image not available">

<div class="text1">

<h2><u>हवा महल</u></h2>

<p> हवा महल भारत के राजस्थान के जयपुर शहर में एक महल है । लाल और गुलाबी बलुआ

पत्थर से नननमित, यह नसटी पैलेस, जयपुर के नकनारे पर है , और जेनाना , या मनहलाओं के कक्षं तक

फैला हुआ है । इस संरचना का ननमािण 1799 में राजस्थान राज्य के झुंझुनू शहर के संस्थापक, महाराजा
सवाई जय नसंह के पषते , महाराजा सवाई प्रताप नसंह द्वारा नकया गया था। [1] वह खेतडी महल की
अनूठी संरचना से इतने प्रेररत हुए नक उन्षंने इस भव्य और ऐनतहानसक महल का ननमािण कराया।</p>

</div>

</div>

<div class="container2">

<img src="C:\Users\sanju\Downloads\Golden-Temple.webp" alt="image not

available">

<div class="text2">

<h2><U>ਹਰਿਮੰਦਿ ਸਾਰਹਬ</U></h2>

38
 <p> ਸਚਖੰਡ ਸ਼੍ਰੀ ਹਰਿਮੰਦਿ ਸਾਰਹਬ ਜਾਾਂ ਸ਼੍ਰੀ ਦਿਬਾਿ ਸਾਰਹਬ (ਪੰਜਾਬੀ ਉਚਾਿਨ: [dəɾbaːɾ saːh(ɪ)b];

ਿੱਬ ਦਾ ਘਿ) ਭਾਿਤ ਦੇ ਪੰਜਾਬ ਸੂਬੇ ਦੇ ਸ਼੍ਰਹਿ ਅੰਰਮਰਤਸਿ ਰ ੱਚ ਸਰਿਤ ਇੱਕ ਗੁਿਦ
ੂ ਆ
ੁ ਿਾ ਹੈ।[2][3] ਇਹ ਰਸੱਖਾਾਂ
ਦਾ ਸਭ ਤੋਂ ਪਰ ੱਤਿ ਧਾਿਰਮਕ ਅਸਿਾਨ ਮੰਰਨਆ ਜਾਾਂਦਾ ਹੈ।[</P>

</div>

</div>

<div class="container3">

<img src="C:\Users\sanju\Downloads\Hampi-Karnataka.jpg" alt="image not

available">

<div class="text3">

<h2><U>ಹಂಪೆ</U></h2>

<p> ಹಂಪಿ ವಿಜಯನಗರ ಜಿಲ್ಲೆ ಯ ಹೊಸಪೆೇಟೆಯ ಬಳಿ ಇರುವ ಐತಿಹಾಸಿಕ ಸಥ ಳ.

೧೩೩೬ರಂದ ೧೫೬೫ರವರೆಗೆ (೧೩೩೬-೧೫೬೫) ಇದು ವಿಜಯನಗರ ಸಾಮ್ರಾ ಜಯ ದ ರಾಜಧಾನಿ

ಆಗಿತ್ತು . ಹಂಪಿಯ ಮೊದಲನೆ ಹೆಸರು 'ಪಂಪಾ' ಎಂದಿತ್ತು . ಅಂದರೆ ತ್ತಂಗಭದಾ ನದಿ

ಎಂದರ್ಥ. ವರ್ಥಗಳು ಕಳೆದಂತೆ ಇದು 'ವಿಜಯನಗರ' ಮತ್ತು 'ವಿರುಪಾಕ್ಷಪುರ' ಎಂದು

ಕರೆಯಲಪ ಟ್ಟಿ ತ್ತ. ಹಂಪೆಯನ್ನು ಯುನೆಸ್ಕ ೇ ವಿಶ್ವ ಪರಂಪರೆಯ ತಾಣ ಎಂದು

೧೯೮೬ರಂದು ಘೇಷಿಸಿದೆ. ವಿಜಯನಗರ ಸಾಮ್ರಾ ಜಯ ದ ಒಡೆಯನಾದ ಕೃರ್ಣ ದೆೇವರಾಯನ

ಕಾಲದಲ್ಲೆ ಹಂಪಿ ಬಜಾರ್ ಎಂದೆನಿು ಸಿ ಕಂಡ ಬೇದಿಯಲ್ಲೆ ವಜಾಾ ಭರಣಗಳನ್ನು ತೂಕದ

ಮ್ರದರಯಲ್ಲೆ ಮ್ರರಲಪ ಡುತಿು ದದ ರಂತೆ. ಕೃರ್ಣ ದೆೇವರಾಯನ ರಾಜಯ ಭಾರ ಮುಗಿದ ನಂತರ

ವಿಜಯನಗರ ಸಾಮ್ರಾ ಜಯ ತನು ಪಾಾ ಬಲಯ ವನ್ನು ನಿಧಾನವಾಗಿ ಕಳೆದುಕಳುು ತಾು ಬಂತ್ತ.
ಕನೆಗೆ ತಾಳಿಕೇಟೆಯ ಯುದಧ ದಲ್ಲೆ ಮುಸಿೆ ಂ ಸಾಮ್ರಾ ಜಯ ದಿಂದ ಬಂದ ಆಕಾ ಮಣವನ್ನು
ತಡೆಯದೆ ಅಂತಯ ಗಂಡಿತ್ತ. ಹಂಪಿಯಲ್ಲೆ ದದ ಅನೆೇಕ ಸಾಾ ರಕಗಳನ್ನು ಸುಮ್ರರು ಆರು
ತಿಂಗಳುಗಳ ಕಾಲ ಸೈನಿಕರು ನಾಶ್ ಮ್ರಡಿದರು ಎನ್ನು ತು ದೆ ಇತಿಹಾಸ. ಇಂದು ವಿರೂಪಾಕ್ಷ

ದೆೇವಾಲಯ, ಹಜಾರ ರಾಮ ದೆೇವಸಾಥ ನ, ಸಪು ಸವ ರ ಸಂಗಿೇತ ಹೊರಹೊಮ್ಮಾ ಸುವ ಕಲ್ಲೆ ನ

ಕಂಬಗಳು, ವಿಶ್ವ ವಿಖ್ಯಯ ತ ಕಲ್ಲೆ ನ ರರ್, ಮಹಾನವಮ್ಮ ದಿಬಬ , ಸಾಸಿವೆಕಾಳು ಗಣಪತಿ,

ಉಗಾ ನರಸಿಂಹ, ಕಮಲ ಮಹಲ್, ಬಡವಿ ಲ್ಲಂಗ, ಅನೆ ಲಾಯ ಹೇಗೆ ಹಲವಾರು ಪೆಾ ೇಕ್ಷಣಿಯ
ಸಥ ಳಗಳನ್ನು ಹಂಪಿಯಲ್ಲೆ ನೇಡಬಹುದಾಗಿದೆ.</p>

</div>

39
 </div>

</body>

</html>

CSS-

*{

margin-right:1200px;

padding: 0px;

box-sizing: border-box;

font-family: cursive;

body{

background:linear-gradient(deeppink,lightsalmon,violet)

.container{

height: 450px;

width: 400px;

/border:10px solid red;/

top: 80px;

left: 30px;

margin: 50px auto;

box-shadow: 0 0 15px black;

position:relative;

overflow:hidden;

40
.container img{

height: inherit;

width: inherit;

transition: all 1s;

.container .text{

color:white;

position:absolute;

top: 0px;

width: 50%;

font-size: 20px;

background-color: rgba(0,0,0,0.3);

transform: perspective(400px) rotateY(90deg);

transform-origin: left;

transition: all 1s;

.container:hover{.text{

transform: perspective(400px) rotateY(0deg);

transform: rotateZ(0deg);

.container img:hover{

transform: scale(1.5,1.5);

41
}

.container1{

height: 450px;

width: 400px;

/border:10px solid red;/

top: -370px;

left: 550px;

box-shadow: 0 0 15px black;

position:relative;

overflow:hidden;

.container1 img{

height: inherit;

width: inherit;

transition: all 1s;

.container1 .text1{

color:white;

position:absolute;

top: 0px;

left: 200px;

width: 50%;

line-height: 32px;

background-color: rgba(0,0,0,0.3);

42
transform: perspective(200px) rotateY(-90deg);

transform-origin: right;

transition: all 1s;

.container1:hover{.text1{

transform: perspective(400px) rotateY(0deg);

transform: rotateZ(0deg);

.container1 img:hover{

transform: scale(1.5,1.5);

.container2{

height: 450px;

width: 400px;

/border:10px solid red;/

top: -200px;

left: 350px;

box-shadow: 0 0 15px black;

position:relative;

overflow:hidden;

.container2 img{

43
 height: inherit;

width: inherit;

transition: all 1s;

.container2 .text2{

color:white;

position:absolute;

top: 130px;

left: 100px;

width: 50%;

line-height: 32px;

background-color: rgba(0,0,0,0.3);

transform: perspective(200px) rotatex(90deg);

transform-origin: bottom;

transition: all 1s;

.container2:hover{.text2{

transform: perspective(400px) rotateY(0deg);

transform: rotateZ(0deg);

.container2 img:hover{

transform: scale(1.5,1.5);

44
}

.container3{

height: 450px;

width: 400px;

/border:10px solid red;/

top: -650px;

left: 1000px;

box-shadow: 0 0 15px black;

position:relative;

overflow:hidden;

.container3 img{

height: inherit;

width: inherit;

transition: all 1s;

.container3 .text3{

color:white;

position:absolute;

top: 0px;

left: 100px;

width: 50%;

line-height: 32px;

background-color: rgba(0,0,0,0.3);

45
transform: perspective(200px) rotatex(-90deg);

transform-origin: top;

transition: all 1s;

.container3:hover{.text3{

transform: perspective(400px) rotateY(0deg);

transform: rotateZ(0deg);

.container3 img:hover{

transform: scale(1.5,1.5);

OUTPUT-

46
4.3 Bootstrap –

Bootstrap is an HTML, CSS and JS library that focuses on simplifying the development of
informative web pages. The primary purpose of adding it to a web project is to apply
Bootstrap's choices of color, size, font and layout to that project. As such, the primary factor is
whether the developers in charge find those choices to their liking. Once added to a project,
Bootstrap provides basic style definitions for all HTML elements. In addition, developers can
take advantage of CSS classes defined in Bootstrap to further customize the appearance of their
contents.

Bootstrap also comes with several JavaScript components which do not require other libraries
like jQuery. They provide additional user interface elements such as dialog boxes, tooltips,
progress bars, navigation drop-downs, and carousels. Each Bootstrap component consists of an
HTML structure, CSS declarations, and in some cases accompanying JavaScript code. They
also extend the functionality of some existing interface elements, including for example an
auto-complete function for input fields.

4.4 JavaScript –

JavaScript is the most popular web development related programming language. Web
browsers have a dedicated JavaScript engine that executes the client code. These engines are
also utilized in some servers and a variety of apps. The most popular runtime system for non-
browser usage is Node.js.

Example –

// program to find the largest among three numbers

// take input from the user

47
const num1 = parseFloat(prompt("Enter first number: "));

const num2 = parseFloat(prompt("Enter second number: "));

const num3 = parseFloat(prompt("Enter third number: "));

let largest;

// check the condition

if(num1 >= num2 && num1 >= num3) {

largest = num1;

else if (num2 >= num1 && num2 >= num3) {

largest = num2;

else {

largest = num3;

// display the result

console.log("The largest number is" + largest);

Output –

Enter first number: -7

Enter second number: -5

Enter third number: -1

48
The largest number is -1

4.5 React JS –

ReactJS is a free and open-source front-end JavaScript library for building user
interfaces based on components. It is maintained by Meta (formerly Facebook) and a
community of individual developers and companies.

React can be used to develop single-page, mobile, or server-rendered applications with

frameworks like Next.js. Because React is only concerned with the user interface and rendering
components to the DOM, React applications often rely on libraries for routing and other client-
side functionality. A key advantage of React is that it only re-renders those parts of the page
that have changed, avoiding unnecessary re-rendering of unchanged DOM elements.

49
 Chapter 5

Recommendation and Conclusions

Based on the insights gained during this internship, here are some recommendations:

1. Continuous Learning: Emphasize the importance of ongoing learning and staying

updated with the latest trends, tools, and techniques in front-end development.
Encourage participation in online courses, workshops, and community events to expand
knowledge and skills.

2. Collaboration: Foster a collaborative work environment where interns can exchange

ideas, seek feedback, and learn from each other's experiences.

3. Encourage participation in team projects to enhance teamwork and communication

skills.

4. Exploration of Emerging Technologies: Encourage interns to explore emerging front-

end technologies such as Progressive Web Apps (PWAs), Web Assembly, and Web
Components. These technologies have the potential to revolutionize web development
and staying ahead of the curve can provide a competitive edge.

5. Documentation and Reflection: Stress the importance of documenting the learning

process and reflecting on challenges and successes encountered during the internship.
Encourage interns to maintain a journal or blog to track their progress and share insights
with peers.

50
6. Networking: Encourage interns to network with professionals in the field through
online communities, social media, and industry events. Networking provides valuable
opportunities for mentorship, career advice, and potential job opportunities in the
future.

7. Feedback Mechanism: Establish a structured feedback mechanism where interns can

receive constructive feedback on their work and performance. Regular feedback
sessions help identify areas for improvement and promote professional growth.

8. Project Management Skills: Provide opportunities for interns to develop project

management skills by assigning tasks with deadlines, prioritizing work, and managing
time effectively. These skills are essential for success in any professional setting.

9. By implementing these recommendations, interns can maximize their learning

experience and prepare themselves for a successful career in front-end development.

51
Conclusion-

To conclude, this internship journey has underscored the significance of front-end technologies
in modern web development. From creating visually stunning interfaces with HTML and CSS
to enhancing user interactivity with JavaScript and its libraries, the realm of front-end
development offers endless possibilities for innovation and creativity. Through hands-on
experience and research, it's evident that a strong foundation in front-end technologies is
essential for crafting compelling user experiences online. As I move forward, I am excited to
continue refining my skills and exploring new advancements in this dynamic and ever-evolving
field.

52