A Software Training Report ON
WEB DEVELOPMENT
Company Profile
Brand Name:- Invigo Infotech
Entity Name:- Invigo Educare Private Limited
Registered Office:- Purnea, Bihar 854301
Company Type :- Education and Employment
Accredited with
1:- AICTE
2:- ISO Certified
3:- Startup Bihar
4:- MCA
5:- MSME
6:- Dept of industries, Gov of Bih
1
INVIGO EDUCARE PRIVATE LIMITED
ACKNOWLEDGEMENT
The internship opportunity I had with INVIGO INFOTECH ( INVIGO EDUCARE PVT LTD ).
was a great chance for learning and professional development. Therefore, I consider myself as
an incredibly lucky individual as I was provided with an opportunity to be a part of it. Bearing
in mind previous, I am using this opportunity to express my deepest gratitude and
special thanks to the Mr. Shivam Kumar who despite being extraordinarily busy with
her/his duties, took time out to hear, guide and keep me on the correct path and allowing me to
carry out my project at their esteemed organization and extending during the training.
I would also like to thank to Head of Department (HOD SIR) and faculty members of the
department, who often helped and gave me guidance to prepare my report.
Last but not the least, I would like to thank my colleagues who helped me a lot in gathering
information, collecting data and guiding me from time to time in making this project despite of
their busy schedules, they gave me different ideas in making this project unique.
INVIGO EDUCARE PRIVATE LIMITED
ABSTRACT
This report is the reflection and also the journey of my one-month internship period along with
the highlights of what I learned through errors, work responsibilities, and the importance of
internship program at INVIGO INFOTECH ( INVIGO EDUCARE PVT LTD ). The knowledge
I have gained as a new developer on front end development, new frameworks, and also how to
work in an office environment is splendid. As an intern, my work was to learn and focus on
web development projects. In this report, I have focused my work territory and explain my
achievements which I have got through my internship at INVIGO INFOTECH ( INVIGO EDUCARE PVT LTD ).
The challenge associated with web development is that the tools and techniques used to create
the front end of a website change constantly and so the developer needs to constantly be aware
of how the field is developing.
This report provides an overview of web development and its associated technologies. It
examines the current state of the industry, common web development frameworks, and emerging
trends. Additionally, it explores the impacts of different types of web development on businesses,
and possible challenges that web developers face. The report includes a discussion of the best
practices for web development projects and a review of the tools and technologies used by web
developers. Finally, the report provides an analysis of the future of web development and the
potential implications for businesses.
This report will provide an overview of web development in 2020, focusing on the various tools,
technologies, and frameworks available to developers. It will cover the popular trends in web
development and examine the challenges that developers face in building modern web
applications. It will also discuss the impact of the COVID-19 pandemic on web development
and the most important skills that developers need in order to stay competitive. Finally, it will
analyze the future of web development and the potential opportunities for developers in the
coming years.
INVIGO EDUCARE PRIVATE LIMITED
TABLE OF CONTENTS
1. Introduction
1.1. Web Development
1.2. Classification of Web Development
1.3. Front End Development
1.4. Back End Development
1.5. Front End Developer
1.6. Skills required for Front End Developer
1.7. Working of Website
2. Training Details
2.1. Hyper Text Markup Language (HTML)
2.1.1. Features of HTML
2.1.2. HTML Page Structure
2.2. Cascading Style Sheets (CSS)
2.2.1. Features of CSS
2.2.2. Types of CSS
2.2.3. Properties of CSS
2.3. JavaScript
2.3.1. Features of JavaScript
3. Assignments
3.1. Pop-Up Box
3.2. Responsive Image Slider
4. Project
4.1. Description
INVIGO EDUCARE PRIVATE LIMITED
4.2. Code
5. Learning From Training
LIST OF FIGURES
Fig 1.1 Working of a website
Fig 1.2. Web Application Development Process
Fig 1.3. HTML page structure
Fig 3.1 Pop up box
Fig 3.2. Pop up window after clicking on Click here
Fig 3.3. bullet 1 is clicked
Fig 3.4. bullet 2 is clicked
Fig 3.5. bullet 3 is clicked
Fig 3.6. bullet 4 is clicked
Fig 4.1 Home page
Fig 4.2 Menu
Fig 4.3 Gallery
Fig 4.4 Last Page
INVIGO EDUCARE PRIVATE LIMITED
1. INTRODUCTION
1.1. WEB DEVELOPMENT
Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It
is the creation of an application that works over the internet i.e., websites. The word Web
Development is made up of two words, that is: Web: It refers to websites, web pages or anything
that works over the internet. Development: It refers to building the application from scratch.
1.2. CLASSIFICATION OF WEB DEVELOPMENT:
Front End Development:
Front-end web development, also known as client-side development is the practice of producing
HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact
with them directly. The challenge associated with front end development is that the tools and
techniques used to create the front end of a website change constantly and so the developer
needs to constantly be aware of how the field is developing.
Back End Development:
Back-end development means working on server-side software, which focuses on everything
you can’t see on a website. Back-end developers ensure the website performs correctly, focusing
on databases, back-end logic, application programming interface (APIs), architecture, and
INVIGO EDUCARE PRIVATE LIMITED
servers. They use code that helps browsers communicate with databases, store, understand, and
delete data.
1.3. FRONT END DEVELOPMENT:
Web design is the way a website looks, front end development is how that design
actually gets implemented on the web. The main objective of designing a site is to
ensure that when the users open up the site, they see the information in a format that
is easy to read and relevant. But now a days users uses a large variety of devices
with varying screen sizes and resolutions thus forcing the designer to take into
consideration these aspects when designing the site. They need to ensure that their
site comes up 8 correctly in different browsers (cross-browser), different operating
systems (crossplatform) and different devices (cross-device), which requires careful
planning on the side of the developer.
1.4. FRONT END DEVELOPER:
A front-end developer, also known as a front-end web developer, is a professional
responsible for the design and implementation of the interface. The users require
this interface so that they can access the application in question. A web designer is
a professional who creates a website’s appearance and design. And the front-end
developer makes sure that the design works online by using coding languages such
as CSS, HTML, and JavaScript.
1.5. SKILLS REQUIRED FRONT END WEB DEVELOPMENT:
INVIGO EDUCARE PRIVATE LIMITED
HTML: Hyper Text Markup Language (HTML) is the standard markup language
used for creating web pages. It is the most basic building block required for
developing websites
CSS: Cascading Style Sheets (CSS) is used to apply styles to web pages. It is used
to make web pages presentable. The reason for using this is to simplify the process
of making web pages presentable. It allows you to apply styles on web pages. More
importantly, it enables you to do this independently of the HTML that makes up
each web page.
JavaScript: JavaScript is a very powerful tool that can do many things for a website.
For one, it powers the site’s general interactivity. JavaScript makes it possible to
build rich UI components such as image sliders, pop-ups, site navigation mega
menus, form validations, tabs, accordions, and much more.
1.6. WORKING OF WEBSITE:
A website is a collection of webpages located under a single domain name. These
webpages contain and display information about the business or organization and
are usually made up of elements such as photos, videos and text. Users need a device
with a web browser — laptops, smartphones or tablets — and an Internet connection
to access a website.
INVIGO EDUCARE PRIVATE LIMITED
Fig .1.1 Working of a Website
INVIGO EDUCARE PRIVATE LIMITED
Fig 1.2. Web Application Development Process
2. TRAINING DETAILS
INVIGO EDUCARE PRIVATE LIMITED
2.1. Hyper Text Markup Language (HTML):
HTML (Hyper Text Markup Language) is the most basic building block of the Web. It defines
the meaning and structure of web content. Other technologies besides HTML are generally used
to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one another, either within a single website
or between websites. Links are a fundamental aspect of the Web. By uploading content to the
Internet and linking it to pages created by other people, you become an active participant in the
World Wide Web.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser.
HTML markup includes special "elements" such as <head>, <title>, <body>, <header>,
<footer>, <article>, <section>, <p>, <div>, <span>, <img>, <nav>, <video>, <ul>, <ol>,
<li> and many others.
2.1.1. Features of HTML:
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting
tags. 3) It is a markup language, so it provides a flexible way to design web pages along with
the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances
the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux
etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lowercase or
upper-case.
INVIGO EDUCARE PRIVATE LIMITED
2.1.2. HTML Page Structure:
Fig 1.3. HTML page structure
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html>: This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the element, which contains the meta data
(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close immediately.
<body>: Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.
2.2. Cascading Style Sheets:
INVIGO EDUCARE PRIVATE LIMITED
Cascading Style Sheets are fondly referred to as CSS. It is used to make web pages
presentable. The reason for using this is to simplify the process of making web
pages presentable. It allows you to apply styles on web pages. More importantly,
it enables you to do this independently of the HTML that makes up each web page.
2.2.1. Features of CSS
1). Font, color, background style, element alignments, border, and size tags had to
be duplicated on each web page before CSS. This was a lengthy procedure.
2). CSS makes website maintenance much easier. If we need to make a global
change to the file, we can simply alter the style, which will update all of the elements
on the web page.
3). We can use CSS with older language versions because it is compatible with them.
CSS makes it possible to optimize material for several devices
4). A website that’s dull and plain will not attract the user, so adding some style
would surely make your website presentable to the user.
5). A website with a simple yet beautiful UI would help the users to go through the
website easily. It is used to make the user interface better.
6). Since CSS is a basic requirement while learning Web Development, therefor
there are abundant career opportunities for it. As a freelancer, you can land up to
many projects.
2.2.2. Types of CSS:
There are three types of CSS which are given below:
Inline CSS Internal CSS
External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag
using the style attribute.
INVIGO EDUCARE PRIVATE LIMITED
Internal or Embedded CSS: This can be used when a single HTML document
must be styled uniquely. The CSS rule set should be within the HTML file in the
head section i.e., the CSS is embedded within the HTML file.
External CSS: External CSS contains separate CSS file which contains only style
property with the help of tag attributes (For example class, id, heading, … etc.). CSS
property written in a separate file with .css extension and should be linked to the
HTML document using link tag. This means that for each element, style can be set
only once and that will be applied across web pages.
2.2.3. Properties of CSS:
Inline CSS has the highest priority, then comes Internal/Embedded followed
by External CSS which has the least priority. Multiple style sheets can be
defined on one page. If for an HTML tag, styles are defined in multiple style
sheets then the below order will be followed.
1) As Inline has the highest priority, any styles that are defined in the internal
and external style sheets are overridden by Inline styles.
2) Internal or Embedded stands second in the priority list and overrides the
styles in the external style sheet.
3) External style sheets have the least priority. If there are no styles defined
either in inline or internal style sheet then external style sheet rules are
applied for the HTML tags.
2.3. JavaScript
INVIGO EDUCARE PRIVATE LIMITED
JavaScript (JS) is the world’s most popular lightweight, interpreted compiled
programming language. It is also known as a scripting language for web
pages. It can be used for Client-side as well as Server-side developments.
JavaScript can be added to your HTML file in two ways:
Internal JavaScript: We can add JS code directly to our HTML file by
writing the code inside the <script> tag. The <script> tag can either be placed
inside the <head> or the <body> tag according to the requirement.
External JavaScript File: We can create a file with .js extension and paste
the JS code inside it. After creating the file, add this file in
<script src=” file_name.js”> tag inside <head> tag of the HTML file.
2.3.1. Features of JavaScript
1) All popular web browsers support JavaScript as they provide built-in execution
environments.
2) JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
3) JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4) JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
5) It is a light-weighted and interpreted language.
6) It is a case-sensitive language.
3. ASSIGNMENTS
INVIGO EDUCARE PRIVATE LIMITED
3.1. Pop – Up Box:
This is pop - up box designed using HTML (Hyper Text Markup Language) and
CSS (Cascading Style Sheets).
The main functionality of this project is that, when we click on the text "Click here"
then a pop-up box opens containing additional information without reloading the
page.
With the help of this project one can view the additional information on the pop up
box on the similar page.
In this project when user click on the text "Click here " , pop up window will open
with other information and to return to the main content the user need to click on
the close button present on the pop up.
By adding pop up box in our web page, we can direct user attention to an important
piece of information on a website.
Click Here
Fig 3.1 Pop up box
INVIGO EDUCARE PRIVATE LIMITED
