FRONT-END WEB DEVELOPMENT

Practical Training Report

Submitted in partial fulfillment for the award of degree of
Bachelor of Technology
in
Department of Computer Science & Engineering

Submitted to: Submitted By:

Mr. Pramod Nagar Name.
Assistant Professor Roll. No. …..
Department of Computer Science Univ. Roll No.: …...
Semester/Year: V Sem/IIIYear

Department of Computer Science & Engineering

University Department,
Rajasthan Technical University, Kota
January-2023
CERTIFICATE

ii
 ACKNOWLEDGEMENT

I take this opportunity to express a deep sense of gratitude towards Mr. …………..., for
providing excellent guidance, encouragement and inspiration through-out the practical training.
Without his invaluable guidance, this practical training report would never have been a
successful one.

I also want to give thanks to all the faculty members of department of Computer Science
Engineering and my family for their love, support and encouragement during this time. I want to
thank my dear friends, the ones that remain here and the ones that have already left, for making
this period such an extraordinary experience in my life.

Last but not least, my heartiest thanks to all the persons, who have been a pillar of support during
the arduous time of training.

Condidate name

iii
 PREFACE

The present report is the outcome of the offline practical training on “Front End Web-
Development” provided by “…………….”. The objective of this training is to learn about Front
End Web Development with practical applications and to get a masterful grip on it. This course
provided me with hands-on experience and exposure to developing Front-End applications for
browsers. This course also helped in building a strong foundation on Front-End which provided
me with the tools to build a responsive web application.

During the tenure of 45 days, I learned about and worked on different technologies like HTML,
CSS, JavaScript and GitHub. I have also built a Front-End project using these technologies.

This report explains the concepts learnt during the internship along with the description of how
these technologies are used for the creation of the project.

iv
 CONTENTS

CHAPTER 1: INTRODUCTION ABOUT THE COURSE.................................................................1-2

1.1 Objectives............................................................................................................................................1
1.2 Motivation............................................................................................................................................1
1.3 About the Company.............................................................................................................................2
1.4 Layout..................................................................................................................................................2
CHAPTER 2: BASICS OF FRONT-END WEB DESIGN......................................................................3
CHAPTER 3: HTML...............................................................................................................................4-8
3.1 Introduction..........................................................................................................................................4
3.2 Basic of HTML....................................................................................................................................5
3.3 Correctly structuring nested HTML content........................................................................................8
CHAPTER 4: CSS..................................................................................................................................9-10
4.1 Introduction about CSS.......................................................................................................................9
4.2 Types of CSS.......................................................................................................................................9
4.3 Basis of CSS......................................................................................................................................10
CHAPTER 5: JAVASCRIPT..............................................................................................................11-15
5.1 Introduction about JS.........................................................................................................................11
5.2 Variable and control Statement.........................................................................................................12
5.3 Functions in JS...................................................................................................................................13
5.4 JS with DOM.....................................................................................................................................14
5.5 Data types..........................................................................................................................................15
CHAPTER 6: PROJECT..........................................................................................................................16
CONCLUSION...........................................................................................................................................17
REFERENCES...........................................................................................................................................18

v
 List of Figures

Figure No. Name of Figure Page No.

3.1 Boiler plate of code 4
5.1 If else statement 12
6.1 We can help someone with HTLM, CSS, JS 16
6.2 Our Blog with HTLM, CSS, JS 16

vi
 List of Tables

Table No. Name of Table Page No.

3.1 Basic HTML tags 5
3.2 Formatting tags 6
3.3 Forms and input tags 7
3.4 Images tags 7
3.5 Links tags 8
3.6 Lists tags 8
3.7 Table tags 8
5.1 Data types in JS 14

vii
 CHAPTER 1: INTRODUCTION ABOUT THE COURSE

1.1 Objectives
Internship is thought on addition a few encounters from the different a few associations which
will encourage bounty to make a connection between the hypothetical and reasonable data. It
includes profitable ability like usable working environment or pc instrumentation, taking care of
a spread of things in the meantime, sorting out or dissecting learning, spending plans or rising
collaboration, composing, and talking gifts. It’s indispensable to get a handle on the best
approach to impart data to outsiders, managers, and companions. While doing an undergraduate
program in computer science and engineering at Rajasthan Technical University, I considered a
few programming courses Last 4 years. Be that as it may, this is frequently not happy to get a
handle on the web developing because of it's an extremely huge marketplace. to encourage a
sound data concerning programming which has net application style and Development.
Objectives
• Understand basic concept and structure of HTML, CSS, JavaScript, GitHub
• To get awareness about the various job opportunities.
• To perceive communicational skills and organizational dynamics.
• To get educated about the official habitat.
• Opportunities for technical skill.

1.2 Motivation
For internship to induce the sensible expertise within the field of technology and Engineering.
It's extraordinarily vital that knowing about hypothetical information and actualize inside the
reasonable field to broaden our gifted ability in building work advertise. The motivation of this
internship actually came from the intention of learning more about the job sectors and the work
environment of IT farms. A desktop base system of creating websites is easy to learn. Before
joining the internship, i knew that I am in a primary stage and beginner level in learning web
development, my first task is to learn and create and be creative. The learning curve of a web
development is such interesting and charming. It is very simple to
build a project fully by HTML, CSS, MYSQL and PHP when you know what you are doing.

1.3 About the company

BBR is an emerging start-up Company providing innovating products to increase the productivity
, safety and quality of life based on latest technologies like-Embedded Robotics AI and IOT. The
products are mainly developed for farmers to solve lethal and unsolved problems due to
traditional equipments and technologies but we have also a range of hardware and software both
type of products for industries and home appliance to replace traditional Inefficient and risky
system to increase the productivity and safety.

1
1.4 Layout of the Report
This layout contains the key points of this report.
l Chapter 2 describes the basics of front-end web design.
l Chapter 3 describes the various concepts and application of HTML in designing the web
page.
l Chapter 4 describes how CSS is used to provide design and describing presentation of a
webpage made in HTML
l Chapter 5 describes the use of JavaScript in making a webpage dynamic. It is the
programming language of the web
l Chapter 6 describes the project created during the internship by combing the technologies
learned during the span of 45 days of the practical training.

2
 CHAPTER 2: BASICS OF FRONT-END WEB DESIGN

The part of a website that the user interacts directly is termed as front end. It is also referred to as
the ‘client side’ of the application.

Tools used in Front-End Development

l HTML: HTML stands for Hyper Text Markup Language. It is used to design the
frontend portion of web pages using markup language. It acts as a skeleton for a website
since it is used to make the structure of a website.
l CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style our
website.
l JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to
our website.

3
 CHAPTER 3: HTML

3.1 Introduction to HTML

HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. A markup language is used to define the text document within a tag
which defines the structure of web pages. This language is used to annotate (make notes for the
computer) text so that a machine can understand it and manipulate text accordingly. Most
markup languages (e.g. HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text.

HTML is a markup language used by the browser to manipulate text, images, and other content,
in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991.
The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0,
published in 1999.

Elements and Tags: HTML uses predefined tags and elements which tell the browser how to
properly display the content. Remember to include closing tags. If omitted, the browser applies
the effect of the opening tag until the end of the page.

HTML page structure: The basic structure of an HTML page is laid out below. It contains
the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.

Figure 3.1: Boiler plate code

l <DOCTYPE! html> : This is the document type declaration (not technically a tag). It
declares a document as being an HTML document. The doctype declaration is not case-
sensitive.

4
 l <html> : This is called the HTML root element. All other elements are contained within
it.
l <head> : The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML elements
used inside the <head> element include:
l <body> : The body tag is used to enclose all the visible content of a webpage. In other
words, the body content is what the browser will show on the front-end.

3.2 Basic of HTML

The following are the different categories of HTML tags:

l Basic HTML

Tag Description
<!DOCTYPE> Defines the document type
<html> Defines the root of an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Defines a single line break
<hr> Defines a thematic change in the content
<!--…--> Defines a comment
Table 3.1: Basic HTML tags [3]

l Formatting

Tag Description
<abbr> Defines an abbreviation or an acronym
Defines contact information for the author/owner of a
<address>
document/article
<b> Defines bold text
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
Specifies a term that is going to be defined within the
<dfn>
content
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input

5
 <mark> Defines marked/highlighted text
Defines a scalar measurement within a known range (a
<meter>
gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
Defines what to show in browsers that do not support
<rp>
ruby annotations
Defines an explanation/pronunciation of characters (for
<rt> East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
Defines a container for content that should be hidden
<template>
when the page loads
<time> Defines a specific time (or datetime)
Defines some text that is unarticulated and styled
<u>
differently from normal text
<var> Defines a variable
<blockquote> Defines a section that is quoted from another source

Table 3.2: Formatting tags [3]

l Forms and Input

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
Table 3.3: Forms and Input tags [3]

6
l Images

Tag Description
<img> Defines an image
<map> Defines a client-side image map
<area> Defines an area inside an image map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<picture> Defines a container for multiple image resources
<svg> Defines a container for SVG graphics
<img> Defines an image
<map> Defines a client-side image map
<area> Defines an area inside an image map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
Table 3.4: Images tags [3]

l Links

Tag Description
<a> Defines a hyperlink
Defines the relationship between a document and an external resource
<link> (most used to link to style sheets)
<nav> Defines navigation links

Table 3.5 Links tags [3]

l Lists

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list

Table 3.6 Lists tags [3]

l Tables

Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table

7
 <tfoot> Groups the footer content in a table
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting
Table 3.7 Tables tags [3]

3.3 Correctly structuring nested HTML content

The main rule to follow when using nested HTML content is: The tag opened most recently is
always the following tag to close. Improper HTML Tag nesting will cause a visual design page
break due to the browser’s incapability to render (read) tags that are out of place. Other errors
may occur. Other than to avoid visual webpage errors, HTML nesting is used for CSS
(Cascading Style Sheets). When tags are nested, CSS relies on the HTML attributes classes and
id to identify where to apply the style, marked by the opening tag and by the closing tag.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

8
 CHAPTER 4: CSS

4.1 Introduction about CSS

CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it
attractive. The reason for using CSS is to simplify the process of making web pages
presentable.CSS allows you to apply styles to web pages. More importantly, CSS enables you to
do this independent of the HTML that makes up each web page.

4.2 There are three types of CSS which are given below
 Inline CSS
 Internal or Embedded CSS
 External CSS

4.3 Some basic CSS properties

 CSS Colors
 CSS Backgrounds
 CSS Borders
 CSS Margins
 CSS Padding
 CSS Height/Width
 CSS Box Model
 CSS Outline
 CSS Text
 CSS Fonts
 CSS Icons
 CSS Links
 CSS Lists
 CSS Tables
 CSS Display
 CSS Max-width
 CSS Position
 CSS Z-index
 CSS Overflow
 CSS Float
 CSS Inline-block
 CSS Align
 CSS Combinators
 CSS Dropdowns
 CSS Forms
 CSS Website Layout
 CSS Units
 CSS Backgrounds

9
 CSS Box Sizing
 CSS Media Queries
 CSS Flexbox

10
 CHAPTER 5: JAVASCRIPT

5.1 Introduction to JavaScript

Javascript is the world's most popular lightweight, interpreted compiled programming language.
It is also known as scripting language for web pages. It is well-known for the development of
web pages, many non-browser environments also use it. JavaScript can be used for Client-side
developments as well as Server-side developments.

JavaScript can be added to your HTML file in two ways

 Internal JS: We can add JavaScript 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 JS: We can write JavaScript code in other file having an extension .js and
then link this file inside the <head> tag of the HTML file in which we want to add this
code.

Syntax -
<script>
// JavaScript Code
</script>

5.2 Variables and Control Statements

Variables in JavaScript are containers that hold reusable data. It is the basic unit of storage in a
program.
 The value stored in a variable can be changed during program execution.
 A variable is only a name given to a memory location, all the operations done on the
variable affects that memory location.
 In JavaScript, all the variables must be declared before they can be used.

// declaring single variable

var name;
// declaring multiple variables
var name, title, num;
// initializing variables
var name = "Harsh";
name = "Rakesh";

11
if-else Statement in JavaScript
The conditional statement will perform some action for the specific condition. If the condition
meet then the particular block of action will be executed otherwise it will execute another block
of action that satisfies that particular condition.

JavaScript’s conditional statements

Figure 5.1 If else statement [4]

 if
 if-else
 nested-if
 if-else-if ladder

Syntax:
1. if (condition)
2. statement;
3. else if (condition)
4. statement;
5..
6..
7. else
8. statement;

5.3 Functions in JavaScript

A function is a set of statements that take inputs, do some specific computation, and produce
output. Basically, a function is a set of statements that performs some tasks or does some
computation and then returns the result to the user.

The idea is to put some commonly or repeatedly done tasks together and make a function so that
instead of writing the same code again and again for different inputs, we can call that function.

12
Function Definition
Before, using a user-defined function in JavaScript we have to create one. We can use the above
syntax to create a function in JavaScript. A function definition is sometimes also termed as
function declaration or function statement.

Below are the rules for creating a function in JavaScript

 Every function should begin with the keyword function followed by,
 A user defined function name which should be unique,
 A list of parameters enclosed within parentheses and separated by commas,
 A list of statements composing the body of the function enclosed within curly braces {}.

Calling Functions: After defining a function, the next step is to call them to make use of the
function. We can call a function by using the function name separated by the value of parameters
enclosed between parenthesis and a semicolon at the end. Below syntax shows how to call
functions in JavaScript:

functionName( Value1, Value2, ..);

Return Statement: There are some situations when we want to return some values from a
function after performing some operations. In such cases, we can make use of the return
statement in JavaScript. This is an optional statement and most of the time the last statement in a
JavaScript function. Look at our first example with the function named as calcAddition. This
function is calculating two numbers and then returning the result. The most basic syntax of using
the return statement is:

return value;

Client-Side JavaScript: with HTML

The HTML <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an external script file
through the src attribute Common uses for JavaScript are image manipulation, form validation,
and dynamic changes of content. To select an HTML element, JavaScript most often uses the
document.getElementById() method . This JavaScript example writes "Hello JavaScript!" into an
HTML element with id="demo":

13
5.4 Client-Side JavaScript: with DOM

Why is DOM required?

HTML is used to structure the web pages and Javascript is used to add behavior to our web
pages. When an HTML file is loaded into the browser, the javascript cannot understand the
HTML document directly. So, a corresponding document is created (DOM). DOM is basically
the representation of the same HTML document but in a different format with the use of objects.
Javascript interprets DOM easily i.e javascript cannot understand the tags(<h1>H</h1>) in
HTML document but can understand object h1 in DOM. Now, Javascript can access each of the
objects (h1, p, etc) by using different functions.

Methods of Document Object

 write(“string”): writes the given string on the document.

 getElementById(): returns the element having the given id value.
 getElementsByName(): returns all the elements having the given name value.
 getElementsByTagName(): returns all the elements having the given tag name.
 getElementsByClassName(): returns all the elements having the given class name.

5.5 Data Types: JavaScript supports the following data types:

Variable Explanation Example

String represents textual data 'hello' , "hello world!" etc
Number an integer or a floating-point number 3 , 3.234 , 3e-2 etc.
Boolean Any of two values: true or false true and false
An array is an object that can store ['hello', 'world', 'welcome']; Here, words is
Array
multiple values at once. an array.
Object key-value pairs of collection of data let student = { };
Table 5.1: Data Types in JavaScript [3]

14
 CHAPTER 6: PROJECT

This will enhance the learning of HTML, CSS, JS as the designing part is also there. You will
get to know about the scheduling of different components. The project will help you to go
through the React Component Lifecycle and Framework.

Figure 6.1: <We can help someone> made using HTML, CSS and JavaScript

Figure 6.2: <Our Blog> made using HTML, CSS and JavaScript

15
 CONCLUSION

This course has an excellent and rewarding experience. I can conclude that there have been a
lot I've learnt from my work at training.Needless to say, the technical aspects of the work
I’ve done are not flawless and could be improved provided enough time.
As someone with no prior experience in front end development whatsoever, I believe my time
spent in training and discovering new languages was well worth it and contributed to finding an
acceptable solution to an important aspect of Web Design and Development. Two main things
that I’ve learned are the importance of time management skills and self-motivation. Although I
have often stumbled upon the problem at university. They had to be approacheddi fferently in a
working environment. Working with web development language has increased my interest in
them.

16
 REFERENCES
[1] Martin, Sarah. HTML, CSS, and JavaScript. The Definitive Guide to Squarespace, 2014.
[2] Duckett, Jon. Web design with HTML, CSS, JavaScript and jQuery set. Vol. 1.
IN: Wiley, 2014.
[3] Goodman, Danny. Dynamic HTML: The definitive reference: A comprehensive
resource for HTML, CSS, DOM & JavaScript. "O'Reilly Media, Inc.", 2002.
[4] Image 5.1 from Tutorials Tonight.

17