UNIVERSITY WEBSITE
INTERNSHIP REPORT
Submitted by
SREENIWASAN G J (21C140)
BACHELOR OF
ENGINEERING/TECHNOLOGY
in
COMPUTER SCIENCE ENGINEERING
THIAGARAJAR COLLEGE OF
ENGINEERING, MADURAI – 625 015
11 th DECEMBER, 2023 to 6 th JANUARY , 2024
1
THIAGARAJAR COLLEGE OF ENGINEERING(TCE),
MADURAI- 625 015
BONAFIDE CERTIFICATE
Certified that this Virtual Internship report web page is the bonafide work of
SREENIWASAN GJ Department of COMPUTER SCIENCE ENGINEERING
Who carried out the Internship at Aalan Tech soft company between
11 th DECEMBER , 2023 to 6 th JANUARY , 2024
Submitted for Evaluation held at Thiagarajar College of
Engineering on
EXAMINER 1 EXAMINER 2
(Name with Signature) (Name with Signature)
2
ABSTRACT
This internship report provides an overview of my experience and learning during
the internship period focused on web development with a frontend emphasis. The
report covers various aspects, including the background, objectives, purpose of the
work, problem formulation, conceptual design, results, and discussion. Additionally,
it concludes with insights into future enhancements and references.
This report delves into the dynamic realm of web development, focusing on the
transformation and optimization of a university's online presence through the
utilization of HTML, CSS, JavaScript, and Bootstrap technologies. The project
aimed to enhance the overall user experience by employing responsive design,
interactive elements, and modern styling to create a visually appealing and user-
friendly website.
The report begins with an exploration of the foundational aspects of web
development, emphasizing the role of HTML in structuring content and CSS in
styling, thereby establishing a solid groundwork for the subsequent improvements.
The integration of JavaScript enriched the webpage with dynamic features, such as
interactive menus and real-time updates, contributing to a more engaging user
experience.
This internship report serves as a comprehensive documentation of the journey
towards enhancing the university's webpage, showcasing the practical application of
HTML, CSS, JavaScript, and Bootstrap to create a visually appealing, user-centric,
and technologically advanced online platform for the university community.
3
Table of Contents
Chapter No Title Page no
Bonafide Certificate 02
Abstract 03
1. Introduction 05
2. Background 06
3. Objectives 08
4. Purpose of the work 08
5. Problem Formulation 09
6. Conceptual Design 10
7. Results and Discussion 11
8. Conclusion and Future Enhancements 14
9. References 15
4
INTRODUCTION
The introduction section outlines the general context of the internship,
including the organization's background, the nature of its operations, and the
importance of web development in today's digital landscape. It serves as a prelude to
the detailed exploration that follows.
In the rapidly evolving landscape of higher education, universities strive to stay
at the forefront by embracing technological advancements. As a crucial part of this
endeavor, the internship focused on enhancing the University's webpage to better
serve the needs of students, faculty, and other stakeholders. The internship aimed to
improve the overall user experience, accessibility, and functionality of the webpage,
aligning it with modern web standards.
The report begins with an exploration of the foundational aspects of web
development, emphasizing the role of HTML in structuring content and CSS in styling,
thereby establishing a solid groundwork for the subsequent improvements. The
integration of JavaScript enriched the webpage with dynamic features, such as
interactive menus and real-time updates, contributing to a more engaging user
experience.
The internship was to analyze, redesign, and implement improvements to the
University webpage. The project sought to address issues related to navigation, content
organization, mobile responsiveness, and accessibility. Additionally, the internship
aimed to incorporate innovative features and technologies that would contribute to a
more engaging and user-friendly online platform.
The goal is to create a visually engaging and user-friendly interface that adapts
seamlessly across devices, utilizing Bootstrap's responsive grid system. HTML will be
employed to structure content logically, ensuring easy navigation and accessibility.
CSS will address the presentational aspects, enhancing the overall design and
maintaining a cohesive look.
5
BACKGROUND :
This section delves into the historical context and evolution of web
development, highlighting key milestones and technological advancements. It also
provides an overview of the significance of frontend development in creating
compelling and user-friendly web interfaces.
The University's webpage serves as a virtual gateway, providing vital
information about academic programs, events, administrative details, and other
relevant resources. As technology evolves, it becomes imperative to keep the
webpage updated, ensuring it aligns with the latest standards and meets the diverse
needs of its users.
HTML 5 is a software solution stack that defines the properties and behaviors
of web page content by implementing a markup based pattern to it. When you save an
HTML file, you can use either the .htm or the .html extension. The.htm extension
comes from the past when some of the commonly used software only allowedthree
letter extensions. It is perfectly safe to use either .html or .htm, but be
consistent.mypage.htm and mypage.html are treated as different files by the browser.
CSS is designed to enable the separation of presentation and content, including
layout, colors, and fonts. This separation can improve content accessibility, provide
more flexibility and control in the specification of presentation characteristics, enable
multiple web pages to share formatting by specifying the relevant CSS in a separate .
css file, and reduce complexity and repetition in the structural content.
Bootstrap is a web framework that focuses on simplifying the development of
informative web pages (as opposed to web apps). The primary purpose of adding it to
a web project is to apply Bootstrap's choices of color, size, font and layout to that
project. As such, the primary factor is whether the developers in charge find those
choices to their liking.
6
Bootstrap also comes with several JavaScript components in the form of jQuery
plugins.They provide additional user interface elements such as dialog boxes, tooltips,
and carousels.Each Bootstrap component consists of an HTML structure, CSS
declarations, and in some casesaccompanying JavaScript code. They also extend the
functionality of some existing interfaceelements, including for example an auto-
complete function for input fields
JavaScript often abbreviated as JS, is a high-level, interpreted programming
language that conforms to the ECMAScript specification. JavaScript has curly-bracket
syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
Along side HTML and CSS, JavaScript is one of the core technologies of the
World Wide Web. JavaScript enables interactive web pages and is an essential part of
web applications. The vast majority of websites use it, and major web browsers have a
dedicated JavaScript engine to execute it.
As a multi-paradigm language, JavaScript supports event-driven, functional,
and imperative (including object-oriented and prototype-based) programming styles.
It has APIs for working with text, arrays, dates, regular expressions, and the
DOM, but the language itself does not include any I/O, such as networking, storage, or
graphics facilities. It relies upon the host environment in which it is embedded to
provide these features.
Initially only implemented client-side in web browsers, JavaScript engines are
now embedded in many other types of host software, including server-side in web
servers and databases, and in non-web programs such as word processors and PDF
software, and in run time environments that make JavaScript available for writing
mobile and desktop applications, including desktop widgets.
7
OBJECTIVES :
Outlining clear objectives is crucial for any project. In this section, the specific
goals and targets set for the internship are discussed. These objectives serve as a
roadmap for the subsequent chapters, guiding the reader through the purposeful
nature of the internship. The objective of the web design is to handle the entire
design of a website. The software keeps track of all the information about the
entire website. The system contains database where all the information will be stored
safely.
The primary objective of the internship was to analyze, redesign, and
implement improvements to the University webpage. The project sought to address
issues related to navigation, content organization, mobile responsiveness, and
accessibility. Additionally, the internship aimed to incorporate innovative features
and technologies that would contribute to a more engaging and user-friendly online
platform.
The primary objective of this internship was to gain practical insights into the
intricacies of designing, developing, and maintaining a dynamic university webpage.
PURPOSE OF THE WORK:
The report details the overarching purpose of the internship, emphasizing the
practical application of theoretical knowledge in a real-world setting. It explores how
the internship aligns with academic learning and contributes to personal and
professional growth.
The design of education websites using HTML and CSS Bootstrap serves the
crucial purpose of creating an intuitive, visually appealing, and responsive platform
for effective learning. HTML structures the content, ensuring proper organization and
accessibility. CSS Bootstrap enhances this by providing a responsive grid system, pre-
designed components, and consistent styling, optimizing the site for various devices.
8
The combination of HTML and CSS Bootstrap enables a seamless user
experience, accommodating both desktop and mobile users. The responsive design
ensures content readability and navigation, fostering an inclusive learning
environment. Bootstrap's components, such as navigation bars and modals, enhance
user interactivity, facilitating smooth information retrieval.
Furthermore, HTML and CSS Bootstrap contribute to faster development
cycles, allowing educators to focus on content rather than intricate design details. The
framework's flexibility accommodates dynamic content updates, ensuring the website
stays current with evolving educational needs.
PROBLEM FORMULATION:
Identifying and addressing problems is a fundamental aspect of web
development. This section articulates the challenges faced during the internship, the
problem-solving methodologies employed, and the impact of these solutions on the
overall project.
The problem at hand is to design and develop a college webpage using HTML,
CSS, Bootstrap, and JavaScript, addressing various challenges in the current website.
The existing webpage lacks responsiveness and a cohesive layout, hindering user
experience. Inconsistencies in styling and navigation affect the overall aesthetic and
usability.
The goal is to create a visually engaging and user-friendly interface that adapts
seamlessly across devices, utilizing Bootstrap's responsive grid system. HTML will be
employed to structure content logically, ensuring easy navigation and accessibility.
CSS will address the presentational aspects, enhancing the overall design and
maintaining a cohesive look.
JavaScript will be integrated to introduce dynamic elements, such as interactive
forms, image sliders, and real-time updates, enhancing user engagement. Additionally,
the webpage will prioritize accessibility standards to cater to diverse users. The project
9
aims to streamline information dissemination, improve navigation efficiency, and
create an aesthetically pleasing and functional digital hub for the college community.
Responsive Designis Ensuring a seamless user experience across devices by
leveraging Bootstrap's responsive grid system and components, allowing users to
access the website from various devices without compromising usability.
Form Integration is Utilizing HTML forms and CSS styling for efficient data
collection, such as admission forms or feedback surveys, ensuring a seamless user
experience.
CONCEPTUAL DESIGN:
The conceptual design chapter provides an in-depth look at the creative and
technical decisions made during the web development process. It discusses the use of
HTML, CSS, JavaScript, and Bootstrap to create an engaging and responsive user
interface.
Using Web Development Project Templates:
A website template (or web template) is a pre-designed webpage, or set of
HTML web pages that anyone can use to "plug-in" their own text content and images
into to createa website. Usually built with HTML and CSS code, website templates
allow anyone tosetup a website without having to hire a professional web developer
or designer,although, many developers do use website templates to create sites for
their clients.This allows anyone to build a reasonably priced personal or business
website that canthen be listed in search engines so users can search for your specific
product or service.
10
Reference template :
Performed Task in web page:
1. Home page
2. Login page
3. Contact us
4. Gallery
5. About us
6. Various branch
7. Facilities
11
8. Feedback.
RESULTS AND DISCUSSION:
This section presents the tangible outcomes of the internship, showcasing the
developed frontend components and their functionalities. It also includes a discussion
of the challenges faced, lessons learned, and potential improvements. Finally
university webpage is prepared . The sample images of the project as shown below.
1. Home page :
2. Course we offer page :
3. Global campus page:
12
4. Login page
13
CONCLUSION AND FUTURE ENHANCEMENTS:
Summarizing the internship experience, the conclusion section reflects on the
achievements, lessons, and their implications. It also outlines potential areas for
future enhancements, emphasizing continuous learning and improvement.
The current work is the initial background report for the website development
project. This report aims to provide a critical review of the relevant literature in the
web field and also to describe key aspects of the methodology that will be applied
throughout the project. This report tries to examine various issues that arise while
building a website.
This report focuses on many other challenges that come up through the
development process, like performing website evaluation, conducting market
research and choosing the right business model for the website proposal. These are
the first and most crucial steps that will ensure that the final IT employment website,
will be developed according to the requirements of the market and will be tailored to
the needs of its users.
This internship aimed to contribute to the University's digital presence by
revamping its webpage. The focus on user experience, content management,
interactive features, and mobile responsiveness is expected to yield positive
outcomes. The subsequent sections of this report will delve into the specific
activities, challenges faced, and the ultimate impact of the changes implemented
during the internship.
Further research and more focus will be given on software tools after these parts
of the methodology are complete and will be presented in later stages of the project.
As a conclusion, I can say that this internship was a great experience. Thanks to
this project, I acquired deeper knowledge concerning my technical skills but I also
personally benefited
14
REFERENCES:
1. https://www.w3schools.com/html/
2. https://www.w3schools.com/js/default.asp
3. https://www.w3schools.com/bootstrap/bootstrap_ver.asp
4. https://fontawesome.com/
5. https://getbootstrap.com/docs/3.3/getting-started/
6. Html , css, bootstrap , java script reference document has been given in
the company .
15
