A

PRACTICAL TRAINING REPORT

AT

TECHNOGLOBE
“Submitted In Partial Fulfillment of the Requirement for the Award
of the Degree of the Bachelor of Technology in Computer Science and
Engineering to Rajasthan Technical University, Kota”

SUBMITTED BY

Vivek Gurjar (19CS200)

Department of Computer Science and Engineering

Anand International College of Engineering, Jaipur

2021-22
 Acknowledgement

It is a great pleasure and privilege for me to present this practical training

report carried out at “Technoglobe on Front End Web Development” and

submitted in partial fulfillment of the requirement for the award of the degree

of the Bachelor of Technology in Computer Science and Engineering to

Rajasthan Technical University, Kota.

We express our sincere thanks to H.O.D. Computer Science and Engineering

Department of our college for his kind co-operation and valuable suggestions.

We are very much thankful to Mr. Gaurav Jaiswal, Manager Project of

TechnoGlobe for his encouragement and inspiration at every step to a great

extent. This training would not have been possible without his support and able

guidance. He was very supportive throughout the given period in sharing their

knowledge and technical aspects.

Finally, we express earnest and sincere thanks to the whole “TechnoGlobe” for

the generous help and co-operation in every possible manner.

(Name and Signature of Candidate)

Vivek Gurjar

College ID.: 19CS200

i
 Candidate’s Declaration

I hereby declare that the work, which is being presented in the practical training report

carried out at “Technoglobe on Front End Web Development” and submitted in

partial fulfillment of the requirement for the award of the degree of the Bachelor of

Technology in Computer Science and Engineering to Rajasthan Technical University,

Kota is a record of my training carried under the Guidance of Mr. Gaurav Jaiswal,

Project Manager of TECHNOGLOBE PVT. LTD.

(Name and Signature of Candidate)

Vivek Gurjar

College ID.: 19CS0200

(Name and Signature of Guide/ Supervisor)

Mr. Gaurav Jaiswal
Project Manager
TechnoGlobe Pvt. Ltd
423-B, Surya Nagar, Near Ridhi Sidhi Chouraha, Gopalpura, Bypass, Jaipur

i
Training Certificate

i
 Abstract

In this internship/training, we learn basic concepts of HTML, CSS and

JavaScript to build a responsive web page.

This online training teaches us how to build an interactive website with

the help of various features of HTML, Cascading Style Sheet (CSS)
which is used for styling and used to change look and feel of the web
page and well known JavaScript makes the web page interactive and user
friendly.

ii
 Table of Contents

Acknowledgement i
Candidate’s Declaration ii
Training Cerficate iii
Abstract iv
List of Figures vi
1. Introduction 1
1.1 Training Overview 1
1.2 Introduction To HTML 1
1.2.1 Write Some HTML 1
1.2.2 Basic HTML Tags 2
1.2.3 Images & Lists 3
1.3 History of HTML 5
2. Introduction To CSS 8
2.1 What is CSS? 8
2.2 How CSS can be associated with an HTML web page? 8
2.3 CSS Basic Properties 12
2.4 Advantages of CSS 13
3. Introduction To JavaScript 14
3.1 What is JavaScript? 14
3.2 JavaScript Can Change HTML Content 14
3.3 JavaScript Can Change HTML Styles (CSS) 15
3.4 Where to Insert JavaScript Code? 16
3.5 JavaScript Functions & Events 17
3.6 External JavaScript 19
3.7 Advantages of External JavaScript 20
4. Responsive Web Design 21
4.1 What Is Responsive Web Design? 21
4.2 Responsive Images 22
4.3 Media Queries 23
5. Project Work: Library Management 26
6. Conclusion 37
7. References 38

ii
 List of Figures

Figure 1.1 Write Some HTML

Figure 1.2 Saving HTML File
Figure 1.3 Viewing HTML Document in Browser
Figure 1.4 Unordered List HTML Code
Figure 1.5 Unordered List Output
Figure 1.6 Ordered List HTML Code
Figure 1.7 Ordered List Output
Figure 2.1 Inline CSS Code
Figure 2.2 Inline CSS Output
Figure 2.3 Internal CSS Code
Figure 2.4 Internal CSS Output
Figure 2.5 External CSS Example Code
Figure 2.6 Creating External styles.css File
Figure 2.7 External CSS Output
Figure 3.1 Output Before onclick event
Figure 3.2 Output After onclick event
Figure 3.3 Output JavaScript Can Change HTML CSS Styles
Figure 3.4 Output JavaScript Changed HTML CSS Styles
Figure 3.5 Output JavaScript Applied in Body
Figure 3.6 Output JavaScript Functions and Events
Figure 3.7 Output JavaScript Functions and Events 2
Figure 3.8 Output External JavaScript Before onclick Event
Figure 3.9 Output External JavaScript After onclick Event
Figure 4.1 Understanding Responsive Design
Figure 4.2 Output Responsive Web Page
Figure 4.3 Output Media Queries (Browser Window <800px)
Figure 4.4 Output Media Queries (Browser Window >800px)
Figure 5.1 Project Web Page View (Width 100%)
Figure 5.2 Project Web Page View (Width 60%

ii
Chapter 1
Introduction
1.1 Training Overview
Module 1 summarizes the topics that it covers in the entire course and discusses that
to successfully complete the course, it is needed to complete all the practice quizzes
and assignments. This course covered basics of HTML, CSS for styling the web pages
and JavaScript to make a web page interactive and also develop responsive web pages
with the help of HTML, CSS, and JavaScript.

1.2 Introduction To HTML

HTML stands for Hyper Text Markup Language. It is the standard markup language
for creating Web Pages and describes the structure of a web page.
It’s a text file that contains small markup tag. The markup tags tell the web browser
how they should display the page. So, they are markup language that describes the
content.
An HTML file always will end with .html.

1.2.1 Write Some HTML

To write some HTML code just following steps have to do:-
Step 1: Open Notepad or any Text Editor
Step 2: Write some HTML code in editor

Figure 1.1 Write Some HTML

1
Step 3: And save it with extension .html

Figure 1.2 Saving HTML File

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file,
or right-click - and choose "Open with").
The result will look much like this:

Figure 1.3 Viewing HTML Document in Browser

1.2.2 Basic HTML Tags

Tags Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document

2
<title> Defines a title for the document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break
<!--….--> Defines a comment

1.2.3 Images & Lists

i. HTML Images Syntax:-
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

● src - Specifies the path to the image
● alt - Specifies an alternate text for the image

Syntax :-
<img src=”url” alt=”alternatetext”>
Example :-
<img src="image.jpg" alt="imagetext">
ii. HTML List
HTML lists allow web developers to group a set of related items in lists.
There are three types of html list -

a) Unordered HTML List: An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.

3
 The list items will be marked with bullets (small black circles) by default:

HTML Code:

Figure 1.4 Unordered List HTML Code

Output:

Figure 1.5 Unordered List Output

b) Ordered HTML List - An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
The list items will be marked with numbers by default:

4
 HTML Code:

Figure 1.6 Ordered List HTML Code

Output:

Figure 1.7 Ordered List Output

1.3 History of HTML

This section discusses a brief history of HTML language. Reading this will help to get
an idea of how HTML has been evolved through the years.

5
Tim Berners-Lee, the inventor of HTML, used to work in the computer section of the
CERN (European Laboratory for Particle Physics) at Geneva, Switzerland. CERN is
an institution for researching particle physics which requires the collaboration of
physicists all over the world.

Tim has an idea of creating something which would enable physicists to share
research information from anywhere in the world, and he came with HTML which
can contain links of many documents from one document.

Tim's prototype Web browser on the NeXT computer came out in 1990.

• In 1991, an open discussion group HTML-talk was started across the internet for
the development of HTML.
• In 1992, Dave Raggett from Hewlett-Packard's Labs in Bristol, England who was
one of the enthusiastic of HTML, met Tim and upon returning England, Dave
wrote a richer version of HTML called HTML+.
• In 1992, NCSA showed interest in web and contributed to take the
development of web a step further.
• In december 1992, Marc Andreessen of Mosaic team (an early web browser)
introduced img tag in the HTML document.
• March 1993: Lou Montulli releases the Lynx browser version 2.0a.
• Early 1993: Dave Raggett begins to write his own browser.
• April 1993: The Mosaic browser is released.
• Late 1993: Large companies underestimate the importance of the Web.
• May 1994: NCSA assigns commercial rights for Mosaic browser to Spyglass Inc.
• September 1994: The Internet Engineering Task Force (IETF) sets up an
HTML working group.
• July 1994: HTML specification for HTML 2 is released.
• November 1994: Netscape is formed.
• Late 1994: The World Wide Web Consortium forms.
• Through 1995: HTML is extended with many new tags.
• March 1995: HTML 3 is published as an Internet Draft.

6
• March 1995: A furor over the HTML Tables specification.
• August 1995: Microsoft's Internet Explorer browser comes out.
• September 1995: Netscape submits a proposal for frames.
• November 1995: The HTML working group runs into problems.
• November 1995: Vendors unite to form a new group dedicated to developing an
HTML standard.
• November 1995: Style sheets for HTML documents begin to take shape.
• November 1995: Internationalization of HTML Internet Draft.
• December 1995: The HTML working group is dismantled.
• February 1996: The HTML ERB is formed.
• April 1996: The W3 Consortium working draft on Scripting comes out.
• July 1996: Microsoft seems more interested than first imagined in open standards.
• December 1996: Work on `Cougar' is begun.
• January 1997: HTML 3.2 is ready.
• In spring 1998, HTML 4.01 was materialized finally and become a w3c
recommendation.
• In January 2008, a working draft of HTML 5 is prepared.

The current version of HTML is HTML 4.01 which we have discussed in our HTML
tutorials.

Development of HTML 5 is underway but developers have already started using some
of it's features.

7
Chapter 2
Introduction To CSS

2.1 What is CSS?

CSS, stands for Cascading Style Sheet is a computer language to describe
presentation (for example width, height, color, background color, alignment etc.) of
HTML and XML (and XML based languages like XHTML, SVG) web documents. In
all the examples of our tutorials, we have used HTML for implementing CSS.

CSS is a standard specified and maintained by World Wide Web Consortium.

From its invention, CSS has evolved through different versions. The present version
of CSS is CSS 2.1.

Next version of CSS is CSS3, which is under development but developers have
already started using some of its features.

2.2 How CSS can be associated with an HTML web page?

CSS can be added to HTML documents in 3 ways:

1. Inline - by using the style attribute inside HTML elements.

2. Internal - by using a <style> element in the <head> section.
3. External - by using a <link> element to link to an external CSS file

1. Inline CSS
● An inline CSS is used to apply a unique style to a single HTML element.
● An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text
color of the <p> element to red:

8
 Figure 2.1 Inline CSS Code

Output:

Figure 2.2 Inline CSS Output

2. Internal CSS
● An internal CSS is used to define a style for a single HTML page.
● An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.

9
The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:

Figure 2.3 Internal CSS Code

Output:

Figure 2.4 Internal CSS Output

3. External CSS

10
● An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML
page:

Example: (i) HTML File - external css.html

Figure 2.5 External CSS Example Code

(ii) styles.css file

Figure 2.6 Creating External styles.css File

Output:

11
 Figure 2.7 External CSS Output

2.3 CSS Basic Properties

Property Description
color Sets the color of a text
line-height Sets the distance between lines
text-align Increase or decrease the space between characters
text-decoration Adds decoration to text
list-style Sets all the properties for a list in one decoration
list-style-image Specifies an image as the list-item maker
border Sets all the border properties in one declaration
border-color Sets the color of the four borders
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-weight Specifies the weight of a font

12
2.4 Advantages of CSS
Some of the advantages of using CSS are:

● Easier to maintain and update

● Greater consistency in design
● More formatting options
● Lightweight code
● Faster download times
● Search engine optimization benefits
● Ease of presenting different styles to different viewers
● Greater accessibility

13
Chapter 3
Introduction to JavaScript

3.1 What is JavaScript

JavaScript is a cross-platform, object-oriented scripting language developed by
Netscape. JavaScript was created by Netscape programmer Brendan Eich.

It was first released under the name of LiveScript as part of Netscape Navigator 2.0 in
September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript
works on the client side, It is mostly used for client-side web development.

JavaScript is designed for use on web pages and closely integrated with HTML.
JavaScript can create applications which run in the browsers such as IE, Opera,
FireFox, Google Chrome and other. Netscape submitted JavaScript to ECMA
International for standardization resulting in the standardized version named
ECMAScript.

3.2 JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and changes the
element content (innerHTML) to "Hello JavaScript":
Example:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>

<button type="button"

14
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
Output:

Figure 3.1 Output Before onclick event

After clicking on “Click Me!” button, text chaged to “Hello JavaScript”

Figure 3.2 Output After onclick event

3.3 JavaScript Can Change HTML Styles (CSS)

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

15
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Clic
k Me!</button>

</body>
</html>

Output:

Figure 3.3 Output JavaScript Can Change HTML CSS Styles

After click on “Click Me!” button, font, font-size becomes changed

Figure 3.4 Output JavaScript Changed HTML CSS Styles

3.4 Where To Insert JavaScript Code?

In HTML, JavaScript code is inserted between <script> and </script> tags.
<!DOCTYPE html>
<html>
<body>

16
<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>

Output:

Figure 3.5 Output JavaScript Applied in Body

We can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in
both.

3.5 JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when
"called" for.

For example, a function can be called when an event occurs, like when the user clicks
a button.

17
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Output:

Figure 3.6 Output JavaScript Functions and Events

Click on “Try it” button

18
 Figure 3.7 Output JavaScript Functions and Events 2

3.6 External JavaScript

Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web
pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of
a <script> tag:

Example:
HTML file:-
<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called

"myScript.js")</p>

19
<script src="myScript.js"></script>

</body>
</html>

JavaScript File:- ‘myScript.js’

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

3.7 Advantages of External JavaScript

Placing scripts in external files has some advantages:
● It separates HTML and code
● It makes HTML and JavaScript easier to read and maintain
● Cached JavaScript files can speed up page loads

20
Chapter 4
Responsive Web Design

4.1 What Is Responsive Web Design?

Responsive Web design is the approach that suggests that design and development
should respond to the user’s behavior and environment based on screen size, platform
and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from their laptop to iPad, the website
should automatically switch to accommodate for resolution, image size and scripting
abilities. One may also have to consider the settings on their devices; if they have
a VPN for iOS on their iPad, for example, the website should not block the user’s
access to the page. In other words, the website should have the technology to
automatically respond to the user’s preferences. This would eliminate the need for a
different design and development phase for each new gadget on the market.

Almost every new client these days wants a mobile version of their website. It’s
practically essential after all: one design for the BlackBerry, another for the iPhone,
the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the
next five years, we’ll likely need to design for a number of additional inventions.
When will the madness stop? It won’t, of course.

21
 Figure 4.1 Understanding Responsive Design

4.2 Responsive Images

Responsive images are images that scale nicely to fit any browser size.
Using the width Property - If the CSS width property is set to 100%, the image will be
responsive and scale up and down:

Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and
down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="img_girl.jpg" style="width:100%;">

</body>
</html>

22
 Figure 4.2 Output Responsive Web Page
4.3 Media Queries
In addition to resize text and images, it is also common to use media queries in
responsive web pages.

With media queries you can define completely different styles for different browser
sizes.

Example: resize the browser window to see that the three div elements below will
display horizontally on large screens and stacked vertically on small screens:

Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}

.left {

23
 background-color:#2196F3;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}

.main {
background-color:#f1f1f1;
padding:20px;
float:left;
width:60%; /* The width is 60%, by default */
}

.right {
background-color:#4CAF50;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */

@media screen and (max-width:800px) {
.left, .main, .right {
width:100%; /* The width is 100%, when the viewport is 800px or
smaller */
}
}
</style>
</head>
<body>

<h2>Media Queries</h2>
<p>Resize the browser window.</p>

24
<p>Make sure you reach the breakpoint at 800px when resizing this
frame.</p>

<div class="left">
<p>Left Menu</p>
</div>

<div class="main">
<p>Main Content</p>
</div>

<div class="right">
<p>Right Content</p>
</div>
</body>
</html>

25
Chapter 5
Project Work
Library Management

fig: Library Management Home Page

26
 fig: Library Managemant Dashboard

fig: Library Management Listed Books Page

27
Code:
!DOCTYPE html>
<html>
<head>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet">
<style type="text/css">
.homepage {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 300%;
color:#000000;
background-color: #ffffff;

28
 width: 70%;
}
body{
background-color: #c4f5ea;
}

.sectionbtn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<title>Library Management</title>

<script type="text/javascript">
function menufunction(){
alert("Sorry! Menu list is not available right
now");
}
function specialfunction(){
alert("Woohooo! You hava got a special dish
for free !!");
}
</script>

</head>

29
<body>

<header class="text-gray-600 body-font">

<div class="container mx-auto flex flex-wrap p-5 flex-col
md:flex-row items-center">
<a class="flex title-font font-medium items-center
text-gray-900 mb-4 md:mb-0">
<span class="ml-3 text-xl">John's Restaurant</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center
text-base justify-center">
<a class="mr-5 hover:text-gray-900">Home</a>
<a class="mr-5 hover:text-gray-900">Pricing</a>
<a class="mr-5 hover:text-gray-900">About Us</a>
<a class="mr-5 hover:text-gray-900">Contact</a>
</nav>

</div>
</header>

<div class="homepage">
<img src="Books.jpg" style="width: 100%;">
<div class="centered">Over 150+ Menus Available</div>
</div>

<div>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -mx-4 -mb-10 text-center">
<div class="sm:w-1/2 mb-10 px-4">
<div class="rounded-lg h-64 overflow-hidden">

30
 <img alt="Menu" src="menu.jpg" width="1202px"
height="502px">
</div>
<a href="#" class="sectionbtn"
onclick="booksfunction()"><h2>Select Books</h2></a>
</div>
<div class="sm:w-1/2 mb-10 px-4">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" src="johnspecial.jpg">
</div>
<a href="#" class="sectionbtn"
onclick="specialfunction()"><h2>John's Special</h2></a>
</div>
</div>
</div>
</section>
</div>

<footer class="text-gray-600 body-font">

<div class="container px-5 py-24 mx-auto flex
md:items-center lg:items-start md:flex-row md:flex-nowrap
flex-wrap flex-col">
<div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center
md:text-left md:mt-0 mt-10">
<a class="flex title-font font-medium items-center
md:justify-start justify-center text-gray-900">

<span class="ml-3 text-xl">John's Restaurant</span>

</a>
</div>
<div class="flex-grow flex flex-wrap md:pr-20 -mb-10
md:text-left text-center order-first">

31
 <div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900
tracking-widest text-sm mb-3">PAGES</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600
hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600
hover:text-gray-800">Pricing</a>
</li>
<li>
<a class="text-gray-600
hover:text-gray-800">About</a>
</li>
<li>
<a class="text-gray-600
hover:text-gray-800">Contact</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900
tracking-widest text-sm mb-3">USEFUL LINKS</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600
hover:text-gray-800">Menu</a>
</li>
<li>

32
 <a class="text-gray-600
hover:text-gray-800">Library Dashboard</a>
</li>

</nav>
</div>

</div>
</div>
<div class="bg-gray-100">
<div class="container mx-auto py-4 px-5 flex flex-wrap
flex-col sm:flex-row">
<p class="text-gray-500 text-sm text-center
sm:text-left">© 2020 Library Management
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-2
justify-center sm:justify-start">
<a class="text-gray-500">
<svg fill="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5
5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48
0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7

33
2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023
3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5"
ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116
11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round"
stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2
2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2
9h4v12H2z"></path>
<circle cx="4" cy="4" r="2"
stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
</footer>
</body>
</html>

34
Chapter 6
Conclusion

After so much effort put in I have successfully created a dynamic and responsive
library management system. This course covered concepts of HTML, CSS and
JavaScript.

35
 References

1. https://www.javatpoint.com
2. https://www.w3schools.com/

36