A COMPLETE OVERVIEW

ON: WEB-DEVELOPMENT

AYUSH MAURYAVANSHI
First Print

Copyright © 2021 Self-Publish.

Copyright Text © Ayush Mauryavanshi

This book has been published with all reasonable efforts taken to make the material error-free after
the consent of the author. No part of this book shall be used, reproduced in any manner whatsoever
without written permission from the author, except in the case of brief quotations embodied in
critical articles and reviews.

The Author of this book is solely responsible and liable for its content including but not limited to
the views, representations, descriptions, statements, information, opinions and references
[“Content”]. The Content of this book shall not constitute or be construed or deemed to reflect the
opinion or expression of the Publisher or Editor.
This Book Is Dedicated To My Parents
 Contents

Introduction ............................................................ vii

Acknowledgments .................................................. ix
1. Web-Development ............................................. 1
2. Markup Language .............................................. 5
3. SEO ........................................................................ 15
4. Development Tools ......................................... 23
5. CSS ......................................................................... 31
6. Java Script .......................................................... 51
7. Machine Learning ............................................ 71
8. Conclusion .......................................................... 84
 Introduction
Hey My Self Ayush Mauryavanshi and the Author of this
book, Lets See What You are going to learn from this
book

About Book:

This Book covers information and contents related to

web development. In this, reader might get to learn about
the different basic markup languages like HTML and
SVG also few languages cascading style sheets and
JavaScript used in developing a website. This E- book
also covers some information regarding:

 SEO which helps in optimizing your website to

make it more visible when people use Google,
Bing, or other search engines to look for goods or
services relevant to your organization.
 Machine learning where you would learn how the
machine works and where is the artificial
intelligence used.

At last on conclusion part, we have added few important

questions where the reader can examine themselves how
much they learned from this Book.
 Acknowledgments
It takes a long time and a lot of research to write books.
Alone without the help and dedication of several people,
I would not have been able to accomplish this. I would
like to express my gratitude to a lot of persons.

To begin, I want to thank to my mentor, Manish Singh,

for helping and motivating me on every phase of time
and letting me concentrate on generating the data.
Without him, I would have never completed all of the
parts. Also, thank you so much for providing me the
opportunity to compose this E-book. All of the other
members of "TheGrowwers" assisted me with authoring,
evaluating, and setting out the book.

You guys did a fantastic job!

The editor, and manager deserve special gratitude. You

provided excellent comments and ideas that significantly
improved the E-book. Your positive feedback was
instrumental in the development of the book!
 1. Web-Development

What is web development?

Any effort required creating a Website for the WWW or a personal

web is known as web development (a personal web). It may vary from
creating a stable personalized website with explicit information for
creating complicated web apps, digital companies, & social networking
equipment's, Website planning, Website programming, Growth of web
analytics, way to connect with people, customer coding, Websites server
& web privacy settings, & e-commerce are few of the more routine jobs
associated with website development.

“Web development” is a phrase utilized by website experts to describe

the core non-designing parts of constructing WebPages: authoring
HTML & code. Can utilize Content management system (CMS) while
developing a website to allow information modifications simpler & more
accessible to people with limited tech expertise.

As we go any further, it’s crucial to understand the difference between

web development & web designing.

Website designing aims to develop a site by entering codes (coding) and

other development techniques, whereas web development concentrates
on establishing the appearance & style of a site utilizing software tools
requirement in building WebPages for the entire planet for seeing.

# The Front-End Developer

A front- end programmer is in charge of designing a websites’

appearance, style, & visual features. These are frequently misunderstood
as the sole duty in website construction and the task of website designers.
The front-end designer uses how information, graphics, & colors appear
on a site while viewed on a Smartphone, iPad, or desktop. Have you ever
 A Complete Overview On: Web-Development

noticed how a key’s color changes as people linger through it or how a

window appears as you select on anything on a site? The front-end
programmer is the one who generates this. They ensure confidence that
anything you see is well-organized, appealing to the eye, plus valuable.

The front-end programmer typically uses (and is therefore not restricted

to) the major computing platforms to achieve all of this

 HTML
 JavaScript
 CSS
 JQuerry

# The Back End Developer

Among the biggest important responsibilities in website development is

that of the back-end programmer. Developers design & oversee the
infrastructure that allows your site to operate & perform effectively. A
back-end programmer creates a Django framework to ensure that data
goes backward & forward across the front-end (whatever the customer
views & communicates with) to the back-end (whatever the customer
views & communicates with) of a webpage (the server, database, etc.).
Internet commerce is the clearest illustration of this. Costs & photos of
products are maintained in databases on a website. Product specifications
& rates are modified on the system, which subsequently appears on the
internet when it's necessary to refresh rates or start an automatic holiday
promotion.

Everything occurs whenever you check out and complete a deal since the
backend programmer built it so. Developers develop the structure that
allows all of those simple (almost all of the time) functionalities to be
implemented.

Based on the job at hand, a backend programmer can use a range of

computer languages.

2
 Ayush Mauryavanshi

The following are some of the most common operating systems used by
backend developers:

 JAVA
 PHP
 MYSQL
 C#
 Mongo DB

# The Full-Stack Developer

This programmer is a one-of-a-kind writer who can code and operate on

both the developers of a webpage. Because they comprehend both parts
of the social building spectrum, they can build a small functional,
interactive site on their own (if they so desire). Full-stack programmers
are known for their ability to code on various computer platforms and
their breadth of skills & understanding. As a result, they usually get
along with both the above-given developers throughout the project
development.

Several full-stack programmers do not possess expertise in the area, even

though they recognize & could accomplish the work of both the
developer's programmers. Many people excel at both the above
programming. Here are full-stack engineers who are experts in both
aspects of the planning process, although they are uncommon and
difficult to find. A full-stack designer's diversified skills assist in
speeding up the website design technique & troubleshooting any issues
that might arise on both the developers of a platform.

3
 2. Markup Language

# HTML

A Hypertext Markup Language (HTML) is a combination of markup

signals or characters added into a document for an online presentation.
The markup instructs internet browsers on how to represent the content
and graphics on a website page.

Every block of markup language (falling between both the "<" & ">"
words) is considered as an element; however, some people are referring
to it as tags. Certain items occur in pairs, indicating when a graphic
feature should start & when it should stop.

✓ The Hyper Text Markup Language (HTML) is the core

programming code to display a website on the internet employed
by internet browsers.
✓ A visitor can utilize Hyperlinks to click on a link & be taken to a
separate webpage to which the URL refers.
✓ Since Web 1.0 was a fixed variant of Hyper Text Markup
Language, but the latest versions have many more genetic
modifications (Web 2.0, 3.0).
✓ Any word that occurs within two angled parentheses (for
example;) is markup, & the rest is information.

Html is a type of user interface. A standardized text or email scheme is

defined by a set of symbols introduced into a text file to regulate its
layout, styling, or relationships between its sections. SGML, HTML, &
XML are the three extensively utilized markup tools. A gadget (laptop,
scanner, internet, etc.) can understand the markup signals to govern how
content should appear when published or shown on a screen. As a result,
 A Complete Overview On: Web-Development

marked-up documents have two kinds of texts: displaying text &

programming language for displaying it.

Some important tags utilized in HTML are:

Tags: HTML tags are secret words on a website page that specify how
the material should be formatted and displayed by your browsers. An
opening and a closing portion are required on many of these tags. For
e.g. the starting tag is <Hello>, & the ending tag is </Hello>.

Tags Utilization
(<html>…</html>) It carries complete HTML content
(<head>…</head>) An HTML statement's header or preface.
(<body>…</body>) Includes rest of the HTML text's data
(<title>…</title>) Includes the document's title.
(<H1>…</H1>) first-level heading with big font size
(<H2>…</H2>) Second level heading
(<H3>…</H3>) Third level heading
(<H4>…</H4 >) Forth level heading
(<H5>…</H5>) Fifth level heading
(<H6>…</H6>) Sixth level heading
(<BR>) Break in the Lines This tag will result in
an empty line being displayed.

(<HR>) Principle of the Horizontal On the

webpage, it makes a horizontal line.

(!-…-) Comment Whenever you visit the site, the

remarks you put in the center will not
appear.
<A href=> . . . </A> Link (A=Anchor) links the current HTML
file to another file.

6
 Ayush Mauryavanshi

<DL> A list of definitions Insert <DL> at the

<DT> top, </DL> at the bottom, & <DT> in front
<DD> of each: description concept" in the
</DL> sequence. For every "explanation" of each
phrase, utilize <DD>. Indentation will be
used for the description.
<DL>
<DT> topic
<DD> description or definition of
topic
</DL>

<IMG SRC="image.gif"> Picture inline In the quotations, type the

graphic's filename (.gif or.jpg).

<B>…</B> Makes your content Bold

<I>…</I> Makes your content Italic

<table> ‘Table’: used to start the table

<TR> ‘TR’: Starts new row {table row}
<TD> ‘TD’: Starts a cell to enter new
</TD> data{table data}
</TR> ‘/TD’: close data entry
</Table> ‘/TR’: close row
‘/Table’: ends the table
<P>…</P> Paragraph While viewing an Html page,
using the returning key does not launch a
separate paragraph. To start a unique
paragraph, you must utilize this tag.

Example 1:-

Simple code using <h1> & <p> tags

<! DOCTYPE html>

<Html>

<Body>

7
 A Complete Overview On: Web-Development

<h1>Hello World</h1>

<p> Thank you for visiting here.</p>

</Body>

</Html>

OUTPUT:-

Hello World
Thank you for visiting here.

Example 2:-

Html code using <form> tag

<! DOCTYPE html>

<html>

<body>

<h1>Simple Form</h1>

<form action="/action_page.php">

<label for="fname">First
Name:</label><br>

<input type="text" id="fname" name="fname"

value="Yash"><br>

8
 Ayush Mauryavanshi

<label for="mname">Middle
Name:</label><br>

<input type="text" id="mname" name="mname"

value="Pratap"><br><br>

<label for="lname">Last
Name:</label><br>

<input type="text" id="lname" name="mlname"

value="Singh"><br><br>

<input type="submit" value="Submit">

</form>

<p>If you click the "Submit" button, the form-

data will be sent to a page called "/action_page.php".</p>

</body>

</html>

Output:-

First Name:
Yash

Middle Name:
Pratap

Last Name:

Singh

Submit

9
 A Complete Overview On: Web-Development

If you click the "Submit" button, the form-data will be sent to a

page called "/action_page.php".

# Applications of HTML

1. Developing website pages:

HTML is widely utilized to create web pages that are shown on
the internet. Each domain has a collection of HTML tags, such
as links, that are being used to attach to specific other web
pages. Each webpage we see on the internet is authored in some
form of HTML code.

2. Internet Navigation:
It is among the most prominent essential & innovative usage of
HTML. The idea of Hypertext is used to enable this exploration.
It's essentially a piece of text that links to specific websites or
content, & whenever people click on it, the user is taken to the
related text or webpage. To integrate a hyperlink inside a web
page, HTML is commonly utilized. Customers can freely travel
among domains that are hosted on multiple hosts & between
WebPages.

3. Responsive images on WebPages:

During the most primitive form, it can configure requests in
HTML programs to use pictures that are flexible in style. A
programmer can completely manage how well the user renders a
view by using the src set feature of the IMG tag in HTML &
integrating it with image pixels. It Can utilize the IMG tag to
load several sorts of images with varying sizes. The image tag
makes it simple to create criteria; we could define the MG tag
with the default destination and then supply an origin for each
scenario.

10
 Ayush Mauryavanshi

# What is an XHTML?
XHTML is a markup language written in XML, or to put it another
way, XHTML is an XML program. It is a composite technique that
integrates the capabilities of HTML & XML to create an optimized
and effective system. You've probably come through or hear of the
word XHTML in the context of website innovation. There are
various features currently available, each with its significance and
application. In the same way, it plays a distinctive function in front
end and website development. We shall attempt to comprehend
XHTML in all of its essential components in this post.

 XML- extensible markup language

 SVG
Full form: Scalable Vector Graphics

Scalable vector graphics is a 2-D graphical platform. It consists of

2 aspects: an XML-based doc type & a visual programming API.
Patterns, writing, & integrated editing tools are among the key
feature & various coloring methods. It offers extensive
functionality for motion graphics & enables native code like
ECMA Script.

Website visuals, motion animations, user interfaces, visualization

exchange, printing & paper copy output, Smartphone apps, & high-
class designing are all domains where Scalable Vector Graphics is
employed.

SVG is a supplier, royalty-free open system produced through the

world comprehensive web consortium Process. Acrobat, Agfa,
Mac, Nikon, Cello, Electrolux, HP, Microsoft, Polaroid,
Dreamweaver, Windows, Motorola, Sharpness, & Sun
Microsystems are among the programmers the SVG statements.

11
 A Complete Overview On: Web-Development

Scalable vector graphics users are installed on more than hundred

million computers, & numerous authoring techniques handle them.

Scalable vector graphics is built on several other prominent

specifications, including XML, JPEG & PNG for picture
formats, and DOM for programming & interaction, SMIL for
motion graphics, & CSS for designing.

 Advantages of SVG:
 Could utilize any script editor to create and modify SVG
images.
 Graphics in SVG format can be found, sorted,
programmed, & reduced.
 SVG pictures can be scaled to any size.
 SVG pictures can be reproduced in great clarity at any size.
 Can zoom images in SVG in and out.
 When SVG graphics are magnified or scaled, they do not
compromise with Quality
 SVG is a free and open format.
 SVG documents are made up entirely of XML.
 SVG used in HTML:-

Example1: Code for A Circle

<! DOCTYPE html>

<Html>

<Body>

<h1> SVG </h1>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="Red”

stroke- width="4" fill="green" />
12
 Ayush Mauryavanshi

</svg>

</Body>

</Html>

OUTPUT:

SVG

 The <svg> tag is the starting point for an SVG picture.

 Its x & y abscissa of the circle's point are defined via the cx
& cy parameters. The circle's centre is assigned if cx & cy
aren't specified (0, 0).
 The r parameter specifies the size of the circle.

Example 2: Defining Dashed Lines

<!DOCTYPE html>

<html>

<body>

<svg height="80" width="300">

<g fill="none" stroke="black" stroke-

width="4">

<path stroke-dasharray="5,5" d="M5 20

l215 0" />

13
 A Complete Overview On: Web-Development

<path stroke-dasharray="10,10" d="M5

40 l215 0" />

</g>

</svg>

</body>

</html>

Output:

………………………………….

---------------------------------------

******

14
 Ayush Mauryavanshi

3. SEO

# SEO:
The Phrase SEO "search engine optimization" refers to developing
a website for search engines. In simplistic words, it relates to the
method of upgrading your website to boost its exposure when
consumers utilize Google, Bing, & alternative search engines to
look for goods or offerings linked to your organization. The higher
your webpage's exposure in search engines, the more probably you
are to grab interest & acquire new & current clients to your
company.

Mozlow’s hierarchy of SEO needs

Title, URL &

Description
share -worthy
content

Great user experience

Keyword optimized

Compiling content

Crawl accessibility

o SEO File naming styles: File types like work.html &

job.html are nonspecific and should not be utilized. In your

15
 A Complete Overview On: Web-Development

o URL, use the legitimate service title, like computer-

repairing.html. Also, use limited words (two to three).

Example: content-blogs-digital marketing.html

o Filenames with hyphen (-) are good.

Content-blogs-digital marketing.html

o File names with underscore (_) are not good.

Content_blogs_digital marketing.html

o SEO Optimized Meta tags:

There are 2 specific Meta tags

1. Meta description tags

2. Meta keyword tags

How do Meta tags appear to be?

<Meta name="keywords"

Content="KEYWORD1 KEYWORD2 KEYPHRASE1 etc.

About 30 to 40 unique words">

<Meta name="description"

Content="A specific, keyword-rich description

About 150 parameters">

“You can add the above written code in the head section of the
webpage of your website.”

16
 Ayush Mauryavanshi

# SEO-Optimized Anchor
All of your textual content should have meaningful anchor text. In
ranking WebPages, many search engines examine the anchor text
of arriving hyperlinks. An illustration of an anchor is as follows:

<a href="nextpage.html" title="Anchor Title"> Anchor Text

</a>

The following is some other sample of an anchor.

<a href="nextpage.html" title="Anchor Title">

<img src="image.gif" alt="keywords" />

</a>

A graphic has taken the role of Anchor Text in this situation. So, if
you're utilizing a graphic instead of anchor text, double-check that
you've used the alt tag correctly. An image's alt tag must contain
keywords that are relevant to the visual.

# W3C Compliance
The below guidelines are the rules of W3C Compliance should be
followed while creating a website.

o To begin each XHTML webpage, utilize the following

XHTML declaring assertions:

<! DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

o Each tag should be securely fastened.

o Head & body tags are now required.

17
 A Complete Overview On: Web-Development

o A concluding slash is added to the empty tag. A tag that

will not contain an end tag is known as an empty tag. < hr>
& <br> are two instances:

<BR> is now <br />.

<HR> is now <hr />.

<IMG SRC="--"> is now <img src="--" />

o Should write every tag in small letters. It only applies to

titles, not parameters. Each of these styles, for instance, are
allowed under the XHTML DTD.

<FONT color="#ffffcc"> is invalid

<font color="#ffffcc"> is valid

<font color="#FFFFCC"> is also valid

o Every attribute value must be enclosed with double

quotation marks (" ").
o Tags are not allowed to be layered (nested).

<b><i>Text</b></i> this is invalid

<b><i>Text</i></b> this is valid

o The following words must not appear in the tag: image,

objects, big, tiny, sub, or sup.
o It cannot contain a tag within some other label.
o If you have a & in the code, it should be typed as &amp.
o Must use only those lower-case letters in CSS.

18
 Ayush Mauryavanshi

# SEO Mobile:
Cell phone SEO is the process of optimizing a website's visibility
while also ensuring that it can be seen flawlessly on mobile
devices & pads. Because of the growing use of smart phones,
publishers should pay close attention to their Smartphone SEO
strategy. After all, more than half of all online consumers now say
they utilize their mobile phones to access websites daily.

There are 3-different configurations:

Configurations Does URL remain Does HTML

similar? remain similar?
Responsive Web ✓ ✓
Design
Dynamic Serving ✓ ✘

Separate URLs ✘ ✘

o Responsive web design: Whenever you employ responsive

web design, irrespective of the customer's gadget, your
mobile website would have similar HTML code &
information for the same URL. To assist the Web browser
in determining how to change the format, utilize the meta
name="viewport" element within your platform's source
code. It will then adjust the presentation configurations to
meet each guest's specific screen resolution.

o Dynamic Programming: Dynamic serving configurations

allow the host to respond to a similar URL with alternative
HTML & CSS code based on the user's phone. You'll
employ the Variety HTTP header correctly to indicate

19
 A Complete Overview On: Web-Development

modifications dependent on the user-page agent's access for

this. Appropriate titles notify the browsers how to exhibit
the data & speed up Googlebot's discovery of mobile-
friendly material on your website.

o Separate URLs: This setup configuration entails having

several URLs for the blog to correctly exhibit your
information on multiple platforms, as the title indicates. For
every display size, a new HTML code is included in every
URL.

# Some important aspects of SEO

I. Crawling:

Crawling; it is a procedure by which Search Engine Spiders creates

website. It would be tough for search engines to scan your website

20
 Ayush Mauryavanshi

if the website layout internal linking would be off or don't have a

sitemap.xml directory.

II. Indexing: Crawling and indexing are not the same things.
These two behaviors aren't mutually exclusive, even though
they are interrelated.

III. Taking Action is the Very Effective Search engine

optimization Step to Get Correct.
21
 A Complete Overview On: Web-Development

One could have the most well-thought-out ideas in the universe.

You can come up with the most brilliant website concept ever.
However, unless you take steps to make that website an actuality,
you're just another internet loser wishing to acquire a rich scheme
& enjoy the Land of opportunity.

However, once you've taken action and completed the job, you can
focus on the remaining SEO elements.

That is something I am unable to assure you.

******

22
 4. Development Tools

When designing web software, you must choose the

technologies depending on the latest project
requirements, not on the expertise of your rivals or past
works. Even if your past projects were profitable, the
technology stack you utilized for them will likely not
function for this one.

The technological stack you choose for your website will

have a significant effect on the expense of production.

Some of the most prominent web initiatives, such as

Shopify, Quora, & Instagram, have technological stacks,
given below
 A Complete Overview On: Web-Development

# Here; are few best web development tools:-

1. Angular JS: You may represent the behavior using
Angular JS in a clear, legible way. Because Angular JS
uses standard JavaScript classes, your work will be
accessible, testable, & maintainable. Indeed, there will be
no junk in the script.

Angular JS expresses JavaScript-like code snippets,

which are primarily utilized in interpolation bindings the
same as:

<span title="{{ attrBinding }}">{{ textBinding

}}</span>

But they may also be utilized simply in command

parameters such as:

ng-click="functionExpression()"

Illustrations of some correct or valid expressions of

Angular JS are:

5+7

x+y

user.name

items[index]

Examples:

I. Simple Addition:
24
 Ayush Mauryavanshi

<span>
8+9={{8+9}}
</span>

Output: 8 + 9= 17

II. Simple Form:

<! DOCTYPE html>

<html lang="en">

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6
.9/angular.min.js"> </script>

<body>

<div ng-app="myApp" ng-controller="formCtrl">

<form>

First Name: <input type="text" ng-

model="Firstname">

</form>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope)
{

$scope.firstname = "Alex";

25
 A Complete Overview On: Web-Development

});

</script>

</body>

</html>

Output:

First Name: Alex

2.Sass:
o Sass is used in several frameworks, including
Compass, Bourbon, Susy, and others. It will assist
in developing your function while also providing
some built-in options.
o Sass supports multiple inheritances.
o Nesting, variables, loops, arguments, and other
aspects are included.

Variables: Consider variables to be a place to save data

that you wish to reapply across your CSS. The $ sign in
Sass is used to declare that as a variable. Here's an
illustration:
$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

26
 Ayush Mauryavanshi

color: $primary-color

Nesting: Sass allows you to arrange CSS selectors

according to the similar aesthetic order as your HTML.
Here, is an example of site navigation:
nav
ul
margin: 0
padding: 0
list-style: none

li
display: inline-block

a
display: block
padding: 6px 12px
text-decoration: none

3.JQuery:
o It works with Chrome, Edge, Firefox, IE, Safari,
Android, & iOS, among other platforms.
o JQuery requires a fundamental API that simplifies
activities such as Ajax & animation. This API is
compatible with various browsers.
o It complies with CSS3.

Example of JQuery :
<!DOCTYPE html>

<html>

<head>

27
 A Complete Overview On: Web-Development

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
"></script>

<script>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

});

</script>

</head>

<body>

<p> I will vanish if you click on me.</p>

<p>Click me away!</p>

<p>Click me too!</p>

</body>

</html>

Output:

I will vanish if you click on me.

Click me away!

Click me too!

28
 Ayush Mauryavanshi

4.Bootstrap:
o Sass variables & mixing are available in Bootstrap.
o It has a responsive grid system.
o It comes with a lot of pre-assembled parts.

# Insert the HTML 5 doctype: Because Bootstrap relies

on HTML elements & CSS attributes, you'll need to
include the HTML 5 doctype with the lang property &
the correct character sets at the top of the page.
<! DOCTYPE html>

<html lang="en">

<Head><meta http-equiv="Content-Type"
content="text/html; charset=windows- 1252">

<Title>Any title</title>

</head>

<Body>

//write code

</Body>

</html>

5.Sketch:
✓ Sketch allows customers to view your designs in
user flow diagrams, convert screenshots into

29
 A Complete Overview On: Web-Development

perspective mockups, & create, customize, and

share your materials themes.
✓ Advanced vector modification, pixel-perfect
precision, non-destructive editing, code export, &
prototyping are all aspects of Sketch.
✓ It has collaboration skills that enable colleagues to
exchange designs & prototypes.

*Notes:

 The plug-in used to create a cycle through

elements as a slideshow is – carousel
 Which class is used to create a black
navigation bar? .navbar-inverse
 The correct syntax of creating a standard
navigation bar is - <nav class="navbar
navbar-default">
 bootstrap used to create a big box for
calling extra attention is - .jumbotron

*******

30
 Ayush Mauryavanshi

5. CSS

# Introduction

CSS (Cascading Style Sheets) is what gives WebPages their

attractive appearance. It's an essential aspect of current software
development & a talent that every web designer & developer
should have.

There are basically 3 aspects to include CSS in our project:

1. CSS inline

To begin, we can directly incorporate CSS in our Html tags. We do

this by using the inline styles & then adding characteristics to
them.

<h1 style="color: Red"> Inline Style Sheet! </h1>

We're going to give it the color property & add the number to blue,
which provides us with the following:

Inline Style Sheet!

2. Internal CSS

Adding CSS utilizing <style> tag inside the <head> tag of the
HTML code, then, it is known as internal linking.

<head>

<style>
31
 A Complete Overview On: Web-Development

h1{color: blue;}

</style>

</head>

3. External CSS

To use an external style sheet is the last & most preferred

technique to integrate CSS. We generate a style sheet with the help
of the .css extension & reference to it in the HTML content, as
seen below:

<head>

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

</head>

We used the reference tag in the code above to include the URL to
the style.css files. To make it easier to maintain, we write all of our
CSS in a separate stylesheet named style.css.

h1 {

color: blue;

# CSS Selectors
CSS (Cascading Style Sheets) is a design language for styling
HTML elements. You must first pick aspects before you can style
them. You've recently explored how this functions, but let's get a
little deeper into CSS selectors and examine three distinct methods
for selecting HTML components.

32
 Ayush Mauryavanshi

Assuming you have multiple elements utilizing similar CSS, you

may merge the specific selectors in a list to apply the condition to
all particular selectors. John can put this as 2 distinct conditions
assuming John had the similar CSS for an H1 tag & a class of
.special.

h1 {

color: blue;

.special {

color: blue;

I could also use a comma (,) to separate these and turn them into a
selector list.

h1, .special {

color: blue;

Before or after the comma (,), white space is acceptable. You

might find it easier to understand the selector if a new line
separates them.

h1,

.special {

color: blue;

33
 A Complete Overview On: Web-Development

There are basically 3-types of selectors:

1. Class, Type & ID Selectors:

Selectors that specify an HTML element, for example a <h1> tag,

are included in this group.

h1 { }

ILLUSTRATION: h1 {

font-size: 10px;

p{

color: pink;

It also includes selectors which target a class:

.box { }

ILLUSTRATION: .container {

margin: 20px;

&, an ID:

#unique { }

ILLUSTRATION: #para1 {

color: yellow;

font-size: 16px;

34
 Ayush Mauryavanshi

2. Attribute selectors:

This collection of selectors allows you to choose elements

depending on the existence of a specific attribute on a component
in a range of methods:

b[title] { }

Or,

a[href="https://Helloworld.com"] { }

o Pseudo elements & pseudo classes:

Pseudo elements: It chooses a particular section of an
element instead of the entire element.
p::first-line { }
o Pseudo classes: It designs specific states of an element, are
included in this collection of selectors.
a:hover { }

3. Colors and Fonts

To make your HTML elements look good and unique CSS

provides you the variety of ways.

There are 2 types of Font Names:

o Generic Family: a collection of font families with a similar

appearance (such as 'Serif' or 'Monospace')
o Font Family: a font family (for example, 'Times New
Roman' or 'Arial')

35
 A Complete Overview On: Web-Development

# CSS Layout
CSS page layout approaches enable us to determine the location of
items on a website page concerning their initial place in normal
style flow, other elements nearby, their parent container, or the
main viewport/window.

The page layout techniques are:-

o Normal flow
o The display property
o Flex box
o Grid
o Floats
o Positioning

Each technique has its own set of applications, benefits, and

drawbacks, & none of them are meant to be employed in isolation.

o Normal flow:
When you don't customize the layout of your HTML WebPages,
the web application defaults to normal flow, For example:-

<p>I love my Rabbit.</p>

<ul>

<li>Buy carrots for rabbit.</li>

<li>Play with him.</li>

<li>Cheer up. </li>

</ul>

<p>The end!</p>

36
 Ayush Mauryavanshi

Output:

I love my Rabbit

 Buy carrots for rabbit.

 Play with him
 Cheer up.

The end!

o The Display Property:

All instances of the show parameter are significant concepts for
obtaining page layout in CSS. This attribute enables us to
customize how something appears by default. Anything in normal
flow has a value of exhibit, which is used as the default behavior of
the items on which it is set. The reason that sentences in English
display one below the other are owing to the use of show: block in
their styling. When you build a link around some content within a
paragraph, the connection stays in line with the rest of the text
rather than breaking onto a new line. It is because the tag element
is set to demonstrate: inline by default.

o Flex Box:
The Flexible Box Layout Module, often known as Flex box, was
created to simplify things in one dimension — either as a row or as
a column. To utilize Flex box, add display: flex to the parent
element of the components you want to arrange, and all of its
immediate children become flex items. A simple analogy
demonstrates this.

.wrapper {

37
 A Complete Overview On: Web-Development

display: flex;

<div class="wrapper">

<div class="box1">Red</div>

<div class="box2">Yellow</div>

<div class="box3">Green</div>

</div>

Red Yellow Green

.wrapper {

display: flex;

.wrapper > div {

flex: 1;

<div class="wrapper">

<div class="box1">Red</div>

<div class="box2">Yellow</div>
38
 Ayush Mauryavanshi

<div class="box3">Green</div>

</div>

Red Yellow Green

o Grid Layout:
Can enable grid layout by specifying a presentation value —
exhibit: grid. With a box & certain child elements, the following
example is identical to the flex example. In addition to utilizing
display: grid, we're also using the grid-template-rows & grid-
template-columns parameters to define specific rows or columns
track on the parent. We've set up three columns of 1fr each and
two rows of 100px each. I don't need to apply any rules to the child
elements because they are automatically inserted into the cells
established by our grid.

Grid Layout is meant for 2D — putting things up in rows or

columns — while flexbox is intended for 1D layout.

.wrapper {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 100px 100px;

grid-gap: 10px; }

39
 A Complete Overview On: Web-Development

<div class="wrapper">

<div class="box1">RED</div>

<div class="box2">BLUE</div>

<div class="box3">GREEN</div>

<div class="box4">ORANGE</div>

<div class="box5">WHITE</div>

<div class="box6">PINK</div>

</div>

RED BLUE GREEN

ORANGE WHITE PINK

o Floats:
The functionality of an entity that is floated and the block-level
components that follow it in normal flow is altered. The attribute is
shifted to the left or right, out of the typical flow, and the adjoining
text floats.

Here are 4 different options for the float property:

 Left — moves the attribute to the left.

 Right — Moves the content to the right of the image.

40
 Ayush Mauryavanshi

 None — specifies that there will be no floating at all. This

is the standard-setting.
 Inherit — indicates that must inherit the entity's parent
component's float property value.

Example:

<h1>Simple float example</h1>

<div class="box">Flowers</div>

<p> Flower is a modified shoot with a condensed axis called

thalamus and appendages called floral organs. Stamens
(microsporophylls) and carpels (megasporophylls) represent
the essential parts of a flower. Typically, the flower is a
condensed branch in which internodes have become
condensed, bringing the nodes close to one another. The leaves
are modified to form floral whorls that directly or indirectly
participate in the reproduction process. Flowers differ
considerably in size, shape, color, and arrangement of their
parts, yet most of them bear a common structural plan.</p>

.box {

float: left;

width: 150px;

height: 150px;

margin-right: 30px; }

41
 A Complete Overview On: Web-Development

Simple float example

Flowers
Flower is a modified shoot with a condensed axis called
thalamus and appendages called floral organs.
Stamens(microsporophylls) and carpels (megasporophylls) represent
the essential parts of a flower.Typically, the flower is condensed branch
in which internodes have become condensed, bringing the nodes close to
one another. The leaves are modified to form floral whorls that directly
or indirectly participate in the reproduction process. Flowers differ
considerably in size, shape, color, and arrangement of their parts, yet
most of them bear a common structural plan.

o Positioning:
Positioning enables us to shift a component from where would
typically put it in the workflow to a different place. Positioning is
more about maintaining & fine-tuning the location of various
objects on the web page than on building primary web page
layouts.

Here are 5-varieties of positioning given below:

 Static Positioning
 Relative Positioning
 Absolute Positioning
 Fixed Positioning
 Sticky Positioning

Example of Simple Positioning:

<h1>Simple Example</h1>

<p> Example of positioning. </p>

<p class="positioned"> Example of positioning..</p>

<p> Example of positioning...</p>

42
 Ayush Mauryavanshi

body {

width: 500px;

margin: 0 auto;

p{

background-color: rgb(207,232,220);

border: 2px solid rgb(79,185,227);

padding: 10px;

margin: 10px;

border-radius: 5px;

Simple Example Example of positioning.

Example of positioning..

Example of positioning…

43
 A Complete Overview On: Web-Development

# CSS Transitions & Animations

CSS Transitions:

CSS transitions fluidly customize properties value.

We should mention two factors in order to generate a transition

effect:

 A CSS attribute to which you wish to apply an effects.

 How long the effect does lasts.

*This transition will have no action if the time component is not

supplied, as the possible value is 0.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: Yellow;

transition: width 2s;

div:hover {

width: 300px;
44
 Ayush Mauryavanshi

</style>

</head>

<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition

effect:</p>

<div></div>

<p><b>Note:</b> Given Example doesn't work on

Internet Explorer 9 & earlier versions.</p>

</body>

</html>

The transition Property

Hover over the div element below to see the transition effect:

Note: This example does not work in Internet Explorer 9 and

earlier versions.

45
 A Complete Overview On: Web-Development

There are basically 5 properties of CSS Transitions:

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function

Transition-timing-function: In this Transition the speed of curve

is specified.

 ease – starts slowly then fast, ends slowly(default function).

 linear – remains in constant speed from start to end.
 ease-in – effect starts slowly.
 ease-out – ending of the effect is slow.
 ease-in-out – effect with slow start & end.

CSS Animations:

Like color, background, and dimensions, several other CSS

attributes could be animated with the animation feature. The
@keyframes at-rule must be utilized to describe each animation,
and later it will be invoked utilizing the animation property.

.element {

animation: pulse 5s infinite;

@keyframes pulse {

0% {

background-color: #001F3F;

46
 Ayush Mauryavanshi

100% {

background-color: #FF4136;

There are few Sub-properties of CSS animation:-

 animation-name: Determines the name of the @keyframe.

 animation-duration: specifies the time period of
animation that how much time it would take to complete
one cycle.
 animation-timing-function: determines the duration as
well as the transition of keyframes in the animation.
 animation-delay: The lag between the moment the
element is fetched & the start of the animation loop is set
here.
 animation-direction: Sets how many times you are willing
to repeat the animation.
 animation-iteration-count: specifies the direction to the
animation.
 animation-fill-mode: determines value to be applied for
the animation before starting and after executing.
 animation-play-state: help to pause and play the
animation.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

47
 A Complete Overview On: Web-Development

div {

width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

</style>

</head>

<body>

<p>

<b>Note:</b> When an animation is finished, it changes

back to its original style.</p>

</body>

</html>

48
 Ayush Mauryavanshi

# CSS Styling Tools

Developers prefer to use CSS tools to boost their productivity &
precision at work. These tools allow them to easily and rapidly
design web applications and post them on the internet. While CSS
provides the foundation for websites, once the project begins to
take form & considerable labor is required, things may quickly
devolve into chaos. It is when web-based CSS tools like these
come in handy.

Some commonly used CSS styling tools are:

1.SCSS Compiler:
Beautify Tools' SCSS compiler website application software is an
automatic code generator for the current CSS workflow. It is an
effective internet CSS tool for you if you want to use a terrific tool
that can help you develop & publish a site quickly. The program
converts raw SCSS to CSS depends on the design & media and, in
general, options, as well as allowing code minification & merging
several files.

2.Keyframnes.app:
This Keyframes.app is an excellent application that shows you how
your project must be accomplished in a timeline format. As a
result, you can readily observe how your graphics look, whether
they repeat, & which portions of the series are the most important.
You may simply change components on the webpage using this
help indicate and the chance to monitor the effects right in front of
you.

49
 A Complete Overview On: Web-Development

3.Scout app:
Scout App is an excellent tool to use if you're a designer seeking
to begin with vibrant CSS so you can operate in XP, Mac, & Linux
platforms. Working with dynamic CSS is easy when using a
Sass/Compass Graphical user interface. This application allows
you to save all in one place, including CSS files, themes, and a
wide range of products. There will be no need to waste hours
studying terminal commands. So, it is the best tool for designing &
styling process.

4.Sierra Library:
Sierra Library is a fully accessible, lightweight, & customizable
utility that claims to be the smallest SCSS library. It is simple to
set up & install. You can also change the styles, borders,
scrollbars, & colors in the library's style options. You can make
your own specially made file as well. Banners, Icons, Typefaces,
Forms, Loaders, Alerts, Pagination, Lists, Tablets, Labels, &
Utility are just a few of the items you can manage using the
application.

5.PostCSS:
PostCSS is the tool to use if you want to interact with a piece of
information that enables you to translate CSS into JavaScript. By
utilizing Should I Use variables to add vendor prefixes to CSS
rules, you can improve code readability. Its Autoprefixer analyses
the traffic of the internet browser & applies prefixes based on that
information.

******
50
 Ayush Mauryavanshi

6. Java Script

#JavaScript language
Introduction:

JavaScript is a dynamic programming language for computers. It is

a lightweight aspect of online WebPages whose representations
enable the client-side script to communicate with users and create
dynamic sites. It that can be interpreted as it is an object-oriented
programming language.

 Merits of JavaScript:
o Less server interaction
o Immediate feedback to the visitors
o Increased interactivity
o Richer interfaces
 Demerits of JavaScript:
o Client-side reading and writing of documents is not
possible with JavaScript.
o Multi-threading and multiprocessor support are not
available in JavaScript.
o Since there is no networking capability in
JavaScript, it cannot be utilized for communication
networks.

Operators:

There are many types of Java script operators given below:

51
 A Complete Overview On: Web-Development

1. + (Addition): adds two operands.

2. – (Subtraction): subtract last operand from the first one.
3. *(Multiplication): Multiply both operands.
4. / (Division): Divide the numerator by the denominator.
5. % (Modulus): Outputs the remainder of an integer
division.
6. ++ (Increment): Increases an integer value by one.
7. -- (Decrement): Decreases an integer value by one.

Example:

#1: Addition of two operands:

<! DOCTYPE html>

<html>

<body>

<h2>JavaScript + Operators</h2>

<p>a = 6 b = 6, evaluate c = a + b, and display c:</p>

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

<script>

let a = 6;

let b = 6;

let c= a + b;

52
 Ayush Mauryavanshi

document.getElementById("demo").innerHTML = c;

</script>

</body>

</html>

Output:

JavaScript + Operators
a = 6, b = 6, evaluate c= a + b, and display c:

12

*You can use all the above given operators in a similar manner.

Conditional Statements:
JavaScript If Else condition evaluates the expression, If the
expression is true, execute the true loop otherwise execute else
block.

 If- Statement:

Syntax: if (condition) {

// code to be executed if the condition is true

Example:

53
 A Complete Overview On: Web-Development

if (10 > 5) {

var outcome = "hello";

outcome;

Output: "hello"

 If-else Statement:

Syntax: if (condition) {

// code to be executed if the condition is true

} else {

// code to be executed if the condition is false

Example:

var x = 5, y = 10;

if(x>y) {

document.write("x is greater than y");

} else {

document.write("x is greater than y");

Output: x is greater than y.

54
 Ayush Mauryavanshi

 If-else-if statement:
Syntax: if (condition1) {

// code to be executed if condition1 is true

} else if (condition2) {

// code to be executed if the condition1 is false and

condition2 is true

} else {

// code to be executed if the condition1 is false and

condition2 is false

Example:

if ( 15 < 10) {

greeting = "Good morning!";

} else if (18 < 20) {

greeting = "Good day!";

} else {

greeting = "Good evening!";

document.getElementById("demo").innerHTML =
greeting;

Output:

Good day !
55
 A Complete Overview On: Web-Development

Javascript Switch Statements:

Syntax: switch(expression) {

case a:

// code to be executed

break;

case b:

// code to be executed

break;

default:

// code to be executed

Example:

<script>

let day;

switch (new Date().getDay()) {

case 0:

day = "Sunday";

break;

case 1:

day = "Monday";
56
 Ayush Mauryavanshi

break;

case 2:

day = "Tuesday";

break;

case 3:

day = "Wednesday";

break;

case 4:

day = "Thursday";

break;

case 5:

day = "Friday";

break;

case 6:

day = "Saturday";

document.getElementById("demo").innerHTML =
"Today is " + day;

</script>

Output: Today is Tuesday

Java Script loops:

57
 A Complete Overview On: Web-Development

 For loop: runs through a section of code several times.

Syntax: for (condition 1; condition 2; condition 3) {

// code to be execute }

Example:

<body>

<h2> For Loop Example</h2>

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

<script>

let text = "";

for (let i = 0; i < 3; i++) {

text += "Number is " + i + "<br>";

document.getElementById("demo").innerHTML = text;

</script>

</body>

Output:

For Loop Example

The number is 0

The number is 1

The number is 2

58
 Ayush Mauryavanshi

 While loop: while a specific condition is true, repeats

through a block of code

Syntax: while (condition) {

// code block to be executed

Example:

<body>

<h2>While Loop Example</h2>

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

<script>

let text = "";

let i = 0;

while (i < 6) {

text += "<br>The number is " + i;

i++;

document.getElementById("demo").innerHTML = text;

</script>

</body>

59
 A Complete Overview On: Web-Development

Output:

While Loop Example

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

 Do-while loop: loops through a block of code while a

specified condition is true.

Syntax:

do {

// code block to be executed

while (condition);

Example:

<body>

<h2>Example of Do While Loop</h2>

60
 Ayush Mauryavanshi

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

<script>

let text = ""

let i = 0;

do {

text += "<br>The number is " + i;

i++;

while (i < 3);

document.getElementById("demo").innerHTML = text;

</script>

</body>

Output:

Example of Do While Loop

The number is 0

The number is 1

The number is 2

Error Handling in JavaScript:

JavaScript is a type less programming language. There are no
compile-time issues. So you might get a 404 error if you try to

61
 A Complete Overview On: Web-Development

access an undefined variable or invoke an undefined function, for

example:

Identical to other languages such As java or C#, JavaScript has an

error-handling framework & tries to catch errors loop to detect
runtime issues.

Syntax:

try

// code that may throw an error

catch(ex)

// code to be executed if an error occurs

finally{

// code to be executed regardless of an error occurs

or not

# Inheritance
In object-oriented programming, inheritance is a crucial notion.
Techniques from the base class are imported into the derived class
under traditional inheritance.

62
 Ayush Mauryavanshi

The prototype object is used to promote inheritance in JavaScript.

Some term it "Prototypal Inheritance," while others refer to it as
"Behavior Delegation."

 Prototypal Inheritance: It is a sort of inheritance in

which an existent object gains new attributes and methods.
Prototype objects are used in this approach. i.e.
object.prototype

let user = { //create the user object

showAccess: true //create and set showAccess property

of user

};

let proUser = { //repeat of the above for this object

ads: false

};

proUser.__proto__ = user; //user is the prototype of

proUser

console.log(proUser.showAccess); // "true"

 Pseudo classical Inheritance: Prototypal inheritance is

comparable to pseudo-classical inheritance. Utilizing
prototypal inheritance; this kind of inheritance mimics
classical inheritance. When programming with ES6,
nevertheless, pseudo-classical inheritance is discouraged
because it can use traditional classes instead.

Bike.prototype.dialogue = function () {

console.log(

63
 A Complete Overview On: Web-Development

"I am a " +

this.color +

" "+

this.make +

" with " +

this.speed +

" speed "

);

};

console.log(Pulsar.dialogue());

console.log(HeroHonda.dialogue());

console.log(KTM.dialogue());

 Functional Inheritance: Functional inheritance is when

an object instance inherits aspects through the usage of an
enhancing function:

function Client(data) {

var that = {};

that.name = data.name;

return that;

// Create a child object, to inherit from the base Client

function Client(data) {
64
 Ayush Mauryavanshi

var that = Person(data);

that.sayHello = function () {

return "Hello, I'm " + that.name;

};

return that;

var myClient = Client({ name: "Ruhi" });

console.log(myClient.sayHello());

# Prototypes
JavaScript is an interactive scripting language. As seen here, you
can add additional attributes to an object at any moment.

<body>

<h1>Demo </h1>

<script>

function Student() {

this.name = 'Riya';

this.gender = 'F';

var studObj1 = new Student();

studObj1.age = 20;

65
 A Complete Overview On: Web-Development

alert(studObj1.age);

var studObj2 = new Student();

alert(studObj2.age);

</script>

</body>

Every function includes prototype object by default.

Function Prototype

Prototype in JavaScript
Each object developed with literal syntax or function Object () {
[native code] } syntax with the new keyword has a __proto__ field
that refers to the prototype object of the function that generated it.

In Chrome or Firefox's developer tool, you may debug and inspect

the prototype property of an object or function.

Function Prototype

Object 1

Object 2

66
 Ayush Mauryavanshi

Prototype in JavaScript

 Object Prototype:

The prototype attribute of an object is, as previously said, invisible.

To acquire a prototype object, utilize the
Object.getPrototypeOf(obj) methods instead of __proto__.

<script>

function Student() {

this.name = 'John';

this.gender = 'Male';}

var studObj = new Student();

Student.prototype.sayHi= function(){alert("Hi");};

var studObj1 = new Student();

var proto = Object.getPrototypeOf(studObj1);

alert(proto.constructor);

</script>

Output:

67
 A Complete Overview On: Web-Development

Object Prototype includes Following 2 properties:-

o Constructor
o __proto__

Methods Used in Object Prototypes are:

o hasOwnProperty()
o isPrototypeOf()
o propertyIsEnumerable()
o toLocaleString()
o toString()
o valueOf

 Changing Prototype:

Each object's prototype is connected to the function's prototype

object, as previously stated. If the prototype of a function is
modified, only new components will be associated with the new
prototype. All other previous objects will continue to connect to
the previous function prototype.

<script>

68
 Ayush Mauryavanshi

function Student() {

this.name = 'John';

this.gender = 'Male';

Student.prototype.age = 15;

var studObj1 = new Student()

alert('studObj1.age = ' + studObj1.age);

var studObj2 = new Student();

alert('studObj2.age = ' + studObj2.age);

Student.prototype = { age : 20 };

var studObj3 = new Student();

alert('studObj3.age = ' + studObj3.age);

alert('studObj1.age = ' + studObj1.age;

alert('studObj2.age = ' + studObj2.age);

</script>

69
 A Complete Overview On: Web-Development

 Boolean.Prototype Constructor:

The Constructor property of the Boolean prototype is utilized to

create new properties and methods for all Boolean variants. When
adding: properties, all complicated construction will be given the
feature, and it will be evaluated by default, but when creating
methods, all Booleans will have access to this method.

Syntax:

Boolean.prototype.name = value

Methods used in Boolean.prototype Constructor:

o Boolean.prototype.valueOf()
o Boolean.prototype.toString()

*******

70
 Ayush Mauryavanshi

7. Machine Learning

In machine learning, we teach machines by which they learn many

things. Learning depends on past experiences.

# Artificial Intelligence
Artificial intelligence (AI) refers to a machine's ability to execute
cognitive processes similar to those performed by humans, such as
sensing, understanding, thinking, and resolving issues. The human
level in teammates of logic, speaking, and perception is the
standard for AI.

o AI's objectives are:

 To develop intelligent agents, which are intelligent systems
that understand, show, clarify and advise their users.
 Developing machines that; perceive, analyze, acquire, and
interact like people to execute human intelligence in
machines.

Biology

Psychology Maths

Artificial
Neuron Intelligence Sociology
Science

Computer
Philosphy
Science

71
 A Complete Overview On: Web-Development

# Artificial Intelligence vs. Machine learning:

Artificial Intelligence is a system that has been programmed to
have human-like characteristics. Take our brain, for example; it
calculates the world around us with ease and efficiency. Artificial
Intelligence is the idea that a computer can perform the same tasks
like a human. AI can be defined as a huge technology that imitates
human abilities.

Machine learning is a branch of artificial intelligence that teaches a

machine how to learn. Machine learning algorithms search for
patterns in data and attempt to conclude. In short, the computer
does not require people to program it manually. The programmers
provide certain examples, and the machine will learn how to do
things based on those examples.

 Uses of Artificial Intelligence:

o Games: In strategic games like chess, casino, tic-tac-toe,
and others, where the machine can conceive of a vast
number of probable locations heuristic-based, knowledge,
AI plays a critical role.

72
 Ayush Mauryavanshi

o Natural Language Processing: NLP is a field of machine

learning with the ability of a computer to understand,
analyze, manipulate and potentially generate human
language.
o Speech Recognition: also know as Automatic speech
recognition(ASR), it is ability for a machine or program to
identify words spoken about and convert them into readable
text and it may identify only if words are spoken clearly.
o Handwriting Recognition: The handwriting recognition
software scans words typed with ink on paper or a touchpad
on a computer screen. It is capable of recognizing
letterforms and converting them into analog information.
 There are 3-phases of Artificial intelligence (AI):

o Artificial Intelligence
o Machine Learning
o Deep learning

73
 A Complete Overview On: Web-Development

# Types of Machine Learning

# Supervised learning: In supervised learning any models

learn/train by labeled dataset. A label data set is a type of
information in which both input/output parameters exists.

Environment

LA Supervisor

Desired o/p

Actual output

Error +

74
 Ayush Mauryavanshi

# Unsupervised learning: In unsupervised learning machine

learn itself by guessing output in response of environment of input.

i.e., No supervisor exists in unsupervised learning.

Environment

Input
LA Output
Error

# Reinforcement Learning: Reinforcement learning is a reward

based learning in which a reward is awarded to learning agent
(LA) every time whenever they give right prediction.

Environment

Input Reward

LA Output

There are few aspects or techniques by which machine learns:

1.Transfer learning:
75
 A Complete Overview On: Web-Development

Transfer learning is the idea of overcoming the isolated learning

paradigm and utilizing the knowledge acquired from one task to
solve related ones as applied to machine learning and in particular,
to the domain of deep learning. It is a learning based on another
one.

Learning system
Data set 1
task 1

Learning
Data set 2
system task 2

2.One shot learning:

The CNN have become the state of the art methods for image
classification task but one of the biggest limitation is they required
a lot of labeled data. In many applications collecting this data is
sometimes not feasible. One shot learning aims to solve this
problem in case of standard classification the input images fed into
a series of layers and finally at output we generate a probability
distribution over all the classes.

76
 Ayush Mauryavanshi

 Types of Neural networks used in machine

learning:

Convolution neural network (CNN):

CNN is a type of neural network model which allow us to extract

higher representations for the image content, unlike classical image
recognition where we define the image features our self. CNN
takes the image as raw pixel data trains the model then extracts the
features automatically for better classification.

CNN are widely used in image recognition, image

classification, object detection, face recognition, etc. CNN image
classification takes an input image process it and it classify under
certain categories.

Fully
Max.
Input Convo Flattin Conne
Poolin Output
Data lution g cted
g
Layer

Block diagram of CNN

Output of Convolution

77
 A Complete Overview On: Web-Development

Recurrent neural network (RNN):

RNN are a type of neural network where the outputs from the
previous step are fed as input to the current step. In traditional
neural network all the input and outputs are independent of each
other. But in cases like when it is required to predict the next word
of sentence the previous words are required and hence there is a
need to remember the previous words. Thus, RNN came into
existence which solves this issue with the help of hidden layer.

The main and most important feature of RNN is hidden state which
remembers some information about a sequence. RNN have a
memory which remembers all information about what has been
calculated. It uses the same parameters for each input as it
performs the same task on all the inputs or hidden layers to
produce the output.

*This reduces the complexity of the parameter unlike the other

neural network.

Output

Hidden
State (Layer)

Input

78
 Ayush Mauryavanshi

Artificial Neural network (ANN):

A Logistic Regression can be thought of as a single perceptron (or
neuron). At every layer of an Artificial Neural Network, there are
many perceptron’s/neurons. Since inputs are exclusively analyzed
in a forward flow.

An ANN is also known as; a Feed-Forward Neural Network.

Flow diagram

 There is an important term in machine learning i.e., SVM.

Support Vector Machine (SVM):

The objective of the SVM algorithm is to find a hyper plane in an

N-dimensional space (N- the number of features) that distinctly
classifies the data points. Hyper Plane is a decision boundary that
helps to classify the data points. Data points falling on either side
of the hyper plane can be attributed to different classes. Also, the
dimension of the hyper plane depends upon the number of features.
If the number of input feature is 2, then the hyper plane is just a
line becomes a 2D plane. It becomes difficult to imagine when the
number of features exceeds 3

79
 A Complete Overview On: Web-Development

Support Vectors are the points that are closer to hyperbola and
influence the position and orientation of the hyper plane. Using
these support vectors, we maximize the classifier. Deleting the
support vectors will change the position of the hyper plane.

SVM can be of two types:

3. Linear support vector machine

4. Non-linear support vector machine

 Support vector machine algorithm:

The SVM algorithm's purpose is to find the optimum line or

selection boundaries for categorizing n-dimensional space into
80
 Ayush Mauryavanshi

classes so that it can readily place additional data points in the

appropriate category in the coming years. A hyper plane is a name
for the optimal choice boundary.

Important parameters of SVM are:

o Kernel: The kernel takes the input data into any first as
required by the users. Linear, polynomials, radial basis
functions (RBFs), and non-linear hyper planes generated to
use the polynomial and RBF functions are all examples of
kernels utilized in SVM. By using an improved kernel to
separate non-linear classifications, you can get accurate
classifiers.

o Regularization: In Scikit-learn, the C parameters reflect

the mistake or penalties associated with each inaccuracy.
Recognizing the assumption and modifying the decision
boundary by altering the C settings can help you keep
regularization.

o Gamma: The influence of gamma parameters on a single

class label is determined by gamma parameters. There are 2
kinds of gamma specifications: higher and lower values,
with low signifying "far" and high meaning "near." A
Gaussian function with a significant variation is defined by
the low or far values. High or near values, on the other
hand, identify it as having a little variance.

81
 A Complete Overview On: Web-Development

Applications of Machine Learning

Automatic
language
Email translation Image
spam and
recogniti
malware
on
filtering

Medical Speech
recogniti
diagnosis on

Applications
of Machine
Stock learning
Traffic
market
prediction
trading

Online Prduct
fraud recommd
detection ation
Virtual Self
personal driving
assistant cars

o Speech Recognition: also know as Automatic speech

recognition(ASR), it is ability for a machine or program to
identify words spoken about and convert them into readable
text and it may identify only if words are spoken clearly.
o Image Recognition: One of the really common uses of
machine learning is image recognition. It's used to identify
things like people, locations, and photographs. Automatic
buddy tag suggestions are the utilization of picture
recognition and facial identification.
Facebook has a tool that suggests
auto-tagging of friends. When we submit a photo with our
Facebook friends, we get an automatic tagging
recommendation with their names, which are powered by
82
 Ayush Mauryavanshi

machine learning's face identification and recognition

algorithm.

o Traffic Prediction: It uses two methods to anticipate

traffic conditions, such as whether traffic is clear, slowly
moving, or extremely congested:
 Google Maps and sensors provide real-time car
position.
 At the same time, the average time has been taken
on previous days.

o Product recommendations: Various e-commerce and

multimedia organizations, such as Amazon, Netflix, and
others, employ machine learning to make product
recommendations to users. Because of machine learning,
whenever we look for an online store, we begin to receive
advertisements for the same goods while browsing the
internet along with the same site.

******

83
 A Complete Overview On: Web-Development

8. Conclusion

Exercise Questions:

 HTML and SVG:

1. What is the difference between HTML and XML?

HTML XML
 It is a markup language  It is a cross platform,
that dictates how the software and hardware
text looks in the web independent tool for
browser (thus for transmitting information.
formatting and layout). It describes the data and
Example: how it is organized.
<b> <i> Radha </i> </b> Example:
<sample>
<name> Radha </name>
<address> Bhopal
</address>
</sample>
 It has a finite set of pre-  In XML we can create
define tags. our own tags.

2. Write a tag that creates a checkbox in HTML form?

3. In HTML, which tag is used to identify inserted content?

a. <ins> tag
b. <pre> tag
c. <tt> tag
d. <wbr> tag
84
 Ayush Mauryavanshi

4. Which one of the following is the correct tag that creates a

textbox 9 rows high and 50 columns wide?

a. <text rows = "9" cols = "60" name = "Example" > </text>

b. <textarea cols "50" rows = "9" name = "Example" >
</textarea>
c. <plaintext rows ="9" cols = "60" name = "Example" >
</plaintext>
d. <blocktext rows ="9" cols = "50" name = "Example" >
</blocktext>

5. Which technique is preferred when form information

represents personal data?

a. get method
b. host method
c. put method
d. none of these

6. Tag used to write an example text ia _________?

a. <example>
b. <exp>
c. <xmp>
d. none of the above

7. Determine the output of the following HTML code:

<!DOCTYPE html>

<html>

<body>

85
 A Complete Overview On: Web-Development

<p>Hello<br>I am Daisy,<br>I am in 9th

standard.</p>

</body>

</html>

8. Which of the following is true?

a. SVG documents are made up entirely of XML.

b. Graphics in SVG format can be found, sorted,
programmed, & reduced.
c. SVG is not an open-source format.
d. except for c both are true

9. In which language does SVG describe the animations?

a. CSS
b. XML
c. JAVASCRIPT
d. HTML

10. Is SVG resolution independent? True/false

11. What is the method for embedding SVG files in HTML?

a. embed
b. object
c. iframe
d. all of the above

12. Write an HTML code to link yahoo's official webpage?

86
 Ayush Mauryavanshi

Answers:
2. <Input type “check box” name = “hello”>
3. a
4. b
5. d
6. c
7. Hello
I am Daisy
I am in 9th standard.
8. d
9. b
10. True
11. d
12. <a href="www.yahoo.com">Let's visit yahoo's official
website!</a>

*******

 Cascading Style Sheet (CSS):

1. Correct CSS page layout techniques are:

a. Grid
b. Flex Box
c. Positioning
d. All of these

2. Which of the following statement is true about CSS?

a. It is utilized for defining the styles of tags in HTML.
b. It improves Html.
c. It might be used with any XML-based markup language
and is not dependent on HTML.
d. All the statements are true.

87
 A Complete Overview On: Web-Development

3. Which CSS attribute is being used to update an element's

color scheme?

4. properties introduce by CSS are:

a. margin
b. border
c. both a and b
d. none of the above

5. What does the abbreviation CSS mean?

a. cascading support sheet

b. cascading style sheet
c. computer sector system
d. class support scheme

6. Determine the output of the following CSS code:

<!DOCTYPE html>

<html>

<head>

<style>

*{

text-align: left;

color: Red;

</style>

</head>

88
 Ayush Mauryavanshi

<body>

<h1>Example!</h1>

<p>CSS is used for defining the styles of tag in

Html.</p>

<p id="para1">Here it is!</p>

<p>Thank you!!</p>

</body>

</html>

7. for referencing to an external style sheet, which one of the

following is the appropriate notation?

a. <style src = hello.css>

b. <style src = "hello.css" >
c. <link rel="stylesheet" type="text/css" href="hello.css">
d. <stylesheet> hello.css </stylesheet>

8. CSS inline styles should not be used while____________.

a. Creating a website.
b. Inserting color fonts.
c. Inserting animations and graphics.
d. All of the above.

9. In CSS, how do you, group selectors?

10. Large-caps are the appropriate value for the font-variant

property. True/false.

89
 A Complete Overview On: Web-Development

Answers:

1. d
2. d
3. background-color
4. c
5. b
6.
7.
Example!
CSS is used for defining the styles of tags in Html.
Here it is!
Thank you!!

7. c
8. a
9. A comma ( , )should be used to separate every selector.
10. False

*******

 JavaScript:

1. JavaScript can communicate with server to get some data or

information for updating but not the complete html page.
(True/False).

2. Script is embedded between________.

a. HTML
b. MYSQL
c. PHP
d. CSS
90
 Ayush Mauryavanshi

3. Determine the output of the following JavaScript code.

<script type="text/javascript">

a = 5 + "7";

document.write(a);

</script>

4. Determine the output for the following JavaScript code:

int x=12;

if(x<15)

document.write(9);

else

document.write(x);

5. Determine the output for the following JavaScript code:

<script type="text/javascript">

var a="Helloworld";

var x=a.lastIndexOf("r");

document.write(x);

</script>
91
 A Complete Overview On: Web-Development

a. 8
b. 0
c. 7
d. error

Answers:
1. True
2. a
3. 57
4. 9
5. c

*******

 Machine Learning:
1. p∨¬q indicates which clause?

a. hack clause
b. horn clause
c. structural clause
d. system clause

2. What does abbreviation RNN refers to:

a. Recurrent Neural Network

b. Research Nested Network
c. Recurrent Native Network
d. Robotics Neural Network
92
 Ayush Mauryavanshi

3. Choose the correct Machine learning method?

a. Based on human supervision

b. Non-supervised Learning
c. Reward-based learning
d. All of the above

4. A language model is made up of segments that do not

contain___________.

a. SystemUnit
b. structuralunits.
c. dataunits
d. empiricalunits

5. What does the abbreviation SVM means?

a. Scalable vector management.

b. Support vertical management.
c. Support vector machine.
d. SystemVetex Malfunction.

6. Let's say you're working on a 7-class classification task and

use the One-vs-all strategy to develop an SVM model on the
dataset. Now, how do you respond to the following
questionnaire?

i. In this situation, how often time do we need to teach our

SVM model?
a. 7
b. 1
c. 6
d. 3
ii. Assume the data has the same range of classes. Let's say
the SVM takes 20 seconds to train 1 time in one vs, all

93
 A Complete Overview On: Web-Development

configurations. How long would it take to train the one-

vs-all strategy from start to finish?
a. 27
b. 20
c. 720
d. 140

Answers:
1. b
2. a
3. d
4. b
5. c
6. i. a
ii. c

*****

94