A

Internship Report

On

“Web Development”

Submitted to the
Department of Information Technology

By

Adarsh Singh
Class: TE IT
Roll No: 4301
Exam No: T400220300

Under the supervision of

Internal Guide: Prof. Sandeep Samleti

Department Of Information Technology

Army Institute of Technology, Pune

2024-2025
Semester: II
 CERTIFICATE

This is to certify that the internship report entitled “Web Development” being submitted by Adarsh
Singh(4301)is a record of bonafide work carried out by him/her with prior permission of HOD IT under the
supervision of Pr. Sandeep Samleti in the academic year 2024-2025

Date: 13/05/2025

Place: Pune

Prof. Sandeep Samleti Dr.Sangeeta Jadhav

Internship Guide Head of the Department
CERTIFICATE BY THE COMPANY/OFFER LETTER
 ACKNOWLEDGEMENT

I would like to express my heartfelt gratitude to everyone who contributed to the successful
completion of my internship and the development of the data science projects at CodeAlpha. This
experience has been a cornerstone of my professional and personal growth.

First and foremost, I extend my sincere thanks to Prof Sandeep Samleti, my Internal Guide, for their
unwavering support, insightful guidance, and constant encouragement throughout this journey.
Their profound knowledge of data science concepts, machine learning algorithms, and problem-
solving techniques has been instrumental in strengthening my understanding and skills in the field.
Their mentorship has played a crucial role in helping me overcome challenges and lay a solid
foundation for my career.

I am deeply grateful to the team at CodeAlpha for fostering an innovative, collaborative, and
resource-rich environment that enabled me to execute this internship effectively.

Lastly, I extend my gratitude to everyone who, in some way or another, contributed to the success
of this internship. The collective efforts, encouragement, and belief in my potential have
transformed this internship into a deeply fulfilling and transformative experience. I leave this
journey not just with technical expertise but also with a renewed sense of confidence and a passion
for continuous learning in the field of data science.

Name:Adarsh Singh
Roll No: 4301
Exam No: T400220300

I
 Abstract
This report presents a comprehensive overview of my web development internship at CodeAlpha,
(ASTEK) where I undertook two major tasks: building a responsive gym website and designing a
modern music website interface using Figma. The internship was aimed at enhancing my practical
knowledge in web development and UI/UX design, complementing my academic learning as a
third-year Information Technology student.

The gym website project focused on frontend technologies including HTML, CSS, and JavaScript to
develop a fully functional and visually appealing platform. The site included key features such as a
homepage with call-to-action elements, services, trainer profiles, and a contact form, all optimized
for different screen sizes through responsive design techniques. The music website prototype,
developed using Figma, emphasized user interface design, showcasing pages such as a homepage,
now-playing interface, playlist sections, and mobile-friendly views.

The internship was divided into modules, starting with requirement analysis, followed by frontend
development (for the music website), frontend development (for the image website), testing,
debugging, and documentation. The first step involved identifying the needs of the website users
— gym members and music lovers — and defining features accordingly. Then came the design
phase, where Figma was used for low-fidelity wireframes and later for high-fidelity UI designs.
During the development phase of the gym website, I adhered to responsive design best practices,
used modular CSS classes for maintainability, and tested the site using multiple browsers and
device simulators. Git and GitHub were used to version control the code and track changes over
time.

Throughout the internship, I gained hands-on experience with industry-standard tools and
workflows, including Git for version control, Figma for UI design, and browser dev tools for
debugging. I also improved my soft skills like time management, communication, and problem-
solving. This report documents the learning objectives, development modules, technologies used,
screenshots of results, and concludes with reflections on the knowledge gained and the value this
internship added to my technical and professional growth.

II
 Index

Chapter No Title Page no

1. Introduction 01
1.1 Learning Objectives of internship 01
1.2 Module Description 02
2. Technology 03
3. Screenshots of Results 05
4. Conclusion 06
5. Completion Certificate and Proof of Paid Internship 07
6. Internship Feedback 08
6.1 Student internship Feedback 08
7. Bibliography 09

III
 Chapter No 1

INTRODUCTION

web development internship at CodeAlpha provided a valuable platform to bridge theoretical knowledge with real-
world practice. As a third-year Information Technology student, I had the opportunity to deepen my
understanding of web technologies, user interface design, and the software development process.
The internship primarily involved working on two key projects: building a fully responsive and
interactive gym website and designing a prototype for a music streaming website using Figma.

1.1 Learning Objectives of Internship

primary goal of this internship was to provide hands-on exposure to professional web development practices and
improve design thinking through a real-time industrial setting. My key objectives were:

 Apply classroom knowledge: Reinforce concepts of HTML, CSS, and JavaScript through
real-world implementation.
 Build real-world projects: Develop and deploy a complete responsive website from scratch.
 Learn UI/UX Design Principles: Understand user-centric design and apply it using Figma.
 Understand Development Tools: Use IDEs, design tools, version control, and
debugging tools professionally.
 Improve Collaboration: Learn to work under guidance and deliver milestones within
a deadline.
 Boost Portfolio: Create showcase-worthy projects to enhance job-readiness and confidence.

objective aligned with both my academic goals and future aspirations as a tech professional. The structure and
mentorship provided by CodeAlpha created a perfect learning ecosystem to meet these goals. Each
project presented unique challenges and learning opportunities.
the gym website, I was responsible for coding layouts, making the site responsive across different devices, and
integrating smooth interactions. The music website, on the other hand, challenged me to think
creatively, design from the perspective of a user, and utilize tools such as Figma for high-fidelity
prototyping.

01
1.2 Module Description

The internship was organized into two primary modules that spanned the entire duration of the
program. These modules allowed me to gain practical expertise in the dual facets of web
development — frontend coding and UI/UX design.

Module 1: Web Development (Music Player Website) This module focused on the technical
aspects of building a full website using core web development languages — HTML5, CSS3, and
JavaScript. I was introduced to:

 Structuring content using semantic HTML tags.

 Styling pages with advanced CSS techniques, including Flexbox, Grid, animations,
and transitions.
 Implementing responsiveness using media queries.
 Adding dynamic behavior using JavaScript for user interaction.
 Debugging and testing across different browsers and screen sizes.

This project helped solidify my understanding of frontend development and gave me insight into
real-world website workflows.

Module 2: AI Fitness Planner(Web development)This module was centered around user interface
and experience a powerful online user interface. Here, I learned:

 Designing wireframes and layout structures.

 Creating prototypes with user flows and interactions.
 Understanding design systems — fonts, colors, and reusable components.
 Working with auto-layout, constraints, and variants.
 Improving designs based on user feedback and design heuristics.

This gave me the ability to visualize digital products before they are built — a critical step in any
tech-driven project.

02
 Chapter No 2

TECHNOLOGY

Technology formed the backbone of my web development internship at CodeAlpha. The practical
implementation of a variety of tools and programming languages enriched my learning experience
and enabled me to build user-friendly, responsive, and aesthetically pleasing web projects. The
primary technologies I used during this internship included HTML, CSS, JavaScript, Figma, GitHub,
and Visual Studio Code (VS Code), among others. Each of these tools played a unique role in
shaping the outcome of my projects — the Music Player Website and the Image Gallery .

HTML5 (Hypertext Markup Language) was the first building block of the Gym Website. It
helped me create structured web pages with semantically appropriate elements. By utilizing tags
such as , , , and , I organized the content meaningfully, which improved both accessibility and
maintainability. Form elements like , , and enabled interactive sections such as contact forms, while
multimedia tags like and enriched the site visually. Accessibility was also improved by using alt
attributes and ARIA labels, ensuring that screen readers could effectively interpret the content.
To complement HTML, I used CSS3 (Cascading Style Sheets) for styling and layout purposes.

CSS allowed me to apply colors, typography, spacing, and responsive design techniques to enhance
user experience. I made extensive use of CSS Flexbox and Grid to create clean and responsive
layouts. Media queries ensured that the website adjusted itself smoothly across various devices such
as desktops, tablets, and smartphones. Additionally, I used CSS animations and transitions to add
dynamic visual effects that made the site feel more interactive and engaging.

JavaScript played a pivotal role in adding interactivity to the Gym Website. Through DOM
manipulation, I was able to build functionalities such as a responsive navigation menu, image
sliders, and form validations. JavaScript functions and event listeners allowed me to respond to user
inputs in real time, such as hiding and showing elements based on screen size or validating form
fields before submission. This dynamic behavior significantly enhanced the user interface and
helped ensure a smooth user journey.

On the design side, Figma was the primary tool used for the Music Website UI Design. Figma
enabled me to create high-fidelity mockups, wireframes, and prototypes. It supported collaborative
and cloud-based designing, which allowed for easy sharing and feedback. I utilized Figma’s features
such as auto-layouts, reusable components, design systems, and interactive prototypes. This not only
improved the efficiency of my design process but also gave me a deep understanding of UI/UX
principles like consistency, alignment, visual hierarchy, and user flow. Designing for real users
helped me empathize with end-users and make informed design decisions.

03
VS Code served as my main development environment. As an Integrated Development Environment
(IDE), VS Code offered various extensions like Live Server for real-time preview, Prettier for code
formatting, and Emmet for code abbreviation. These tools helped speed up development and reduce
errors. The code editor’s intelligent suggestions and inbuilt terminal made coding seamless, while
version control integrations allowed me to commit changes directly to GitHub.

Git and GitHub were essential for version control and project management. Using Git, I created
branches, managed commits, and merged code changes systematically. GitHub served as a platform
for hosting my project repositories. I documented the project through README files and followed
good practices like meaningful commit messages and modular code organization. This experience
taught me how collaborative development works in professional settings and how to maintain project
history effectively.
To test and debug the website, I relied heavily on Chrome Developer Tools. The Elements tab
allowed me to inspect and modify HTML and CSS on the fly, while the Console tab helped in
identifying and resolving JavaScript errors. The Network tab gave insights into resource loading
times, and the Performance tab helped in measuring the responsiveness of the website. These tools
were invaluable for fine-tuning the project and ensuring compatibility across browsers.

Though the project did not require external APIs, I explored APIs such as Spotify’s Web API for
future possibilities of adding real-time music streaming data into the Music Website. This
exploration introduced me to concepts such as authentication tokens, RESTful endpoints, and JSON
parsing, which are essential in full-stack development.

04
 Chapter No 3

SCREENSHOTS OF RESULTS

05
05
 Chapter No 4

CONCLUSION

This internship at CodeAlpha has been a transformative journey, allowing me to bridge the gap
between theoretical knowledge and practical implementation. As a third-year Information
Technology student, I had previously studied concepts of web design and development, but this
experience brought those ideas to life. Through two significant projects — the creation of a fully
functional gym website and the Figma prototype of a modern music website — I gained hands-on
experience, industry exposure, and technical confidence.
 I learned how to structure a professional website using HTML5 and how to make it
visually appealing with CSS3. This reinforced my understanding of frontend development
and showed me how every element contributes to user experience.
 JavaScript added interactivity to the project and gave me the ability to make the
website dynamic. This included toggling menus, form validation, sliders, and other
responsive behaviors.
 I explored Figma’s advanced tools, such as auto layout, variants, and component
reuse, which not only saved time but also ensured consistency.
 I learned to maintain a design system — color palette, fonts, iconography — to make the
UI aesthetically pleasing and user-friendly.
 The feedback loop during design reviews improved my ability to iterate based on user
and mentor suggestions.

This internship has not only helped me grow as a developer but has also affirmed my passion for
designing intuitive, inclusive, and performance-oriented web experiences. I am grateful to
CodeAlpha for this opportunity and will carry these lessons forward in both my academic and
professional journey.

06
 Chapter No 5

COMPLETION CERTIFICATE

07
 Chapter No 6
Internship Feedback

6.1 Student Internship Feedback

Army Institute of Technology

Department of Information
Technology AY 2024-25 Sem: I / II

Name of the Student: Adarsh Singh

Class: TE IT

Name of the Company/Organization where you have done the Internship: CodeAlpha(Astek)

Note: Provide following feedback by answering the following questions either Yes or No.

Q.1 Is this internship increases your technical skill? (Yes/No):

Ans: Yes

Q.2 Is the mentor from the company helped you in the Project? (Yes/No)
Ans: Yes

Q.3.Do you fill that this internship will be helpful for you in future? (Yes/No)
Ans: Yes

Q.4 Is our college has provided the enough support to do this Internship? (Yes/No)
Ans: Yes

Any suggestions:
No Suggestions.

Adarsh Singh
Roll No: 4301
Exam No: T400220300
08
 Chapter No 7

Bibliography

1. HTML5 and CSS3 Documentation

o Mozilla Developer Network (MDN). (2024). HTML: HyperText Markup
Language. https://developer.mozilla.org/en-US/docs/Web/HTML
o Mozilla Developer Network (MDN). (2024). CSS: Cascading Style Sheets.
https://developer.mozilla.org/en-US/docs/Web/CSS
2. JavaScript
o Eloquent JavaScript by Marijn Haverbeke (3rd Edition)
o Mozilla Developer Network (MDN). (2024). JavaScript Guide.
https://developer.mozilla.org/en-US/docs/Web/JavaScript
3. Responsive Web Design
o W3Schools. (2024). Responsive Web Design.
https://www.w3schools.com/html/html_responsive.asp
o CSS-Tricks. (2024). A Complete Guide to Flexbox & Grid https://css-
tricks.com/snippets/css/a-guide-to-flexbox/
4. Figma Design Tool
o Figma Help Center. (2024). Learn design with Figma. https://help.figma.com/
o Kevin Powell on YouTube – Responsive design tutorials
5. Web Development Tools
o Visual Studio Code Documentation
o Git and GitHub – GitHub Docs: https://docs.github.com/en
o Chrome Developer Tools: https://developer.chrome.com/docs/devtools/
6. Internship Reference
o CodeAlpha(2025). Web Development Internship Overview. https://codealpha.com/

09