Tooting Boxing Club

(Developer: Jamie Letts)

This is the website for Tooting Boxing Club, it is designed to be responsive and accessible on all devices allowing easy access to the timetable, class schedule and information on the club and coaches.

Table of Content

Project Goals
1. User Goals
2. Site Owner Goals
User Experience
Design
1. Design Choices
2. Colours
3. Fonts
4. Structure
5. Wireframes
Technologies Used
1. Languages
2. Frameworks and Tools
Features
Testing
Bugs
Deployment
Credits
Acknowledgements

Project Goals

Primary goal is to provide an informative good-looking website that showcases Tooting Boxing Club and encourages the user to come to the gym, buy classes or 1-1's or get in touch via the website. It is designed to ensure access to a returning user,s main objectives (contact, purchases and bookings) is user friendly and efficient.

User Goals

A well displayed easy to navigate website.
Clear information on what the club does and offers.
Easy access to get in touch for more information.
Visual display of the club to help the user see and get a feel for the gym.
Call to action buttons to allow a user-friendly experience buying and booking classes.
Enough information on the club, owners, coaches, and classes for the user to have a good understanding of the company and its employees.

Site Owner Goals

Increase in the number of paying clients.
Promote the business.
Provide a way for new and existing clients to contact the gym.
Provide easy access to booking classes and arranging private sessions.
Provide detailed pricing and payment options.
Provide information on the gym, its classes, coaches, and owners.

Developer Goals

A clean design that stands out and catches the users attention.
A website that responds correctly on all devices where design and effectiveness is not hindered on any device.
An easy to navigate website with clear pathways to specific pages such as class booking, prices and information on the club and coaches.
A project the developer would be proud to display in their portfolio.

User Experience

Target Audience

Ages 16 and up.
Anyone who is interested in learning to box.
All levels and abilities welcome.
Mainly individuals but not limited to.

User Requirements and Expectations

A simple and intuitive navigation system.
Quickly and easily find relevant information.
Links and functions that work as expected.
Good presentation and a visually appealing design regardless of screen size.
An easy way to contact the gym.
Simple content that the user can skim read.
Accessibility.

User Stories

First-time User

As a first-time user, I want to know where the gym is located.
As a first-time user, I want to know the prices for classes and 1-1’s.
As a first-time user, I want to know when classes are on throughout the week.
As a first-time user, I want to know more about the club, its history, and its coaches.
As a first-time user, I want to get a feel for the classes and atmosphere in the gym.
As a first-time user, I want to easily contact the club should I have any questions.

Returning User

As a returning user, I want to easily log in to my account or create one.
As a returning user, I want access the schedule quickly to book in.
As a returning user, I want to find a phone number, email, or a means to contact to arrange a 1-1 or ask for more information.
As a returning user, I want to find the gym on social media.
As a returning user, I want to get directions to the gym.
As a returning user, I want to know more about what each individual class involves.
As a returning user, I want to purchase sessions, memberships or 1-1’s.

Site Owner

As the site owner, I want users to easily access their account.
As the site owner, I want users to get a feel for the club, coaches and its founders.
As the site owner, I want the users to be able to contact the club.
As the site owner, I want the user to easily book into classes.
As the site owner, I want users to easily make purchases.
As the site owner, I want to ensure users are directed back to the website should they come across a 404 error.

Design

Design Choices

The layout I chose ensures each specific point of information is easy to access and follows a similar theme to ensure continuity. Tooting Boxing Club is a new, high end and authentic boxing gym so I want the website to be slick and clean to represent that.

Colours

As Tooting Boxing Club is a club that is influenced by the past, I wanted to add hints of authentic and classic colour (yellow and red) used in boxing posters from the 70's and 80's - a truly classic era of boxing.

The branding colours I chose are Black, White, A slightly Mustard Yellow and a Burnt Red.

Primary Colours - Black / White

Secondary Colours - Yellow / Red

Black, Yellow, and White being the most predominant as they stand out so well against each other.

I also use subtle greys when a white background is too garish.

Specific colours used on the site all taken from a colour picker in InDesign are:

Black: #000000
White: #ffffff
Off-white: #f1f1f1
Off-white: 2 #C0C0C0 (also used for Silver)
Light grey: #e1e0e0
Yellow: #e9c431
Red: #a51e1e
Shadow Grey: #726a6a
Bronze: #CD7F32

I tested multiple options on InDesign to ensure I was happy with the colours and had covered as many other options as possible I also liked. After deciding on the colours I tested them on WebAIM to make sure how the contrast between them worked best.

Branding Colour Ideas

Fonts

Google fonts were used to import the 'Martian Mono and Nunito Sans' font used throughout the website:

Martian Mono only used for title headers as it helps them stand out being slightly different and makes an impact as the user lands on the page.
I use these fonts as they are clean, easy to read and have a smart appearance and as they are not a commonly used fonts still manage to portray a unique and individual look to them.

Structure

The page is structured in a user friendly and visually appealing way. Upon arriving the user will notice the recognisable navigation bar, with the company logo on the left and next to that a WhatsApp symbol for quick and convenient contact via the app, all navigation links are placed on the right.

The website consists of six separate pages a ‘Sign In’ modal and modals used for class descriptions:

A homepage with a section giving more information on the club (Strapline and short introduction, gallery, reviews and map)
An About page with information on the founders and why they started the club.
A Team page that introduces the user to the coaches.
A Prices page with details on the different options for classes and 1-1’s.
A Class Schedule page with the class timetable and details on the different classes the gym puts on via a modal.
A Contact page with a form for getting in touch.
The Sign In icon takes the user to a sign in modal, there is no page.

Wireframes

Home

About

the Team

Prices

Class Schedule

Get In Touch

404

Technologies Used

Languages

HTML
CSS

Frameworks and Tools

Features

The page consists of six pages and fourteen features.

Logo and Navigation Bar

Featured on all six pages
The navigation bar is fully responsive and changes to a toggler (hamburger menu) on smaller screens and includes links to the Homepage, About page, The Team page, Prices Page, Class Schedule Page and Get In Touch page.
It allows users to easily navigate the pages.
The link for the page the user is currently on is highlighted in yellow.
The left includes the gym’s logo which also acts as a home button with a WhatsApp logo which opens WhatsApp chat with the gym when clicked.
The navigation bar includes a sign in icon that opens a modal to sign in or sign up.
User stories covered: 6, 7, 8, 9, 14, 17, 18.

Hero Image / Landing Page

Company logo with 2 buttons underneath it one that takes the user to the schedule page and one that takes the user to the prices page.
Background image of two boxing gloves fist bumping depicting a sense of unity and bond, representing the ethos of the gym.
User stories covered: 5, 8, 13, 17, 18.

Company Logo and Strap Line

This introduces the user to the club ethos and principles and gives a little taste of how the user benefits from joining.
User stories covered: 4.

Carousel

Introduces the user to the gym and its classes and coaches with a five-picture slide show.
Options for the user to navigate the slide show via back and forward arrows or indicators are located to the left and right centre of the image.
User stories covered: 5.

Reviews

Four reviews from members detailing how much they like the gym.
User stories covered: 4, 5.

Map

Shows the gym location on an embedded Google Map.
User stories covered: 1, 11.

Footer

Featured on all six pages.
Consists of two separate sections: contact information and social media links.
User stories covered: 6, 9, 10, 11.

About

Introduces the user to the founders, Sam and Rick and their history in boxing.
Provides links to their boxing achievements to find out more on their careers.
Details why they started the gym and gives an insight to what can be expected when going.
User stories covered: 4, 5, 15.

The Team

Features a short bio of the of each coach under their own profile picture.
Under each bio is a button that links to the schedule for easy access to booking classes.
User stories covered: 4, 5, 12, 15, 16.

Prices

Pricing is broken down into four subtitles:
1. Intro Offers
2. Memberships
3. Class Packages
4. Personal Training
This helps for easy navigation and good aesthetics.
User stories covered: 2, 13, 14, 18.

Intro Offers

Memberships

Class Packages

Personal Training

Class Schedule

Weekly schedule details what classes on are on each day of the week, what time they are on, and which coach is taking the class.
A description of the class is available with more detail on a modal when the class description is clicked.
User stories covered: 3, 5, 8, 12, 15, 17.

Get In Touch

A contact form allowing an easy way for the user to ask questions or book 1-1’s.
User stories covered: 6, 9, 16

Modals

Sign In Modal on the navigation bar allows for immediate and easy log in to the users account.
Class Modal gives a more detailed description of the class including the experience level required.
User stories covered: 5, 7, 11.

Sign In Modal

Class Modal

404

For a bit of fun, I added light-hearted boxing related humour to the error page.
Includes navigation bar and footer, with a centrally placed 'Home' button for convenience.

Testing

HTML Validation

The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with no errors.

index.html results

about.html results

team.html results

prices.html results

schedule.html results

contact.html results

404.html results

CSS Validation

The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. When pasting in my index url 16 Parse Errors are flagged, all linked to Bootstrap as well as 327 warnings.

style.css results

When validating just my own custom CSS file it passes with no errors and flagged some warnings for the moz, o and webkit transitions used and 1 warning for the google fonts import used.

style.css

Accessibility

The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors.

index.html results

about.html results

team.html results

prices.html results

schedule.html results

contact.html results

404.html results

Performance

Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website. All aspects performing well.

index.html

about.html

team.html

prices.html

schedule.html

contact.html

404.html

Performing tests on various devices

The website was tested on the following devices:

MacBook Pro
Ipad Tablet
Google Pixel 5

In addition, the website was tested using Google Chrome Developer Tools device toggle option for all available device options.

Browser compatibility

The website was tested on the following browsers:

Google Chrome
Apple Safari
Mozilla Firefox

Testing user stories

First-time User

As a first-time user, I want to know where the gym is located.

Feature	Action	Expected Result	Actual Result
Map	On Index page scroll down the bottom	Locating a map showing the location of the gym	Works as expected
Footer - contact information section	On any page scroll down to the footer	Find the address of the gym	Works as expected

Find Map / Address

2. As a first-time user, I want to know the prices for classes and 1-1’s.

Feature	Action	Expected Result	Actual Result
Hero Image	On Index page click on 'Buy Now' button on hero image	Find Prices page with all pricing	Works as expected
Navigation Bar	On any page at the top click on 'Prices'	Find Prices page with all pricing	Works as expected

Find Prices

3. As a first-time user, I want to know when classes are on throughout the week.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Class Schedule'	Find Schedule page with class timetable	Works as expected
Hero Image	On Index page click on 'Book Now' button on hero image	Find Schedule page with class timetable	Works as expected
Coach Page	Click on any 'Book Me' button	Find Schedule page	Works as expected

Find Schedule via Nav Bar

Find Schedule via Buttons

4. As a first-time user, I want to know more about the club, its history and its coaches.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'About'	Find About page with more information on the founders	Works as expected
Navigation Bar	On any page at the top click on 'The Team'	Find Coaches page with more information on the coaches	Works as expected
Company Introduction	On Index page scroll down to 'Tooting Boxing Club' title	Find introduction and short description of the gym and its values	Works as expected
Slide Show Gallery	On Index page scroll down to gallery	Find images of the gym on display in a carousel	Works as expected

Find About / Coaches

Find Introduction / Gallery

5. As a first-time user, I want to get a feel for the classes and atmosphere in the gym.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'About'	Find About page with more information on the founders and the gym	Works as expected
Navigation Bar	On any page at the top click on 'The Team'	Find Coaches page with more information on the coaches	Works as expected
Company Introduction	On Index page scroll down to 'Tooting Boxing Club' title	Find introduction and short description of the gym and its values	Works as expected
Slide Show Gallery	On Index page scroll down to gallery	Find images of the gym on display in a carousel	Works as expected
Reviews	On Index page scroll down to reviews section	Find Reviews from members	Works as expected
Class Modal	Click on any class name on the schedule	Find a modal pop up going into more detail of chosen class	Works as expected

Find About / Coaches

Find Introduction / Gallery / Reviews

Class Modal

6. As a first-time user, I want to easily contact the club should I have any questions.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Get In Touch'	Find Contact page with contact form
Navigation Bar	On any page at the top click on 'WhatsApp' logo	Find WhatsApp app open with direct line to chat	Works as expected
Footer - contact information section	On any page scroll down to the footer	Find the email and phone number of gym	Works as expected

Find Contact Form

Email & Phone Number / WhatsApp

Returning User

As a returning user, I want to easily log in to my account or create one.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Sign In'	Find Sign In Modal	Works as expected

Find Sign In

8. As a returning user, I want access the schedule to quickly to book in.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Class Schedule'	Find class schedule and booking options	Works as expected
Hero Image	Click on 'Book Now' button	Find class schedule and booking options	Works as expected
Coach Page	Click on 'Book Me' button	Find class schedule and booking options	Works as expected

Find Schedule via Nav Bar

Find Schedule via Buttons

9. As a returning user, I want to find a phone number, email, or a means to contact to arrange a 1-1 or ask for more information.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Get In Touch'	Find Contact page with contact form
Navigation Bar	On any page at the top click on 'WhatsApp' logo	Find WhatsApp app open with direct line to chat	Works as expected
Footer - contact information section	On any page scroll down to the footer	Find the email and phone number of gym	Works as expected

Find Contact Form

Email & Phone Number / WhatsApp

10. As a returning user, I want to find the gym on social media.

Feature	Action	Expected Result	Actual Result
Footer - Social Media Section	On any page scroll down to the footer	Find social links on the right	Works as expected

Find Socials

11. As a returning user, I want to get directions to the gym.

Feature	Action	Expected Result	Actual Result
Map	On Index page scroll down the bottom	Locating a map showing the location of the gym	Works as expected
Footer - contact information section	On any page scroll down to the footer	Find the address of the gym	Works as expected

Find Map / Address

12. As a returning user, I want to know more about what each individual class involves.

Feature	Action	Expected Result	Actual Result
Class Modal	Click on any class name on the schedule	Find a modal pop up going into more detail of chosen class	Works as expected

Find Class Modal

13. As a returning user, I want to purchase sessions, memberships or 1-1’s.

Feature	Action	Expected Result	Actual Result
Hero Image	On Index page click on 'Buy Now' button on hero image	Find Prices page with all pricing	Works as expected
Navigation Bar	On any page at the top click on 'Prices'	Find Prices page with all pricing	Works as expected

Find Prices

Site Owner

As the site owner, I want users to easily access their account.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Sign In'	Find Sign In Modal	Works as expected

Find Sign In

15. As the site owner, I want users to get a feel for the club, coaches and its founders.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'About'	Find About page with more information on the founders and the gym	Works as expected
Navigation Bar	On any page at the top click on 'The Team'	Find Coaches page with more information on the coaches	Works as expected
Company Introduction	On Index page scroll down to 'Tooting Boxing Club' title	Find introduction and short description of the gym and its values	Works as expected
Slide Show Gallery	On Index page scroll down to gallery	Find images of the gym on display in a carousel	Works as expected
Class Modal	Click on any class name on the schedule	Find a modal pop up going into more detail of chosen class	Works as expected

Find Introduction / Gallery / Reviews

Find About / Coaches

Class Modal

16. As the site owner, I want the users to be able to contact the club.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Get In Touch'	Find Contact page with contact form
Navigation Bar	On any page at the top click on 'WhatsApp' logo	Find WhatsApp app open with direct line to chat	Works as expected
Footer - contact information section	On any page scroll down to the footer	Find the email and phone number of gym	Works as expected

Find Contact Form

Email & Phone Number / WhatsApp

17. As the site owner, I want the user to easily book into classes.

Feature	Action	Expected Result	Actual Result
Navigation Bar	On any page at the top click on 'Class Schedule'	Find Schedule page with class timetable	Works as expected
Hero Image	On Index page click on 'Book Now' button on hero image	Find Schedule page with class timetable	Works as expected
Coach Page	Click on any 'Book Me' button	Find Schedule page	Works as expected

Find Schedule via Nav Bar

Find Schedule via Buttons

18. As the site owner, I want users to easily make purchases.

Feature	Action	Expected Result	Actual Result
Hero Image	On Index page click on 'Buy Now' button on hero image	Find Prices page with all pricing	Works as expected
Navigation Bar	On any page at the top click on 'Prices'	Find Prices page with all pricing	Works as expected

Find Prices

19. As the site owner, I want to ensure users are directed back to the website should they come across a 404 error and page structure is not lost.

Feature	Action	Expected Result	Actual Result
Home button	On 404 error page click on 'Take Me home' button	Find home page	Works as expected
Navigation Bar	Click on any link to navigate back to desired page	Find desired page	Works as expected

Return to site

Bugs

Buttons on index.html hero image

Having tested their position on all devices, I noticed using a margin of a specific px cause them to be out of place on different devices. Using a 'rem' unit paired with specific media queries commands instead allows them respond better ensuring they are in a good position on all devices.

CSS Edits

            .hero-btn {
                display: block;
                text-align: center;
                z-index: 1;
                position: absolute;
                margin-top: 15rem; (originally used a pixel unit here)
            }

Media Query commands

        @media screen and (min-width:820px) and (max-width:912px) {
            .hero-btn{
                margin-top: 20em;
            }
        }
        @media screen and (max-width:480px) {
            .btn.btn-dark {
                width: 125px;
            }
            .hero-btn {
                font-weight: none;
            }
        }
        @media screen and (max-width:280px) {
            .hero-btn {
                margin-top: 175px;
            }
            .btn.btn-dark{
                margin-bottom: 10px;
            }
            .hero img {
                height: 15vh;
                margin-bottom: 25px;
            }
        }

Having looked at this in more detail it just wasn't working correctly, it caused the logo and buttons to be at different positions on lots of different devices and was messy. I decided to re-write the code and see if there was a different way of doing it. I found a solution, here is the old code and the new:

Old HTML

            <div class="hero">
                <div class="container-fluid">
                    <img src="assets/images/logo-05.png" alt="Tooting Boxing Club boxing gloves logo">
                </div>
                <div class="hero-button text-center">
                    <a href="prices.html" class="button">Buy Now</a>
                    <a href="schedule.html" class="button">Book Now</a>
                </div>
            </div>

New HTML

            <div class="hero">
                <div class="container-fluid hero-content">
                    <img src="assets/images/logo-05.png" alt="Tooting Boxing Club boxing gloves logo">
                    <div class="hero-button">
                        <a href="prices.html" class="button">Buy Now</a>
                        <a href="schedule.html" class="button">Book Now</a>
                    </div>
                </div>
            </div>

Old CSS

            .hero img {
                align-items: center;
                height: 20vh;
            }

            .hero-button {
                display: block;
                text-align: center;
                position: absolute;
                top: 75%;
            }

            .button {
                width: 150px;
                margin-left: 10px;
                margin-right: 10px;
            }

New CSS

            .hero-content {
                display: flex;
                text-align: center;
                align-items: center;
                flex-direction: column;
                z-index: 1;
            }

            .hero-content img {
                display: block;
                height: 185px;
                width: 195px;
            }

            .hero-button {
                display: block;
                text-align: center;
            }

Which meant I could remove all the messy media queries and write just one for when the screen width was really thin;

            @media screen and (max-width :309px){
                .hero-button .button{
                margin-bottom: 10px;
                }
            }

Map

The map had a grey line under so wasn't flush to the footer, after using google inspect I noticed the container was a different height the map so matched both heights to 400px which fixed the issue.

Original code

            .map {
                height: 400px;
                width: 100%;
            }

Code fix

            .map {
                height: 400px;
                width: 100%;
            }

            .map iframe {
                height: 400px;
                width: 100%;
                }

Schedule

Overflow scroll wasn't working correctly on schedule page, noticed the way I'd set up the media query seemed to be the issue and it was also affecting the header and footer. Fixed the issue by changing to max-width instead of min-width of the media query and moving the units, which resolved both issues.

Original code

        @media screen and (min-width: 900px) {
            .table {
                overflow-x: auto; }
            }

Code fix

        @media screen and (max-width: 1428px) {
            .table {
                overflow-x: auto; }
            }

I then ran into more problems as the scroll was working but the buttons were squashing as the container width changed with the screen. To fix this I added a fixed min-width to the table in the same media query above, so it now is written as:

Code fix

       @media screen and (max-width: 1428px){
            .table {
                overflow-x: auto;
            }
            .schedule-style{
                min-width: 1320px;
            }
        }

Deployment

The website was deployed using GitHub Pages by following these steps:

In the GitHub repository navigate to the Settings tab
On the left-hand menu select Pages
For the source select Branch: master
After the webpage refreshes automatically you will see a ribbon on the top saying: Your site is live at https://jamie2210.github.io/CI_MS1_TBC/

You can for fork the repository by following these steps:

Go to the GitHub repository
Click on Fork button in upper right-hand corner

You can clone the repository by following these steps:

Go to the GitHub repository
Locate the Code button above the list of files and click it
Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
Open Git Bash
Change the current working directory to the one where you want the cloned directory
Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
Press Enter to create your local clone.

Credits

Images and logos not referenced below are owned or created by the developer.

Media

All photos were taken from Pexels, credit to (in order of appearance);

Index Page

Julia Larson
Hero Image

Kool Shooters
Carousel - Bag Work

RODNAE Productions
Carousel - Boxing Gym

Mikhail Nilov
Carousel - Coaching

cottonbro studio gloves touch
Carousel - Sparring

Carousel - Dark Gym

The Team Page

Los Muertos Crew
Team Banner

cottonbro studio
Coach Lucy

Gustavo Fring
Coach Mark

RODNAE Productions
Coach Chris

Volkan Erdek
Coach Tom

Ron Lach
Coach Frank

Yaroslav Shuraev
Coach Mary

Prices Page

Kool Shooters
Prices Banner

Class Schedule Page

Wang Motret
Schedule Banner

Code

In order of appearance;

The HTML for the responsive Navbar with toggler was taken from Boostrap v5.1 documentation snippet.
The HTML for adding WhatsApp was taken from Message Bird Snippet.
The HTML for the Nav Bar Sign In Modal was taken from Boostrap v5.3 documentation snippet.
The HTML for both Carousels on index page was taken from Boostrap v5.1 documentation code snippet. (Review carousel only visible on mobile devices)
The HTMl for the Class Modal was taken from Boostrap v5.3 documentation snippet.

Acknowledgements

I would like to take the opportunity to thank;

My mentor, Mo Shami, for his excellent feedback, advice support and guidance throughout.
Tutor support from Code Institute for their swift response.
The slack community of coders for immediate and helpful replies.
WAES College and my Tutor Michael for their suppoirt and help throughout.

Name		Name	Last commit message	Last commit date
Latest commit History 258 Commits
.vscode		.vscode
assets		assets
docs		docs
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
404.html		404.html
404.md		404.md
README.md		README.md
about.html		about.html
contact.html		contact.html
index.html		index.html
prices.html		prices.html
schedule.html		schedule.html
team.html		team.html

jamie2210/CI_MS1_TBC

Folders and files

Latest commit

History

Repository files navigation

Tooting Boxing Club

Table of Content

Project Goals

User Goals

Site Owner Goals

Developer Goals

User Experience

Target Audience

User Requirements and Expectations

User Stories

First-time User

Returning User

Site Owner

Design

Design Choices

Colours

Fonts

Structure

Wireframes

Technologies Used

Languages

Frameworks and Tools

Features

Logo and Navigation Bar

Hero Image / Landing Page

Company Logo and Strap Line

Carousel

Reviews

Map

Footer

About

The Team

Prices

Class Schedule

Get In Touch

Modals

404

Testing

HTML Validation

CSS Validation

Accessibility

Performance

Performing tests on various devices

Browser compatibility

Testing user stories

First-time User

Returning User

Site Owner

Bugs

CSS Edits

Media Query commands

Old HTML

New HTML

Old CSS

New CSS

Original code

Code fix

Original code

Code fix

Code fix

Deployment

Credits

Media

Index Page

The Team Page

Prices Page

Class Schedule Page

Code

Acknowledgements

About

Resources

Stars

Watchers

Forks

Releases

Packages