Front end development industrial training report

1. Himachal Pradesh Takniki Shiksha Board,Dharamshala.
INDUSTRIAL TRAINING REPORT
Four weeks Industrial Training
At
EXCELLENCE TECHNOLOGY MOHALI
(From 5th
AUGUST 2022 to 31
AUGUST 2022)
SUBMITTED BY
Kanika sharma
Roll No :- 200710207011
BRANCH IT
5TH
SEMESTER
GOVT POLYTECHNIC HAMIRPUR

2. ACKNOWLEDGEMENT
In this opportunity to present my vote of thanks to all those guideposts who
really acted as lightning pillars to enlighten our way throughout this project that
has led to successful and satisfactory completion of this study.
I am really grateful to Mrs. Anjali Sharma and Mr. Lalit
Thakur for their active support, warm-hearted guidance, for his encouraging
support and providing a meticulous platform to learn.
Lastly, I am thankful to all, particularly my team members, who
have been instrumental in creating a proper, healthy & conductive environment
for me but without their help, it would have been extremely difficult for me to
prepare the project in a time bound framework.
In this opportunity to present my vote of thanks to all
those guideposts who really acted as lightning pillars to enlighten
our way throughout this project that has led to successful and
satisfactory completion of this study.
I am really grateful to Mrs. Anjali Sharma and Mr.
Lalit Thakur for their active support, whole-hearted guidance,
sincere cooperation for giving us a precious time involving a
involvement during the course also giving us a precious attention
Lastly, I am thankful to all, particularly my team
members, who have been instrumental in creating a proper, healthy
& conductive environment for me but without their help, it would
have been extremely difficult for me to prepare the project in a time
bound framework.
~Submitted by Kanika & Saksham

3. .Introduction about the Company .
Excellence Technology is one of the top reputed ISO
9001:2015 Certified Software Development Company in
Chandigarh and Mohali. We develop mobile applications, Games,
antivirus and websites. We provide Best industrial training in
Chandigarh and Mohali.
Excellence Technology Pvt. Ltd. Excellence Technology is a
complete IT solutions providing company based in Mohali.
Excellence technology was created to achieve the goal of providing
its clients state-of-art web development services comparable with
the best in the world.
The services provided by Excellence technology Pvt. Ltd.
Are:-
✔ Web Development

4. ✔
.INTRODUCTION.
Name : Kanika sharma
Institute Name :
Excellence Technology
Branch Mohali [Punjab]
Project Title : Web Development
Project
Category
: HTML,CSS,JavaScript
Trainer Name Mr Lalit Thakur

5. Web Development: It is the work involved in developing a website
for the Internet or an intranet. Web development can range from
developing a simple single static page of plain text to complex web
applications, electronic businesses, and social network services.
Web development is the building and maintenance of websites.
Types of Web Development :
.ThreetypesofDeveloper’s.
Front-End Web Development.
 Back-End Web Development.
Full-stack Web Development.
.Overviews of these Developments.
---------------------------------------
Software that are used by the Developers
Tool Name Programming Languages Operating Systems Best Features Cost Written In
Visual Studio
Code
Supports many languages like
C++, Java, TypeScript, JSON
and many more.
Windows,Linux, Mac
OS
Auto-completion
Debugging with
breakpoints.
Free TypeScript
JavaScript
CSS
Sublime Text Supports many programming
languages.
Windows,Linux, Mac
OS
Provides instant
switching between
projects.
Cross platform
support.
$ 80 C++ &
Python

6. …...Working of Web development Programmers……
..Front-End Web Development..
Front-end web development is known as client-side web development. It is a
procedure of designing the user interface of the website with front-end technologies
like HTML, CSS, and JavaScript.
The aim of developing the front end of the website is to allow website visitors to read
the web content effortlessly. To motivate you to build a clean and beautiful website
interfaces.
Programming languages under front-end:
Technologies Explanation
HTML  Based on research by Statista, the HTML/CSS and JavaScript are the most
commonly used languages.
 Web designers use HTML to design the structure and layout of the website.
 Design highly interactive pages.
 Most of the static pages are designed using HTML.

 The web designer uses cascading style sheet that will enhance website layout and
presentation.
 CSS helps to design a webpage using HTML code.
 CSS is widely used by designers and developers to style a website.

Notepad++ PHP
JavaScript
HTML
CSS
Windows,Linux,
UNIX, Mac OS
(Using third party
tool)
Syntax
Highlighting
Auto indentation
Auto completion
Free C++
And uses
Win 32
API & STL

7. JavaScript  To make your website interactive, for example, when searching a query
on Google or clicking on a button to change the page, there is a
JavaScript working behind.
 To enhance user engagement, implementing JavaScript on your website is
crucial. For example, when you open Gmail and click on inbox, rather
than loading the entire page, a smooth transition will happen and the
page will load.

HTML,CSS,JavaScript Programming languages and also working that we have to do with
websites.
HTML Introduction:
HTML stands for
 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
 CODE:
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph.
<!DOCTYPE html>
<HTML>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>

8. <p>This is a paragraph.</p>
<p>This is a another paragraph.</p>
</body>
</html>
OUTPUT:
This is a Heading
This is a paragraph.
This is a another paragraph.
HTML ATTRIBUTES
Description about The Benefit using HTML,CSS,JavaScript..
HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about the element
 Attributes come in name/value pairs like charset="utf-8"
HTML Links
HTML links are defined with <a> tags:
Example
<a href="https://www.w45.com">This is a link</a>
HTML Images

9. HTML images are defined with <img> tags.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src="img_ws.jpg" alt="W3Schools" style="width:120px;height:150px"
APPLY ATTRIBUTES TO FORM TABLE:

10. HTML TABLE TAG’S
HTML with CSS Code making table code:
Output:

11. HTML Documents
HTML Documents
 All HTML documents must start with a document type declaration: <!DOCTYPE html>.
 The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is between <body> and </body>.
HTML Document Structure
Below is a visualization of an HTML document (an HTML Page):
<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>
HTML Headings
Date:12/Aug/2022
 HTML headings are defined with <h1> to <h6> tags.

12.  <h1> defines the most important heading. <h6> defines the least important heading
Example:
<!DOCTYPE html>
<html>
<body>
<h1> heading 1</h1>
<h2> heading 2</h2>
<h3> heading 3</h3>
<h4> heading 4</h4>
<h5> heading 5</h5>
<h6> heading 6</h6>
</body>
</html>
Output:
heading 1
heading 2
heading 3
heading 4
heading 5
heading 6
HTML Lists
HTML lists are defined with <ul> (unordered/bullet list) or <ol> (ordered/numbered list) tags,
followed by <li> tags (list items)
EXAMPLE:
<!DOCTYPE html>
<html>

13. <body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT:
An Unordered HTML List
 Coffee
 Tea
 Milk
An Ordered HTML List
1. Coffee
2. Tea
3. Milk
CSS

14. ABOUT CSS
 CSS stands for
 CSS describes how HTML elements are to be displayed
 Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML (including XML dialects such as
SVG, Math-ml or XHTML).
 CSS describes how elements should be rendered on screen, on paper, in speech, or on other
media
TYPE OF CSS
 Inline CSS.(u
 Internal or Embedded CSS.( allows you to define styles for a particular HTML
document as a whole in one place.)
 External CSS (sheet can be stored in an external file)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

15. CSS Syntax
A CSS rule consists of a selector and a declaration block:
The selector points to the HTML element to style (h1).
The declaration block (in curly braces) contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
In the following example all <p> elements will be center-aligned, red and have a font size of 32
pixels or more then this.
JavaScript
 JavaScript is the Programming Language for the Web.
 JavaScript can update and change both HTML and CSS.
 JavaScript can calculate, manipulate and validate data.
JavaScript variables can be:
 Numbers(JavaScript has only one type of number. Numbers can be written with or
without decimals.)

16.  Strings(Strings store text. Strings are written inside quotes. You can use single or
double quotes)
 Objects(
 Arrays
 Functions
JavaScript Variables
JavaScript variables are containers for storing data values.
In this example, x, y, and z, are variables
Example:
Output:
What can JavaScript Do?
This section contains some examples of what JavaScript can do:
 JavaScript Can Change HTML Content
 JavaScript Can Change HTML Attribute Values
 JavaScript Can Change HTML Styles (CSS)
 JavaScript Can Hide HTML Elements
 JavaScript Can Show HTML Elements

17. Project’s using these languages
Making Age calculator with the help of HTML,CSS,JavaScript:
Using HTML Code
Output:

18. .Css in project .
AGE CALCULATOR CSS:CSS help to style and layout web pages .

19. Output:
JavaScript :

20. Final output: