Pulkit
Pulkit
At
Promodaddy Digital LLP
Submitted in partial fulfillment of the requirements for the award of the degree of
Bachelor of Technology
in
Computer Engineering
(Session 2024-2025)
1
DECLARATION
I now declare that the work being presented in the Industrial Training report titled Web
Development (Front-end) in partial fulfillment for the award of the Degree of Bachelor of
Technology in Computer Engineering and submitted to the Department of Advance
Computing, Poornima College of Engineering, Jaipur, is an authentic record of my work
carried out at Promodaddy Digital LLP during the session 2024-25.
I have not submitted the matter presented in this report anywhere for the award of any other Degree.
2
TRAINING CERTIFICATE FROM COMPANY
3
DEPARTMENT OF COMPUTER ENGINEERING
Date: 24/07/2023
CERTIFICATE
This is to certify that the Industrial Training report titled Web Development (Front-end) has
been submitted by Pulkit Barola, PCE23CS131 in partial fulfillment for the award of the
Degree of Bachelor of Technology in Computer Engineering in the Department of Advance
Computing during the session 2023-24, Even Semester. The industrial training work is found
satisfactory and approved for submission.
Computing, PCE
4
ACKNOWLEDGEMENT
I would like to convey my profound sense of reverence and admiration to my supervisor Mr.
Rohit kumawat, Founding CEO Of Promodaddy Digital LLP for his intense concern,
attention, priceless direction, guidance, and encouragement throughout this internship.
I am grateful to Dr. Mahesh Bundele, Director, Poornima College of Engineering for his
helping attitude with a keen interest in completing this training work on time.
I would like to express my deep sense of gratitude towards the management of Poornima
College of Engineering including Dr. S. M. Seth, Chairman Emeritus, Poornima Group and
former Director NIH, Roorkee, Shri Shashikant Singhi, Chairman, Poornima Group, Mr.
M. K. M. Shah, Director Admin & Finance, Poornima Group and Ar. Rahul Singhi,
Director Poornima Group for establishment of institute and providing facilities my studies.
I am deeply thankful to my parents and all other family members for their blessings and
inspiration. Last, but not least, I would like to give special thanks to God who enabled me to
complete my training on time.
Rohit Kumawat
PCE23CS145
TABLE OF CONTENTS
Title Page i
Candidate’s Declaration ii
Acknowledgment v
Table of Contents vi
Abstract 1
1 Web development 3
1.1 Introduction 4
1.2 Several aspects of web development
1.3 Process 5
3 Tools 9
3.1 Introduction 10
3.2 Features 11
4 HTML 12
4.1 Introduction 13
4.2 What is web? 14
4.3 Versions of HTML 15
5 CSS 16
5.1 What is CSS? 17
5.2 CSS Syntax 18
5.2.1 Id Selector 19
5.2.2 Class selector 20
5.3 CSS Comments 22
5.4 CSS Styles 23
6 JavaScript 24
6.1 Introduction 25
6.2 How to change the content of HTML 26
using JavaScript 27
6.3 Comments 28
6.4 JavaScript Variable 29
6.5 JavaScript from validation 30
6.6 JavaScript Functions 31
6.7 JavaScript control statements 32
2 Software required 4
5 Website
LIST OF FIGURES
ABSTRACT
This report introduces an in-depth overview of experiences and insights gained during the front-
end web development internship. This has practically focused on practical applications of
theoretical knowledge, hence helping the intern improve their technical skills on HTML, CSS, and
JavaScript with regards to real-world projects.
Interns actively participated in team-based projects emphasizing good team performance and
effective communication in a data-rich environment. These experiences helped improve individual
skills and bring valuable lessons in professional collaboration and successful project management.
'Web development' is the process of website creation and maintenance for the Internet or a private
network. Web development can include the simplest static pages to the most complex web-based
applications, electronic businesses, or social network services. Important activities in the web
development spectrum maintain the status of web engineering, design, content creation, client-
side/server-side scripting, server, and e-commerce configurations.
Web development primarily focuses on the technology that is behind the functioning of the
website, covering coding and markup languages. The increased use of a content management
system (CMS) together with improving the technical threshold makes updating and maintaining
websites functionally simple enough, even with minimum technical knowledge.
Web development teams of big organizations can have as many as a hundred members, mostly
working with Agile frameworks. Small companies may hire just one, or even the post is shared
with other jobs such as graphic designers or IT staff. In any case, cross-functional teams are not
new. Developers also specialize as front-end, back-end, or full-stack developers. The former
comprises what a user interacts with, and the latter manages the server side of things. The business
in which web development is associated has been surging rapidly since the World Wide Web was
created and grown fast to be one of the most used technologies in the world today.
TRAINING PLATFORMS
Introduction
1.1 Introduction
Choosing Promodaddy Digital LLP for my training needs is a well-informed decision driven by
our unwavering commitment to excellence and innovation. Our technical training platform
stands out in the crowded landscape for several compelling reasons. First and foremost,
Promodaddy Digital LLP is at the forefront of transformative technologies such as Robotics,
Artificial Intelligence, and Machine Learning, ensuring that our training programs are not only
comprehensive but also aligned with the latest industry trends.
What Promodaddy Digital LLP is apart of is our industry-focused approach, backed by a team of
seasoned experts who bring real-world experience to the training room. Unlike generic training
providers, Learn and Build specializes in tailoring programs to address specific industry needs,
ensuring that our clients gain practical insights that are directly applicable to their professional
endeavors.
Furthermore, Promodaddy Digital LLP takes pride in its commitment to service quality and
operational excellence. Our training platform is not just about acquiring theoretical knowledge; it's
about developing practical skills that empower individuals and organizations to thrive in the
dynamic tech landscape. When you choose Learn and Build, you choose a training experience that
goes beyond the ordinary, offering a transformative journey toward mastering the technologies that
will shape the future.
1.2 Reason for Selecting this Platform
When it comes to Web Development (front-end), selecting the Learn and Build platform offers
multiple compelling reasons. In today's digital era, where data is abundant and technology is
pervasive, the significance of Web Development (front-end) is undeniable. Learn and Build
provides a comprehensive training program that equips individuals with the skills to navigate this
data-driven world.
As we are surrounded by vast amounts of data, ranging from social media information to business-
generated data, acts as a powerful tool to transform this data into meaningful user experiences. By
leveraging the knowledge gained from Learn and Build, organizations of all sizes, be they large
corporations, hospitals, or small businesses, can tap into the potential insights hidden within this
sea of information.
By selecting the Promodaddy Digital LLP platform, individuals gain the necessary expertise to
excel in Front Web Development (front-end). They learn how to harness the power of data
responsibly, creating engaging and user-friendly websites that enhance the overall user experience.
With Promodaddy Digital LLP, individuals can become proficient in Web Development (front-
end), leverage data-driven insights, and contribute to the digital landscape.
1.3 Profile of the Company
Promodaddy Digital LLP prioritizes practical application and staying ahead of industry
trends. Our hands-on learning approach ensures that learners acquire real-world skills that
are directly applicable to their professional endeavors. We promote diversity, inclusivity,
and collaboration to create a supportive learning community.
His vast technical expertise includes Vision, MLOps, Azure, Python, ML, VCS, and Linux. This
breadth of skill indicates his breadth of competency, from basic to advanced, in data science ᅳ ranging
from data exploration to deployment.
In this profile of an Associate Data Scientist, Celebal Technologies are worked upon by offering and
marshaling data with focused intelligence and patterns that empower its clients to make smarter
decisions. He is an integral part of providing solutions at the forefront of creation in Robotics, Artificial
Intelligence, and Machine Learning, both by theoretical explanations and practical implications. His
contributions are the epitome of top-flight training and mentorship at Cerebral Technologies in the
dynamic and changing space of data science.
1.5 Conclusion
I chose Celebal for my front-end development training because this area of today's
digital landscape plays a very critical role. With increasing banking on engaging, user-
friendly websites to help them connect with their customers, businesses put front-end
development at the top in driving user interaction and satisfaction. At a time when
frameworks like React and Angular are changing the way we build interfaces,
mastering these skills is crucial for any aspiring web developer.
It further consolidates the role of Celebal as an ideal training partner due to its
commitment to ethical coding practices and promotion of inclusive design principles.
This focuses on equipping trainees with technical skills, paired with a strong base in
user-centered design, thereby enabling future developers working and studying at
Celebal to work toward the creation of impactful, accessible web experiences with a
view to growth and innovation within India's technology sector.
CHAPTER-1 WEB DEVELOPMENT
1.1 Introduction
A website is a group of pages of related information, often including multimedia content, usually under an common
domain name, and published on at least one web server. This private local area network (LAN) or public Internet
Protocol (IP) network, such as the Internet, is accessed through mention of a uniform resource locator (URL) that
identifies the site.
A website can be used for many functions and in many fashions. For instance, it may be a personal website,
commercial website of a company, a governmental website, or probably the website of a non-governmental
organization. Normally, websites are focused on only one topic or purpose, for example, entertainment, social
networking, news, or education. The World Wide Web consists of all the publicly available websites, while private
ones, such as a company's website, are usually part of an intranet.
Web development would be the broad term for the work involved in developing a website for the Internet ᅳ World
Wide Web-or an intranet, which is a private network. It ranges from developing the simplest static single page of
plain text up to the most complex web-based Internet applications, electronic businesses, and social network
services. A more comprehensive list of activities to which web development commonly refers can also 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, the term "web
development" usually refers to the major non-design aspects of building websites: writing markup and coding.
Decide purpose
Planning
Designing
Gather Content
Building
Testing
Upload to server
Marketing and
maintenance
Fig 2-Web Developing Process
CHAPTER-2
HARDWARE AND SOFTWARE REQUIREMENTS
Number Description
1. Window XP/Window 10
2. Min 8 GB RAM
Number Description
1. Windows XP,10
2. visual studio code
3. Notepad
4. HTML/CSS/JavaScript/Django
CHAPTER 3 TOOLS
3.1 Introduction
Two parts of the Translate and Edit application had been planned: front-end and back-end development. The front
end is referred to as that part of the web which you can see and interact with; for example, client-side
programming. While the frontend code is interacting with the user in real-time, the backend interacts with a server
to return results ready for the user. Frontend is a combination of HTML CSS and JavaScript coding. It means that, by
applying JavaScript, changes in the design of a webpage can be made on the spot; however, these changes are only
temporary and visible to the user.
This would normally fall outside the scope of user rights to dynamically change web content on the server side.
Logically, administrators deal with back-end modifying databases, for example, as often they contain sensitive data
that should not be in the public domain perusing or altering. Languages representing front-end and back-end tools
include but are not limited to HTML, CSS, JavaScript PHP, and MYSQL, among others. We will review all these
languages briefly in this section as given below.
3.2 Features
Web Page Assets, Resources, and Network Information
4.1 Introduction
HTML is an acronym for Hyper Text Mark-Up Language, a "mark-up language" whose purpose is to prepare written
documents with formatting tags. The tags show how the document will appear and how it will connect to other
documents.
The World Wide Web, or simply, the Web, denotes the worldwide network formed by all the documents—in short,
"web pages"—which connect to one another through hyperlinks.
Web pages are typically built off one central page that acts as an entry point to the other pages via hyperlinks. This
collection of web pages interlinked via hyperlinks and centered on a central page is known as a website.
The Web is a large dynamic archive comprised of innumerable websites which enable access to the web pages most
likely containing formatted text, images, sounds, video, etc.
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 web
page, 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 that sends requests to web servers, then processes the resulting
data and displays the information as intended, based on instructions in the HTML page.
⮚ Mozilla Firefox,
⮚ Microsoft Internet Explorer,
⮚ Netscape Navigator,
⮚ Safari,
⮚ opera
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).
RFC 1866, dated November 1995, 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. HTML version 4.01, which came out on December 24,
1999, made several minor modifications to HTML 4.0.
Example-
<HTML>
<HEAD>
</HEAD>
<BODY>
<H5>THIS IS AN EXAMPLE</H5>
</BODY>
</HTML>
CHAPTER-5 CSS
⮚ CSS saves a lot of work. It can control the layout of multiple web pages all at once
⮚ External stylesheets are stored in CSS files.
⮚ CSS describes how HTML elements should be displayed.
⮚ CSS Saves a Lot of Work! The style definitions are normally saved in external .css files
⮚ With an external stylesheet file, we can change the look of an entire website by changing
just one file!
CSS selector: The selector points to the HTML element you want to style.
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 CSS can be declared in the required HTML page as:
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
⮚ 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:jokerman;
}
⮚ Client-side validation
⮚ Dynamic drop-down menus.
⮚ Displaying data and time.
Displaying popup 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("Hello JavaScript by JavaScript");
</script>
Here, <script> tag is used to initialize the script and document. write 0 is a function used to
write. Like CSS, JavaScript also can be can be placed in:
1. Between the body tag of html
2. In .js file (external javaScript)
3. Between the head tag of html
In the given example, we have displayed the dynamic content using JavaScript. Let's see the
<script
type="text/javascript'>
alert("Hello Javatpoint"):
</script>
6.1.2 JavaScript Example: code in JS file -
⮚ message.js file
function msg()
alert("Hello Javatpoint");
⮚ index.html
<head>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
</form>
</body>
We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html
pages. An external JavaScript file must be saved by js extension. It is recommended to embed
all JavaScript files into a single file. It increases the speed of the webpage.
6.1.3 Between the head tag of html
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.
Example-
<head>
<script
type="textjavascript'>
function msg()
{
alert("Hello Javatpoint");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
<head>
<Script>
function myFunction()
{
document.getElementByld("demo"). InnerHTML= "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page<h1>
<p id="demo"'>A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
6.3 Comments in JavaScript:
The JavaScript 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
⮚ 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, it is better to use comments.
Example
<script
type=”text/javascript”>
function msg()
{
alert ("Hello Javatpoint"); */this is a comment*/
}
</script>
6.4 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
JavaScript 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 (0 to 9), for example value l
It is important to validate the form submitted by the user because it can have inappropriate
values. So, validation is must.
The JavaScript provides you the facility the validate the form on the client side so processing
will be fast than server-side validation. So, most of the web developers prefer JavaScript form
validation.
Through JavaScript, we can validate name, password, email, date, mobile number etc. fields.
Example
<script>
function validateform()
{
var name=document.myform.name.value;
var
password=document.myform.password.value; if
(name==null || name==")
return false;
}
</script>
</body>
form name="myform" method="post" action="abc.jsp" onsubmit="return validatefor
m()">
</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.
6.6 JavaScript Functions:
JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.
//code to be executed
6.7.1 If-else:
It evaluates the content whether condition is true or false. The syntax of JavaScript if-else
statement is given below.
If(expression)
}
else
{
//content to be evaluated if condition is true
The JavaScript switch statement is used to execute one code from multiple expressions. It is
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 JavaScript switch
statement is given below.
switch(expression)
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
}
CHAPTER: 8 CONCLUSION AND FUTURE SCOPE
8.1 CONCLUSION
The purpose and objective of Webeye 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 colour 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 analyse 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.
8.2 FUTURE SCOPE
● Debugger
When a coder who has HTML knowledge designs a webpage, then sometimes t's
easier for him to make changes in the code view and apply them rather than in 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 webpage even from the code view.
● Syntax highlighting
Syntax highlighting is a feature that displays text in code view in different colors.
Giving facilities to the user to manage webspace as per the built website
Managing the visitors of the website and traffic log Real-time visitor analytics PageRank
tracking, and more-all in one place.
● Spell check
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 webpage containing correct content. A comprehensive spell checker enables
website owners to spell check their website content during webpage creation much
before they decide to publish it to their live website.