Abhinav IT Repo
Abhinav IT Repo
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
REPORT OF
INDUSTRIAL TRAINING ON
“Web Development”
(Session 2024-25)
CERTIFICATE
This is to certify that the report of the training submitted is the outcome of the practical training
done at “Infosys Springboard ” 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.
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.
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 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.
• 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.
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
P P P P P P P P P PO PO PO
O O O O O O O O O 10 11 12
1 2 3 4 5 6 7 8 9
3 3 2 2 2 1 1 2 2 3 3 3
Industrial CO
-1
Training 3 3 3 3 3 1 1 2 2 3 3 3
CO
-2
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
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
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
PREFACE
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.
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.
Akshay Kapoor
23EJCEC005
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
CHAPTER INDEX
PA
S. NO. TIT
LE GE
N
O.
Certificate ii-
iii
Declaration iv
Preface v
Acknowledgement vi
Chapter Index vi
ii
Figure Index x
1 Introduction 1
.
1.1 Web Development 1
2.2 MongoDB 6
2.3 Express.js 8
2.4 React 11
2.5 Node.js 13
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
3.1 VSCode 16
3.2 Postman 17
4. Code Snippet 20
5. Screenshots of Project 22
Conclusion 25
Future Scope 26
References 27
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
CHAPTER 1
INTRODUCTION
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.
1. Front-end Development:
2. Back-end Development:
● 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.
● 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:
● 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 be accessible and user-friendly across various
screen sizes, from desktops to smartphones.
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.
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
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.
● 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.
● 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
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.
● 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.
● 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.
● 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.
3. CommonJS Modules:
● Node.js uses the CommonJS module system for organizing and structuring code. Modules
enable developers to encapsulate functionality and share code between different parts of an
application.
4. 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.
5. Cross-Platform:
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
2.6 HTML
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
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, 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.
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
● 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 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 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.
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
Chapter 4
Code Snippet
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
CHAPTER 5
SCREENSHOT OF PROJECT
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
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:
1. 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.
2. 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.
3. User Experience (UX) and Interface Design (UI):
Designing a user-friendly interface was paramount to ensuring that the form was accessible and easy to
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
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.
4. 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.
5. 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.
6. 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.
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.
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
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.
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.
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.
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 .
Jaipur Engineering College and
Research
Centre, Shri Ram ki Nangal , via Academic Year
Sitapura 2024-2025
RIICO, Jaipur 302022
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.
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