A

INDUSTRIAL TRAINING
REPORT

WEB DEVELOPMENT

Submitted in partial fulfillment for the award of Bachelor of Technology

degree of Rajasthan Technical University, Kota

2024-2025

Submitted to Submitted by:

Dr. Sudarshan Kumar Jain

Assistant Professor & TPO B.
Tech. III SEM, ECE
Department of ECE Roll
No.:

DEPARTMENT OF ELECTRONICS & COMMUNICATION

ENGINEERING
JAIPUR ENGINEERING COLLEGE AND RESEARCH
CENTRE
 SHRI RAM KI NANGAL, VIA SITAPURA RIICO JAIPUR- 302022

November, 2024

CERTIFICATE

This is to certify that the report of the training submitted is the outcome of the practical
training done at “INTERNSHALA ” in “ Web Development” is carried out by

Abhinav Gupta bearing RTU Roll No.:23EJCEC001 under the guidance and supervision of “Mr. Sudarshan
Jain” for the award of Degree of Bachelor of Technology (B. Tech.) in Computer Science and Technology
from Jaipur Engineering College & Research Centre, Jaipur (Raj.), India affiliated to Rajasthan
Technical University, Kota during the academic year 2024-2025.

VISION OF ECE DEPARTMENT

 To become a renowned Centre of excellence in computer
science and engineering and make competent engineers &
professionals with high ethical values prepared for lifelong
learning.

MISSION OF ECE DEPARTMENT

1. To impart outcome-based education for emerging

technologies in the field of computer science and engineering.

2. To provide opportunities for interaction between academia and industry.

3. To provide a platform for lifelong learning by accepting the

change in technologies 4. To develop the aptitude of fulfilling
social responsibilities

PROGRAM OUTCOMES (POs)

Engineering knowledge: Apply the knowledge of mathematics, science,
engineering fundamentals, and an engineering specialization to the solution of
complex engineering problems.
Problem analysis: Identify, formulate, research literature, and analyse complex
engineering problems reaching substantiated conclusions using first principles
of mathematics, natural sciences, and engineering sciences.
Design/development of solutions: Design solutions for complex engineering
problems and design system components or processes that meet the specified
needs with appropriate consideration for the public health and safety, and the
cultural, societal, and environmental considerations.
Conduct investigations of complex problems: Use research-based knowledge
and research methods including design of experiments, analysis and
 interpretation of data, and synthesis of the information to provide valid
conclusions.
Modern tool usage: Create, select, and apply appropriate techniques, resources,
and modern engineering and IT tools including prediction and modelling to
complex engineering activities with an understanding of the limitations.
The engineer and society: Apply reasoning informed by the contextual
knowledge to assess societal, health, safety, legal and cultural issues and the
consequent responsibilities relevant to the professional engineering practice.
Environment and sustainability: Understand the impact of the professional
engineering solutions in societal and environmental contexts, and demonstrate
the knowledge of, and need for sustainable development.
Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.
Individual and team work: Function effectively as an individual, and as a
member or leader in diverse teams, and in multidisciplinary settings.
Communication: Communicate effectively on complex engineering activities
with the engineering community and with society at large, such as, being able to
comprehend and write effective reports and design documentation, make
effective presentations, and give and receive clear instructions.
Project management and finance: Demonstrate knowledge and understanding
of the engineering and management principles and apply these to one’s own work,
as a member and leader in a team, to manage projects and in multidisciplinary
environments.
Life-long learning: Recognize the need for, and have the preparation and ability
to engage in independent and life-long learning in the broadest context of
technological change.

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

The PEOs of the B.Tech (ECE) program are:

1. To produce graduates who are able to apply computer engineering
knowledge to provide turn-key IT solutions to national and international
organizations.
2. To produce graduates with the necessary background and technical
skills to work professionally in one or more of the 3. 3. areas like – IT
solution design development and implementation consisting of system
design, network design, software design and development, system
 implementation and management etc. Graduates would be able to
provide solutions through logical and analytical thinking.
3. To able graduates to design embedded systems for industrial applications.
4. To inculcate in graduates effective communication skills and team
work skills to enable them to work in a multidisciplinary environment.
5. To prepare graduates for personal and professional success with
commitment to their ethical and social responsibilities.

PROGRAM SPECIFIC OUTCOMES (PSOs)

PSO1: Ability to interpret and analyse network specific and

cyber security issues in real world environment.
PSO2: Ability to design and develop mobile and web-based
applications under realistic constraints.

COURSE OUTCOMES (COs)

On completion of project Graduates will be able to-
CO1: Generate the report based on the Projects carried out for
demonstrating the ability to apply the knowledge of engineering field
during training
CO2: Demonstrate Competency in relevant engineering fields
through problem identification, formulation and solution.

MAPPING: CO’s & PO’s

Subject Code Cos Program Outcomes (POs)
 P P P P P P P P P P P PO
O O
O O O O O O O O O 12
8 9 1 1
1 2 3 4 5 6 7
0 1

3 3 2 2 2 1 1 2 2 3 3 3

Industrial CO
Training -1

3 3 3 3 3 1 1 2 2 3 3 3

CO
-2

DECLARATION

I hereby declare that the report entitled “Industrial Training Web

Development” has been carried out and submitted by the undersigned to the
Jaipur Engineering College & Research Centre,Jaipur (Rajasthan) in an
original work, conducted under the guidance and supervision.

The empirical findings in this report are based on the data, which has
been collected by me. I have not reproduced from any report of the
University neither of this year nor of any previous year.

I understand that any such reproduction from an original work by

another is liable to be punished in a way the University authorities’
deed fits.
Abhinav Gupta
Enrollment No.: -
23EJCEC001
 PREFACE

Bachelor of Technology in Electronics & Communications Engineering

is the Rajasthan Technical University course (Approved by AICTE) having a duration of 4
years.

As a prerequisite of the syllabus every student on this course has to take

professional training from any Industry related to the stream for 56 days in order to
complete his/her studies successfully. And it is required to submit the project
report on the completion of it.

The main objective of this training is to create awareness regarding the

application of theories in the practical world of Information Technology and
to give a practical exposure of the real world to the student.

I feel great pleasure to present this project report.

 ACKNOWLEDGEMENT

Any serious and lasting achievement or success, one can never achieve
without the help, guidance and co-operation of so many people
involved in the work.

It is my pleasant duty to express my profound gratitude and extreme

regards and thanks to Mr. Arpit Agarwal and Dr. V.K. Chandna who
gave me an opportunity to take professional training in Infosys
Springboard.

I would also like to thank Mr. Sudarshan Jain , Training &

Placement Officer, Jaipur who recommended me for this training.

Last but not the least, I am grateful to my beloved parents whose

blessings and inspirations are always with me. I am heartily thankful
to those people who are involved directly or indirectly in this project
for encouraging me whenever I needed their help in spite of their busy
schedule.

ABHINAV GUPTA
23EJCEC001

CHAPTER INDEX
PAGE
S. NO. TITLE NO.
 Certificate ii

Declaration iii

Preface iv

Acknowledgement v

Company Profile vi

Chapter Index vii

Figure Index vii

1 Introduction 1
1.1 Web Development 1

2 Full Stack Web Development 4

2.1 Introduction 4
2.2 MongoDB 6
2.3 Express.js 8
2.4 React 11
2.5 Node.js 13

3.1 VSCode 16
3.2 Postman 17
3.3 MongoDB Compass 18
4. Code Snippet 20
4.1 HTML code 20
4.2 Code description 21
4.3 CSS code 21
5. Screenshots of Project 22

Conclusion 25

Future Scope 26
References 27
 CHAPTER 2
INTRODUCTION
1.1 Web Development
Web development refers to the process of creating and maintaining websites
or web applications. It involves a combination of programming, design, and
content management to deliver a seamless and interactive user experience on
the World Wide Web. Web development encompasses a wide range of tasks,
from building simple static web pages to developing complex dynamic web
applications.

Key components of web development include:

1. Front-end Development:
Front-end development, also known as client-side development,
involves creating the visual elements of a website that users interact
with directly.
Technologies such as HTML (Hypertext Markup Language), CSS
(Cascading Style Sheets), and JavaScript are fundamental for
building the structure, style, and behavior of web pages.
Front-end frameworks and libraries like React, Angular, and Vue.js
are commonly used to streamline the development process and
enhance user interface (UI) interactions.

2. Back-end Development:
Back-end development, or server-side development, focuses on the
server, databases, and application logic that power the front-end of a
website.

Common back-end languages include PHP, Python, Ruby, Java,

and Node.js. These languages help manage data, process requests,
and perform other server-side tasks.

Frameworks like, Django (Python), Ruby on Rails (Ruby),

and Express.js

(JavaScript/Node.js) provide structured environments for building

robust back-end applications.
 Database Management:

Databases are used to store and retrieve data for web applications.
Popular database management systems (DBMS) include MySQL,
PostgreSQL, MongoDB, and SQLite.

Web developers use database languages like SQL (Structured

Query Language) to interact with and manipulate data.

3. Full-Stack Development:

Full-stack developers are proficient in both front-end and back-

end development, allowing them to work on all aspects of a web
application.

Full-stack development often involves understanding multiple

programming languages, frameworks, and technologies to build
end-to-end solutions.

4. Web Development Tools:

Various tools aid in the web development process, from text
editors like Visual Studio Code and Sublime Text to version
control systems like Git.

Package managers, task runners, and build tools such as npm,

Yarn, and webpack help automate repetitive tasks and manage
project dependencies.

5. Responsive Design:
With the increasing diversity of devices accessing the internet,
responsive design is crucial. Web developers design
websites to accessible and user-friendly across various screen sizes,
from desktops to smartphones.

6. Web Development Lifecycle:

The web development lifecycle involves planning, designing,

building, testing, deploying, and maintaining a website or web
 application. Agile and DevOps methodologies are often employed
to streamline the development process and enhance collaboration.

7. Security Considerations:

Web developers must prioritize security to protect websites and

user data from potential threats. This involves practices like data
encryption, secure authentication mechanisms, and staying
informed about common vulnerabilities.

Web development is a dynamic field, and staying current with

emerging technologies and best practices is essential for success
in this rapidly evolving industry. Whether working on personal
projects, for a company, or as part of a development team, web
developers play a crucial role in shaping the digital experiences
that users encounter on the internet.
1. Web Application Framework:

Express.js is a server-side web application framework, built on top of

Node.js. It provides a set of features for building web and mobile
applications, handling HTTP requests and responses, and managing
middleware.

2. Routing:

Express enables developers to define routes for handling different

HTTP methods (GET, POST, PUT, DELETE, etc.) and URL patterns.
This routing mechanism allows for the creation of clean and organized
application structures.

3. Middleware:

Middleware functions are a fundamental concept in Express. They are

functions that have access to the request and response objects and can
modify them or terminate the request- response cycle. Middleware is
used for tasks such as authentication, logging, and error handling.

4. HTTP Utility Methods:

Express provides utility methods for simplifying common HTTP tasks,

such as setting headers, handling redirects, and sending various types
of responses.

5. Template Engines:

While Express itself does not include a template engine, it allows

developers to use their preferred template engines. Common choices
include Pug (formerly Jade), EJS (Embedded JavaScript), and
Handlebars. These template engines help in dynamically generating
HTML on the server side.
6. Static File Serving:
Express makes it easy to serve static files, such as images, stylesheets,
and client-side JavaScript files, by using the `express.static`
middleware.

2.1 Node.js

Node.js is an open-source, cross-platform JavaScript runtime

environment built on the V8 JavaScript engine developed by Google.
It allows developers to execute JavaScript code server- side, enabling
the creation of scalable and high-performance network applications.
Node.js is particularly well-suited for building real-time web
applications and APIs. Here are key features and aspects of Node.js:

1. JavaScript Runtime:

Node.js is primarily known for executing JavaScript on the server side,

extending the use of JavaScript beyond the browser to build full-stack
applications.

2. V8 JavaScript Engine:

Node.js is built on the V8 JavaScript engine, the same engine used in

the Google Chrome browser. V8 compiles JavaScript code into
machine code, providing fast and efficient execution.

3. Event-Driven and Asynchronous:

Node.js follows an event-driven, non-blocking I/O model. This means

that it can handle many concurrent connections without the need for
multi-threading, making it efficient for building scalable applications.
4. Single-Threaded, Event Loop:
Node.js is single-threaded, but it uses an event loop to handle
asynchronous operations. This allows Node.js to efficiently handle a
large number of concurrent connections without the overhead of
traditional multi-threading.

5. NPM (Node Package Manager):

NPM is the default package manager for Node.js, providing a vast

ecosystem of open-source libraries and tools that developers can easily
integrate into their projects. NPM simplifies the process of dependency
management and project configuration.

6. Common JS Modules:

Node.JS uses the Common JS module system for organizing and

structuring code. Modules enable developers to encapsulate
functionality and share code between different parts of an application.

7. Built-In Modules:

Node.js comes with a set of built-in modules that provide essential

functionality for building server-side applications. These include
modules for file system operations, networking, and handling HTTP
requests.

8. Cross-Platform:
2.6 HTML
 CHAPTER 3
TOOLS USED
Visual Studio Code

Visual Studio Code (VS Code) is a highly customizable and widely used code
editor for developing web applications. In the context of this BMI calculator
project, VS Code was used to write and manage the HTML, CSS, and
JavaScript code. Its key features that were utilized in the project include:

Syntax Highlighting and IntelliSense: VS Code provides intelligent code

completion based on variable types, function definitions, and imported
modules, making it easier to write clean and efficient code.

Integrated Terminal: The integrated terminal was used for running local web
servers, testing the functionality of the application form, and interacting with
Git for version control.

Extensions: Several extensions, such as Live Server, were used to enable real-
time previews of changes made to the code, allowing immediate feedback on
UI and functionality adjustments.

Browser Developer Tools

Browser Developer Tools, available in browsers like Google Chrome and

Firefox, were essential for debugging and testing the application. The
following features were especially helpful during development:

Element Inspector: Used to inspect and modify the HTML and CSS on the fly
to see real- time changes and fix layout issues.

Console: Debugging HTML and CSS errors and logging outputs during form
were done through the console, helping to identify and resolve issues
efficiently.
Network Tab: Although this project did not rely on external APIs, the network
tab was useful to monitor resources like images and scripts, ensuring they were
properly loaded and optimized.

Performance Monitoring: This tool helped in ensuring the application was

running smoothly without delays.

Git and GitHub

Git was used for version control throughout the development of the form,
ensuring that the code changes were tracked, and any issues could be easily
reverted. The project was stored on GitHub.

Version Control: Each modification made during the development process was
committed and pushed to a GitHub repository. This made it easy to track
changes and manage versions of the application.

HTML5 and CSS3

HTML5 provided the structure and layout of the webpage, while CSS3
ensured that the interface was visually appealing and responsive across
different devices. Key features used include:

Semantic HTML: Clean, well-structured HTML5 tags were used to build an

accessible and SEO-friendly interface.

Responsive Design: CSS3 media queries were used to ensure the form
displayed properly on different devices, including smartphones and tablets.

CSS Grid and Flexbox: These layout tools were used to create flexible and
adaptive layouts, especially for input forms and the result display section.

CHAPTER 4
CODE SNIPPET
 CHAPTER 5
SCREENSHOT OF THE PROJECT
 CONCLUSION

The Job Application Form project developed during the training at Internshala stands
as a comprehensive demonstration of the skills acquired in full-stack web development.
This project offered a unique opportunity to apply a broad spectrum of technologies,
from front-end user interfaces to back-end data processing, within the context of a real-
world application aimed at improving personal health awareness.

The primary objective of this project was to create an intuitive and functional tool that
enables users to apply for a job easily and receive job-related classifications and
recommendations. The successful implementation of this project highlights key
competencies in web development, including the use of Django for backend logic,
database management with SQLite, and modern front-end frameworks for responsive
user interaction.

Technical Growth and Skills Acquired:

Throughout the development of this Job Application form, participants gained a solid
understanding of several critical technologies and methodologies:

Full-Stack Development

The project involved both front-end and back-end development, giving participants
hands-on experience with Python Django for server-side logic and HTML, CSS, and
JavaScript for building interactive and responsive user interfaces. This holistic
approach ensured a deeper understanding of the entire web development lifecycle.

Database Management and CRUD Operations

A key part of the project involved the use of database management systems to store and
retrieve user data. Participants learned how to handle Create, Read, Update, and Delete
(CRUD) operations efficiently using Django's ORM (Object-Relational Mapping),
reinforcing their skills in database interactions.

User Experience (UX) and Interface Design (UI):

Designing a user-friendly interface was paramount to ensuring that the form was
accessible and easy to use for individuals of all technical levels. The incorporation of
responsive design principles allowed the web page to work seamlessly across various
devices, including desktops, tablets, and smartphones.

Admin Dashboard and Data Visualization

The development of an admin dashboard with data visualization capabilities helped

participants understand how to manage large amounts of data, display meaningful
insights, and make applications useful for administrators who need to monitor trends
and take action. This involved integrating tools to create graphical representations of
data, which provided essential insights into the system’s overall performance and
trends.

Security and Privacy Considerations

Given the sensitive nature of personal data, special attention was paid to ensuring the
security and privacy of user information. Participants learned how to implement secure
authentication mechanisms, manage data access, and follow best practices for handling
personal information in compliance with privacy standards.

Problem-Solving and Debugging

Throughout the project, participants faced and overcame numerous challenges related
to coding logic, debugging errors, and optimizing performance. The iterative process
of identifying and fixing bugs, improving the application's efficiency, and enhancing
its usability played a key role in developing critical problem-solving skills.

Relevance to Real-World Applications

The Job application form showcases the practical application of technology to address
a widespread public concern: applying for a job easily. By providing users with a quick
and easy way to fill out the job application form, the application empowers individuals
to apply for a job and be employed and monitor their next goals. The project’s emphasis
on personalization, and trend analysis also demonstrates the potential of web
applications in improving individual employment.
In addition to its functionality, the job application form can easily be adapted or scaled
to serve a broader audience. The modularity and scalability of the project allow for easy
future expansions.

Personal and Professional Development

This project has also significantly contributed to the personal and professional growth
of the participants. It offered a hands-on experience in managing a full project lifecycle,
from conceptualization to deployment. Furthermore, the collaborative nature of the
development process provided participants with valuable teamwork experience, as they
had to communicate effectively, share responsibilities, and ensure that all components
of the system worked cohesively.

From a professional standpoint, the ability to build a fully functioning form adds an
impressive and relevant project to each participant's portfolio, showcasing their abilities
in both technical execution and problem-solving. The technical proficiency
demonstrated in this project, combined with the understanding of how to deliver user-
centric solutions, prepares participants for roles in full-stack web development,
software engineering, and application development.

Impact of Training and Industry Preparedness

The training at Internshala not only provided participants with a solid understanding of
web development technologies but also instilled in them a mindset of continuous
learning and adaptability. As the field of web development evolves rapidly, with new
tools and frameworks emerging regularly, the skills acquired through this training
ensure that participants are well-equipped to adapt to industry trends and emerging
technologies.
Furthermore, the project-based approach to learning allowed participants to work in an
environment that mimicked real-world industry settings. The emphasis on hands-on
learning, combined with exposure to problem- solving in a live environment, has honed
participants’ abilities to meet the demands of professional work in a fast- paced, results-
driven industry.

Conclusion and Future Prospects

The Job Application form stands as a testament to the participants’ ability to integrate
knowledge from various domains of web development into a cohesive, functional, and
user-friendly application. The journey through this project has not only provided
valuable technical skills but also fostered an understanding of how technology can be
leveraged to improve everyday life.

As this training concludes, participants leave with a well-rounded skill set, including
front-end development, back-end logic, database management, user experience design,
and security best practices. They are now prepared to contribute meaningfully to future
web development projects, whether in professional or personal capacities. The job
application form marks the beginning of what promises to be a successful career for
each participant in the ever-evolving world of technology.

Looking forward, participants are equipped to tackle more complex challenges, build
innovative applications, and continuously improve their knowledge and skills. This
project has laid a solid foundation, and the skills.
 FUTURE SCOPE

The future scope for Full Stack Web Development with the MERN
(MongoDB, Express.js, React, Node.js) stack is exceptionally promising,
reflecting ongoing trends and the evolution of web development. As
businesses increasingly seek comprehensive solutions, the demand for Full
Stack Developers proficient in both front-end and back-end development is
expected to rise.

Key trends influencing the future of MERN stack development include the rise
of Progressive Web Apps (PWAs). React's component-based approach is
instrumental in creating interactive and responsive user interfaces,
contributing to the growth of PWAs. Additionally, the shift towards serverless
architectures is likely to continue, and Node.js, with its non-blocking and
event-driven nature, aligns seamlessly with serverless computing models,
simplifying deployment and scaling dynamically based on demand.

Microservices and containerization are becoming integral to application

development, and the MERN stack facilitates the creation of modular and
scalable applications. Technologies such as Docker and Kubernetes, often
used in conjunction with Node.js, enable efficient containerization and
orchestration of microservices.

Cross-platform development is on the rise, with React Native enabling the

creation of mobile applications for both iOS and Android platforms using a
single codebase. As the demand for cross- platform development increases,
the knowledge of React and its ecosystem becomes increasingly valuable.
Looking ahead, enhancements in NoSQL databases, particularly MongoDB,
are anticipated to accommodate evolving requirements in scalability,
performance, and flexibility. The continued development of React, Node.JS
and other MERN stack components ensures ongoing updates, bug fixes, and
the introduction of new features, keeping the stack relevant and up to date.
 REFERENCES

MongoDB: -https://www.mongodb.com/docs/

Express: -www.npmjs.com/package/express

GeeksforGeeks: -www.geeksforgeeks.org/mern-stack/

JavaTPoint: -www.javatpoint.com/mern-stack

NodeJs:- https://nodejs.org/en/docs

Django :- Django Python Tutorial: What It is and Framework - javatpoint