Project Report

GYM website using HTML , CSS and JavaScript

Web Development

08/08/2024

Submitted by:
Karan Kumar Singh
Indian Institute of Technology Roorkee (IITR)
4th year BTech, Mechanical Engineering

Under the Guidance of : Mr. Lavish Arora

Overview :
Web development encompasses a broad spectrum of activities related to building and
maintaining websites and web applications. It ranges from creating basic, static webpages to
developing complex, dynamic web applications, online businesses, and social networking
platforms. The term often includes various tasks such as web engineering, web design,
content creation, client interaction, scripting (both client-side and server-side), web server
and network security setup, and e-commerce system development.

Among web professionals, "web development" usually refers to the main non-design aspects
of building websites: writing markup and coding. Web development may use content
management systems (CMS) to make content changes easier and available with basic
technical skills.

For larger organizations and businesses, web development teams can consist of hundreds of
people (web developers) and follow standard methods like Agile methodologies while
developing websites. Smaller organizations may only require a single permanent or
contracting developer, or secondary assignment to related job positions such as a graphic
designer or information systems technician. Web development may be a collaborative effort
between departments rather than the domain of a designated department. There are three
kinds of web developer specialization: front-end developer, back-end developer, and full-stack
developer. Front-end developers are responsible for behaviour and visuals that run in the user
browser, while back-end developers deal with the servers.

Abstract :

The gym website serves as a comprehensive digital platform for fitness enthusiasts, offering
a user-friendly interface that highlights membership plans, facility amenities, class
schedules, and trainer profiles. It facilitates online registration, bookings, and membership
management, enhancing user convenience and engagement. The website integrates
marketing tools for promotions and updates, while analytics features track performance and
user interactions to drive continuous improvements. Designed to be responsive and
accessible, the site ensures a seamless experience across devices, supporting the gym's
mission to provide excellent service and foster a vibrant fitness community.

Goal/Aim:

The goal of the gym website is to create an engaging and efficient online platform that
enhances user experience, streamlines membership management, and promotes the gym's
services. It aims to attract and retain members by providing easy access to essential
information, facilitating online transactions, and a supportive fitness community.

Project Description (FitLife GYM)

The objective of this project was to design a user-friendly, visually appealing gym website that provides
essential information to potential clients.
Here I have created a home page which shows the basic navigation bar. I have created the navigation by
using list and made them horizontal by using flex box.
The whole body is divided into three boxes of different colour. I have also used paragraph tag for the text.
Added some icons from the canva and easily designed the buttons using button tag and add some CSS to
look it elegant.
Added a picture of a bodybuilder in a div tag using the img src tag.
Font family - Signika

Now coming to the second page which shows “Why Choose Us”
This is a very simple page which is only created using basic HTML and using CSS.

First I have given heading by using <h1> tag and then used paragraph tag. After that created some div
containers and by using Grid I have arranged them and added text and pictures in them.

In the picture I have given some border radius so it can look good.
In the text I have described what are the facility our GYM provides and also used some icons from web.

This page shows details about the trainers.

In the top I have used the heading tag.

After that I have used the paragraph tag.

I haven’t added the picture of the trainer but I can also be done just adding the link of picture of trainer in
the img src tag.
Here I have shown the monthly subscription of the GYM.
Just by creating the three boxes and using grid I have arranged them.
Inside each box I have used the <div> tag for the text and changed the font size.
Here is a card designed by CSS.
Using form tag.
I have only designed the front end part here.
Here it shows the review.
It is responsive. Only shows the pre filled data.
Used some basic icons.
Used two boxes and added text in them using div tag and added paragraph after it.
Here is the Footer part which shows the contact detail of the gym.
Used a background image at the top and using justify and align to centre the text.
At the bottom I have used grid to arrange the navigation text.
We can use add the link of the social media using the anchor tag.
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files,
email addresses, locations in the same page, or anything else a URL can address.

End
Bibliography and References :
1. Google for problem solving
2. Template from titianUI
3. www.w3schools.com
4. Icons from google fonts
5. Fonts from google fonts
6. Pictures from titianUI and google