MAHARASHTRA STATE BOARD OF TECHNICAL

EDUCATION, MUMBAI MAHARASHTRA (INDIA)

Implant Training Report Submitted in partial fulfillment
For the award of the
Diploma in Computer Engineering
Submitted by
ENROLLMENT NAME OF STUDENT EXAM SEAT NO
NO.
2015520019 Shraddha Krishna Yewale

Mode of Implant
Training Offline Training

Shri Ambabai Talim Sanstha’s iGAP Technologies Private

Sanjay Bhokare Group of Institutes Limited ,Shree Apartment, 2nd
Floor, 4th Ln, near C'LAI
Faculty of Polytechnic, Miraj – 416410
World, Rajarampuri,
www.sbgimiraj.org
Kolhapur, Maharashtra
416008

Mr. C. P. Divate
Mr. Abhijit P. Gatade Mr.
Mr. C. P. Divate. Abhijit P. Gatade.

DEPARTMENT OF COMPUTER ENGINEERING

ACADEMIC YEAR

1
2022-2023

2
CERTIFICATE

3
 DECLARATION

I hereby declare that the discussion entitled in iGAP

Technologies Pvt. Ltd. being submitted by us towards the partial fulfillment of

the Diploma in Engineering, in the Department of Computer Engineering

is implant training work carried by me under the supervision of Mr. C. P.
Divate, and Industry resource person Co-Guide Mr. Abhijit Prakash Gatade.
Trainer and have not been submitted anywhere else.

We will be solely responsible if any kind of plagiarism is found.

Enrollment No Name Of Student Signature

2015520019 Shraddha Krishna Yewale

Place: ATS, SBGI, Miraj

Date: 16/08/2022

4
 Shri Ambabai Talim Sanstha’s
Sanjay Bhokare Group Of Institutes
Faculty of Polytechnic, Miraj – 416410
Approved by AICTE, New Delhi, DTE
Mumbai and Affiliated to MSBTE Mumbai

Certificate of Completion of Industrial Training

This is to certify that Ms. Shraddha Krishna Yewale with Enrollment

No.2015520019 has successfully completed Industrial Training in iGAP Technologies
Pvt. Ltd. from 04 July 2022 to 13 August 2022 for partial fulfilment towards completion
of Diploma in Computer Engineering from ATS, Sanjay Bhokare Group Of Institutes,
Miraj Institute code 1552.
The matter presented in this Implant Training report is an authentic record of our
student work carried out during training period, under the supervision of Mr. C .P. Divate
Faculty, Head of Department Mr. C. P. Divate and under the monitoring of Mr. Abhijit
Prakash Gatade. of Computer Engineering Department. Also it has not been submitted
by us for the award of any other diploma elsewhere.

Mr. C. P. Divate Mr. A.P. Gatade. Mr.S.M.Momin

Training Mr. C. P. Director of iGap .Head Of Department
Divate Technologies Pvt Ltd Department Of Computer
Department Of Computer Engineering
Engineering Faculty Of Polytechnic, Miraj
Faculty Of Polytechnic, Miraj

External-Examinar Dean Director

Department Of Computer Sanjay Bhokare Group Of Sanjay Bhokare Group Of
Engineering Institutes Institutes Miraj
Appointed By MSBTE, Faculty Of Polytechnic,
Mumbai Miraj

Place: ATS SBGI, Miraj Date:16/08/2022

5
 ACKNOWLEDGEMENT

We like to share our sincere gratitude to all those who help us in completion of
this Implant Training. During the work we faced many challenges due to our lack of
knowledge and experience but these people help us to get over from all the difficulties
and in final compilation of our idea to a shaped sculpture.

I am indeed grateful to Head of Department of Computer Engineering

Mr.S.M.Momin.for being an effective source of inspiration.

We would like to thank Mr. C. P. Divate sir as well as Mr. Abhijit Gatade sir for
his governance and guidance, because of which our whole team was able to learn the
minute aspects of a Computer Engineering.

We would also like to show our gratitude to our department faculties Ms. S. A.
Bhandare, Ms. S.M. Patil, Ms.N.R.Bhokare. of our Computer Engineering department for
their continuous help and monitoring during the work. I am thankful to supporting staff of
our Department as well as iGap Technologies Pvt Ltd, for their help and support towards
my training.

In the last we would like to thank the management of ATS, Sanjay Bhokare
Group Of Institutes, Miraj for providing us such an opportunity to learn from these
experiences.

We are also thankful to our whole class and most of all to our parents who have
inspired us to face all the challenges and win all the hurdles in life.

Thank you All.

Enrollment No Name Of Student

2015520019 Shraddha Krishna Yewale

Place: ATS, SBGI, Miraj Date:16/08/2022

6
 ABSTRACT
This is a report on in-plant training carried out at iGap Technologies Pvt
Ltd during 04-07-2022 to 16-08-2022. iGap Technologies Pvt Ltd is an industry and
based in Kolhapur, India. Founded by Abhijit Gatade & Dilip Prakash Gatade, in 08
September 2021.

iGap Technologies Private Limited is a Private incorporated on 08

September 2021. It is classified as Non-govt company and is registered at Registrar of
Companies, Pune. Its authorized share capital is Rs. 100,000 and its paid up capital is
Rs. 100,000. It is involved in Other computer related activities [for example
maintenance of websites of other firms/ creation of multimedia presentations for other
firms etc.

iGap Technologies Private Limited's Annual General Meeting (AGM)

was last held on N/A and as per records from Ministry of Corporate Affairs (MCA), its
balance sheet was last fill on N/A.

7
 Table of Contents
Contents Page No
Tittle Page 1
Certificate 2
Declaration 3
Company completion certificate 4
Acknowledgement 5
Abstract 6
Index 7
Chapter 1 9
INTRODUCTION OF INPLANT TRAINING 9-12

1.1 Need 10
1.2 Scope 10
1.3 Objectives 11
1.4 Outcomes of Industrial Training 11
1.5 Limitation 12

Chapter 2 13
PROFILE OF THE COMPANY 13-17

2.1 Company Overview

2.2 Introduction
2.3The Objectives of Company
2.4 History
2.5 Vision
2.6 Mission
2.7 Organization Structure

Chapter 3 18
Introduction of HTML 18-24
3.1 What is HTML
3.2 Installation of visual studio.

8
 3.3 History of HTML
3.4 HTML layouts, tags, elements.
Chapter 4 25
Introduction to CSS 25-29
4.1 What is CSS
4.2 Use Of CSS
4.3 Types of CSS
4.4 Selectors And their types

Chapter 5 30
Introduction to Bootstrap 30-34
5.1 Introduction to Bootstrap
5.2 Installation of Bootstrap
5.3 Container, jumbotron, Grid systems, Typography.
5.4 Dropdown lists, alters, flexbox, image view, alignment.
5.5 Pagination and Progress Bar.
Chapter 6 35
Introduction to Angular 35-37
6.1 Introduction to angular
6.2 Angular installation
6.3 Angular CLI
6.4 Angular directive ,component.
6.5 Angular routing ,data binding, module.
APPENDICES 38
A. Weekly report 39-53
B. Conclusion 54

9
 List of Figures

Chapter Page No.

Chapter 3 19
Introduction of HTML 19-25
21

Fig. 3.1. Basic Html

Fig. 3.2. Save the HTML Page
Fig. 3.3.View the HTML Page in Your Browser
Fig. 3.4.HTML Layouts
Fig. 3.5.Elements of HTML
Fig. 3.6.HTML Form

Chapter 5 31
Introduction to Bootstrap 31-35
Fig. 5.1 Bootstrap 5 Grid System

10
 CHAPTER-1
INTRODUCTION
OF INPLANT
TRAINING

11
 Engineering is a great career path to consider! As an engineer, you serve the public in
creative and challenging ways, hopefully giving you the job satisfaction you desire. Position
titles such as Maintenance Engineer, Communications Engineer, Nuclear Engineer and
Environmental Engineer are only a handful of the career choices available to you as an
engineer.
There are job descriptions out there that use the word “engineer,” yet they fail to
embody the true definition of an engineer. An engineer is someone who uses the
application of scientific principles to practical ends in the construction, design and
operation of economical and efficient structures, equipment and systems. While many of
these jobs are still very important, they do not necessarily require a 4-year degree from an
engineering college.
This implant training is a stepping stones, which will groom me for my future in the
industrial world.
1.1 Need:
In-plant training provides the industrial exposure to the students how to face the
industry once they put out from the campus. The practical knowledge is essential for all
students to get success in their job. Once the student steps in to industry they should be
ready to face competitive world with knowledge. The core competence area extending its
boundary daily as technology grows. Students needs to update day to day stub from
various innovative technologies. Job opportunity for students who has certificate on in-
plant training is high compare to non-train students, because the company will know that
student’s knowledge will be busted by in-plant training.
1.2 Scope:
One objective of in-plant training is to help the student bridge the gap between
academic theory and practical application and allow you the opportunity to explore a
career in any field. To obtain knowledge of the organization structure and operations. To
observe the conditions of the different departments and the opportunities those are
available. In- plant training provides opportunity to interact with people who have the
inside track and chance to build network within industry. The main reason behind making
a or researching this project is to know how the management works out to their employees
and their main motto is that-

12
  Achieve goals
 Gain a positive perspective
 Create the power to change
 Build self-esteem and capability
 Manage their own development
In Plant Training will provide an industrial exposure to the students as well as to
develop their career in the high tech industrial requirements. Reputed companies are
providing inplant training to Students. After the successful completion of studies students
has to face this competitive world with this knowledge to face many problems and to find
the right solutions which is to be solved in the minimum duration of time. The inplant
training is get totally different from the class environments.
1.3 Objectives:
 To get industry exposure.
 To work under factory discipline.
 To understand the psychology of the workers, their habits, attitudes and approach to
problems along with the practices followed either at factory or at site.
 To get familiarized with various Design, Manufacturing, Analysis, Automation and
Purchase, 5S, Six Sigma, TPM, Materials, Machines, Processes, Products and their
applications along with relevant aspects of Industry management.
 To understand the scope, functions and job responsibilities in various departments of
an organization.
 To provide comprehensive learning platform to students where they can enhance their
employ ability skills and become job ready along with real corporate exposure.
 To enhance students’ knowledge in one particular technology.
 To Increase self-confidence of students and helps in finding their own proficiency
 To cultivate student’s leadership ability and responsibility to perform or execute the
given task.
 To provide learners hands on practice within a real job situation.
1.4 Outcomes of Industrial Training
 Capability to acquire and apply fundamental principles of engineering.
 Become master in one’s specialized technology

13
  Become updated with all the latest changes in technological world.
 Ability to communicate efficiently.
 Knack to be a multi-skilled engineer with good technical knowledge, management,
leadership and entrepreneurship skills.
 Ability to identify, formulate and model problems and find engineering solution
based on a systems approach.
 Capability and enthusiasm for self-improvement through continuous professional
development and life-long learning
 Awareness of the social, cultural, global and environmental responsibility as an
engineer.
1.5 Limitation:
 Generally the organization does not allow outside to conduct any study or research
work in the organization. Therefore, get the project done in the organization was very
difficult.
 The time span for the project was very short which was of two months, which itself
act as constraint, moreover, studying the guidelines and applied it practically with in
such a short time span was a task of great pressure.
 It won’t pay much: Most companies hire interns on the cheap. Sometimes they don’t
pay anything at all. If you’re used to earning a paycheck or if you have mounting
student loan bills, an internship could create a financial burden.
 You may get the grunt work: Some employers or managers take advantage of
interns and give them mindless work that doesn’t build new skills. Interns can be
viewed as temporary labor, which isn’t how you want to be seen.
 You could get labeled: Sure you have a college degree. But with the title of “intern,”
people will think you’re still a student. This can be patronizing, and you may not gain
the respect you want. If you focus on hard work and high effort, this can be
overcome.
 The hours can vary: Internships may not be designed around normal business hours.
This can create problems if you like a consistent schedule. And interns are often
asked to do the late-night work to help the team.

14
 CHAPTER-2
PROFILE OF THE
COMPANY

15
2.1 Company Overview:
I Gap Technologies Private Limited is a Private incorporated on 08 September 2021.
It is classified as Non-govt company and is registered at Registrar of Companies, Pune. Its
authorized share capital is Rs. 100,000 and its paid up capital is Rs. 100,000. It is inolved in
Other computer related activities [for example maintenance of websites of other firms/
creation of multimedia presentations for other firms etc. multimedia presentations for other
firms etc.
I Gap Technologies Private Limited's Annual General Meeting (AGM) was last held on
N/A and as per records from Ministry of Corporate Affairs (MCA), its balance sheet was last
filed on_N/A.
Directors of I Gap Technologies Private Limited are Mr.Abhijit Prakash Gatade and
Mr.Dilip Prakash Gatade.

2.2 Introduction:
iGAP Education Private Limited
iGAP Education Private Limited, founded to prepare the IT professionals, lacking
perception or essential skills, vital to excel in the IT field.
The courses are designed to make them adept in facing challenges of the IT world.
It provides a favorable opportunity to fresh IT graduates to maximize their potential
and also assists in launching their careers.
The course schedule is designed to provide quality and dynamic IT training to young
IT minds in an effort to guide them in their nascent careers.
Vision
• To be the most admired organization in the field of software development training.

Mission
• To maximize potential of students and professionals in the field of software development
and providing quality resources to the software industry.

• To provide quality Software Training & Consulting Services in different latest technologies
with live project experience.

16
2.3 The Objectives of IGap Technologies:

 Students and employees also customers always have priority.

 To equip every student in India with their dream internship.
 First serve, then earn.
 We lead by setting examples.
 We are modest.
 We live up to our convictions.
 Doing the same things the same way, and right from the beginning.
 We never give up.
 Evolution not revolution.

2.4 History:

iGAP Technologies is a customer oriented company offering Ecommerce Applications,

Customized ERPs, Hospital Management Systems, Web Development, Mobile applications in
various technologies.

2.5 Vision:

To be the most admired organization in the field of software development training.

2.6 Mission:
• To maximize potential of students and professionals in the field of software development
and providing quality resources to the software industry.

• To provide quality Software Training & Consulting Services in different latest technologies
with live project experience.

17
2.7 Short Term Goals of Company:
 Reduce business overheads.
 Improve business.
 To equip every student in India with their dream internship.
 And we did it all for all students is free.
 Provides internship resources and career services to students and employers.
 The platform offers internship searching and posting services as well as many other
career services such as counseling, cover-letter writing, resume building, and training
programs to students.
 Improve your business skills.
 Know your competitors.
 Learn about market trending skills.

2.8 Long Term Goals of Company:

 Mastering Technical Skills.

 A good set of goals around technical business skills.
 Gaining Essential Background Knowledge.
 Perfecting Interpersonal Skills (Soft Skills).
 Building a Network of Contacts.

2.9 Organization Structure:

18
2.10 Corporate culture:

 We are sure that customers, employees and shareholders accomplish more together.
 We face our responsibility to the environment and society.

COMPANY PROFILE FORM (VPF) – FOR PRODUCTS/SERVICES/WORK

1. Orbit Solutions: iGap Technologies Pvt Ltd

2.Address: iGAP Technologies Private 3.Contact us: 095613 20192

Limited ,Shree Apartment, 2nd Floor, 4th
Ln, near C'LAI World, Rajarampuri,
Kolhapur, Maharashtra 416008
4.City: Kolhapur 5.Country: India
Company website: E-Mail : [email protected]
http://igaptechnologies.com/
[email protected]
Contact Person Name: Mr. Abhijit Gatade. Senior Developer: Director

7. Legal Status : Founder and Director

8. Year Established: 2021 9. Number of Employees:10-20
10. Gross Annual Turnover (Rs.):25 lakh 11. Annual Export Turnover (Rs.):
upto 30 lakh

19
 CHAPTER-3
INTRODUCTION
TO HTML

20
1. What is HTML?

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.

2. HTML Page Structure :

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

3. Learn HTML Using Notepad or TextEdit

 Web pages can be created and modified by using professional HTML editors.
 However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit
(Mac).
 We believe that using a simple text editor is a good way to learn HTML.
 Follow the steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences >
Format > choose "Plain Text"

21
 Then under "Open and Save", check the box that says "Display HTML files as HTML code
instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Fig. 3.1

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.html" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).

22
 Fig. 3.2

Tip: You can use either .html or .html as file extension. There is no difference, it is up to you.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favourite browser (double click on the file, or right-click - and
choose "Open with").

The result will look much like this:

Fig. 3.3

23
History Of HTML
The first publicly available description of HTML was a document called "HTML Tags", first
mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the
initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly
influenced by SGML guid, an in-house Standard Generalized Markup Language (SGML)-based
documentation format at CERN. Eleven of these elements still exist in HTML 4.

HTML is a markup language that web browsers use to interpret and compose text, images, and
other material into visual or audible web pages.

HTML Layouts

HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in
responsive form or we can say that HTML layout specifies a way in which the web pages can be
arranged. Web-page layout works with arrangement of visual elements of an HTML document.

Web page layout is the most important part to keep in mind while creating a website so that
our website can appear professional with the great look. We can also use CSS and JAVASCRIPT
based frameworks for creating layouts for responsive and dynamic website designing.

Fig. 3.4

Every website has a specific layout to display content in a specific manner.

24
Following are different HTML5 elements which are used to define the different parts of a webpage.

Elements

Fig. 3.5

HTML element content categories

HTML documents imply a structure of nested HTML elements. These are indicated in

the document by HTML tags, enclosed in angle brackets thus: <p> .

In the simple, general case, the extent of an element is indicated by a pair of tags: a "start

tag" <p> and "end tag" </p> . The text content of the element, if any, is placed between these tags.

Tags may also enclose further tag markup between the start and end, including a mixture
of tags and text. This indicates further (nested) elements, as children of the parent element.

The start tag may also include element's attributes within the tag. These indicate other
information, such as identifiers for sections within the document, identifiers used to bind style

information to the presentation of the document, and for some tags such as the <img> used to embed
images, the reference to the image resource in the format like

this: <img src="example.com/example.jpg">

25
 Some elements, such as the line break <br /> , or <br /> do not permit any embedded
content, either text or further tags. These require only a single empty tag (akin to a start tag) and do
not use an end tag.

Many tags, particularly the closing end tag for the very commonly used paragraph

element <p> , are optional. An HTML browser or other agent can infer the closure for the end of an
element from the context and the structural rules defined by the HTML standard. These rules are
complex and not widely understood by most HTML coders.

The general form of an HTML element is

therefore: <tag attribute1="value1" attribute2="value2">''content''</tag> . Some HTML elements

are defined as empty elements and take the form <tag attribute1="value1" attribute2="value2"> .

Empty elements may enclose no content, for instance, the <br /> tag or the inline <img> tag. The
name of an HTML element is the name used in the tags. Note that the end tag's name is preceded by

a slash character, / , and that in empty elements the end tag is neither required nor allowed. If
attributes are not mentioned, default values are used in each case.

Element examples
See also: HTML element

Header of the HTML document: <head>...</head> . The title is included in the head, for example:

<head>
<title>The Title</title>
<link rel="stylesheet" href="stylebyjimbowales.css" /> <!-- Imports Stylesheets -->
</head>

Headings
HTML headings are defined with the <h1> to <h6> tags with H1 being the highest (or most important)
level and H6 the least:
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
26
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

First name:
John

Last name:
Doe

Submit

Fig. 3.6

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>
 The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
 All the different form elements are covered in this chapter: HTML Form Elements.
 The <input> Element
 The HTML <input> element is the most used form element.

27
 CHAPTER-4
INTRODUCTION
TO CSS

28
CSS Introduction
CSS is the language we use to style a Web page.

What is CSS?

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

CSS Demo - One HTML Page - Multiple Styles!

Here we will show one HTML page displayed with four different stylesheets. Click on the
"Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different styles

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Example

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}

CSS Solved a Big Problem

 HTML was NEVER intended to contain tags for formatting a web page!
 HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

29
  When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and
color information were added to every single page, became a long and expensive process.
 To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS Saves a Lot of Work!
 The style definitions are normally saved in external .CSS files.
 With an external stylesheet file, you can change the look of an entire website by changing just
one file!

 CSS Selectors

 CSS selectors are used to "find" (or select) the HTML elements you want to style.
 We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

p{
text-align: center;
color: red;
}

The CSS id Selector

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

30
The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

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

Example

In this example all HTML elements with class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only <p> elements with class="center" will be red and center-aligned:

p.center {
text-align: center;
color: red;
31
 }
HTML elements can also refer to more than one class.

Example

In this example the <p> element will be styled according to class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!

The CSS Universal Selector

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

Example

The CSS rule below will affect every HTML element on the page:

*{
text-align: center;
color: blue;
}

The CSS Grouping Selector

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

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

32
To group selectors, separate each selector with a comma.

Example

In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

33
 CHAPTER-5
INTRODUCTION
TO BOOTSTRAP

34
Bootstrap
Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and
JavaScript framework for creating responsive, mobile-first websites.

2 What is Bootstrap?

 Bootstrap is a free front-end framework for faster and easier web development
 Bootstrap includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional JavaScript
plugins
 Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves
to look good on all devices, from small phones to large desktops.
2.1 Why Use Bootstrap?
Advantages of Bootstrap:

 Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap.
 Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
 Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework.
 Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome,
Firefox, Edge, Safari, and Opera). Note that if you need support for IE11 and down, you must
use either BS4 or BS3.

Where to Get Bootstrap 5?

There are two ways to start using Bootstrap 5 on your own web site.You can:

 Include Bootstrap 5 from a CDN

 Download Bootstrap 5 from getbootstrap.com

2.2 Downloading Bootstrap 5

If you want to download and host Bootstrap 5 yourself, go to https://getbootstrap.com/, and follow
the instructions there.

 Create Your First Web Page With Bootstrap 5

1. Add the HTML5 doctype

 Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype.
 Always include the HTML5 doctype at the beginning of the page, along with the lang
attribute and the correct title and character set:
<!DOCTYPE html>
<html lang="en">
35
 <head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 is mobile-first
 Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the
core framework.
 To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:
 <meta name="viewport" content="width=device-width, initial-scale=1">
 The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).
 The initial-scale=1 part sets the initial zoom level when the page is first loaded by the
browser.

2.3 Containers
Bootstrap 5 also requires a containing element to wrap site contents.
There are two container classes to choose from:
1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width of the
viewport

 Bootstrap 5 Grid System

 Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
 If you do not want to use all 12 columns individually, you can group the columns together to
create wider columns:
span
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

Fig. 5.1

The grid system is responsive, and the columns will re-arrange automatically depending on the
screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available
columns).
 Text Colors
36
  Bootstrap 5 has some contextual classes that can be used to provide "meaning through
colors".
 The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-
warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body
color/often black) and .text-light

 Basic Table
 A basic Bootstrap 5 table has a light padding and horizontal dividers.
 The .table class adds basic styling to a table.
2.4 Image Shapes
a) Rounded Corners
The .rounded class adds rounded corners to an image:
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
b) Circle
The .rounded-circle class shapes the image to a circle:
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
c) Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
2.5 Bootstrap 5 Jumbotron
 A jumbotron was introduced in Bootstrap 3 as a big padded box for calling extra attention to
some special content or information.
 Jumbotrons are no longer supported in Bootstrap 5.
 Alerts:
 Alerts are created with the .alert class, followed by one of the contextual classes .alert-
success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-
light or .alert-dark

 button :
 The button classes can be used on <a>, <button>, or <input> elements
<a href="#" class="btn btn-success">Link Button</a>
<button type="button" class="btn btn-success">Button</button>
<input type="button" class="btn btn-success" value="Input Button">

 Badges
 Badges are used to add additional information to any content

 Basic Progress Bar

 A progress bar can be used to show how far a user is in a process.
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
 To create a default progress bar, add a .progress class to a container element and add
the .progress-bar class to its child element. Use the CSS width property to set the width of the
progress bar
 Basic Pagination
37
  If you have a web site with lots of pages, you may wish to add some sort of pagination to
each page.
 To create a basic pagination, add the .pagination class to an <ul> element. Then add
the .page-item to each <li> element and a .page-link class to each link inside <li>

<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li> </ul>

 Cards
 A card in Bootstrap 5 is a bordered box with some padding around its content. It includes
options for headers, footers, content, colors, etc.
 Basic Dropdown
 A dropdown menu is a toggleable menu that allows the user to choose one value from a
predefined list
 Offcanvas
 Offcanvas is similar to modals (hidden by default and shown when activated), except that is
often used as a sidebar navigation menu.
 Open Offcanvas Sidebar
2.6 Flexbox
 The biggest difference between Bootstrap 3 and Bootstrap 4 & 5 is that Bootstrap 5 now uses
flexbox, instead of floats, to handle the layout.
 The Flexible Box Layout Module, makes it easier to design flexible responsive layout
structure without using float or positioning.

38
 CHAPTER-5
INTRODUCTION
TO ANGULAR

Angular:
Angular is a modern framework for building scalable single-page web applications developed
by Google. It brings revolutionary changes in the field of development of web applications. This
tutorial explains the various features of Angular for beginners and advanced web developers.
To work with Angular (any version), you will need to install a few applications on your computer:
 Setup a Node.js development environment with npm (node package manager)
 Setup the Angular CLI (command-line interface)
 Setup an Editor/IDE
npm is a package manager that comes with node.js by default; it allows you to manage
your project dependencies. Therefore, you do not have to worry about manually adding
dependencies, removing some, and updating your package. Most Angular libraries are assigned as
different NPM packages.
39
Installation Of Angular:
Angular CLI makes it easy to start with any Angular project. Angular CLI comes with
commands that help us create and start on our project very fast. Let us now go through the
commands available to create a project, a component and services, change the port, etc.
To work with Angular CLI, we need to have it installed on our system. Let us use the following
command for the same −
npm install -g @angular/cli
To create a new project, we can run the following command in the command line and the project will
be created.
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //
ng serve // will compile and you can see the output of your project in the browser −
http://localhost:4200/
4200 is the default port used when a new project is created. You can change the port with the
following command −
ng serve --host 0.0.0.0 --port 4201
 Components:
Components are the most basic UI building block of an Angular app. An Angular app
contains a tree of Angular components.
 AppModule:
An Angular module class describes how the application parts fit together. Every
application has at least one Angular module, the root module that you bootstrap to launch the
application. You can call it anything you want. The conventional name is AppModule .
 Data Binding
Data binding is a process that creates a connection between the application's UI and
the data. When the data changes its value, the UI elements that are bound to the data will also
change.
Data binding is a process that creates a connection between the application's UI and
the data. When the data changes its value, the UI elements that are bound to the data will also
change.
 Directives:
Directives in Angular is a js class, which is declared as @directive. We have 3 directives in
Angular. The directives are listed below −
1. Component Directives
These form the main class having details of how the component should be processed, instantiated and
used at runtime.
2. Structural Directives
A structure directive basically deals with manipulating the domain elements. Structural directives
have a * sign before the directive. For example, *ngIf and *ngFor.
40
 3. Attribute Directives
Attribute directives deal with changing the look and behaviour of the domain element. You can
create your own directives as shown below.
 Routing:
Routing basically means navigating between pages. You have seen many sites with links
that direct you to a new page. This can be achieved using routing. Here the pages that we are
referring to will be in the form of components. We have already seen how to create a component. Let
us now create a component and see how to use routing with it.
 Component:
Now, angular-cli has a command to create your own component. However, the app
component which is created by default will always remain the parent and the next components
created will form the child components.
Let us now run the command to create the component.
ng g component new-cmp
When you run the above command in the command line, you will receive the following output −
C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
create src\app\new-cmp\new-cmp.component.css
create src\app\new-cmp\new-cmp.component.html
create src\app\new-cmp\new-cmp.component.spec.ts
create src\app\new-cmp\new-cmp.component.ts
update src\app\app.module.ts
Now, if we go and check the file structure, we will get the new-cmp new folder created under
the src/app folder.
The following files are created in the new-cmp folder −
 new-cmp.component.css − css file for the new component is created.
 new-cmp.component.html − html file is created.
 new-cmp.component.spec.ts − this can be used for unit testing.
 new-cmp.component.ts − here, we can define the module, properties, etc.

41
APPENDICES A:
Parent Consent
Letter

42
 Undertaking from Parents
To,
The Principal(1552),
ATS SBGI,
Faculty Of Polytechnic,
Miraj.
Subject: Consent letter for Industrial Training.
Sir
I am fully aware that:-

i. My ward Shraddha Krishna Yewale. studying in CO 5I Semester at your Institute

Sanjay Bhokare Group of Institutes, Faculty of Polytechnic, Miraj, has to undergo
six weeks of industrial training for partial fulfillment towards completion of Diploma
in Computer Engineering.
ii. For this fulfillment he has been deputed at IGAP Technologies industry, located at
Rajarampuri 4th lane ,Kolhapur for internship of Six weeks for the period from 04 July
2022 to 14 August 2022.
With request to above I give my consent for my ward to travel to and from the
mentioned industry. Further I undertake that:
a. My ward will undergo the training at his / her own cost and risk during training and /
or stay.
b. My ward will be entirely under the discipline of the organization where he/she will
be placed and will be abide by the rules and regulations in face of the said
organization.
c. My ward is NOT entitled to any leave during the training period.
d. My ward will submit regularly a prescribed weekly dairy, duly filled and counter
signed by the training supervisor of the organization to the mentor faculty of the
institute.
e. I have explained the consent of the letter to my ward who has also promised to
adhere strictly to the requirements. I assure that my ward will be properly instructed
to take his/her own care to avoid any accidents/injuries in the industry. In case of
any accident neither industry nor the institute will be held responsible for it

Signature
Name: Swati Krishna Yewale.
Address: Near Primary Health Center ,
Kavathepiran.
Ph.no: 7020181630
Date:01/07/2022

43
APPENDICES B:
Weekly Report

44
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI MAHARASHTRA (INDIA)
A Weekly Dairy Report
For
Industrial Training
At
iGAP Technologies
Pvt. Ltd

For the period of Six Week

From: 04 July 2022 To: 13 August 2022
Submitted in partial fulfillment
For the award of the
Diploma In Computer
Engineering Submitted by
ENROLLMENT NO. NAME OF STUDENT EXAM SEAT NO
2015520019 Shraddha Krishna Yewale

Mr. C. P. Divate Mr. Abhijit P. Gatade

Mr.C.P.Divate Mr. Abhijit Gatade.
Senior Developer Senior Developer

Shri Ambabai Talim Sanstha’s

Sanjay Bhokare Group of Institutes
Faculty of Polytechnic, Miraj – 416410
DEPARTMENT OF COMPUTER ENGINEERING
ACADEMIC YEAR - 2022-2023
45
Special Instructions for students:
1) Write down the daily activity on the same day.
2) Make note of the important actual activity only.
3) Summarize at the week end.
4) Add extra sheets if needed for daily or weekly activity report.
5) Finally you have to write final company profile report in prescribed format
at the end of training. (Prescribed format will be provided to you).
6) Training will be accessed for 5th semester marks under Course of Industrial
Training.
7) Performance of training will be accessed with your individual performance
in training.
8) Candidate has to provide Training completion certificate from the
industry after completion of training in the prescribed format.
9) Training will be accessed as follows by internal as well as external
examination,
PROGRESSIVE END SEMESTER
Training ASSESSMENT (Weekly ASSESSMENT
Total Marks
Duration report of all 6 week (Report, Presentation,
and attendance) Viva)

Max. Min. Passing Max. Min. Passing Max. Min. Passing

Six Marks Marks Marks Marks Marks Marks
weeks
#75 30 75** 30 150 60

10) Distribution of End – Semester – Examination (ESE) marks of Industrial

Training,
Marks for Industrial Marks for Seminar Marks for Oral / Total ESE
Training Report / Presentation Viva-Voce Marks
25 25 25 75

11) Candidate has to make power-point presentation before internal as well as

external examiner as per prescribed format.
12) Candidate has to provide parent consent letter as per prescribed format.
13) If company is providing appointment letter to the candidate for his implant
training, submit copy of that in report.

46
Week 1: From: 04.07.2022. To: 09.07.2022.
Expected Work:
 Study of Web Development Using HTML.

Subject Course
Day Activities carried out Code Outcome
(For Office Use
Only)
I. Introduction of computer and its
1
history in brief , short information
about programming languages.
II. Learned about Web development and
the trends in angular.
Installation of Visual studio:
2
I. Installation Of Visual Studio Code.
II. All setup of Visual Studio Code.
III. Starts with Hello world Program.
HTML Language:
3 I. HTML elements ,attributes, heading tag .
II. Paragraph elements, style, formatting.
III. Comment, links, images tag.

I. HTML Tables, lists.

4 II. HTML Iframe , Grid layout.

I. HTML Flex Layout elements, Form

elements.
5 II. HTML media, audio and video.
III. Forms attribute in HTML.

6 I. Create website using HTML on Harvard

University .
II. Create form for student data application.

47
Weekly Summarization of above activities:
I. Learned about HTML language, Web developers, tools use,
language history.
II. Study about how to install visual studio how to execute code, creating
project.

Signature of Student Signature of mentor supervisor

(Shraddha Krishna Yewale) (Mr. C. P. Divate.)

48
 Week 2: From: 11.07.2022. To: 16.07.2022.
Expected Work:
 Introduction & learning the CSS language.

Subject Course
Day Activities carried out Code Outcome
(For Office Use Only)

1 I. Introduction to CSS, Types of CSS.

I. CSS Color, Table, Selectors, Background

2 color, Margin, Border, Padding.

I. CSS height-width, Box-model, Text-

3 properties Fonts, Icons .

I. CSS Lists, Display, Position, Overflow,

4 Float.
II. CSS Inline block, Alignment, Opacity.

I. CSS Navigation bar, Dropdown list,

5 Image/Gallery, Form Control.
II. Responsive website application.

6 I. Create website using CSS & HTML for

Goddess Beauty.

49
Weekly Summarization of above activities:

I. In this week overall we learnt some about basic concepts of CSS necessary for
website development.

II. Making single page website using HTML and CSS.

Signature of Student Signature of mentor supervisor

(Shraddha Krishna Yewale) (Mr. C. P. Divate.)

50
 Week 3: From: 18.07.2022. To: 23.07.2022.
Expected Work:
 Learning bootstrap language for web development.
Subject Course
Day Activities carried out Code Outcome
(For Office Use Only)
I. Introduction to Bootstrap 5 and download
its set up file .
1 II. Bootstrap Container, Grid basic.
III.Typography, Color, Table.

I. Bootstrap Image, Jumbotron, Alerts,

2 Buttons.
II. Bootstrap Badges, Progress Bars,
Spinners, Pagination.

I. Bootstrap Lists Groups, Card, Dropdown.

3 II. Bootstrap Collapse, Nav, Navbar,
Carousel.

I. Bootstrap Modal, Tooltip, Popover.

4 II. Bootstrap Toast, Scrolls.

5 I. Bootstrap Off canvas, Utilities, Flex.

6 I. Create website using bootstrap

for Taj Hotel.

51
Weekly Summarization of above activities:

I. In this week overall we learn Basic concepts of Bootstrap5 necessary for

website development.

II. Using Bootstrap the multipage website creating get easy.

Signature of Student Signature of mentor supervisor

(Shraddha Krishna Yewale) (Mr. C. P. Divate.)

52
 Week 4: From: 25.07.2022. To: 30.07.2022.
Expected Work:
 Project Evolution using HTML ,Bootstrap & CSS.
Subject Course
Day Activities carried out Code Outcome
(For Office Use Only)
Project creation using HTML ,CSS And
Bootstrap:
1 I. Started working on mini project named as
Taj Hotel.

I. First created first page

using Html.
2
II. Three more Html file created.

I. Created appropriate images, logo for

3 creating a website front look .
II. Created a file of all this to include it in
website.
I. Created the CSS file used for the first
page.
4
II. Create all pages javascript file Work.

5 I. Design Website Activity.

II. Design Home ,about, collection ,services,
contacts pages.

I. Finally the website is ready using html,

6
CSS and bootstrap

53
 Weekly Summarization of above activities:
I. In this week we learnt about the creating a website using bootstrap classes , CSS
and html.
II. Creating a multipage website.

Signature of Student Signature of mentor supervisor

(Shraddha Krishna Yewale.) (Mr. C. P. Divate.)

54
 Week 5: From: 01.08.2022. To: 06.08.2022.
Expected Work:
 Study of javascript.
 Introduction to Angular method.
Subject Course
Day Activities carried out Code Outcome
(For Office Use Only)

I. Install node.js for Angular.

1
II. All setup to Angular project.

2 I. Learn basic concepts of javascript

needed to create a Website.

I. Learn Classes of javascript used in

3
angular.

4 I. Compile the project using CLI

command prompt.

I. Learned how to create a Website using

5 simple method in Angular.

I. Use all method in Angular for Website

6 design.

55
Weekly Summarization of above activities:

I. In this week overall we work on small(mini) project using Angular

method.

Signature of Student Signature of mentor supervisor

(Shraddha Krishna Yewale.) (Mr. C. P. Divate.)

56
 Week 6: From: 08.08.2022. To: 13.08.2022.
Expected Work:
 Working on project using angular.
 Front end development using angular.

Subject Course
Day Activities carried out Code Outcome
(For Office Use Only)

I. Download the bootstrap 5 template .

1

I. Creating the website in bootstrap

2
using angular method.

3 I. Hosting and Routing in Angular.

Office Off Day.

4

Project evolution:
5 I. Creating website on travelling company
using bootstrap in Angular.

6 I. Creating domain for website.

II. Launching website on google platform or
any online platform.

57
Weekly Summarization of above activities:

I. In this week overall we work on small(mini) project using Angular

method.

II. In this week ,we learnt about launching and creating domain of
website.

Signature of Student Signature of mentor supervisor

( Shraddha Krishna Yewale.) (Mr. C. P. Divate.)

58
 CONCLUSIONS

We are at the end of this report . I have probably read everything and
also tested some pieces of code, and I'm sure we are now able to imagine our
future and advanced websites with Angular. Angular is single page website
which include Bootstrap ,CSS and HTML language
According to all the observation discussion, report is completed
successfully. Project is a challenging task but sufficient to get familiarized
with the world of websites .
I would like to thank Mr. C. P. Divate sir as well as Mr. Abhijit Gatade
sir for his governance and guidance.
In most cases, people are afraid of the huge amount of work that they
can imagine in the first steps just before they start. But you have to believe in
yourself, Be confident, don't think too much about details or about
optimization. Try to make something simple, something that works. Then
you'll have ways to optimize and improve it. Websites are all about creativity
and new content. Your creativity and skills can make a website attractive and
trendy.

*-*-*-----*END*-----*-*-*

59