AN

Industrial Training Report

On

Full Stack Web Development

Submitted in partial fulfillment for the award of degree of
Bachelor of Technology

in
Department of Computer Science & Engineering

Submitted to: Submitted By:

Mr. Pawan Sen Akash kumar
HOD (Department of Computer Science) Roll No.:21EAICS018
Semester/Year: VII Sem/ 4th Year

Department of Computer Science & Engineering

Arya Institute of engineering and Technology, Jaipur
Rajasthan Technical University, Kota
(2024-2025)
1
 DECLARATION

I hereby declare that the work which is being presented in the Industrial Training report titled Full-
Stack Web Development in partial fulfilment for the award of the Degree of Bachelor of Technology
in Computer Science Engineering and submitted to the Department of Computer Science
Engineering ,ARYA I N S T I T U T E O F E N G I N E E R I N G & T E C H N O L O G Y , KUKAS ,
JAIPUR is an authentic record of my own work carried out at Upflairs Pvt. Ltd. during the session 2024-
25 (7 Semester). I have not submitted the matter presented in this report anywhere for the award of any
other degree.

Signature of Student with Name and Roll. No.:

AKASH KUMAR

21EAICS018

Place: Jaipur Date:

Enclosed: Training Certificate from Company

2
CERTIFICATE OF TRAINING

3
 ARYA INSTITUTE OF ENGINEERING & TECHNOLOGY
SP-40, RIICO Industrial Area, Jaipur (Raj)-302028
Department of Computer Science & Engineering

Certificate

This is to certify that the work, which is being presented in the Practical
training seminar report for practical training taken at “UPFLAIRS
PVT. LTD.” entitled “FULL STACK DEVELOPMENT” submitted by
Mr. AKASH KUMAR, a student of 4th year (VII Sem) B.Tech. in
Computer Science Engineering as a partial fulfilment for the award of
degree of bachelor of technology is a record of student’s work carried out
and found satisfactory for submission.

Mr. Ankur Dutt Sharma Mr.Pawan Sen

Training Co-Ordinator HOD,CSE

4
 Acknowledgment

I would like to express my heartfelt appreciation to all those who have contributed to the successful
completion of my industrial training, which I undertook at Upflair pvt,Ltd. This experience has played a pivotal
role in my professional development and academic journey.
I extend my sincere gratitude to Arya Institute of Engineering and Technology for providing me with
the opportunity
to engage in this industrial training as a vital component of my educational curriculum. This practical
exposure has significantly enriched my understanding of the industry and its operations.
I am immensely thankful to Mobzway for accepting me as an intern and for their unwavering support and
guidance throughout my training period. My gratitude extends to Miss. Neha Tailor for her mentorship,
insights, and constant encouragement, which have been instrumental in my growth and learning.
I am also grateful to my friends and family who provided me with unending support and encouragement
during this period.
I would like to convey my appreciation to my professors and mentors at Mobzway, whose teachings and
guidance prepared me for this enriching journey.
This report would not have been possible without the collective support and guidance of all these individuals and
institutions. I am genuinely thankful for the experiences and knowledge I gained during my industrial
training, and I look forward to applying these skills in my future endeavors.

5
 TABLE OF CONTENTS

CHAPTER PARTICULARS PAGE NO.

NO.

Title Page 1

Candidate’s Declaration 2

Certificate of Training 3

Certificate by the Department 4

Acknowledgment 5

Table of Contents 6

List of Tables 7

Abstract 8

1 Web development 9

1. Introduction
2. Several aspects of web development
3. Process

2 Hardware and software requirement 12

1. Hardware required
2. Software required

3 Tools 13
1. Introduction
2. Features
4 HTML 14
1. Introduction
2. What is
web?
3. Versions of HTML
5 CSS 16
1. What is CSS?
2. CSS Syntax

6
 1. Id Selector
2. Class selector
3. CSS Comments
4. CSS Styles
6 JavaScript 19
1. Introduction
2. How to change the content of HTML
using JavaScript
3. Comments
4. JavaScript Variable
5. JavaScript from validation
6. JavaScript Functions
7. JavaScript control statements
7 Projects
1. E-commerce website 27

8 1. Conclusion
2. Future Scope 30
3. References

LIST OF TABLES

TABLE TITLE PAGE

NO. NO.
1 Hardware required 16

2 Software required 17

7
 Abstract
Web development is the work involved in developing a website for the Internet (World Wide Web)
or an intranet (a private network). Web development can range from developing a simple single
static page of plain text to complex web applications, electronic businesses, and social network
services. A more comprehensive list of tasks to which Web development commonly refers, may
include Web engineering, Web design, Web content development, client liaison, client-
side/server-side scripting, Web-server and network security configuration, and e-commerce
development.

Among Web professionals, "Web development" usually refers to the main non-design aspects of
building Websites: writing markup and coding. Web-development may us content management
systems (CMS) to make content changes easier and available with basic technical skills.

For larger organizations and businesses, Web development teams can consist of hundreds of
people (Web-developers) and follow standard methods like Agile methodologies while developing
Web sites. Smaller organizations may only require a single permanent or contracting developer,
or secondary assignment to related job positions such as a graphic designer or information systems
technician. Web-development may be a collaborative effort between departments rather than the
domain of a designated department. There are three kinds of Web-developer specialization: front-
end developer, back-end developer, and full-stack-developer. Front-end developers are responsible
for behavior and visuals that run in the user browser, while back-end developers deal with the
servers. Since the commercialization of the Web with Tim Berners-Lee developing the World
Wide Web at CERN, the industry has boomed and has become one of the most used technologies
ever.

8
 CHAPTER-1
WEB DEVELOPMENT
1.1 Introduction
Web development is the work involved in developing a website for the Internet (World Wide
Web) or an intranet (a private network). Web development can range from developing a simple
single static page of plain text to complex web applications, electronic businesses, and social
network services. A more comprehensive list of tasks to which Web development commonly
refers, may include Web-engineering, Web-design, Web content development, client liaison,
client-side/server-side scripting, Web server and network security configuration, and e-commerce
development.
For larger organizations and businesses, Web development teams can consist of hundreds of
people (Web-developers) and follow standard methods like agile methodologies while developing
Web sites. Smaller organizations may only require a single permanent or contracting developer,
or secondary assignment to related job positions such as a graphic designer or information
systems technician. Web-development may be a collaborative effort between departments rather
than the domain of a designated department. There are three kinds of Web developer
specialization: front-end-developer, back-end-developer, and full-stack-developer.[3]Front-end
developers are responsible for behavior and visuals that run in the user browser, while back-end-
developers deal with the servers.

1.2 Several Aspects of Web-Development

Before developing a website once should keep several aspects in mind like:

⮚ What to put on the website?

⮚ Who will host it?

⮚ How to make it interactive?

⮚ How to secure the source code frequently?

⮚ Will the website design display well in different browsers?

⮚ Will the navigation men us be easy to use?

⮚ Will the website load quickly?

⮚ How easily will the site pages print?

9
Figure2:Web-Development

10
1.3 Process
These are the steps considered while developing a web page:

Decidepurpose

Planning

Designing

GatherContent

Building

Testing

Uploadtoserver

Marketingand
maintenance

Figure3: Web-Developing Process

11
 CHAPTER-2

HARDWARE AND SOFTWARE REQUIREMENT

2.1 Hardware Required:

TABLE1- HARDWARES REQUIRED

Number Description

1. 64 bit Architecture Window10

2. 512 MB RAM

2.2 Software Required:

TABLE2- SOFTWARES REQUIRED

Number Description

1. Windows 10
2. API
3. Server
4. HTML/CSS/JavaScript

12
 CHAPTER- 3
TOOLS

1. Introduction

The Translate and Edit application had been planned to consist of two parts-front-end and back-
end-development. The front-end is the part of the web that you can see and interact with (e.g.,
Client-side programming). While front-end code interacts with the user in real time, the back-end
interacts with a server to return user ready results. The front-end is a combination of HTML, CSS
and JavaScript coding. By using JavaScript, modifications of the design of a web page can be made
immediately, however only temporary and visible only by the user.

Normally the user would not have rights to modify web content dynamically on the server side.
Logically, administrators are the ones who deal with back-end modification of databases for
example, as they often contain sensitive data which should not be available to see or modify by
the general public. These front-end and back-end tools includes languages like HTML, CSS,
JavaScript etc. We will discuss all these languages in brief as given below.

2. Features

→Web Page Assets

→Resources

→Network Information

→Profiting and Auditing

13
 CHAPTER-4
HTML
4.1 Introduction

The Hyper Text Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web pages
semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML provide
same and to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as <img/> and <input/> directly introduce content into the page.
Other tags such as <p> surround and provide information about document text and may include
other tags as sub-elements. Browsers do not display the HTML tags but use to interpret the content
of the page.

4.2 What is the Web?

The Web is composed of web pages stored on web servers, which are machines that are constantly
connected to the Internet and which provide the pages that users request. Every webpage, and more
generally any online resource, such as images, video, music, and animation, is associated with a
unique address called a URL. The key element for viewing web pages is the browser, a software
program which sends requests to web servers, then processes the resulting data and displays the
information as intended, based on instructions in the HTML page.
The most commonly used browsers on the Internet include:

1. Mozilla Firefox,

2. Microsoft Internet Explorer,

3. Netscape Navigator,

4. Safari,

5. Opera
14
4.3 Versions of HTML

HTML was designed by Tim Berners-Lee, at the time a researcher at CERN (Chinese Ecosystem
Research Network), beginning in 1989. He officially announced the creation of the Web on
Usenet in August 1991. However, it wasn't until 1993 that HTML was considered advanced
enough to call it a language (HTML was then symbolically christened HTML 1.0).
RFC1866, dated November1995, represented the first official version of HTML, called HTML
2.0. After the brief appearance of HTML 3.0, which was never officially released, HTML 3.2
became the official standard on January 14, 1997. The most significant changes to HTML 3.2
were the standardization of tables, as well as many features relating to the presentation of web
pages.

On December 18, 1997, HTML 4.0 was released. Version 4.0 of HTML was notable for
standardizing style sheets and frames. HTMLversion4.01, which came out on December 24,
1999 , made several minor modifications to HTML4.0.

Example:

<!Doctype html>
<title>This is a title</title>
</head>
<body>
<div>
<p>He>
</div>
</body>
</html>

15
 CHAPTER-5
CSS

5.1 What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a corner stone technology of
The World Wide Web, along side HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors, and
fonts. This separation can improve content accessibility; provide more flexibility and control in
the specification of presentation characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the
structural content; and enable the .css file to be cached to improve the page load speed between
the pages that share the file and its formatting.
The name cascading comes from the specified priority scheme to determine which style rule
applies if more than one rule matches a particular element. This cascading priority scheme is
predictable.

16
5.2 CSS Syntax:

A CSS rule-set consists of a selector and a declaration block:

CSS selector: The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons. Each declaration
includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.

The External CS Scan be declared in the required HTML pages:

<linkre1="style sheet" h ref="CSS_filename.css">
The External CSS file is saved by using the .css extension, whereas the internal CSS is saved in
corresponding HTML file using the <style> tag. Using External CSS is much better than using
Internal. Here are a few reasons this is better.
⮚ Easier Maintenance
⮚ Reduced File Size
⮚ Reduced Bandwidth
⮚ Improved Flexibility

The selectors that can be used to select the HTML part are-
⮚ Id selector
⮚ Class selector

5.2.1 : Id-Selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of an
element should be unique within a page, so the id selector is used to select one unique element
with a specific id, write a hash (#) character, followed by the id of the element. The style rule
below will be applied to the HTML element with id=”para1”:

Example:
Suppose the HTML content is as follow,
<hl id="para1">content</hl>Then Id will be declared as#para1{
text-align: center; color:blue;
font-family:
}

17
 2. The class Selector:

The class selector selects elements with a specific class attribute.

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

Example:
.para1
{
text-align: center; color:blue;
font-family;
}

NOTE:
o We can access class in style page or in HTML page as well by using style tag
in head tag.

o Class makes our work easy as we can give many tags a single attributes by using
class name and assign the same to the setags.

o Class scan be access by(.) dot operator in style or CSS file.

5.3 CSS Comments:

Comments are used to explain the code, and may help when you edit the source code at
a later date. Comments are ignored by browsers. A CSS comment starts with /* and endswith */.
Comment scan also span multiple lines.

Example:
.para1
{
text-align:center;color:blue;
font-family; /*this is the single line comment*/

}
In the example above, all HTML elements with class = paral will be blue and center-aligned.

5.4 CSS Styles:

⮚ Backgroundproperties
⮚ Borderproperties
⮚ Padding
⮚ Margin
⮚ Colour
⮚ Fontproperties
⮚ TextpropertiesLinkproperties/Navigationbarproperties

18
 CHAPTER-6
JAVASCRIPT

1. What is JavaScript?

JavaScript is an object-based scripting language that is lightweight and cross-platform. Java Script
is not compiled but translated. The Java Script Translator (embededinbrowser)is responsible to
translate the JavaScript code.

It is mainly used for:

➢ Client-side validation

➢ Dynamic drop-down menus.

➢ Displaying data and time.

➢ Displaying pop up windows and dialog boxes (like alert dialog box, confirm

dialog box and prompt dialog box).

➢ Displaying clocks etc.

Example of JavaScript:

<h2>Welcome to JavaScript</h2>
<Script>
document.write("HelloJavaScriptbyJavaScript");
</script>
Here,<script>tag is used to initializethescriptanddocument.write0isa function used to write.
Like CSS, Java Script also can be placed in:
1. Between the body tag of HTML
2. In.JSfile (external Java Script)
3. Between the head tag of HTML

19
Figure4: Web Page Coding

1. Java Script Example: Code between the body tag

In the given example, we have displayed the dynamic content using JavaScript. Let's see the simple
example of JavaScript that displays alert dialog box.
<script type="text/JavaScript'>alert("HelloJavaScript"):
</script>

2. JavaScriptExample:CodeinJSfile:

⮚ message.JSfile

function msg() {alert("HelloJavapoint");

}

20
index.html:

<head>

<scripttype="text/javascript"src="message.js"></script>

</head>

<body>

<p>WelcometoJavaScript</p>

<form>

<inputtype="button"value="click"onclick="msgO"/>

</form>

</body>

→We can create external Java-Script file and emb edit in many html page.

It provides code re usability because single JavaScript file can be used in several
HTMLpages.AnexternalJavaScriptfilemustbesavedbyjsextension.ItisrecommendedtoembedallJav
aScript files into a single file .It increases the speed of the web page.

6.1.3BetweentheheadtagofHTML

In the example given below, we are having a function msg0 which is called. To create a function,
we use function name with keyword function. For function call, we need to have an event.

Head tag can be used for access the JS file and and we can call the function anywhere for a specific
purpose.

Example-
<head>
<script type="textjavascript'>functionmsg()
{
alert("HelloJavapoint");
}
</script>
</head>
<body>

<p>WelcometoJavaScript</p>
<form>
<inputtype="button"value="click"onclick="msg()"/>
</form>
</body> 21
6.2 How to Change Content of HTML using a JavaScript?

One of many Java-Script HTML methods is get Element By Id().

This example uses theme thod to "find" an HTML element (withid="demo") and changes the
element content (inner HTML) to "Hello Java-Script":

Example-

document.get Element By Id("demo").inner HTML="HelloJavaScript";documentget ElementBy

Id("'demo'").style.font Size= "25px";
<html>

<head>

<Script>
functionmy Function()
{
document.get Element By ld("demo").Inner HTML="Paragraphchanged.";

}
</script>
</head>

<body>

<h1>MyWeb Page<h1>

<pid="demo"'>AParagraph</p>

<buttontype="button"on click="my Function()">Tryit</button>

</body>
</html>

22
3. Comments in JavaScript:
The Java Script comments are meaningful way to deliver message. It is used to add information
about the code, warnings or suggestions so that end user can easily interpret the code. The
JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser

1. Advantages of JavaScript comments:

There are mainly two advantages of JavaScript comments.

⮚ To make code easy to understand: It can be used to elaborate the code so that end user
can easily understand the code.

⮚ To avoid the unnecessary code: It can also be used to avoid the code being executed.
Sometimes, we add the code to perform some action. But after sometime, there may
be need to disable the code. In such case, itis better to use comments.

Example
<script type=”text/javascript”>functionmsg()
{
alert("HelloJavapoint");*/thisisacomment*/
}
</script>

2. JavaScript Variable:

A JavaScript variable is simply a name of storage location. There are two types of variables in
JavaScript: local variable and global variable. There are some rules while declaring a Java Script
variable (also known as identifiers).

⮚ Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar(S) sign.

⮚ After first letter we can use digits(0to9), for example value l.

3. JavaScript Form Validation:

Itisimportanttovalidatetheformsubmittedbytheuserbecauseitcanhaveinappropriatevalues.
So validation is must.

The Java Script provides you the facility the validate the form on the client sides processing will
be fast than server-side validation. So, most of the web developers prefer Java Script form
validation.

Through JavaScript, we can validate name, password, email, date, mobile number etcfields.

23
 Example
<script>

functionvalidate form()
{
varname=document.my form.name.value;

varpassword=document.my form.password.value;if(name==null||name==")
{
alert("Namecan'tbeblank");returnfalse;
}

elseif(password.length<6)
{
alert("Passwordmustbeatleast6characterslong.");

returnfalse;
}
}

</script>

</body>
form name="my form" method="post" action="abc.jsp" on submit="return validate form()">

Name:<inputtype="text"name="name"><br/>

Password:<inputtype="password"name="password"><br/>

<inputtype="submit"value="register">

</form>

</body>

→In this example, we are going to validate the name and password. The name can't be empty and
password can't be less than 6 characters long. Here, we are validating the form on form submit.
The user will not be forwarded to the next page until given values are correct.

24
 Figure7:REACTlogo

6.3 Java-Script Functions:

JavaScript functions are used to perform operations. We can call JavaScript function many time
store use the code.

1. Advantage of Java-Script function

There are mainly two advantages of Java-Script functions.

⮚ Code reusability
⮚ Less coding

6.5.2JavaScriptFunctionSyntax

Thesyntaxofdeclaringfunctionisgivenbelow.functionfunctionName([arg1,arg2,..argN])
{

//codetobeexecuted

JavaScriptFunctionscanhave0ormorearguments.

Example:

<Script>functionmsg()
alert("Hello!Thisisamessage.");

</script>

<inputtype="button"on click="msg0"value="call function"/>

25
 Output of the above example:

Hello! This is a message.

6.4 JavaScript Control Statements:

6.7.1 If-else:

It evaluates the content whether condition is true or false. The syntax of Java Script if-else
statement is given below.

If(expression)
{
//content to be evaluated if condition is true
}
else
{
//content to be evaluated If condition is true
}

JavaScript Switch:

The JavaScript switch statement is used to execute one code from multiple expressions. Itis just
like else if statement that we have learned in previous page. But it is convenient than if-else if
because it can be used with numbers, characters etc. The signature of Java Scripts witch statement
is given below.

switch(expression)
{casevalue1:
Code to be executed: break;
casevalue2:

codetobeexecuted;break;
default:code to be executed if above values are not matched;

26
 CHAPTER-7
PROJECTS

7.1 Job-Portal

7.2 Food-Web

27
7.3 V i d e o -
Testimonial

28
 GITHUB

Git Hub is where over 83 million developers shape the future of software,
together. Contribute to the open source community, manage your Git
repositories.

Figure17:Git Hub

→It is use to add different files like HTML, CSS, and JS.

29
 CHAPTER: 8
CONCLUSION AND FUTURE SCOPE

1. Conclusion

The purpose and objective of web page project is achieved by providing extremely rich graphical
user interface web page designing 1s easy and in an aesthetic form. Flexibility in designing makes
user explore their imagination and thus, even a novice user can dream and accomplish their wish
of web page designing. 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.

2. Future Scope

● Debugger

When a coder who has HTML knowledge designs a webpage, then sometimes it'seasier for him to
make changes in the code view and apply them rather than design view. But in such cases, it's
difficult to detect errors and debug them. So, a debugger will be helpful to easily design error free
web page even from the code view.

● Syntax highlighting

Syntax highlighting is a feature that displays text in code view in different colors.

● Memory and traffic management

Giving facilities to the user to manage web space as per the built website Managing the visitors of
the website and traffic log Real-time visitor analytics page Rank tracking, and more-all in one
place.

● Spellcheck

Spell checking flags words in the document that may not be spelled correctly.
This feature can help user avoid spelling mistakes in the content written and thus make a web page
containing correct content. A comprehensive spellchecker enables website owners to spell check
their website content during web page creation much before they decided to publish it to their live
website.

30
 ● User's site management

This includes allowing user to view complete website from single editor. Thus User has better
control over the website and addition, deletion and interlinking of pages. Moreover, it gives user
a better View perspective of space required for the website.

● Facility to design dynamic web pages

Sometimes some dynamism in the web page makes it more interactive. It includes support for ASP
and Java-Scripting which may be integrated in the web page, making it dynamic. Some features
like Custom URL, Dynamic style sheets, Widgets, conditional visibility may also be added.

WEBDEVELOPMENT

31
→ HOW HTML, CSS AND JS NEEDED IN DIFFERENT WAYS:

Figure18: LOGOS

8.3 References

❑ https://www.w3schools.com/

❑ https://youtube.com/

❑ YouTube Channel - Code with Harry

32
THANKYOU!

33