INDUSTRIAL TRAINING INTERNSHIP

REPORT ON WEB DEVELOPMENT

An
Internship Report
Submitted
in partial fulfillment
for the award of the degree of
Bachelor of Technology
in
Department of Computer Science and Engineering

Submitted By:
Prakash
Roll No: 23CSE66
Semester: 3rd
Reg. No.: 23105157075
Branch: Computer Science and Engineering

Department of Computer Sc ience and Engineering

Government Engineering College Sheikhpura
Affiliated to Bihar Engineering University, Patna (Bihar)
Academic Year : 2023 - 27
 CANDIDATE'S DECLARATION

I, Prakash, Roll No.: 23CSE66, Reg. No.: 23105157075, Branch: Computer Science and
Engineering, Semester: 3rd, hereby declare that the internship report submitted by me is
true, authentic, and conforms to AICTE guidelines.
The internship was completed within the appropriate duration. I take full responsibility
for the content submitted herein.
Date:

Place: Sheikhpura
Signature: (Prakash)
 CERTIFICATE

This is certify that the internship training entitled “Web Development” has
been successfully completed by Prakash Reg. No.: 23105157075 at in
Internpe during the period 26-MAY-2025 to 22-JUNE-2025 as part of the 3rd
semester requirement for the year 2024.

Departmental Internship HOD Department of CSE

Coordina tor
Dr. Surjeet Kumar
Md Zaki Anwer
(Assistant professor,Dept. of CSE) (Assistant professor,Dept. of CSE)
GEC Sheikhpura GEC Sheikhpura
 Acknowledgements

I would like to express my profound gratitude to all the individuals who have
supported and guided me throughout this internship. This experience has been
instrumental in shaping my practical understanding of web development, and it would
not have been possible without their encouragement.
First and foremost, I extend my sincere thanks to InternPe for providing me with this
valuable opportunity. The structured, project-based learning environment was
exceptionally effective in building my foundational skills in front-end technologies.

I am deeply indebted to my faculty coordinator, Md Zaki Anwer, Assistant Professor in

the Department of Computer Science and Engineering, for his invaluable supervision,
constant support, and insightful guidance throughout the duration of my internship.
His mentorship was crucial in helping me navigate the technical challenges and align
my work with academic standards.

I would also like to express my sincere appreciation to Dr. Surjeet Kumar, Head of the
Department of Computer Science and Engineering, Government Engineering College
Sheikhpura. His leadership and commitment to fostering an environment that
encourages practical, hands-on learning are what make opportunities like this
possible for students.

Finally, I wish to thank my family and friends for their unwavering support and
encouragement throughout this journey.
Abstract

This report documents the work and learning outcomes of a four-week virtual
internship in Web Development, undertaken with InternPe from May 26, 2025, to June
22, 2025. The internship was designed as a practical, hands-on program focusing on
the foundational technologies of modern front-end web development. The core
technologies covered were HyperText Markup Language (HTML5), Cascading Style
Sheets (CSS3), and JavaScript (ES6+). The primary methodology employed was
project-based learning, which required the development of four distinct web
applications to demonstrate and solidify the acquired skills. The projects completed
include an interactive calculator, a basic e-commerce website layout, a dynamic to-do
list application, and a functional Connect 4 game. This report provides a comprehensive
overview of the internship provider, a detailed weekly breakdown of the learning
journey, a technical analysis of each project, and a summary of the key skills acquired.
The experience successfully bridged the gap between theoretical classroom knowledge
and practical industry application, culminating in the development of a tangible project
portfolio and a robust understanding of client-side web development principles.
 Table of Contents

1. Chapter 1: Introduction to the Internship Provider: InternPe

1.1. Company Overview
1.2. Mission, Vision, and Operational Process
1.3. Service Portfolio: Internship Domains
1.4. Analysis of the Internship Model
2. Chapter 2: Internship Overview and Objectives
2.1. Domain and Designation
2.2. Duration and Modality
2.3. Stated Objectives and Personal Learning Goals
Chapter 3: Internship Completion Certificate
3.
Chapter 4: Learning Journey and Weekly Breakdown
4.
4.1. Week 1: Foundations of Web Structure and Styling
4.2. Week 2: Advanced CSS and Introduction to JavaScript
4.3. Week 3: JavaScript for Dynamic Web Pages
4.4. Week 4: Advanced JavaScript and Project Integration
Chapter 5: Core Technologies and Tools Mastered
5. 5.1. HTML5: The Structure of the Web
5.2. CSS3: Styling and Responsive Design
5.3. JavaScript (ES6+): The Brains of the Operation
5.4. Development Environment and Tools
Chapter 6: Project Implementation and Analysis
6. 6.1. Project 1: Interactive Calculator
6.2. Project 2: Basic E-commerce Website
6.3. Project 3: Dynamic To-Do List Application
6.4. Project 4: Connect 4 Game
Chapter 7: Conclusion and Future Scope
7. 7.1. Summary of Internship Experience
7.2. Reflection on Professional Growth
7.3. Future Scope and Career Path
Chapter8: References
Appendix A: Internship Offer Letter
8.
9.
Chapter 1: Introduction : InternPe

1.1. Company Overview

InternPe is an educational technology and IT training company headquartered in

Jaipur, Rajasthan, India.1 As an emerging player in the ed-tech sector, it operates with
the primary goal of equipping students with practical, industry-relevant skills. The
organization is officially registered as a Micro, Small, and Medium Enterprise (MSME)
with the Government of India, a status that lends it a degree of formal recognition and
credibility in its operations.
The company's core business revolves around offering virtual internships across a
spectrum of technological domains. This model is designed to be accessible to
students nationwide, removing geographical barriers and providing a flexible learning
environment. The certificates issued by InternPe also feature logos from the
International Organization for Standardization (ISO 9001:2015) and the All India
Council for Technical Education (AICTE), which suggests a strategic effort to align
their programs with national educational standards and quality management systems,
thereby increasing their appeal to engineering students who require certified
internships for academic credit
Chapter 2: Internship Overview and Objectives

This chapter outlines the formal parameters and learning goals of the four-week
virtual internship in Web Development with InternPe.

2.1. Domain and Designation

The internship was conducted within a specific technical field and role, as detailed in
the official documentation provided by the company.
●Domain: Web Development
● Designation: Intern
The focus on Web Development aligns with the high-demand skills in the current IT
industry, particularly in creating interactive and user-facing applications.

2.2. Duration and Modality

The internship was structured to be completed within a defined timeframe and

through a modern, flexible delivery method.
● Duration: The program spanned a total of 4 Weeks, commencing on May 26 ,
2025, and concluding on June 22, 2025

Modality: The internship was conducted entirely in a Virtual/Remote format.2

● This modality provided the flexibility for self-paced learning and allowed the
intern to work from any location, a common practice in the modern technology
sector.

2.3. Stated Objectives and Personal Learning Goals

The primary purpose of the internship was to acquire practical skills and achieve
specific learning outcomes. These objectives were aligned with both the company's
program structure and the intern's personal career development goals.
Primary Objective: The overarching goal was to gain a comprehensive, practical understanding
of front-end web development by mastering its three core technologies: HTML, CSS, and
JavaScript.1 The aim was to move beyond theoretical knowledge and develop the ability to
build functional, interactive web applications from scratch. Secondary Objectives: To support
the primary objective, the following secondary goals were established for the internship
period:

●Portfolio Development: To successfully design, develop, and complete a

portfolio of four distinct web applications: a calculator, a basic e-commerce
website, a to-do list, and a Connect 4 game.
● Understanding the Development Lifecycle: To grasp the fundamental workflow
of front-end development, from creating the structural foundation with HTML, to
applying visual design and responsiveness with CSS, to implementing logic and
interactivity with JavaScript.
● Problem-Solving and Algorithmic Thinking: To enhance analytical and
problem-solving skills by debugging code, implementing application logic, and
designing algorithms for tasks such as the win-condition check in the Connect 4
game.10
● Academic Fulfillment: To successfully complete the internship in accordance
with the guidelines set by the All India Council for Technical Education (AICTE)
and fulfill the partial requirements for the Bachelor of Technology degree at
Government Engineering College Sheikhpura.
Chapter 3: Internship Completion Certificate
Thischapter presents the officialdocumentation verifyingthe successful completion
of the internship program. The certificate, issued by InternPe, serves as a formal
testament to the skills and experience gained during the four-week period.

Figure 3.1:Official Internship Completion Certificate issued by InternPe,certifying the

successful completion of the Web Development internship (CID: IPI#55042).
Chapter 4: Learning Journey and Weekly Breakdown

The four-week internship was structured as a progressive and intensive learning

experience. Each week was dedicated to mastering specific technologies and
concepts, with the knowledge from the previous week serving as a foundation for the
next. This cumulative approach ensured a robust understanding, moving from static
page creation to complex, dynamic web applications.

4.1. Week 1: Foundations of Web Structure and Styling

The first week was dedicated to establishing a strong foundation in the fundamental
building blocks of the web: HTML5 and CSS3. The focus was on understanding how to
correctly structure a webpage and apply basic styling.
● HTML5: The curriculum focused on semantic HTML, emphasizing the use of
tags like <header>, <footer>, <nav>, <main>, and <section> to create meaningful
and accessible document structures. Practical exercises involved creating forms
with various input types and structuring data using tables, which was directly
applicable to laying out the initial framework for the calculator project.
● CSS3: The styling portion covered essential concepts, including CSS selectors
(class, ID, attribute), the box model (margin, border, padding, content), and
fundamental styling properties for typography and color. A key focus was the
introduction to Flexbox, a layout model used for aligning items in a single
dimension, which proved crucial for organizing the buttons and display of the
calculator interface.
● Practical Application: By the end of the week, the complete HTML structure for
the Calculator project was developed, and basic CSS was applied to define its
layout and appearance.
4.2. Week 2: Advanced CSS and Introduction to JavaScript

Building on the foundation from the first week, the second week delved into more
advanced styling techniques and introduced the core programming language of the
web, JavaScript.
● Advanced CSS: The focus shifted to creating sophisticated and adaptable
layouts. This included mastering responsive design using media queries to
ensure applications look and function well on various devices, from desktops to
mobile phones. The intern also learned CSS Grid, a powerful two-dimensional
layout system, which was essential for planning the more complex structures of
the e-commerce product page and the Connect 4 game board.
● Introduction to JavaScript: The journey into programming began with the
fundamentals of JavaScript. This included understanding variables (using modern
let and const keywords), different data types (String, Number, Boolean), operators
(arithmetic, comparison), and control flow structures like if/else statements and
for loops.
● Practical Application: The CSS for the Calculator project was refined to be fully
responsive. The initial JavaScript logic for the calculator began, and the HTML
structure for the To-Do List application was created.

●
4.3. Week 3: JavaScript for Dynamic Web Pages

The third week was a deep dive into the most powerful aspect of client-side
JavaScript: making web pages interactive and dynamic.
DOM Manipulation: This was the central theme of the week. The intern learned
how to use JavaScript to interact with the Document Object Model (DOM). This
included selecting elements from the HTML page using methods like
getElementById and querySelector, and then dynamically changing their content,
attributes, and styles. Crucially, this week covered creating new HTML elements
(createElement), adding them to the page (appendChild), and removing them
(remove), which is the core functionality of the To-Do List app.
Event Handling: To make applications respond to user actions, the intern
mastered event handling. This involved using the addEventListener method to
listen for events like click (for buttons) and keydown (for keyboard input) and then
executing specific JavaScript functions in [Link] Application: This
week saw the completion of the full functionality for both the Calculator and the
To-Do List. The calculator could now perform calculations, and the to-do list
allowed users to add, delete, and mark tasks as complete. Development also
began on the front-end of the basic e-commercewebsite.
4.4. Week 4: Advanced JavaScript and Project Integration

The final week consolidated all the learned skills and introduced more advanced
JavaScript concepts to tackle the most complex projects of the internship.
● Advanced JavaScript Concepts: The curriculum expanded to include a deeper
understanding of functions for writing modular and reusable code, arrays and
objects for managing complex data structures (like a list of products or the game
board state), and modern ES6+ features such as arrow functions and template
literals for writing more concise and readable code.
● Algorithmic Thinking: The main challenge of the week was developing the
Connect 4 game. This required significant algorithmic thinking to implement the
game's logic. This included managing player turns, creating a function to
correctly "drop" a disc into the lowest available cell of a column, and, most
importantly, designing an algorithm to check for a win condition (four consecutive
discs horizontally, vertically, and on both diagonals) after every move.
● Practical Application: The basic e-commerce website, featuring dynamic
product display and filtering, was completed. The Connect 4 game was fully
implemented. The final days were spent on testing, debugging, and refining all
four projects to ensure they were fully functional and polished.
Chapter 5: Core Technologies and Tools Mastered

This internship provided an immersive experience in the essential technologies that

power the modern web. The learning was focused on the client-side stack, ensuring a
strong grasp of how to build interactive and visually appealing user interfaces.

5.1. HTML5: The Structure of the Web

HyperText Markup Language (HTML) is the standard markup language for creating
web pages. During the internship, the focus was on HTML5, the latest version, which
introduces features for creating more descriptive and accessible web content. A key
competency developed was the use of semantic HTML. Instead of relying solely on
generic <div> elements, projects were structured using tags like <header>, <footer>,
<nav>, <main>, <section>, and <article>. This practice not only improves code
readability but also enhances Search Engine Optimization (SEO) and accessibility for
users relying on screen [Link] was applied across all four projects to create a
logical and well-organized document structure.

5.2. CSS3: Styling and Responsive Design

Cascading Style Sheets (CSS) is the language used to describe the presentation of a
document written in HTML. The internship covered CSS3, focusing on both
fundamental styling and advanced layout techniques. A significant portion of the
training was dedicated to modern layout modules that are essential for building
complex and responsive websites:
● Flexbox: Used extensively for aligning items in a single dimension. It was the
primary tool for arranging the buttons and display in the Calculator project and
for aligning items within each task of the To-Do List.
● CSS Grid: Employed for more complex, two-dimensional layouts. It was
instrumental in creating the product grid for the e-commerce website and the 7x6
game board for the Connect 4 game, allowing for precise control over both rows
and columns.
● Responsive Design: A core principle emphasized throughout the internship was
making websites adaptable to different screen sizes. This was achieved using
media queries, which allow the application of different CSS rules based on the
device's viewport width. This ensured that all four projects were usable and
aesthetically pleasing on both desktop and mobile devices.
5.3. JavaScript : functionality
JavaScript is the high-level, dynamic programming language that brings interactivity
to web pages. The internship focused on modern JavaScript (ECMAScript 6 and later),
which includes features that make the language more powerful and easier to work
with. The key JavaScript competencies acquired were:
● DOM Manipulation: The ability to dynamically access and modify the content,
structure, and style of a web page. This was the cornerstone of the interactive
projects, especially the To-Do List, where tasks were created and deleted in
real-time.
● Event Handling: Using event listeners to capture user actions like clicks, mouse
movements, and keyboard inputs, and then triggering functions to respond to
these actions. This was fundamental to the functionality of all four projects.17
● Functions, Arrays, and Objects: Mastering these core programming constructs
was essential for writing organized code and managing data. Arrays were used to
store the list of tasks in the To-Do app and the product data in the e-commerce
site,
● Logical Operations: For the calculator project, the eval() function was used as a
learning tool to quickly implement the calculation logic. It is understood that while
effective for this simple project, eval() poses security risks in production
environments and would be replaced by a custom parsing function in a real-world
application.
5.4. Development Environment and Tools
Proficiency in development tools is as important as knowledge of the languages
themselves. The standard professional workflow was adopted using the following
tools:
● Visual Studio Code (VS Code): A powerful and popular source-code editor used
for writing and organizing all HTML, CSS, and JavaScript code.
● Google Chrome Developer Tools: An indispensable suite of tools built directly
into the browser. It was used extensively for debugging JavaScript, inspecting the
DOM tree, analyzing CSS layouts, and testing the responsiveness
Chapter 6: Project Implementation and Analysis

This chapter provides a detailed analysis of the four projects completed during the
internship. Each project was designed to target and reinforce specific aspects of web
development, creating a comprehensive learning path from basic interactivity to
complex algorithmic logic. The discussion will focus on the architecture and key
learnings of each application, avoiding bulky code blocks in favor of high-level
explanations.

6.1. Project 1: Interactive Calculator

Objective: The primary goal of this project was to build a standard digital calculator.
This served as an introductory exercise to integrate HTML for structure, CSS for
styling, and JavaScript for handling user events and performing basic logic.
Architecture:
● HTML: The structure was created using a <table> or a grid of <div> elements to
organize the calculator's buttons and display screen. A disabled <input
type="text"> element was used for the display, preventing users from typing

● directly into it while allowing its value to be manipulated by JavaScript.12

CSS: Flexbox and CSS Grid were utilized to ensure the buttons and display were
perfectly aligned, creating a clean and intuitive user interface. Styles were applied
to the buttons to provide visual feedback on hover and click events, mimicking the

● feel of a real calculator.14

JavaScript: The core functionality was driven by JavaScript. Event listeners were

attached to each button. When a number or operator button was clicked, its value
was appended to a string. A 'Clear' button would reset this string. The 'Equals'
button triggered a function that used the eval() method to evaluate the
mathematical expression stored in the string and display the result in the input
field.20

Key Learnings: This project provided a solid foundation in fundamental JavaScript

concepts. The key takeaways were mastering basic DOM manipulation (reading and
writing to the display field), handling a multitude of user events efficiently, and
implementing simple computational logic.

6.2. Project 2: Basic E-commerce Website

Objective: To design and build the front-end of a product listing page for an
e-commerce website. This project focused on responsive layouts and the dynamic
generation of content from a data source.
Architecture:
● HTML: The page was structured using semantic HTML5 tags, including a
<header> for the site title and navigation, a <main> section to contain the product
listings, and a <footer> for site information.11 A container

● <div> was designated as the parent for all productcards.

CSS: A responsive grid layout was implemented using CSS Grid to display the
product cards. This ensured that the number of columns would adjust gracefully
based on the screen size, providing an optimal viewing experience on both
desktop and mobile devices. CSS was also used to style the individual product
cards, including images, titles, and prices, to create a visually appealing

● presentation.11
JavaScript: The product data (e.g., image URL, title, category, price) was stored

in a JavaScript array of objects. A function was written to iterate over this array
using the .map() method. For each product object, it dynamically created an
HTML product card using template literals and injected it into the main product
container. An additional feature was implemented to filter the displayed products
based on a category selection, which involved re-running the display function
with a filtered version of the product array.16

Key Learnings: The main takeaway from this project was learning how to separate
data from presentation. It demonstrated how to manage a collection of data using
arrays and objects and how to use JavaScript to dynamically render that data into the
DOM. This is a foundational pattern in modern web development.
6.3. Project 3: Dynamic To-Do List Application

Objective: To create a classic to-do list application where users can add new tasks,
mark tasks as complete, and delete tasks. This project was a deep dive into dynamic
DOM manipulation.
Architecture:

● HTML: The interface was simple, consisting of an <input type="text"> field for
entering a new task, an "Add" <button>, and an unordered list <ul> that served as
the container for the tasks.18
● CSS: Styling was applied to the input field, button, and list items to create a clean
and organized look. A key feature was the use of a specific CSS class, such as
.completed, which would apply a text-decoration: line-through style to visually
indicate that a task was finished.18
● JavaScript: This project was heavily reliant on JavaScript. An event listener on
the "Add" button would take the value from the input field, create a new <li>
element, and append it to the <ul>. To handle task completion and deletion
efficiently, event delegation was used. A single event listener was placed on the
parent <ul> element. When a click occurred, the code would check if the click
target was a delete button (in which case the parent <li> was removed using the
.remove() method) or the task text itself (in which case the .completed class was
toggled on the <li>).18

Key Learnings: This project solidified the understanding of creating, modifying, and
deleting DOM elements in real-time based on user interaction. It also introduced the
concept of event delegation as a more performant way to handle events on a list of
items.

6.4. Project 4: Connect 4 Game

Objective: To develop a functional, two-player Connect 4 game. This was the most
complex project, designed to challenge problem-solving and algorithmic thinking
skills.
Architecture:
● HTML: The HTML was minimal, primarily consisting of a main container <div> for
the game board. The board itself, with its 42 slots, was generated entirely by
JavaScript to keep the HTML clean and dynamic.10
● CSS: CSS Grid was the perfect tool for creating the 7-column by 6-row structure
of the game board. CSS was also used to style the game pieces (the red and blue
discs), the board itself, and the status messages that indicated the current
player's turn or the game's outcome.10
● JavaScript: The game's logic was the most intricate part. A 2D array (6 rows by 7
columns) was used to represent the state of the game board, storing whether
each slot was empty or occupied by a player. The logic included functions to
handle player turns, a function that determined the lowest available row in a
clicked column to "drop" a token, and a comprehensive checkWin() function. This
win-checking algorithm ran after every move and systematically checked for four
consecutive tokens horizontally, vertically, and along both diagonal axes.10

Key Learnings: This project was an excellent exercise in algorithmic problem-solving.

It required translating a set of game rules into functional code, managing application
state within a complex data structure (the 2D array), and thinking through all possible
edge cases for the win condition.
Chapter 7: Conclusion

7.1. Summary of Internship Experience

This four-week virtual internship in Web Development with InternPe has been a highly
rewarding and transformative experience. The program successfully delivered on its
promise of providing practical, hands-on training in the core technologies of front-end
development. The project-based learning model proved to be exceptionally effective,
as it required the immediate application of newly learned concepts, thereby reinforcing
them. By progressing from a simple calculator to a complex game, the internship
provided a well-structured learning curve that systematically built upon foundational
skills. The objectives set at the beginning of the internship were fully met, resulting in
the acquisition of a versatile technical skill set and a portfolio of four functional web
applications.

7.2. Reflection on Professional Growth

The internship marked a significant point of transition from being a student with purely
theoretical knowledge of computer science to becoming a developer capable of
building tangible products. The experience of writing code, debugging errors, and
seeing an application come to life has demystified the development process and built
a great deal of confidence. The challenges encountered, particularly in implementing
the algorithmic logic for the Connect 4 game, were instrumental in developing
resilience and a problem-solving mindset. This practical exposure has provided a
much clearer perspective on the day-to-day work of a web developer and has
solidified the desire to pursue a career in this field.

7.3. Future Scope and Career Path

The foundational skills in HTML, CSS, and JavaScript acquired during this internship
are the essential bedrock of modern web development. This knowledge serves as a
critical stepping stone for further learning and specialization. The immediate future
scope involves deepening the understanding of advanced JavaScript concepts,
including asynchronous programming, closures, and prototypes.
Looking forward, the next logical step in this career path is to learn a modern
JavaScript framework or library. Frameworks like React, Angular, or [Link] are
industry standards for building complex, single-page applications. The strong
foundation in core JavaScript and DOM manipulation gained from this internship will
make the process of learning these advanced tools significantly easier.

Ultimately, the goal is to expand beyond the front-end and explore back-end
technologies (such as [Link], Python with Django, or Java with Spring) and
databases (SQL and NoSQL). This will pave the way toward becoming a full-stack
developer, capable of building and managing complete web applications from end to
end. This internship has been the crucial first step on that long-term career journey.
Chapter 9: References

Throughout the internship, a variety of high-quality online resources were consulted

for documentation, tutorials, and problem-solving. The following resources were
instrumental in the successful completion of the projects:
● MDN Web Docs (Mozilla Developer Network): The primary and most
authoritative source for detailed documentation on web technologies, including
HTML, CSS, and JavaScript.
● GeeksforGeeks: A valuable resource for tutorials and articles on specific
programming problems and concepts, particularly for understanding the logic
behind the projects.12

● W3Schools: Provided straightforward tutorials and interactive examples that

were helpful for quick reference and learning basic syntax.
● CSS-Tricks: An excellent resource for in-depth articles and guides on advanced
CSS concepts, including Flexbox and Grid layouts.
● [Link]: Offered comprehensive learning materials and a community
forum that was useful for understanding different approaches to solving
development challenges.
● Stack Overflow: A critical resource for troubleshooting
specific bugs and
understanding complex, real-world programming issues through its
community-driven question-and-answer platform.
Appendix A: Internship Offer Letter
Thisappendixcontainstheofficial offerletter issued by InternPe, which formalized the
terms and commencement of the internship program.

Figure A.1: Official Internship Offer Letter from InternPe (IPI#55042).