A INDUSTRIAL TRAINING REPORT

on
“FRONT-END DEVELOPMENT”

Submitted in the fulfilment of the requirement for the award of the degree of

Bachelor of Technology

in

COMPUTER SCIENCE & ENGINEERING

by

ANKIT PRAJAPATI
(Roll No. 2226226)

Department of Computer Science & Engineering

I.K. Gujral Punjab Technical University Amritsar Campus
CERTIFICATE
 STUDENT’S DECLARATION

I hereby certify that the work which is being presented in this training report with the project
entitled FRONT-END DEVELOPMENT by ANKIT PRAJAPATI, University Roll
No.2226226 in partial fulfillment of requirements for the award of degree of B.Tech.
(Computer Science & Engineering) submitted in the Department of Computer Science &
Engineering at I.K. GUJRAL PUNJAB TECHNICAL UNIVERSITY is an authentic record
of my own work under the EDUNET FOUNDATION
The matter presented has not been submitted by me in any other University / Institute for the
award of B.Tech. Degree.

Student Name: ANKIT PRAJAPATI

Univ. Roll No. 2226226
(Signature of Student)

This is to certify that the above statement made by the candidate is correct to the best of my
knowledge.
(Signature of Internal Examiner)

The External Viva-Voce Examination of the student has been held on .

(Signature of External Examiner) (Signature of HOD)

 Acknowledgements

This work is just not an individual contribution till its completion. I take this
opportunity to express a deep gratitude towards my teacher for providing excellent
guidance encouragement and inspiration throughout the Training work. Without his
invaluable guidance, this work would never have been a successful one.

I would like to express deepest appreciation towards Dr.Vipul Sharma, Head of

Department of Computer Science & Engineering

At last we must express our sincere heartfelt gratitude to all the staff members
of Computer Science & Engineering Department who helped me directly or
indirectly during this course of work.

ANKIT PRAJAPATI
 ABSTRACT

This report outlines the six-week front-end development training undertaken at Edunet
Foundation, a social enterprise established in 2015 dedicated to bridging the academia-
industry divide, enhancing student employability, promoting innovation, and fostering an
entrepreneurial ecosystem in India.

The training program provided hands-on experience in designing and developing user
interfaces for websites and web applications, focusing on technologies such as HTML, CSS,
JavaScript.

Throughout the training, emphasis was placed on creating responsive, accessible, and visually
appealing user interfaces, understanding client requirements, designing prototypes, coding,
testing, and deploying projects.

The program also highlighted best practices in cross-browser compatibility, performance

optimization, and code quality maintenance.

Edunet Foundation's commitment to leveraging emerging technologies to augment and

upgrade the knowledge ecosystem was evident throughout the training.

The organization has a national footprint, with programs benefiting tens of thousands of
learners annually, and has held Special Consultative Status with the Economic and Social
Council (ECOSOC) of the United Nations since 2020.

The report concludes with reflections on the challenges faced, solutions implemented, and
skills developed during the training, underscoring the critical role of front-end development in
enhancing user experiences in digital products.
Contents

1 Introduction 1
1.1 What is Web Hosting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 What is Website? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.1 How to access Websites? . . . . . . . . . . . . . . . . . . . . . . 6
1.2.2 Types of Website: . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Domain Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Tools of Web Development 9

3 HTML 10
3.1 What is HTML used for ?......................................................................................10
3.2 HTML Basic Format Page Structure....................................................................10
3.3 Designing Web Page................................................................................................11

4 CSS 16
4.1 What is CSS ?.........................................................................................................16
4.2 Why we learn CSS?..................................................................................................16
4.3 How CSS is different from HTML?..........................................................................19
4.4 Why is CSS used in HTML?...................................................................................20

5 JavaScript 22
5.1 What is JavaScript...................................................................................................22
5.2 Why JavaScript is used?........................................................................................24
5.3 How JavaScript is different from HTML?...............................................................25

v
 5.4 Why to learn JavaScript ?......................................................................................26

6 Conclusion 27

Bibliography 28

vi
List of Figures

3.1 HTML Page Structure............................................................................................11

3.2 HTML........................................................................................................................14

4.1 CSS.............................................................................................................................17

5.1 Javascript..................................................................................................................24

vii
 Chapter 1

Introduction

Web development, also known as website development, refers to the tasks associated
with creating, building, and maintaining websites and web applications that run online
on a browser. It may, however, also include web design, web programming, and database
management.

Web development is closely related to the job of designing the features and function-
ality of apps (web design). The term development is usually reserved for the actual
construction of these things (that is to say, the programming of sites).

The basic tools involved in web development are programming languages called HTML
(Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. There
are, however, a number of other programs used to “manage” or facilitate the construction
of sites that would otherwise have to be done “from scratch” by writing code. A num-
ber of content management systems (CMS) fall into this category, including WordPress,
Joomla!, Drupal, TYPO3, and Adobe Experience Manager, among others.

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
1.1 What is Web Hosting?
A web hosting service is a type of Internet hosting service that hosts websites for clients,
i.e. it offers the facilities required for them to create and maintain a site and makes
it accessible on the World Wide Web. Companies providing web hosting services are
sometimes called web hosts.

Web Hosting is a service that allows hosting/post-web-server applications( website or

web page ) on a computer system through which web-browser clients can have easy ac-
cess to electronic content on the Internet.

Web Server or Web Host is a computer system that provide web hosting. When In-
ternet user’s want to view your website, all they need to do is type your website address
or domain into their browser. The user’s computer will then connect to your server and
your web pages will be delivered to them through the browser. Basically, the web hosts
allow the customers to place documents, such as HTML pages, graphics, and other mul-
timedia files, etc. onto a special type of computer called a web server. It provides a
constant and high-speed connection to the backbone of the Internet.

Typically, web hosting requires the following:

• one or more servers to act as the host(s) for the sites; servers may be physical or
virtual

• colocation for the server(s), providing physical space, electricity, and Internet con-
nectivity;

• Domain Name System configuration to define name(s) for the sites and point them
to the hosting server(s);

2
 • a web server running on the host;

• for each site hosted on the server:

• space on the server(s) to hold the files making up the site

• site-specific configuration

• often, a database;

• software and credentials allowing the client to access these, enabling them to create,
configure, and modify the site;

• email connectivity allowing the host and site to send email to the client.

Types of Web Hosting

Different types of Web hosting services are listed below:

• Free Hosting

• Virtual or Shared Hosting

• Dedicated Hosting

• Co-location Hosting

Free Hosting:
This is a free non-paid web hosting service. This type of hosting is available with
many prominent sites that offer to host some web pages for no cost, like Hostinger.

Advantages:

• Free of cost

• Use websites to place advertisements. banners and other forms of advertising media

Disadvantages:

3
• Customer support is missing

• Low bandwidth and lesser data transfer

• No control over your website

Shared/Virtual Hosting:
It’s a web hosting service where many websites reside on one web server connected
to the internet. This type of hosting is provided under one’s own domain name,
www.yourname.com. With a hosting plan with the wed b hosting company, one
can present oneself as a fully independent identity to his/her web audience, like
Lindo.

Advantages:

• Easy and affordable

• Secured by hosting provider

• 24/7 Technical support

Disadvantages:

• Shared resources can slow down the whole server

• Less flexible than dedicated hosting

Dedicated Hosting:
Hosted on a dedicated server, this type of hosting is best suited for large websites
with high traffic. In this, the company wishing to go online rents an entire web
server from a hosting company. This is suitable for companies hosting larger web-
sites, maintaining others’ sites or managing a big online mall, etc like Google
Cloud.

Advantages:
4
• Ideal for large business

• Strong database support

• Unlimited software support

• Powerful e-mail solutions

• Complete root access to your servers

Disadvantages:

• Its very expensive

• Requires superior skill sets

Co-located Hosting:
This hosting lets you place your own web server on the premises of a service
provider. It is similar to that of dedicated hosting except for the fact that the
server is now provided by the user-company itself and its physical needs are met
by the hosting company like AWS.

Advantages:

• Greater Bandwidth High Up-Time

• Unlimited Software Options

• High Security

Disadvantages:

• Difficult to configure and debug

• Its expensive

5
 • Require high skills

It’s simple to find a reliable web hosting platform on which to host your website or
launch a company.

1.2 What is Website?

Website is the collection of web pages, different multimedia content such as text, images, and
videos which can be accessed by the URL which you can see in the address bar of the
browser.For example: https://www.geeksforgeeks.org

1.2.1 How to access Websites?

When we type a certain URL in a browser search bar, the browser requests the page from the
Web server and the Web server returns the required web page and its content to the
browser. Now, it differs how the server returns the information required in the case of
static and dynamic websites.

1.2.2 Types of Website:

• Static Website

• Dynamic Website

Static Website: In Static Websites, Web pages are returned by the server which are
prebuilt source code files built using simple languages such as HTML, CSS, or JavaScript.
There is no processing of content on the server (according to the user) in Static
Websites. Web pages are returned by the server with no change therefore, static
Websites are fast. There is no interaction with databases. Also, they are less costly as
the host does not

6
need to support server-side processing with different languages.
Static does not mean that it will not respond to user actions, These Websites are called
static because these cannot be manipulated on the server or interact with databases
(which is the case in Dynamic Websites).

Dynamic Website: In Dynamic Websites, Web pages are returned by the server which
are processed during runtime means they are not prebuilt web pages but they are built
during runtime according to the user’s demand with the help of server-side scripting
languages such as PHP, Node.js, ASP.NET and many more supported by the server.
So, they are slower than static websites but updates and interaction with databases are
possible.
Dynamic Websites are used over Static Websites as updates can be done very easily as
compared to static websites (Where altering in every page is required) but in Dynamic
Websites, it is possible to do a common change once and it will reflect in all the web
pages.

1.3 Domain Names

Every website on the Internet has its IP (Internet Protocol) address and this IP address
points to the particular website through which we can reach that website but this IP
address is hard to remember the IP address for the websites which we want to reach
because the IP address will look something like that– 236.56.23.156

That’s why remembering all these numbers is a little bit challenging and hence
exploring the website, to solve all these challenges the system called DNS (Domain
Name System) came into existence which converts the IP address into Domain name
and vice versa. which makes it easy to remember the name that is pointing to the
particular IP address of any website these names are called the Domain name.

7
For example “www.geeksforgeeks.org” is the domain name which it pointing to the par-
ticular IP address. When we type the domain name to our browser URL bar then the
DNS converts this domain name to the IP address and we become able to explore that
particular website.

Some of the popular extensions used in Domain names are:

.com: It is the short form of the “commercial” word and this was the first TLD and
most popular for the business and commercial websites.
.net: It is the short form of the “network” word and this TLD is for the technology-
related website but now it is commonly used for many websites.
.edu: It is the short form of the “education” word and this TLD is used for Educational
websites.
.org: It is the short form of the “organization” word and this TLD is for the organiza-
tional websites.
.gov: It is the short form of the “government” word and this TLD is used for the gov-
ernment websites.
.mil: It is the short form of the “military” word and this TLD is strictly used for the
U.S military and government agencies.

8
Chapter 2

Tools of Web Development

A Front-End Web Development Tool is actually the software that allows the front-end
developers to build the website layout and UI more efficiently and without any hassle.
With the help of such tools – the work of front-end web developers, especially the repet-
itive or monotonous tasks, gets reduced that subsequently fastens the web development
process.
There are numerous front-end web development tools out there for various specific
requirements such as HTML, CSS, and JavaScript tools, Code-Editing tools, Deployment
Tools, Prototyping Wireframing tools, Security tools, and many more. Though you’re
required to consider various factors before opting out for a particular tool such as your
requirements (quite obvious it is!!), offered functionalities, ease of use, platform
compat- ibility, prices, etc. The 3 basic and most important tools for web development
are

1. HTML : To define the content of web pages

2. CSS : To specify the layout of web pages
3. JavaScript : To program the behavior of web pages

9
 Chapter

3 HTML

HTML is known as HyperText Markup Language. It is a combination of both Hyper- text

and Markup language. Here hypertext means the link between the web pages and markup
is used to define the text document within tag which defines the structure of web pages. It
acts as a skeleton of a web page and without HTML it would be very difficult or
impossible to build a webpage. It is used by all the browsers and used to manipulate text,
images, and other content, in order to display it in the required format. In this article,
we will learn how to create an HTML webpage.

3.1 What is HTML used for ?

HTML is used to create the structure of web pages that are displayed on the World Wide
Web (www). It contains Tags and Attributes that are used to design the web pages.
Also, we can link multiple pages using Hyperlinks.

3.2 HTML Basic Format 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

10
which all web pages are created.

Figure 3.1: HTML Page Structure

3.3 Designing Web Page

To design a webpage in HTML we need to learn about tags and attributes available in
HTML. In HTML, tags are some instructions that are enclosed in angle braces. With the
help of these tages, we can design a more attractive HTML page. Some of the
important tags to be used are as follows:

11
 DOCTYPE! html – A doctype or document type declaration is an instruction that
tells the web browser about the markup language in which the current page is written.
It is not an element or tag. The doctype declaration is not case-sensitive.

html tag – This tag is used to define the root element of HTML document. This
tag tells the browser that it is an HTML document. It is the second outer container
element that contains all other elements within it.

head tag – This tag is used to define the head portion of the HTML document that
contains information related to the document. Elements within the head tag are not
visible on the front-end of a webpage.

body tag – 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.

Title tag: It is used to define the title of an HTML document.

Syntax: ¡title¿ Statements... ¡/title¿

Paragraph tag: It is used to define paragraph content in an HTML document.

Syntax: ¡p¿ Statements... ¡/p¿

Header tag (¡h1¿ . . . ¡/h1¿ to ¡h5¿ . . . ¡/h5¿):

These tags are called header tags and they are used to give heading to your webpage of
different sizes.¡h1¿. . . ¡/h1¿ being the Largest Heading to ¡h5¿ . . . ¡/h5¿ being the Smallest
Heading.

Bold Tag (¡strong¿. . . ¡/strong¿ or¡b¿. . . ¡/b¿): These tags are used to make text
look bold.

Italic Tag (¡i¿ . . . ¡/i¿ or ¡em¿. . . ¡/em¿):

These tags are used to make text look italics. The only difference between ¡i¿ and ¡em ¿

12
is that ¡em¿semantically emphasis on important text or word whereas ¡i¿ tag is used to
make is just used to make text italics.

Underline tag: It is used to set the content underline.

Comment tag: It is used to set the comment in an HTML document. It is not visible
on the browser.
Syntax: ¡!– Statements... –¿

Line break tag: It is used to break the line.

Syntax: ¡br¿

Image Tag: If we need to add an image to our website we need to use the follow-
ing
Syntax: ¡img src=”gfg.PNG” alt=”GeeksforGeeks Image”¿
img: Tells browser that we want to add an image. src: Tells source of image for eg
image from desktop or a website. alt: This attribute is used to describe an image. If the
image is not able to download in a web browser due to some reason then alt is shown.

Anchor Tag: This tag is mainly used to connect one web page to another.
Syntax: ¡a href=”https://www.geeksforgeeks.org/c-plus-plus/?ref=shm”¿ Click Here to
Learn C++¡/a¿

Radio button tag: It is used to select only one option from the given options.
Syntax: ¡input type=”radio” name=”option”¿ optionvalue

Checkbox button tag:Itisusedtoselectanoptionfromthegivenoptions.

Syntax :< inputtype = ”checkbox”name = ”check”value = ”” >

Submit input tag:Itisusedtotakeinputfromtheuser.

Syntax :< inputtype = ”Submit”value = ”Submit” >

13
Example1 : Thisisthebasicexampleof HTMLthatdisplaytheheadingandparagraphcontent.

HTML

Figure 3.2: HTML

14
Output:

15
Chapter

4 CSS

4.1 What is CSS ?

CSS (Cascading Style Sheets)is used to apply styles to web pages. 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.

4.2 Why we learn CSS?

Styling is an essential property for any website. It increases the standards and overall
look of the website that makes it easier for the user to interact with it. A website can be
made without CSS, as styling is MUST since no user would want to interact with a dull
and shabby website. So for knowing Web Development, learning CSS is mandatory.

16
 Basic Format: It is the basic structure of CSS style of an webpage.

Figure 4.1: CSS

There are three types of CSS which are given below:

Inline: Inline CSS contains the CSS property in the body section attached with the
element known as inline CSS.

Internal or Embedded: The CSS ruleset should be within the HTML file in the
head section i.e the CSS is embedded within the HTML file.

External: External CSS contains a separate CSS file that contains only style property
with the help of tag attributes.

17
 Let’s see a small example of HTML webpage with CSS styles. Here, we use styles to
set the alignment and text color of a webpage.

18
Output :

4.3 How CSS is different from HTML?

HTML is used to define a structure of a web page whereas CSS is used to style the web
pages by using different styling features.

• HTML consists of tags inside which text is enclosed and CSS consists of selectors
and declaration blocks.

• CSS can be internal or external depending upon the requirement.

• We cannot use HTML inside a CSS sheet but we can use CSS inside an HTML
document.

• CSS has comparatively higher backup and support than HTML.

19
 4.4 Why is CSS used in HTML?
Solves a big problem: 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.

Saves a lot of time: Because CSS style definitions are stored in external CSS files, updating
only one file can modify the entire website.

Provide more attributes: CSS gives more specific features for defining the look and
feel of a website than simple HTML.

Pages load faster: CSS doesn’t require you to write HTML tag attributes all of the
time. A tag’s rule can be written once and applied to all instances of the tag. As a
result, CSS uses less code, resulting in speedier download times.

Easier Website maintenance: 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.

Multiple device compatibility: We can use CSS with older language versions be-
cause it is compatible with them. CSS makes it possible to optimize material for several
devices. Base for web development: HTML and CSS is the basic skill that every web
developer should know. It is the basic skill that is required for building a website.

Makes your website look attractive: A website that’s dull and plain will not at-
tract the user, so adding some style would surely make your website presentable to the
user.

Makes the design come live: A web developer is responsible for making the design given
to him as a live product. It is used for styling to develop the design of the website.
Increases user experience of the website: A website with a simple yet beautiful UI
would
20
help the users to go through the website easily. It is used to make the user interface better.

More career opportunities: 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.

21
Chapter 5

JavaScript

5.1 What is JavaScript

JavaScript (JS) is the world’s most popular lightweight, interpreted compiled program-
ming 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.

Advantages of using Internal JS:

• Browser does not have to make an extra HTTP request for JavaScript code.

• It does not allow caching.

Disadvantages of Internal JS:

22
 • The readability of code becomes poor.

• Maintenance of code becomes hard when there is a lot of code.

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=”filename.js”
> taginside < head > tagoftheHTMLfile.

Advantages of using External JS

HTMLandJavaScriptfilesbecomemorereadableandeasytomaintain.

• Page loads speed up due to Cached JavaScript files.

Disadvantages of External JS:

• Coders can easily download your code using the url of the script(.js) file.

• An extra HTTP request is made by the browser to get this JavaScript code.

Syntax: It is the basic syntax to write code.

¡script¿
// JS Code
¡/script¿

23
 This example describes a simple function and prints the values.

Figure 5.1: Javascript

Output: Console output

Apple
45

5.2 Why JavaScript is used?

JavaScript is the most popular programming language for both client-side and server-
side to make interactive web pages. It is mainly used to develop websites and web-
based applications.

Creating Interactive Websites: JavaScript is used to make the web pages dynamic

24
and interactive. It means using JavaScript, we can change the web page content and
styles dynamically.

Building Applications: JavaScript is used to make web and mobile applications. To

build the web and mobile apps, we can use most popular JavaScript frameworks like –
ReactJS, React Native, Node.js etc.

Web Servers: We can make robust server applications using JavaScript. To be precise
we use JavaScript frameworks like Node.js and Express.js to build these servers.

Game Development: JavaSCript can be used to design Browser games. In JavaScript,

lots of game engines available that provide frameworks for building games.

5.3 How JavaScript is different from HTML?

JavaScript is an advanced programming language that makes web pages more interactive
and dynamic whereas HTML is a standard markup language that provides the primary
structure of a website.
JavaScript simply adds dynamic content to websites to make them look good and HTML
work on the look of the website without the interactive effects and all.
JavaScript manipulates the content to create dynamic web pages whereas HTML pages
are static which means the content cannot be changed.
JavaScript is not cross-browser compatible whereas HTML is cross-browser compati-
ble. JavaScript can be embedded inside HTML but HTML can not be embedded inside
JavaScript.

25
5.4 Why to learn JavaScript ?
JavaScript is the most popular and hence the most loved language around the globe.
Apart from this, there are abundant reasons to learn it. Below are a listing of few im-
portant points:

No need of compilers: Since JavaScript is an interpreted language, therefore it does

not need any compiler for compilations.

Used both Client and Server-side: Earlier JavaScript was used to build client-side
applications only, but with the evolution of its frameworks namely Node.js and
Express.js, it is now widely used for building server-side applications too.

Helps to build a complete solution: As we saw, JavaScript is widely used in both

client and server-side applications, therefore it helps us to build an end-to-end solution
to a given problem.

Used everywhere: JavaScript is so loved because it can be used anywhere. It can

be used to develop websites, games or mobile apps, etc.

Huge community support: JavaScript has a huge community of users and mentors
who love this language and take it’s legacy forward.

26
Chapter 6

Conclusion

In today’s Web development, a good page design is essential. A bad design will lead to
the loss of visitors and that can lead to a loss of business. In general, a good page layout
has to satisfy the basic elements of a good page design. This includes color contrast,
text organization, font selection, style of a page, page size, graphics used, and
consistency. In order to create a well-designed page for a specific audience. The
developer needs to organized and analyze the users’ statistics and the background of
the users. Although it can be hard to come up with a design that is well suited to
all of the users, there will be a design that is appropriate for most of the audience.
The better the page design, the more hits a page will get. That implies an increase in
accessibility and a possible increase in business. A general purposed Web site should
use non-frame pages and graphics navigation bar with rollover effects. In addition to
the graphic navigation bar with rollover effects, each page should also have a text-only
navigation bar for easy control. The developer should also create a Cascading Style
Sheet to control the font and font-size and use the style sheet throughout the site to
obtain a consistent look and feel.

27
Bibliography

[1] https://www.geeksforgeeks.org/

[2] https://www.w3schools.com/

28