Scribd
Upload
21 views67 pages

Web Development Basics: HTML & CSS

The document provides a comprehensive introduction to web development, covering both front-end and back-end development, as well as foundational concepts in HTML and CSS. It explains the structure of HTML documents, basic HTML tags, and CSS properties, including how to style elements and create layouts. Additionally, it includes practical tasks to create web components like cards and navigation bars using CSS techniques.

Uploaded by

Varun Parmar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views67 pages

Web Development Basics: HTML & CSS

The document provides a comprehensive introduction to web development, covering both front-end and back-end development, as well as foundational concepts in HTML and CSS. It explains the structure of HTML documents, basic HTML tags, and CSS properties, including how to style elements and create layouts. Additionally, it includes practical tasks to create web components like cards and navigation bars using CSS techniques.

Uploaded by

Varun Parmar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

DAY-1

Introduction to web development:


Web development is the process of creating and building websites and web
applications that are accessible via the internet. It encompasses a broad range of
skills and technologies, combining both front-end and back-end development

Front-end Development:

Also known as client-side development, front-end development focuses on the visual


and interactive aspects of a website. Front-end developers use following
technologies such as HTML , CSS , PHP , Bootstrap, React , Django ,Tailwind CSS ,
Flask etc.. to create the structure, layout, and functionality that users interact with
directly in their web browsers.

Back-end Development:

Back-end development, also referred to as server-side development, deals with the


behind-the-scenes logic and operations of a website. Back-end developers work with
server-side languages like PHP, Python, Ruby, or JavaScript ([Link]) to manage
databases, handle user authentication, and process data, ensuring that the web
application functions smoothly.

backend: functionality

ex. PHP , Python , Java , JavaScript , NodeJS

database: store data

ex. MySQL, Oracle, Mariadb , Mongodb , Firebase

Introduction to HTML:

HTML (Hypertext Markup Language) is the fundamental building block of the World Wide
Web. It is a standard markup language used to create and structure the content of web
pages. Developed by Tim Berners-Lee in 1991, HTML allows web developers to define the
elements and layout of a webpage, making it accessible and readable by web browsers.

Structure of HTML:

HTML is comprised of elements, represented by tags, which define the structure and content
of a web page. Each HTML document starts with a <!DOCTYPE> declaration that specifies
the version of HTML being used. The basic structure of an HTML document is as follows:

1|Page
<!DOCTYPE html>

<html>

<head>

<!-- Metadata and title of the page -->

</head>

<body>

<!-- Content visible on the webpage -->

</body>

</html>

 The <!DOCTYPE html> declaration informs the browser that the document is written in
HTML5, the latest version of HTML.
 The <html> element is the root element of the HTML document and contains all the
other elements.
 The <head> element contains meta-information about the page, such as the title, links
to external stylesheets, or scripts.
 The <body> element contains the visible content of the webpage, including headings,
paragraphs, images, links, and other elements.

HTML Elements and Tags:

HTML elements are represented by tags, which are enclosed in angle brackets < >. Tags
come in pairs, with an opening tag to define the beginning of an element and a closing
tag to define the end. The content to be displayed on the webpage is placed between
the opening and closing tags.

For example, a basic paragraph element is defined using the <p> tag:

<p>This is a paragraph.</p>

Basic HTML tags:

<p> tag

The <p> tag defines a paragraph.

Browsers automatically add a single blank line before and after


each <p> element.

<pre> tag

2|Page
The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text


preserves both spaces and line breaks. The text will be displayed exactly as
written in the HTML source code.

heading :

HTML headings are titles or subtitles that you want to display on a webpage.

list in HTML

HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List:An unordered list starts with the <ul> tag. Each list
item starts with the <li> [Link] list items will be marked with bullets (small
black circles) by default.

Ordered HTML List:An ordered list starts with the <ol> tag. Each list item
starts with the <li> [Link] list items will be marked with numbers by
default.

HTML Description Lists:HTML also supports description lists.A description list


is a list of terms, with a description of each [Link] <dl> tag defines the
description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
<h2>An Unordered HTML List</h2>
<ul>

<li>Coffee</li><li>Tea</li>
<li>Milk</li>

</ul>
<h2>An Ordered HTML List</h2>
<ol>

<li>Coffee</li><li>Tea</li>
<li>Milk</li>
</ol>

3|Page
<h2>A Description List</h2>
<dl>

<dt>Coffee</dt>
<dd>- black hot drink</dd>

<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML Attributes:

HTML attributes provide additional information about HTML elements.

For example:

href in <a> tag,

src in <img> tag ,

style attribute for inline css,

class,id,name etc..

Block element vs inline element:

Block-level Elements

A block-level element always starts on a new line, and the browsers


automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).

For example <p> , <h> , <div> are block elements.

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is an inline <b>element</b> inside a paragraph.

4|Page
DAY-2
Basic introduction of css:

CSS, which stands for Cascading Style Sheets, is a fundamental technology


used in web development to control the presentation and layout of HTML
documents. It is a stylesheet language that describes how HTML elements
should be displayed on a web page or in other media.

We can implement css in 3 ways:

1 inline: within the opening tags of the element. If we use inline css
and also use external or internal than first priority is given to inline
css.

<h1 style="color:blue;text-align:center;">This is a heading</h1>

2 internal: style tag within the head tag. If we use internal and
external css than first priority is given to internal css.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

3 external: make an external css file and link it.

5|Page
<!DOCTYPE html> [Link]
<html>
<head>
<link rel="stylesheet" href="my body {
[Link]"> background-color: lightblue;
</head> }
<body>
h1 {
<h1>This is a heading</h1> color: navy;
<p>This is a paragraph.</p> margin-left: 20px;
}
</body>
</html>

CSS Selectors:

1 Id:

The id selector uses the id attribute of an HTML element to select a


specific [Link] id of an element is unique within a page, so
the id selector is used to select one unique [Link] select an
element with a specific id, write a hash (#) character, followed by
the id of the element.

2 Class:

The class selector selects HTML elements with a specific class


[Link] select elements with a specific class, write a period (.)
character, followed by the class name.

3 Tag:

The element selector selects HTML elements based on the element


name.

4 Universal:

The universal selector (*) selects all HTML elements on the page.

5 Group:

The grouping selector selects all the HTML elements with the same
style definitions.

6|Page
Padding: The CSS padding properties are used to generate space around an
element's content, inside of any defined borders. There are properties for
setting the padding for each side of an element (top, right, bottom, and left).

Margin: The CSS margin properties are used to create space around
elements, outside of any defined [Link] are properties for setting the
margin for each side of an element (top, right, bottom, and left).

Example: <head>

<style>
div {
margin: 100px;

padding:100px;
border: 1px solid #4CAF50;

}</style></head>
<body>
<div>This element</div>

</body>

CSS box-sizing property:

The box-sizing property allows us to include the padding and border in an


element's total width and [Link] you set box-sizing: border-box; on an
element, padding and border are included in the width and height.

7|Page
DAY-3
CSS Properties:

Property Use Values

color The color property specifies Color-name


the color of text.

background- The background-color property Color-name


color sets the background color of
an element.

font-size The font-size property sets the Font-size in pixel


size of a font.

font-weight The font-weight property sets normal,bold,bolder,lighter,


how thick or thin characters in
text should be displayed. 100-900

font-family The font-family property Name of font-family


specifies the font for an
element.

text- The text-transform property none,capitalize,uppercase


transform controls the capitalization of
text. ,lowercase

 Text-decoration-line
text- The text-decoration property  text-decoration-color
decoration specifies the decoration added  text-decoration-style
to text, and is a shorthand  text-decoration-
property for: thickness

text-align The text-align property left,right,


specifies the horizontal

8|Page
alignment of text in an center,justify
element.

Task1:

Aim: Create a card with image, title text and description using css.

Code:[Link]

<html lang="en">

<head>

<meta charset="UTF-8">
<link rel="stylesheet" href="./css/[Link]"/>
<title>Document</title>
</head>
<body>
<center>
<div class="card">
<img src="./image/[Link]" alt="img">
<h4>Title</h4>
<p>This is description about above thing
chfaehhgeur23y23ugqhqh you can see it in image above.</p>
<button>Click</button>
</div>
</center>
</body>
</html>

9|Page
Code:[Link]
.card{
border:2px solid black;
width:250px;
border-radius: 15px;
background-color: rgb(201, 193, 193);}
img{
height:150px;
width:250px;
border-radius: 15px 15px 0px 0px;}
button{
height:50px;
width:100px;

background-color: rgb(126, 214, 97);


border-radius:15px;}
p,button,h4{
margin:15px;
}

10 | P a g e
DAY-4
Background-image and it’s properties:

The background-image property sets one or more background images for an


element.

By default, a background-image is placed at the top-left corner of an


element, and repeated both vertically and horizontally.

background-size property:

The background-size property specifies the size of the background


images.

Values:

cover: Resize the background image to cover the entire container,


even if it has to stretch the image or cut a little bit off one of the
edges.

contain: Resize the background image to make sure the image is fully
visible.

auto: Default value. The background image is displayed in its original


size.

length: Sets the width and height of the background image.

background-repeat property:

The background-repeat property sets if/how a background image will


be repeated.

Values:

repeat: The background image is repeated both vertically and


horizontally.

repeat-x: The background image is repeated only horizontally.

repeat-y: The background image is repeated only vertically.

no-repeat: The background-image is not repeated.

background-position property:

11 | P a g e
The background-position property sets the starting position of a
background image.

Values: left top, left center, left bottom, right top, right center, center
top, center center, center bottom

Float property:

The float property specifies whether an element should float to the left, right,
or not at all.

Values: none, left, right

Clear property:

The clear property controls the flow next to floated elements.

The clear property specifies what should happen with the element that is
next to a floating element.

Values: left, right, both.

Task1:

Aim: Create two rectangular card with image, title text and description using
css float property.

Code:[Link]

<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/[Link]"/>
<title>Document</title>
</head>
<body>
<center>
<div class="container">
<div class="card">
<img src="./image/[Link]" alt="img">
<h4>Title</h4>
12 | P a g e
<p>This is description about above thing
chfaehhgeur23y23ugqhqh you can see it in image above.</p>
<button>Click</button>
</div>
<div class="card">
<img src="./image/[Link]" alt="img">
<h4>Title</h4>
<p>This is description about above thing
chfaehhgeur23y23ugqhqh you can see it in image above.</p>
<button>Click</button>
</div>
</div>
</center>
</body>
</html>

Code:[Link]

.card{
border:2px solid black;
float:left;
width:400px;
height:255px;
background-color:whitesmoke;
margin:30px;
text-align: left;
}
img{
height:150px;
width:400px;
}

13 | P a g e
button{
background-color: rgb(126, 214, 97);
border-radius:15px
}
p,button,h4{
margin:5px;
}
.container{
margin:30px;
display:inline-block;
}
center{
background-color:rgb(231, 221, 221);
}
Output:

Task 2: create navbar with logo image and items using css float property.

Code:[Link]

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href=".\css\[Link]"></head>

14 | P a g e
<body>
<div class="nav">
<ul>
<li><img src=".\image\[Link]" class="logo"></li>
<li class="l-item">Python</li>
<li class="l-item">SkLearn</li>
<li class="l-item">Pandas</li>
<li class="l-item">Keras</li>
</ul>
</div>
</body>
</html>

Code:[Link]

ul{
list-style-type: none;}
li{
float:left;}
[Link]{
height:55px;}
.nav{
height: 55px;
background-color: rgb(0, 200, 255);
color:white;
}
.l-item{
margin: 15px;
font-size: 20px;}

15 | P a g e
output:

Task 3: create card with left side image and right side text using css float
property.

Code:[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/[Link]"/>
</head>
<body>
<div class="container">
<div id="p1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
consequatur doloribus reiciendis labore, odio libero ad, suscipit id quis,
quisquam aut quam? Ex hic distinctio nesciunt omnis, fugit tenetur
beatae.
</p>
</div>
<div id="i1">
<img src="./image/[Link]" alt="img">
</div>
</div>

16 | P a g e
<div class="container">

<div id="i1">
<img src="./image/[Link]" alt="img">
</div>
<div id="p1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
consequatur doloribus reiciendis labore, odio libero ad, suscipit id quis,
quisquam aut quam? Ex hic distinctio nesciunt omnis, fugit tenetur
beatae.
</p>
</div>
</div>
</body>
</html>
Code:[Link]
#p1{
float:left;
height: 255px;
width:455px;
}
#i1{
float:left;
height: 255px;
width:355px;
margin-left: 5px;
margin-right:5px;
}

17 | P a g e
img{
height: 255px;
width:355px;
}
.container{
display:block;
height: 255px;
width:820px;
margin:25px;
background-color: whitesmoke;
}
Output:

Task 4: create nav-bar and container at left-side and another container


on right side using float property.

Code:[Link]:

<html lang="en">

18 | P a g e
<head>
<meta charset="UTF-8">
<link href=".\css\[Link]" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div>
<ul class="nav">
<div class="nav-item"> <li > <img class="logo"
src="[Link] alt="img"></li></div>
<div class="nav-item"> <li>Python</li></div>
<div class="nav-item"><li >JavaScript</li></div>
<div class="nav-item"><li >Java</li></div>
<div class="nav-item"><li >HTML</li></div>
<div class="nav-item"><li >C++</li></div>
</ul>
</div>
<div class="container1">
<ul class="ul2">
<div class="col"> <li>column1</li></div>
<div class="col"> <li>column2</li></div>
<div class="col"> <li>column3</li></div>
<div class="col"> <li>column4</li></div>
<div class="col"> <li>column5</li></div>
<div class="col"> <li>column6</li></div>
<div class="col"> <li>column7</li></div>
<div class="col"> <li>column8</li></div>
<div class="col"> <li>column9</li></div>
</ul>
</div>

19 | P a g e
<div class="container2">
<div class="p1">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo
aut ut quasi! Ullam dolore vitae magnam non nihil nisi autem natus
</p>
</div>
<div class="p1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum
voluptas consectetur ullam ex suscipit. Molestiae repudiandae maxime
ipsa suscipit, error
</p>
</div>
<div class="p1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum
voluptas consectetur ullam ex suscipit. Molestiae repudiandae maxime
ipsa suscipit, error
</p>
</div>
<div class="p1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum
voluptas consectetur ullam ex suscipit. Molestiae repudiandae maxime
ipsa suscipit, error
</p>
</div>
</div>
</body>
</html>

20 | P a g e
Code:[Link]
.nav-item{
float:left;
margin:15px; }
.nav{
list-style-type: none;
display:block;
height:55px;
background-color:black;
color: white;
padding-left: 2px;
margin-left:30%;
margin-right:30%;
border:2px solid white;
border-radius:15px;}
.logo{
height:25px;
width:25px;
border-radius: 50%;}
.container1{
height:100%;
float:left;
display:inline;
background-color: whitesmoke;}
.container2{
margin:20px;
height:100%;
width:60%;
border:2px solid green;

21 | P a g e
float:left;
display:inline;}
ul{list-style-type: none;}
.ul2{
list-style-type: none;
margin:0px;
padding:0px;}
.col{margin:30px;}
.p1{display:inline;}
p{margin:25px;}

output:

22 | P a g e
DAY-5
Position property:

The position property specifies the type of positioning method used for an
element (static, relative, absolute, fixed).

static Default value. Elements render in order, as they appear in the


document flow.
absolute The element is positioned relative to its first positioned (not
static) ancestor element.
relative The element is positioned relative to its normal position, so
"left:20px" adds 20 pixels to the element's LEFT position.
fixed The element is positioned relative to the browser window.

After position property we can apply top,left,bottom,right values negative or


positive both.

Overflow property:

The overflow property specifies what should happen if content overflows an


element's box.

Values:

hidden: The overflow is clipped, and the rest of the content will be
invisible.

scroll: The overflow is clipped, but a scroll-bar is added to see the rest
of the content.

Hover:

The :hover selector is used to select elements when you mouse over them.

If we want to apply change on another element when hover on element than


we can perform it by .classname:hover > .classname {}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.container{
margin:30px;

23 | P a g e
background-color: black;
display:inline-block;
height:400px;
width:400px;
}
.container:hover{
background-color: red;}
</style>
</head>
<body>
<div class="container">Hello</div>
</body>
</html>

On hover:

z-index:

When two or more containers are at same position or 1 container covers the
another container in that case we can assign priority that which element
show above by using [Link] can assign 1 or -1 to z-index.

Opacity: we can give value between range 0-1.

<!DOCTYPE html>
<html>
<head>
<style>
.container{
margin:30%;
background-color: black;
display:inline-block;
height:400px;
width:400px;
opacity:0.5;

24 | P a g e
}
.container:hover{
opacity:1;
}
</style>
</head>
<body>
<div class="container">

</div>
</body>
</html>

Output:

On hover

Task 1: create 3 cards with image and text on image using position
property.
Code:[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href=".\css\[Link]">

25 | P a g e
</head>
<body>
<div class="container">
<div class="card">
<div class="img1">
<img src="[Link]
<div class="p1">
<h4>Title</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident, facere.</p>
</div>
</div>
</div>
<div class="card">
<div class="img1">
<img src="[Link]
<div class="p1">
<h4>Title</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident, facere.</p>
</div>
</div>
</div>
<div class="card">
<div class="img1">
<img src="[Link]
<div class="p1">
<h4>Title</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident, facere.</p>

26 | P a g e
</div>
</div>
</div>
</div>
</body>
</html>
Code:[Link]
.card{
height:300px;
width:240px;
float:left;
margin:11px;}
.img1{
position:relative;
width:240px;
height:300px;}
img{
height:300px;
width:240px;}
.p1{
position:absolute;
left:0px;
bottom:0px;
margin:15px;
font-weight: bold;
color:whitesmoke;}
.container{
background-color:whitesmoke;
height: 330px;

27 | P a g e
padding:25px;}

output:

Task 2: create 3 cards with center image and text using position property.
Code:[Link]:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href=".\css\[Link]">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="img1">
<img src="[Link]
</div>
<div class="p1">
<h4>Lorem, ipsum dolor.</h4>
<h4>Lorem.</h4>

28 | P a g e
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident, facere.</p>
</div>
</div>
<div class="card">
<div class="img1">
<img src="[Link]
</div>
<div class="p1">
<h4>Lorem, ipsum dolor.</h4>
<h4>Lorem.</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident, facere.</p>
</div>
</div>
<div class="card">
<div class="img1">
<img src="[Link]
</div>
<div class="p1">
<h4>Lorem, ipsum dolor.</h4>
<h4>Lorem.</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident, facere.</p>
</div>
</div>
</div>
</body>
</html>

29 | P a g e
Code:[Link]
.card{
float:left;
height:250px;
width:300px;
position:relative;
border-radius: 15px;
margin:50px;
border:2px solid greenyellow;
background-color:whitesmoke; }
.img1{
height:70px;
width:70px;
border:2px solid greenyellow;
border-radius: 50%;
position:absolute;
top:-35px;
left:115px;}
img{
height:70px;
width:70px;
border-radius: 50%;}
.p1{
position:absolute;
top:40px;
left:0px;}
h4{
margin-left:70px;
margin-right: 70px;}

30 | P a g e
p{margin:25px;}
.container{
height:400px;
width:100%;
background-color: aliceblue;
position:absolute;
top:150px;
left:0px;
padding:50px;}
output:

Task 2:
Code:[Link]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href=".\css\[Link]" rel="stylesheet">
</head>
<body>

31 | P a g e
<div class="container2">
<div class="i2"><img src="[Link] style="
height:700px;width:450px;border-radius:15px">
<div class="p1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Saepe, enim?</div>
</div>
</div>
<div class="container">
<div class="container1">
<div class="i1"><img src="[Link] style="
height:300px;width:800px;border-radius:15px">
<div class="p1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Saepe, enim?</div>
</div>
</div>
<div class="container3">
<div class="i3"><img src="[Link] style="
height:350px;width:350px;border-radius:15px">
<div class="p1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Saepe, enim?</div>
</div>
</div>
<div class="container4">
<div class="i3"><img src="[Link] style="
height:350px;width:350px;border-radius:15px">
<div class="p1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Saepe, enim?</div>
</div>
</div>
</div>
</body>
</html>

32 | P a g e
Code:[Link]
.p1{
margin:20px;
color:whitesmoke;
position:absolute;
bottom:0px;
left:0px;}
.i1{
height:300px;
width:800px;
position:relative;
border-radius: 15px;}
.i2{
height:700px;
width:450px;
position:relative;
border-radius: 15px;}
.i3{
height:350px;
width:350px;
position:relative;
border-radius: 15px;}
.container1{
position:absolute;
top:0px;
left:0px;}
.container2{
position:absolute;
top:10px;

33 | P a g e
right:100px;} Output:
.container3{
position:absolute;
bottom:0px;
left:0px;}
.container4{
position:absolute;
bottom:0px;
right:0px;}
.container{
position: relative;
height: 700px;
width:800px;}

34 | P a g e
DAY-6
Flex property in css:

CSS Flexbox is a powerful layout model that allows you to create flexible and
responsive designs for web pages. It provides an efficient way to distribute
space, alignment, and positioning of elements within a container. The flex
layout consists of a parent container (flex container) and its child elements
(flex items). The flex container can be displayed horizontally or vertically,
and it controls the layout of its flex items.

To use flexbox, you need to set the display property of the container to flex,
and then use various flex-related properties to control the layout of the child
elements.

flex-direction:

The flex-direction property specifies the direction of the flexible items.

Values:row,column.

justify-content:

The justify-content property aligns the flexible container's items


when the items do not use all available space on the main-axis
(horizontally).

Values:

center: Items are positioned in the center of the container.

space-between: Items will have space between them.

space-around: Items will have space before, between, and after them.

space-evenly: Items will have equal space around them.

align-content:

The align-content property specifies how flex lines are distributed


along the cross axis in a flexbox container.

CSS Gradients:

 CSS Linear Gradients:

35 | P a g e
To create a linear gradient you must define at least two color stops. Color
stops are the colors you want to render smooth transitions among. You can
also set a starting point and a direction (or an angle) along with the gradient
effect.

Syntax:

background-image: linear-gradient(direction, color-stop1, color-stop2,


...);

CSS Radial Gradients:

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color,


..., last-color);
Example:

<!DOCTYPE html>
<html>
<head>
<title>linear-gradient function</title>
<style>
.gradient {
height: 100px;
background:
linear-gradient(to left
,green, yellow, blue);
Text-align: center;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h2>linear-gradient: Top to Bottom
property</h2>
<div class="gradient">Welcome</div>
</body>

</html>

36 | P a g e
Task1:create a navbar using flex property that have logo and items and
when hover on item sub-items dropdown display .
Code:[Link]

<html lang="en">
<head>
<meta charset="UTF-8">
<link href=".\css\[Link]" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="nav">
<div class="logo">
<img src="./image/[Link]" alt="img">
</div>
<div class="sub-nav">
<div class="nav-items">Home</div>
<div class="nav-items con">contact
<div class="dd1"><ul>
<li class="di">contact1</li>
<li class="di sub2">contact2
<ul class="dd2">
<li class="di2">mobile</li>
<li class="di2">whatsapp</li>
<li class="di2">email</li>
</ul>
</li>
<li class="di">contact3</li>
<li class="di">contact4</li>
</ul></div>
</div>

37 | P a g e
<div class="nav-items">xyz</div>
<div class="nav-items">abc</div>
</div>
</div>
</body>
</html>
Code:[Link]

*{margin:0px;
padding:0px;
list-style-type: none;}
.nav{display:flex;
justify-content: space-around;
background-color: black;
color:white;
border:2px solid white;
width:70%;
border-radius:20px;
justify-content: space-between;
align-items: center;
margin-left:100px;}
.logo{margin-left:20px;
height:55px;
width:55px;}
img{height:55px;
width:55px;
border-radius: 50%;}
.sub-nav{display:flex;
align-items: center;
justify-content: center;

38 | P a g e
align-items: center;}
.nav-items{margin-left:10px;
height:40px;
width:60px;}
.con{position: relative;}
.dd1{position:absolute;
background-color: red;
display:none;
width:100%;}
.di{padding: 5px;
opacity:0.7;
border:1px solid black;
box-sizing: border-box;}
.di:hover{padding: 0px;
opacity:1;
box-sizing: border-box;}
.con:hover > .dd1{display:block;}
.sub2{position:relative;}
.dd2{display: none;
height:90px;
width:80px;
background-color: black;
color:white;
position: absolute;
right:-80px;
top:0px;}
.sub2:hover > .dd2{display: block;}
.di2{padding: 5px;
opacity:0.7;

39 | P a g e
border:1px solid white;
box-sizing: border-box; }
.di2:hover{padding: 0px;
opacity:1;
box-sizing: border-box;}
Output:

40 | P a g e
DAY7
Media-query: for making responsive website
Syntax:

@media screen and (min-width/max-width: value px) {


selector {

css }
}

min-width: for screen minimum width and above it.

max-width: for screen maximum width and below it.

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">
Width less than 600px:
<title>Document</title>

<style>

body{

background-color: black;

color:white;

@media only screen and (max-width:600px){

body{background-color: white;

color:black;}
For apply media query we have to apply meta tag:

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

41 | P a g e
DAY8
Bootstrap:

Bootstrap is a html,css framework using which we can easily create


responsive UI using classes which are already defined.

We can download bootstrap folder or we can link the bootstrap using


<link> tag.
Color property using bootstrap:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<link href="[Link] rel="stylesheet"


integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">

<script src="[Link]
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>

<title>Document</title>

</head>

<body>

<p class="text-primary">.text-primary</p>

<p class="text-secondary">.text-secondary</p>

<p class="text-success">.text-success</p>

<p class="text-danger">.text-danger</p>

<p class="text-warning">.text-warning</p>

<p class="text-info">.text-info</p>

<p class="text-light bg-dark">.text-light</p>

<p class="text-dark">.text-dark</p>

42 | P a g e
Output:

Background color:
Similar to the contextual text color classes, easily set the background of an
element to any contextual class. Anchor components will darken on hover,
just like the text classes. Background utilities do not set color, so in some
cases you’ll want to use .text-* utilities.

Output:

43 | P a g e
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<link href="[Link]
rel="stylesheet" integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">

<script src="[Link]
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>

<title>Document</title>

</head>

<body>

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>

<div class="p-3 mb-2 bg-success text-white">.bg-success</div>

<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>

<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>

<div class="p-3 mb-2 bg-info text-white">.bg-info</div>

44 | P a g e
DAY9
Bootstrap:

Exploring bootstrap website: [Link]


started/introduction/
Exploring various concepts:

element Class-name description


container .container
Container fluid .container-fluid
alerts . alert, Provide contextual
.alert-primary, feedback messages
.alert-success, for typical user
.alert-secondary, actions with the
.alert-danger, handful of available
.alert-warning, and flexible alert
.alert-info, messages.
.alert-dark,
.alert-light

badges .badge , Used as our small


.badge-light, count and labeling
.badge-primary, component.
.badge-success,
.badge-secondary,
.badge-danger,
.badge-warning,
.badge-info,
.badge-dark,
Buttons .btn , Use Bootstrap’s
.btn-light, custom button
.btn-primary, styles for actions in
.btn-success, forms, dialogs, and
.btn-secondary, more with support
.btn-danger, for multiple sizes,
.btn-warning, states, and more.
.btn-info,
.btn-dark,
.btn-link

45 | P a g e
Cards .card, Bootstrap’s cards
.card-img-top, provide a flexible
.card-title, and extensible
.card-body, content container
.card-text, with multiple
.card-link, variants and
options.
Carousel carousel, A slideshow
carousel-item, component for
active, cycling through
carousel-control-prev, elements—images
carousel-control-next, or slides of text—
carousel-control-next-icon, like a carousel.
carousel-control-prev-icon

Forms .form-group, Examples and


.form-control, usage guidelines for
form-control-file form control styles,
layout options, and
custom components
for creating a wide
variety of forms.

Modal .modal, Use Bootstrap’s


.modal-body, JavaScript modal
.modal-header, plugin to add
.modal-footer, dialogs to your site
.modal-content, for lightboxes, user
.modal-dialog notifications, or
completely custom
content.

Task :create carousel with left side image and right side text using bootstrap.
Code:

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

46 | P a g e
<link
href="[Link]
[Link]" rel="stylesheet" integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppv
nDJzQIu9" crossorigin="anonymous">
<script
src="[Link]
[Link]" integrity="sha384-
HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhb
grkm" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id="carouselExample" class="carousel slide" >

<div class="carousel-inner bg-primary " style="height:300px;width:


100%; ">
<div class="carousel-item active">

<div class="container row d-flex">


<div class="col-6 d-flex justify-content-end">
<img src=".\image\[Link]" class="border border-2 border-
white" alt=".." style="height:300px; width:300px;border-radius: 50%;">
</div>
<div class="col-6 d-flex justify-content-center align-items-
center">
<p class="">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Autem vitae, sed culpa eaque minima modi perspiciatis
tempora eos, error magnam, optio veritatis? Dignissimos similique ipsam
nihil amet tenetur molestiae est?</p>
</div>
</div>

</div>

47 | P a g e
<div class="carousel-item">

<div class="container row d-flex">


<div class="col-6 d-flex justify-content-end">
<img src=".\image\[Link]" class="border border-2 border-
white" alt=".." style="height:300px; width:300px;border-radius: 50%;">
</div>
<div class="col-6 d-flex justify-content-center align-items-
center">
<p class="">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Autem vitae, sed culpa eaque minima modi perspiciatis
tempora eos, error magnam, optio veritatis? Dignissimos similique ipsam
nihil amet tenetur molestiae est?</p>
</div>
</div>

</div>
<div class="carousel-item ">

<div class="container row d-flex justify-content-center">


<div class="col-6 d-flex justify-content-end">
<img src=".\image\[Link]" class="border border-2
border-white" alt=".." style="height:300px; width:300px;border-radius:
50%;">
</div>
<div class="col-6 d-flex justify-content-center align-items-
center">
<p class="">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Autem vitae, sed culpa eaque minima modi perspiciatis
tempora eos, error magnam, optio veritatis? Dignissimos similique ipsam
nihil amet tenetur molestiae est?</p>
</div>
</div>

48 | P a g e
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>

</div>
</body>
</html>
Output:

49 | P a g e
DAY10
JavaScript
JavaScript is a widely used programming language primarily known for its
role in web development. It enables interactive and dynamic behavior on
websites, making them more engaging and user-friendly. JavaScript allows
you to create, manipulate, and modify website content in real-time without
requiring a page refresh.

Key features of JavaScript include:

Client-Side Scripting: JavaScript runs in web browsers, allowing it to


manipulate the Document Object Model (DOM) of a webpage. This means
you can change elements on a page, handle user interactions (such as clicks
and form submissions), and update content without needing to communicate
with a server.

Event-Driven Programming: JavaScript is event-driven, meaning it


responds to events like user actions (clicks, key presses, etc.) or changes in
the webpage state. You can define functions to execute when specific events
occur.

Dynamic Content: JavaScript allows you to create dynamic and interactive


content, such as animations, form validations, real-time updates, and more.
This enhances user experience by making websites more responsive and
engaging.

Libraries and Frameworks: There are numerous libraries and frameworks


built on top of JavaScript, such as jQuery, React, Angular, and [Link], which
simplify complex tasks and provide reusable components for building web
applications.

Asynchronous Programming: JavaScript supports asynchronous


programming, allowing you to execute tasks without blocking the main
thread. This is crucial for handling tasks like fetching data from servers or
performing time-consuming operations without freezing the user interface.

Applications:

Web Development: JavaScript is primarily known for its role in web


development. It is used to create interactive and dynamic websites, handle
user interactions, update content in real-time, and enhance the user
experience.

50 | P a g e
Front-End Frameworks and Libraries: JavaScript frameworks and
libraries like React, Angular, and [Link] are used to build complex user
interfaces and single-page applications (SPAs). These tools provide efficient
ways to manage state, handle routing, and create reusable UI components.

Mobile App Development: Frameworks like React Native and frameworks


powered by technologies like Apache Cordova allow developers to build
mobile apps using JavaScript. This enables code reuse between web and
mobile platforms.

Game Development: JavaScript can be used to create browser-based


games and interactive multimedia content. HTML5 game engines like Phaser
and [Link] utilize JavaScript to create engaging gaming experiences.

Datatypes in JS:
Primitive Data Types:

Number: Represents both integer and floating-point numbers.


String: Represents a sequence of characters, such as text.
Boolean: Represents a logical value, either true or false.

Null: Represents the intentional absence of any value.

Undefined: Represents a variable that has been declared but hasn't


been assigned a value.
Reference Data Types:

Object: Represents a collection of key-value pairs, where values can


be of any data type, including other objects. Objects can be created
using object literals or through constructors.

Array: A special type of object that holds an ordered list of values,


typically of the same type. Arrays are used for storing collections of
data.

RegExp (Regular Expression): Represents a pattern used for


matching strings.

We can write JS anywhere in html document within

<script> </script>

Or we can also write JS in external file with extension .js and it can be import
using <script src=”PATH” ></script>.

51 | P a g e
Basic javascript program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

Welcome!

<script>

[Link]("Good Morning Sir!..");

</script>

</body>

</html>

Here [Link]() used to print or show output in console panel.

alert() method:
The alert() method displays an alert box with a message and an OK button.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body> <script>

alert("Good Morning Sir!..");

</script>

</body>

</html>

52 | P a g e
Document Object Model(DOM)

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object.


It is the root element that represents the html document. It has properties
and methods. By the help of document object, we can add dynamic content to
our web page.

Methods of document object

We can access and change the contents of document by its methods.

The important methods of document object are as follows:

Method Description

write("string") writes the given string on the doucment.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.

getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.

Operators in JS:

Arithmetic operators:

Operator Description Example

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

53 | P a g e
* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

JavaScript Comparison Operators

The JavaScript comparison operator compares the two operands. The


comparison operators are as follows:

Operator Description Example

== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

JavaScript Logical Operators:

Operator Description Example

54 | P a g e
&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

JavaScript Assignment Operators

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Multiply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

55 | P a g e
DAY11
JavaScript If-else

The JavaScript if-else statement is used to execute the code whether


condition is true or false. There are three forms of if statement in JavaScript.

1. If Statement
2. If else statement
3. if else if statement

JavaScript If statement

It evaluates the content only if expression is true. The signature of JavaScript


if statement is given below.

if(expression){
//content to be evaluated
}

JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of


JavaScript if-else statement is given below.

if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}

JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions.


The signature of JavaScript if else if statement is given below.

if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){

56 | P a g e
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}

JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while,
do while or for-in loops. It makes the code compact. It is mostly used in array.

There are four types of loops in JavaScript.

1. for loop
2. while loop
3. do-while loop
4. for-in loop

1) JavaScript For loop


The JavaScript for loop iterates the elements for the fixed number of times.
It should be used if number of iteration is known. The syntax of for loop is
given below.

for (initialization; condition; increment)


{
code to be executed
}

2) JavaScript while loop


The JavaScript while loop iterates the elements for the infinite number of times. It
should be used if number of iteration is not known. The syntax of while loop is given
below.

57 | P a g e
while (condition)
{
code to be executed
}

3) JavaScript do while loop


The JavaScript do while loop iterates the elements for the infinite number
of times like while loop. But, code is executed at least once whether condition
is true or false. The syntax of do while loop is given below.

do{
code to be executed
}while (condition);

JavaScript Array
Array is an object that represents a collection of similar type of elements.

But, in JavaScript array we can store different types of elements.

The syntax of creating array using array literal is given below:

var arrayname=[value1,value2.....valueN];

<html>

<body>
<script>
var emp=["Sonoo","Vimal","Ratan"];

[Link](emp);
</script>
</body>

</html>

JavaScript Objects
58 | P a g e
JavaScript Objects is used to store key-value pair.
Syntax:

object={
key : value,
key : value,
key : value,
…
}
Example:

<html>
<body>

<script>
emp={id:102,name:”xyz”,salary:40000}

[Link]([Link]+" "+[Link]+"
"+[Link]);
</script>

</body>
</html>

59 | P a g e
//task1 odd-even // task2 percentage grade
[Link]("Task1: odd-even"); [Link]("Task2: percentage
grade.");
var n=prompt("Enter a
number:"); var percentage=prompt("Enter
percentage : ");
if(n%2==0)
if(percentage>=0 &&
{
percentage<=100)
[Link](n+" is even.");
{
}
if(percentage >= 80){
if(n%2==1)
[Link]("A Grade...");
{
}
[Link](n+" is odd.")
else if(percentage >= 70){
}
[Link]("B Grade...");
}
else if(percentage >= 60){
[Link]("C Grade...");
//task3 print 20 1
}
[Link]("sub-task3 20-1
else if(percentage >= 50){
using for loop");
[Link]("D Grade...");
for(i=20; i>0; i--){
}
[Link](i);
else{
}
[Link]("require more
[Link]("sub-task3 20-1
hordwork...");
using while loop");
}
var i=20
}
while(i>0){
else{
[Link](i);
[Link]("percentage value
i--;
must be range 0-100. ")
}
}

60 | P a g e
// task4 print all the even numbers between 1-20
[Link]("sub-task4 print all the even numbers
between 1-20");
var num=2;
while(num<=20){
[Link](num);
num+=2;
}
[Link]("sub-task4 print all the odd numbers
between 1-20");
num=1;
while(num<=20){
[Link](num);
num+=2;
}

// sub-task5 print table


[Link]("sub-task5 print table...");
var t=prompt("Enter number of which you want table.");
for(i=1;i<=10;i++){
[Link](t+" X "+i+" = "+ (t*i));
}

61 | P a g e
DAY12
String methods

charAt() it provides the char value present at


the specified index.
concat() It provides a combination of two or
more strings.
replace() it replaces a given string with the
specified replacement.
substr() It is used to fetch the part of the
given string on the basis of the
specified starting position and
length.
substring() It is used to fetch the part of the
given string on the basis of the
specified index.
slice() It is used to fetch the part of the
given string. It allows us to assign
positive as well negative index.
toLowerCase() It converts the given string into
lowercase letter.
toUpperCase() It converts the given string into
uppercase letter.
split() It splits a string into substring array,
then returns that newly created
array.
trim() It trims the white space from the left
and right side of the string.

length It returns the length of a string.

Array methods:

length It returns the length of an array.


push() It add new element at the end of
array.
pop() It removes the last element of an
array.
shift() It add the new element at starting
of an array.
unshift() It removes the first element of an
array.
toString() The JavaScript
method toString() converts an array

62 | P a g e
to a string of (comma separated)
array values.

Tasks:

//task1 print reverse of the word


var str=prompt("Enter String:");
var rev="";
for(var i=[Link]-1;i>=0;i--){
rev=[Link](str[i]);
}
[Link](rev);

//task2 print and count vowels present in string


var str=prompt("Enter String:");
var count=0;
for(var i=0;i<[Link];i++){
if((str[i]=="a") || (str[i]=="e") || (str[i]=="i") || (str[i]=="o") ||
(str[i]=="u") ){
[Link](str[i]+" at index "+ i);
count++;
}
}
[Link]("Total vowels: "+ count);

63 | P a g e
//task3 convert characters at //task4 print sum of all elements
//even places in string into *. //present in array
var str=prompt("Enter String:"); arr=[1,2,5,9,11];
var str2=""; var sum=0;
for(var i=0;i<[Link];i++){ for(var i=0;i<[Link];i++){
if(i%2==0){ sum+=arr[i];
str2=[Link](str[i]); }
} [Link](sum);
else{
str2=[Link]("*");
}
}
[Link](str2);

//task5 print largest word from given array of words.


arr=["he","welcome","orange","meaning"];
var largestWordIndex=0;
for(var i=0;i<[Link];i++){
if(arr[i].length>arr[largestWordIndex].length){
largestWordIndex=i;
}
}
[Link]("Largest word in array: "+arr[largestWordIndex]);

64 | P a g e
//task6 evalute x per given values in array //one by one.
arr=["x++","++x","x++","x--","--x"];
var x=prompt("Enter value:");
for(var i=0;i<[Link];i++){
if(arr[i]=="++x" || arr[i]=="x++"){
x++;
}
else{
x--;
}
}
[Link]("x="+x);

65 | P a g e
DAY13
//task-1 write program that print both string //are equal after
combining each element of //array.
var arr1=["ab","cd"];
var arr2=["a","bcde"];
var str1="";
var str2="";
for(var i=0;i<[Link];i++){
str1+=arr1[i];
}
for(var i=0;i<[Link];i++){
str2+=arr2[i];
}
[Link](str1);
[Link](str2);
if(str1==str2){
[Link]("both strings are equal.");
}
else{
[Link]("both strings are not equal.");
}

66 | P a g e
//task2 print the string in reverse order word
//wise.
var str="hello world how are you";
var arr=[Link](" ");
var str2="";
for(i=[Link]-1;i>=0;i--){
str2+=arr[i]+" ";
}
[Link](str);
[Link](arr);
[Link](str2);

//task3 print string having maximum words from


//array of strings.
var arr=["Good Morning!","how are
you","xyz","vcjhs ghsdvhj yugh hhib"];
maxWordIndex=0;
for(var i=0;i<[Link];i++){
if((arr[maxWordIndex].split(" ")).length <
(arr[i].split(" ")).length){
maxWordIndex=i;
}
}
[Link](arr[maxWordIndex]);

67 | P a g e

You might also like