CHAPTER 1 : ORGANIZATIONAL STRUCTURE OF INDUSTRY

Organizational structure refers to the way in which a company or organization

is arranged, including its various roles, responsibilities, and the relationships
between different parts of the organization. It defines how activities such as
task allocation, coordination, and supervision are directed toward achieving
organizational goals.

According to Henry H. Albert “The organizational structure is the framework

within management and operating task are performed.”

‣ CHARACTERISTICS OF ORGANIZATIONAL STRUCTURE

Hierarchy : Defines levels of authority and who reports to whom.
Division of Labor : Allocates tasks and responsibilities across the organization.
Departments & Units : Groups similar functions or projects into specific divisions.
Span of Control : Determines the number of subordinates under one manager.
Centralization VS Decentralization : Concentrates or disperses decision-making
authority.

Formalization : Establishes the extent of standardized rules and procedures.

Internshala is an internship and online training platform, based in Gurgaon, India.
Founded by Sarvesh Agrawal, an IIT Madras alumnus, in 2010, the website helps
students find internships with organizations in India.

‣ KEY INFORMATION ABOUT INTERNSHALA

1) Founder :
Sarvesh Agrawal : He is the founder and CEO of Internshala. Sarvesh holds a
degree in Mechanical Engineering from the Indian Institute of Technology (IIT)
Madras. Before founding Internshala, he worked in a corporate job but later
decided to start a platform that would help students gain practical experience
through internships.

2) Internshala Training :
Internshala offers a range of online training programs across various domains,
including programming, data science, digital marketing, design, business
communication, and more. These courses are designed to be beginner-friendly
and often include practical projects to help students build a portfolio.

3) Features :
Self-paced Learning : Students can learn at their own pace.
Certificates : Upon successful completion, students receive a certificate of training.
Live Projects : Many courses include projects that simulate real-world scenarios.
Affordable Pricing : Internshala training programs are priced affordably to make
them accessible to a wide range of students.

4) Growth and Impact :

Since its inception, Internshala has partnered with numerous companies and
organizations to offer internships across a wide array of fields, including
engineering, management, arts, and sciences.

The platform has helped millions of students find internships, enhancing their
employability by providing them with real-world experience.

5) Internship Opportunities :
Internshala provides internships in various domains such as engineering,
marketing, content writing, design, and human resources.

Both virtual and in-office internships are available, making it flexible for students
from different locations.

6) Career Services :
Apart from internships and training, Internshala offers career services like resume
writing, interview preparation, and career counseling to help students in their job
search.
 CHAPTER 2 : INTRODUCTION OF INDUSTRY

Internshala is an online platform that offers internships, online training, and

career services to students. It was founded in 2010 and has since grown to
become one of the leading internship platforms in India. Internshala's main aim
is to bridge the gap between students seeking experience and organizations
looking for young talent. It Provides internship and training in different fields
some them are Web designing, Android App Development, Learning the
programming Languages, Ethical Hacking, Data Science etc. It provides
internship in all the fields of Engineering and Development.

Founded by : Sarvesh Agrawal

(X-IITian from Madras)

Headquarter : Gurgaon, India

Founded in Year : 2010

Website : https://internshala.com
 CHAPTER 3 : SOFTWARE, HARDWARE / TOOLS

‣ INTRODUCTION
Web development is a multifaceted field that requires a combination of software,
hardware, and specialized tools to create and maintain websites and web
applications. Software plays a critical role, encompassing programming
languages like HTML, CSS, and JavaScript for frontend development, as well as
backend languages like Python, PHP, and Node.js that manage server-side
operations. Developers also rely on frameworks and libraries such as React,
Angular, and Django to streamline coding processes and enhance functionality.
On the hardware side, powerful computers and servers are essential for running
development environments, testing, and hosting websites. Local servers like
XAMPP or MAMP simulate server conditions on a developer’s machine, while
cloud servers such as AWS and Google Cloud provide scalable hosting solutions.
Finally, a variety of tools are used throughout the development process, from
IDEs like Visual Studio Code for writing and debugging code, to version control
systems like Git for managing changes, and design tools like Figma for creating
user interfaces. These components collectively enable developers to build
responsive, secure, and efficient web projects.

‣ IN WEB DEVELOPMENT
Software includes programming languages like HTML, CSS, and JavaScript for
frontend design, and backend languages like Python and PHP for server-side
logic. Frameworks (e.g., React, Django) and content management systems
(e.g., WordPress) are also key software tools.

Hardware refers to powerful computers and servers used for development,

testing, and hosting websites. Local development servers (e.g., XAMPP) and cloud
servers (e.g., AWS) are essential for running web applications.

Tools encompass IDEs (e.g., Visual Studio Code) for coding, version control
systems (e.g., Git) for tracking changes, and design tools (e.g., Figma) for creating
user interfaces. These tools streamline development and ensure efficient project
management.
 CHAPTER 4 : BASIC OF WEB PAGE AND HTML

‣ INTRODUCTION TO HTML
HTML (HyperText Markup Language) is the foundational language used to
create the structure and content of web pages. It serves as the backbone of a
website, defining elements such as headings, paragraphs, images, links, and
other multimedia. HTML uses a system of tags and attributes to organize and
format content, allowing browsers to display it correctly to users.

Each HTML document begins with a <!DOCTYPE html> declaration, followed by

a series of nested tags like <html>, <head>, and <body>, which define the
overall structure of the page. The content within these tags is rendered by web
browsers, making it visible and interactive for users. HTML is essential in web
development as it provides the basic framework upon which styles (CSS) and
behaviors (JavaScript) are layered, creating fully functional and visually appealing
websites.

‣ BASIC SYNTAX OF HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title
</head>
<body>
<h1>Main Heading</h1>
<p>This is a paragraph</p>
<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="Description of image">
</body>
</html>

‣ BASIC TAGS EXPLAINED

<!DOCTYPE html> : Declares the document type and version of HTML.
<html> : The root element that encloses the entire HTML document.
<head> : Contains meta-information like the title, character set, and links
to stylesheets.
 <title>: Sets the title of the web page, displayed on the browser tab.
<body>: Contains the main content of the web page, visible to users.
<h1>, <p>, <a>, <img>: Tags used to create headings, paragraphs, links, and
images, respectively.

‣ BASIC HTML TAGS

SR.
TAG DESCRIPTION EXAMPLE
NO.
<h1> Defines headings, with ‘<h1>’
1) to being the larges and ‘<h6>’ <h1>Main Heading</h1>
<h6> the smallest

2) <p> Defines a paragraph <p>This is a paragraph.<p>

3) <a> Defines a hyperlink <a href="https://www.example.com">Link</a>

4) <img> Embeds an image <img src="image.jpg" alt="Description">

<ul><li>Item 1</li>
5) <ul> Defines an unordered list
<li>Item 2</li></ul>

<ol><li>First item</li>
6) <ol> Defines an ordered list
<li>Second item</li></ol>

7) <li> Defines a list item <li>List item</li>

Defines a division or section

8) <div> <div>Content</div>
in a document

Defines a section within a line,

9) <span> <span>Inline text</span>
often used for styling

10) <br> Inserts a line break This is a line break. <br>

Creates a horizontal rule to

11) <hr> <hr>
separate content
 CHAPTER 5 : CSS (CASCADING STYLE SHEETS)

‣ WHAT IS CSS ?
1) CSS describes how HTML elements are to be displayed on screen, paper,
or in other media.

2) CSS saves a lot of work. It can control the layout of multiple web pages all at
once.

3) External style sheets are stored in CSS files.

4) CSS describes how HTML elements should be displayed.

5) CSS Saves a lot of Work! The style definitions are normally saved in external
.css files.

6) With an external style sheet file, we can change the look of an entire website
by changing just one file!

7) CSS can be either external, inline or internal.

‣ DIFFERENT WAYS TO ADD CSS

1) External Styles : Defined in a separate .css file and linked to the HTML
document using the <link> tag. This method is ideal for
maintaining consistent styles across multiple pages.

Example :- <link rel="stylesheet" href="styles.css">

2) Internal Styles : Defined within the <style> tag in the <head> section of the
HTML document. Useful for styles specific to a single page.

Example :-
<style>
body { background-color: lightgray; }
</style>
3) Inline Styles : Applied directly to individual HTML elements using the style
attribute. This method has the highest specificity but is
generally used sparingly.

Example :- <p style="color: red;">This is a red paragraph.</p>

‣ TYPES OF CSS SELECTOR

1) Element / Type Selector

Description : Selects all elements of a specific type (e.g., all ‘<p>’ tags).
Example :
p{
color : red;
background-color : skyblue;
font-size : 16px;
}

2) Id selectors
Description : Selects a single element with a specific ID attribute. IDs should
be unique within a page.
Example :
#abc {
color : red;
}

3) Class Selectors
Description : Selects all elements with a specific class attribute.
Example :
.xyz {
background-color : yellow;
}

4) Child Selectors
Description : Use concept of parent-child hierarchy to select any HTML
element.
Example :
ul > li {
list-style-type : square;
}
 5) Descendent Selectors
Description : Use concept of descendants to select the HTML elements.
Example :
div a {
color : green;
}

6) Attribute Selector
Description : Selects elements with a specific attribute and value.
Example :
input[type=”text”] {
border : 1px solid black;
}
‣ CSS BOX MODEL
The CSS Box Model is a fundamental concept in web design that describes how
elements are structured and spaced on a web page. It consists of several layers
that define the size, padding, border, and margin of an element. Understanding
the box model is crucial for effectively managing layout and spacing in CSS.
‣ COMPONENTS OF THE CSS BOX MODEL
1) Content
Description : The innermost part of the box, where the text or images are
displayed.

Size : Determined by the width and height properties.

2) Padding
Description : Space between the content and the border, providing inner
spacing around the content.

Size : Controlled by the padding property (can be set for all sides
simultaneously or individually for each side: padding-top, padding-
right, padding-bottom, padding-left).

3) Border
Description : Surrounds the padding (if any) and content, and is used to
define a boundary or outline around the element.

Size : Controlled by the border property (thickness, style, and color can be
set using border-width, border-style, and border-color).

4) Margin
Description : Space outside the border, separating the element from other
elements or the edge of its containing element.

Size : Controlled by the margin property ( can be set for all sides
simultaneously or individually for each side : margin-top,
margin-right, margin-bottom, margin-left ).

‣ CSS PROPERTIES RELATED TO THE BOX MODEL

I) Content Size:
width: 200px;
height: 100px;
II) Padding:
padding: 20px; /* Applies 20px padding to all sides */
padding-top: 10px; /* Specific padding for the top */
 III) Border:
border: 2px solid black; /* 2px border, solid style, black color */
border-width: 2px;
border-style: solid;
border-color: black;
IV) Margin:
margin: 30px; /* Applies 30px margin to all sides */
margin-left: 15px; /* Specific margin for the left */

‣ CSS DISPLAY PROPERTY

The CSS display property controls the display behavior of an element and
determines how it interacts with other elements on the web page. It is
fundamental in shaping the layout and visibility of elements. Here are some
common values and their effects.

‣ COMMON DISPLAY PROPERTY VALUES:

1) display : block
Description : The element generates a block-level box, which takes up the
full width available and starts on a new line.

Example : <div>, <h1>, <p>

Uses :
div {
display: block;
}
2) display : inline
Description : The element generates an inline-level box, which only takes
up as much width as necessary and does not force line
breaks. It sits within the flow of text.

Example : <span>, <a>, <strong>

Uses :
span {
display: inline;
}
3) display : inline-block
Description : The element combines characteristics of both block and
inline. It allows setting width and height (like a block
element) but does not force line breaks (like an inline
element).

Example : Useful for layout adjustments within text.

Uses :
.button {
display: inline-block;
width: 100px;
height: 50px;
}

4) display : none
Description : The element is not rendered at all. It effectively removes the
element from the document flow, making it invisible and not
taking up any space.

Example : Often used to hide elements.

Uses :
.hidden {
display: none;
}
5) display : flex
Description : The element becomes a flex container, allowing its children
to be arranged in a flexible and responsive layout using
flexbox properties.

Example : Used for creating complex layouts with flexible items.

Uses :
.container {
display: flex;
}
‣ CSS POSITION PROPERTY
The CSS position property specifies how an element is positioned in the
document. It affects the layout and stacking order of the element. Here’s a
summary of its key values.

‣ COMMON POSITION PROPERTY VALUES

1) position : static (default)
Description : The element is positioned according to the normal flow of the
document. Top, right, bottom, and left properties have no
effect.
Example :
.static-element {
position: static;
top: 10px; /*Top, right, bottom and left
properties have no effect */
}
2) position : relative
Description: The element is positioned relative to its normal position. You
can use top, right, bottom, and left properties to adjust its
position from where it would normally be.
Example :
.relative-box {
position: relative;
top: 20px; /* Moves the element 20px down
from its original position */

left: 10px; /* Moves the element 10px to the

right from its original position */
}
3) position : absolute
Description: The element is positioned relative to the nearest positioned
ancestor (an ancestor with any position other than static). If no
such ancestor exists, it is positioned relative to the initial
 containing block (usually the viewport). Top, right, bottom, and
left properties are used to position the element.
Example :
.absolute-box {
position: absolute;
top: 50px; /* 50px from the top of the nearest
positioned ancestor */

right: 20px; /* 20px from the right edge of the

nearest positioned ancestor */
}
4) position : fixed
Description : The element is positioned relative to the viewport, meaning it
stays in the same place even when the page is scrolled. Top,
right, bottom, and left properties are used to specify the
position.
Example :
.fixed-box {
position: fixed;
bottom: 0; /* Sticks to the bottom of the viewport */
right: 0; /* Sticks to the right side of the viewport */
}

‣ MEDIA QUERIES
CSS Media Queries are a powerful feature used in responsive web design to
apply styles based on the characteristics of the device or viewport, such as its
width, height, or resolution. Media queries help ensure that websites look good
and function well on various devices, from desktops to smartphones.
‣ EXAMPLE OF COMBINED MEDIA QUERIES
/* Default styles */
body {
font-size: 16px;
}
/* Styles for tablets and larger screens */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* Styles for large desktops */
@media (min-width: 1200px) {
body {
font-size: 20px;
}
}
 CHAPTER 6 : BOOTSTRAP AND ITS FEATURES

‣ WHAT IS BOOTSTRAP?
Bootstrap is a popular open-source front-end framework designed to help
developers build responsive and visually appealing web applications quickly
and efficiently. It provides a collection of CSS and JavaScript components,
pre-designed layouts, and utility classes that streamline the development
process.

‣ KEY FEATURES OF BOOTSTRAP:

1) Responsive Design
Description : Bootstrap includes a responsive grid system and media queries
that ensure your website adapts to various screen sizes and
devices, from mobile phones to desktops.
Example :
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>

2) Pre-Built Components
Description : Bootstrap offers a wide range of ready-to-use components
such as buttons, forms, navbars, modals, and carousels.

Example : <button type="button" class="btn btn-primary">

Primary Button</button>

3) Grid System
Description : The framework provides a flexible 12-column grid system
for creating complex layouts with ease. It supports multiple
breakpoints for responsive design.
 Example :
<div class="container">
<div class="row">
<div class="col-sm-4">1 of 3</div>
<div class="col-sm-4">2 of 3</div>
<div class="col-sm-4">3 of 3</div>
</div>
</div>

4) Consistent Styling
Description : Bootstrap ensures a consistent look and feel across different
browsers and devices by providing a standard set of styles
and design patterns.

5) Documentation
Description : Bootstrap comes with comprehensive documentation that
includes examples and usage guidelines for all its
components and features.

‣ BOOTSTRAP COMPONENT
Bootstrap offers a wide range of pre-built components that help streamline
the development process by providing ready-to-use elements with consistent
styling and behavior. Here’s an overview of some key Bootstrap components.

1) Buttons
In Bootstrap, buttons are a fundamental component used to trigger actions
or navigate through different parts of a website. Bootstrap provides a variety
of button styles and functionalities that are easy to implement and
customize.
I) Button Styles
Primary : Highlights the most important action.
Example : <button type="button" class="btn btn-primary">
Primary</button>

Secondary : For less prominent actions.

Example : <button type="button" class="btn btn-secondary">
Secondary</button>

Success : Indicates a successful or positive action.

Example : <button type="button" class="btn btn-success">
Success</button>

Danger : Indicates a dangerous or potentially negative action.

Example : <button type="button" class="btn btn-danger">
Danger</button>

II) Button Sizes

Large : bigger buttons for more emphasis.
Example : <button type="button" class="btn btn-primary btn-lg">
Large Button</button>

Small : Smaller buttons for more compact interfaces.

Example : <button type="button" class="btn btn-primary btn-sm">
Small Button</button>

III) Button States

Active : Indicates that the button is active.
Example : <button type="button" class="btn btn-primary active">
Active</button>

Disabled : Indicates that the button is not interact.

Example : <button type="button" class="btn btn-primary" disabled>

Disabled</button>
2) Navbar
The Bootstrap Navbar is a responsive navigation bar that provides an easy way
to create navigation menus and links with consistent styling. It adapts to various
screen sizes and offers features like dropdowns and collapsible elements.

Basic Structure
A typical Bootstrap Navbar consists of several key components:
Navbar : The main container for the navigation bar.
Navbar Brand : Displays the brand name or logo.
Navbar Links : Provides navigation options.
Navbar Toggler : For toggling the navigation menu on smaller screens.
Navbar Collapse : Contains the collapsible navigation items.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Simple Bootstrap Navbar</title>

<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Brand</a>

<button class="navbar-toggler" type="button" data-toggle="collapse"

data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

</button>
 <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">

(current)</span></a>
</li>
<li class="nav-item">

<a class="nav-link" href="#">Features</a>

</li>
<li class="nav-item">

<a class="nav-link" href="#">Pricing</a>

</li>
</ul>

</div>

</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">

</script>
</body>

</html>

‣ Explanation
Navbar Container : <nav class="navbar navbar-expand-lg navbar-light bg-light">
creates the navigation bar with a light background.

Navbar Brand : <a class="navbar-brand" href="#">Brand</a>

displays the brand name or logo.

Navbar Toggler : <button class="navbar-toggler">

provides a button for toggling the navigation on smaller screens.
 Navbar Collapse : <div class="collapse navbar-collapse" id="navbarNav">
contains the collapsible navigation links.

Navbar Links : <ul class="navbar-nav">

holds the navigation items.
3) Modal
A Bootstrap Modal is a component that allows you to create dialog boxes or
pop-up windows. Modals are useful for displaying additional information,
forms, or interactive content without navigating away from the current page.

‣ Key Features
Header : Contains the title and optionally a close button.
Body : Holds the main content of the modal.
Footer : Contains action buttons, such as "Save" or "Close."
‣ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invalid Password Modal</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Login Form : Contains an input field for the password and a submit button -->
<form id="loginForm">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- Invalid Password Modal: Appears when the password in incorrect -->
<div class="modal fade" id="invalidPasswordModal" tabindex="-1"
role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Invalid Password</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
The password you entered is incorrect. Please try again.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
<!—JavaScript: Handles form submission and displays the modal if the
password is incorrect. -->
<script>
document.getElementById('loginForm').addEventListener('submit', function(event)
{event.preventDefault();
var password = document.getElementById('password').value;
if (password !== 'correctpassword')
{
$('#invalidPasswordModal').modal('show');
}
});
</script>
</body>
</html>
4) Carousel
A Bootstrap Carousel is a component that allows you to create a slideshow of
items, such as images or text, that automatically or manually cycle through in a
container. It's useful for showcasing multiple pieces of content in a small space.

‣ Key Features
Slides : The content items that are shown in the carousel.
Indicators : Small dots or thumbnails that show which slide is currently
visible and allow users to navigate directly to a specific slide.
Controls : Buttons for navigating to the next or previous slides.
Automatic Cycling : Optionally, the carousel can automatically transition
between slides.
‣ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Carousel</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!—Carousel Container-->
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<!—Slides-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block
w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block
w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block
w-100" alt="Slide 3">
</div> </div>
<!—Controls-->
<a class="carousel-control-prev" href="#carouselExample" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</body>
</html>
 Chapter 7 : JavaScript

‣ WHAT IS JAVASCRIPT ?

JavaScript is a high-level, interpreted programming language primarily used

to create dynamic and interactive content on websites. It runs in the browser,
allowing developers to enhance user experiences by adding functionality
such as:

Interactive Forms : Validating and submitting form data without reloading

the page.

Dynamic Content : Changing the content of a web page in response to

user actions.

Animations : Creating visual effects and animations on web pages.

Asynchronous Operations : Handling tasks such as fetching data from servers

without blocking the user interface.

‣ KEY FEATURES

Event-Driven : Executes code in response to user interactions or other events.

Object-Oriented : Supports object-oriented programming concepts, allowing

for the creation and manipulation of objects.

Functional Programming : Supports functions as first-class citizens, enabling

functional programming techniques.

Versatile : Can be used both on the client side (in web browsers) and server side
(using environments like Node.js).

‣ BASIC EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
</head>
 <body>
<button onclick="showAlert()">Click Me</button>
<script>
function showAlert() {
alert('Hello, World!');
}
</script>
</body>
</html>

‣ EXPLANATION

HTML : Defines a button element.

JavaScript : Defines a function showAlert that displays an alert box with a
message. This function is executed when the button is clicked.
JavaScript is essential for modern web development, enabling a
wide range of interactive features and enhancing the overall user
experience.

‣ VARIABLES AND OPERATORS

I) Variables
Variables are used to store data values. You can declare variables using the
var, let, or const keywords:

var : Older syntax for variable declaration. It has function scope and can be re-
declared and updated.

let : Modern syntax for variable declaration with block scope. It can be updated
but not re-declared within the same block.

const : Declares a constant that cannot be updated or re-declared. It also has

block scope.
‣ Example
let age = 25; // Variable declared with 'let'
const name = 'Alice'; // Constant declared with 'const'
age = 26; // Valid operation, 'age' can be updated
// name = 'Bob'; // Invalid operation, 'name' cannot be updated

II) Operators
Operators are used to perform operations on variables and values. Here are
some common types :

1) Arithmetic Operators : Perform mathematical operations.

I) Addition (+) : Adds two values.

Example : let sum = 5 + 3; //sum is 8

II) Subtraction (-) : Subtracts one value from another.

Example : let difference = 5 – 3; // difference is 2

III) Multiplication (*) : Multiplies two values.

Example : let product = 5 * 3; //product is 15

IV) Division (/) : Divides one value by another.

Example : let quotient = 15/3; //quotient is 5

V) Modulus (%) : Returns the remainder of division.

Example : let remainder = 15 % 4; //remainder is 3

2) Assignment Operators : Assign values to variables.

I) Simple Assignment ( = ) : Assigns a value.

Example : let x = 10;

II) Addition Assignment (+=) : Adds the assigns a value.

Example : x +=5; //equivalent to x = x + 5; x is now 15

III) Subtraction Assignment (-=) : Subtracts and assigns a value.

Example : x -= 5; //equivalent to x = x -5; x is now 10
3) Comparison Operators : Compare two values and return a ‘true’ or ‘false’ .
I) Equal to (==) : Checks if two values are equal.
Example : isEqual = (5 == 5); //true;

II) Strict Equal to (===) : Checks if two values are equal and of the same type.
Example : let isStrictEqual = (5 === ‘5’); //false

III) Not Equal to (!=) : Checks if two values are not equal.
Example : let isNotEqual = (5 != 3); //true

4) Logical Operators : Perform logical operations.

I) AND (&&) : Returns ‘true’ if both operands are ‘true’.

Example : let andResult = (5 > 3 && 2 < 4); //true

II) OR (||) : Returns ‘true’ if at least one operand is ‘true’.

Example : let orResult = (5 > 3 || 2 > 4); // true

III) NOT (!) : Returns ‘true’ if the operand is ‘false’.

Example : let notResult = !(5 > 3); //false

5) Increment and Decrement Operators : Increase or decrease a variable’s

value by 1.
I) Increment (++) : increases the value by 1.
Example : let count = 5;
count++; //count is not 6

II) Decrement (--) : Decreases the value by 1.

Example : Let count = 5;
count--; //count is not 4

‣ CONDITIONAL STATEMENTS AND LOOPS

1) Conditional Statements
Conditional statements execute different blocks of code based on specified
conditions. The most common types are if, else if, else, and switch.

I) if Statement
Executes a block of code if its condition is true.
Example :
let age = 18;
if (age >= 18) {
console.log('You are an adult.');
}

II) else if Statement

Allows for multiple conditions to be checked in sequence.
Example :
let temperature = 25;
if (temperature < 0) {
console.log('It is freezing.');
} else if (temperature < 20) {
console.log('It is cold.');
} else {
console.log('It is warm.');
}

III) else Statement

Executes a block of code if none of the preceding conditions are true.
Example :
let score = 70;
if (score >= 90) {
console.log('Excellent');
} else if (score >= 70) {
console.log('Good');
} else {
console.log('Needs Improvement');
}
IV) switch Statement
Evaluates an expression and executes code blocks based on matching cases.
Example :
let day = 2;
switch (day) {
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
case 3:
console.log('Wednesday');
break;
default:
console.log('Other day');
}
2) Loops
Loops are used to repeat a block of code multiple times. The most common
types are for, while, and do...while.
I) for Loop
Repeats code a specific number of times, based on a counter.

Example :
for (let i = 0; i < 5; i++) {
console.log(i);
}
// Output: 0, 1, 2, 3, 4
II) while Loop
Repeats code as long as its condition remains true.
Example :
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
// Output: 0, 1, 2, 3, 4
III) do...while Loop
Similar to while, but guarantees that the code block is executed at least once.
Example :
let count = 0;
do {
console.log(count);
count++;
} while (count < 5);
// Output: 0, 1, 2, 3, 4

‣ FUNCTIONS
In JavaScript, functions are blocks of code designed to perform a specific task.
They are one of the most fundamental building blocks in JavaScript, allowing
you to write reusable and organized code.

‣ Key Concepts of Functions in JavaScript

1) Function Declaration
A function can be declared using the function keyword followed by a name,
a list of parameters in parentheses, and a block of code in curly braces.
Example :
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet('Alice'); // Output: Hello, Alice!
2) Function Expression
A function can also be defined as an expression and assigned to a variable.
This is called a function expression.
Example :
const add = function(a, b) {
return a + b;
};
console.log(add(5, 3)); // Output: 8

3) Arrow Functions
Arrow functions provide a more concise syntax for writing functions. They are
always anonymous and are often used in shorter functions.
Example :
const multiply = (a, b) => a * b;
console.log(multiply(4, 2)); // Output: 8

4) Default Parameters
You can assign default values to function parameters, which will be used if no
arguments are provided when the function is called.
Example :
function greet(name = 'Guest') {
console.log('Hello, ' + name + '!');
}
greet(); // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!

5) Anonymous Functions
Functions that are declared without a name. They are often used as arguments
to other functions or assigned to variables.
Example :
setTimeout(function() {
console.log('This message is delayed.');
}, 2000);
6) Parameters and Arguments
Parameters : Variables listed as part of the function's definition.
Arguments : Values passed to the function when it is invoked.
Example :
function subtract(a, b) { // 'a' and 'b' are parameters
return a - b;
}
console.log(subtract(10, 3)); // Output: 7 (10 and 3 are arguments)

7) Return Statement
The return statement stops the execution of the function and returns a value
from that function.
Example :
function divide(a, b) {
return a / b;
}
let result = divide(10, 2);
console.log(result); // Output: 5
‣ ARRAYS
In JavaScript, an array is a data structure that allows you to store multiple values
in a single variable. Arrays are one of the most commonly used data structures
in JavaScript because they enable you to work with a list of items in an ordered
fashion.

‣ KEY CONCEPTS OF ARRAYS IN JAVASCRIPT

1) Creating an Array
Arrays can be created using square brackets [] or the Array constructor.
Example :
let fruits = ['Apple', 'Banana', 'Cherry']; // Array literal
let numbers = new Array(1, 2, 3, 4); // Array constructor

2) Accessing Array Elements

Array elements are accessed using their index, which starts at 0.
Example :
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry
3) Modifying Array Elements
You can modify an array element by accessing its index and assigning a new value.
Example :
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits[1] = 'Blueberry';
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']
4) Array Length
The length property returns the number of elements in an array.
Example :
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.length); // Output: 3
5) Adding Elements to an Array
You can add elements to an array using methods like push, unshift, or directly
by setting an index.
push() : Adds an element to the end of the array.
unshift() : Adds an element to the beginning of the array.
Example:
let fruits = ['Apple', 'Banana'];
fruits.push('Cherry'); // Adds 'Cherry' to the end
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
fruits.unshift('Mango'); // Adds 'Mango' to the beginning
console.log(fruits); // Output: ['Mango', 'Apple', 'Banana', 'Cherry']
6) Removing Elements from an Array
You can remove elements using methods like pop, shift, or splice.
pop() : Removes the last element from the array.
shift() : Removes the first element from the array.
splice() : Removes elements from a specific index.
Example:
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.pop(); // Removes 'Cherry'
 console.log(fruits); // Output: ['Apple', 'Banana']
fruits.shift(); // Removes 'Apple'
console.log(fruits); // Output: ['Banana']
fruits.splice(0, 1); // Removes 1 element at index 0
console.log(fruits); // Output: []

7) Looping Through an Array

You can loop through array elements using a for loop, forEach, or map.
Example :
let fruits = ['Apple', 'Banana', 'Cherry'];
// Using for loop
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Using forEach
fruits.forEach(function(fruit) {
console.log(fruit);
});
// Using map (creates a new array)
let upperCaseFruits = fruits.map(function(fruit) {
return fruit.toUpperCase();
});
console.log(upperCaseFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']
8) Multi-Dimensional Arrays
Arrays can contain other arrays, making them multi-dimensional.
Example :
let matrix = [ [1, 2, 3] , [4, 5, 6] , [7, 8, 9] ];
console.log(matrix[0][1]); // Output: 2
console.log(matrix[2][0]); // Output: 7
9) Common Array Methods
concat() : Merges two or more arrays.
slice() : Returns a shallow copy of a portion of an array.
join() : Joins all elements of an array into a string.
indexOf() : Returns the first index at which a given element can be found.
reverse() : Reverses the order of the elements in an array.
Example :
let numbers = [1, 2, 3, 4, 5];
let moreNumbers = numbers.concat([6, 7, 8]);

console.log(moreNumbers); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

let subArray = numbers.slice(1, 3);

console.log(subArray); // Output: [2, 3]

let joinedString = numbers.join('-');

console.log(joinedString); // Output: '1-2-3-4-5'

let index = numbers.indexOf(4);

console.log(index); // Output: 3

numbers.reverse();
console.log(numbers); // Output: [5, 4, 3, 2, 1]
‣ OBJECTS
In JavaScript, objects are one of the most important and versatile data types. An
object is a collection of key-value pairs, where each key (or property) is a string
(or symbol) and each value can be any data type, including another object, array,
function, or primitive value (like numbers or strings). Objects are fundamental in
JavaScript and are used to store and organize data.

‣ KEY CONCEPTS OF OBJECTS IN JAVASCRIPT

1) Creating an Object
Objects can be created using object literals or the Object constructor.
‣ OBJECT LITERAL SYNTAX
let person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
isEmployed: true
};
‣ OBJECT CONSTRUCTOR SYNTAX
let person = new Object();
person.firstName = 'John';
person.lastName = 'Doe';
person.age = 30;
person.isEmployed = true;

2) Accessing Object Properties

Properties of an object can be accessed using dot notation or bracket notation.

I) Dot Notation
Example : console.log(person.firstName); //output: John

II) Bracket Notation

Example : console.log(person[‘lastName’]); //output: Doe

3) Modifying Object Properties

You can add, modify, or delete properties of an object at any time.

Example :
person.age = 31; // Modify existing property
person.gender = 'male'; // Add new property
delete person.isEmployed; // Delete a property
console.log(person); // Output: {firstName: 'John', lastName:

'Doe', age: 31, gender: 'male'}

4) Methods in Objects
A method is a function stored as a property of an object.
Example :
let person = {
firstName: 'John',
lastName: 'Doe',
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
console.log(person.fullName()); // Output: John Doe
The ‘this’ keyword in a method refers to the object the method is called on.

‣ DOM (DOCUMENT OBJECT MODEL)

The Document Object Model (DOM) in JavaScript is a programming interface
that represents the structure of an HTML or XML document as a tree of objects.
It allows you to manipulate and interact with the document's content, structure,
and style dynamically using JavaScript.

‣ KEY CONCEPTS OF DOM IN JAVASCRIPT

1) What is the DOM?
The DOM represents an HTML document as a tree of nodes. Each element,
attribute, and piece of text in the HTML document is a node in this tree. The
DOM provides a way to interact with these nodes, allowing you to change the
document's structure, content, and style on the fly.

Example :
<html>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
In the DOM, this would be represented as a tree structure with the <html>,
<body>, <h1>, and <p> elements as nodes.
2) Accessing DOM Elements
You can access elements in the DOM using various methods provided by the
document object.

‣ COMMON METHODS :
getElementById(id) : Selects an element by its id.
getElementsByClassName(className) : Selects all elements with a specific class.
getElementsByTagName(tagName) : Selects all elements with a specific tag name.
querySelector(selector) : Selects the first element that matches a CSS selector.
querySelectorAll(selector) : Selects all elements that match a CSS selector.

Example :
// Access an element by ID
let header = document.getElementById('main-header');

// Access elements by class name

let paragraphs = document.getElementsByClassName('text');

// Access elements by tag name

let links = document.getElementsByTagName('a');

// Access elements using query selectors

let firstParagraph = document.querySelector('.text');

let allParagraphs = document.querySelectorAll('.text');

3) Modifying DOM Elements

Once you have a reference to a DOM element, you can modify its content,
attributes, and styles.

‣ COMMON PROPERTIES AND METHODS

innerHTML : Sets or gets the HTML content inside an element.
textContent : Sets or gets the text content inside an element.
setAttribute(name, value) : Sets the value of an attribute on an element.
getAttribute(name) : Gets the value of an attribute.
style : Allows you to set inline CSS styles.
Example :
let header = document.getElementById('main-header');
header.innerHTML = 'Welcome to My Website'; // Modify content
header.setAttribute('class', 'header-class'); // Add a class attribute
header.style.color = 'blue'; // Change text color

4) Event Handling
The DOM allows you to interact with user actions by listening to events like
clicks, keypresses, and form submissions.

‣ Common Methods :
addEventListener(event, function) : Adds an event listener to an element.
removeEventListener(event, function) : Removes an event listener from an
element.
Example :
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
 Chapter 8 : Final Project

After learning many of the things in web development area, it’s time to build
something upon the learnt things to show our skills and learn them more. So,
we made a project using the things we learnt so far. We have used following
technologies in our project:
• HTML
• CSS
• JavaScript PG LIFE WEB APPLICATION
1) Property_details.html

2) Property_list.html
AGNIHOTRI SCHOOL OF TECHNOLOGY, WARDHA.
DEPARTMENT OF COMPUTER ENGINEERING

REPORT ON
INDUSTRIAL TRAINING
COMPLETED SUCCESSFULLY
AT
" INTERNSHALA PVT. LTD. "
GUIDED BY
ASHISH GAWALI SIR
GUNJAN BHAGWATKAR MADAM
MADHURI GHONGADE MADAM
RUPALI KALOKAR MADAM
FULFILLED BY
CHINMAYEE S. DEOTARE
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

CERTIFICATE OF COMPLETION INDUSTRIAL TRAINING

THIS IS TO CERTIFY THAT MISS. CHINMAYEE S. DEOTARE HAS
SUCCESSFULLY COMPLETED INDUSTRIAL TRAINING AT
“INTERNSHALA PVT.LTD.” FROM 06/062024 TO 06/08/2024 FOR
PARTIAL FULFILLMENT TOWARDS COMPLETION OF DIPLOMA IN
COMPUTER ENGINEERING FROM AGNIHOTRI SCHOOL OF
TECHNOLOGY , WARDHA.
SIGNATURE SIGNATURE
HEAD OF THE DEPARTMENT COURSE TEACHER

ACKNOWLEDGEMENT
TO BECOME A PROFESSIONAL IN COMPUTER ENGINEERING,
INDUSTRIAL TRAINING IS THE FOUNDATION FOR EACH
UNDERGRADUATE STUDENT. IT HELPS STUDENTS TO IMPROVE
THEIR PRACTICAL SKILLS RELATED TO INTERPERSONAL, PROBLEMS
SOLVING, RESEARCH AND REPORTING AS WELL AS SOFT SKILLS.
ALSO IT HELPS THE STUDENTS GET EXPOSURE TO THE INDUSTRY,
APPLY THE GAINED KNOWLEDGE THROUGHOUT THE ACADEMIC
PROGRAM AND LEARN NEW UPDATED TECHNOLOGIES. IN
ADDITION, IT HELPS STUDENT'S CAREER DEVELOPMENT AND TO
PREPARE FOR EMPLOYMENT AFTER GRADUATION, BY ENGAGING
IN PERSONAL AND PROFESSIONAL DEVELOPMENT PLANNING. I
WOULD LIKE TO THANKFUL THE ADITYA SOOD SIR AND ANUJ
KALBALIA SIR FROM INTERNSHALA PVT. LTD. THE SUPERVISION
AND SUPPORT THAT HE GAVE TRULY HELP THE PROGRESSION AND
SMOOTHNESS OF THE INTERNSHIP PROGRAM BESIDES, THIS
INTERNSHIP PROGRAM MAKES ME REALIZED THAT THE VALUE OF
WORKING TOGETHER AS A TEAM AND AS A NEW EXPERIENCE IN
WORKING ENVIRONMENT. NOT FORGET, GREAT APPRECIATION TO
OTHER DEPARTMENT STAFF THAT HELPS ME FROM TIME TO TIME
DURING OUR INTERNSHIP. THE WHOLE PROGRAM REALLY
BROUGHT US TOGETHER TO APPRECIATE THE TRUE VALUE OF
FRIENDSHIP AND RESPECT OF EACH OTHER.
CONTENT PAGE

SR. NAME OF CHAPTERS

NO. ( CHAPTER 1 TO 8)

1) ORGANIZATIONAL STRUCTURE OF INDUSTRY

2) INTRODUCTION OF INDUSTRY

3) SOFTWARE, HARDWARE / TOOLS

4) BASIC OF WEB PAGE AND HTML

5) CSS (CASCADING STYLE SHEETS)

6) BOOTSTRAP AND ITS FEATURES

7) JAVASCRIPT

8) FINAL PROJECT