Welcome to the website of K-Fit DOJO!
This MMA Gym based in Athenry it's a perfect spot to start and continue your journey in MMA. On this website, you can find all information you need as a gym member. This site will be providing information about our Coach and fighters.
I'm thankful for you all visiting my project. If you have any suggestions, questions or feedback feel free to reach out to me on GitHub.
- As a user, I will have basic information about the gym and generally, what is MMA in general.
- As a user, I will be able to easy and intuitively find information about the location
- As a user, I will be sending a contact form to the owner of the gym
- As a user, I will have access to all of the social media of the gym and they will open on a new page
- As a user, I need to fill its proper place to train.
- As a user, I want the website to be easy to navigate.
- As a user, I want clear information about the hours of classes and what is going on in them.
- As a user, I want to see information about fighters from Gym.
- As a user, I expect that there are links to social media that open in separate tabs.
- Advertising new gym in the area
- Increase in the numbers of members
- Stand out from other gyms in Galway Co.
- Easy to navigate by using the navigation menu
- Relevant content about the Gym
- Appealing visual elements
- Easy way to contact the owner
- When clicking on links (like social media), I expect the page to open in a separate browser page
- I expect feedback when submitting the contact form that the form has been submitted correctly
- I expect that the navigation links work properly so that it takes me wherever I want to go
- Clear info about the location of the gym
- Website is in line with the customer's journey
Design choices were based took from the K-fit logo. I made all my design choices from colors use in the logo.
To find the correct fonts, I visited the Google Fonts website to find the matching fonts for my design and decided to use these fonts:
- Karantina : I use this font for all of the H1's on the site.
- Orelega One : This font is only used in the quote between the slideshows.
- Oswald : This font was use for all paragrafs.
I made my decision to implement icons, from a Font Awesome . Selected icons assist and visual way to help you navigate the website. Navbar will transform into a hamburger icon to make it easier to navigate on mobile devices.
As I told before, I based on colors used on the K-fit logo. You can see my color palette here. I didn't want to use too much color on the web page :
- #3f3f3f: This color will be used for the navbar it will be separated from the rest of the content even on the page
- #a6187f: This color will be used for the border and color of content on site.
- #fafafa: This color is used primarily for background color. Everything will separate nicely on it
I use a Balsamiq to make wireframes for the website, I created first a desktop version and after that, I make a tablet and mobile.
You can find my mock-ups below:
I use a navbar on the full width of the page. To make a navigate easily through the site, I implemented a sticky type for easy access to all of the pages. This part will appear on every page of the site onle on devices with large screens .
I decided to create a two-slide show with pictures from classes between them I have posted a brief description of our gym. This part will appear on every page of the site onle on devices with large screens .
In this section I implement, you will find a brief description of the history of the club and our coach along with a short promotional video.
A short description and explanation of the components of the sport along with the history of MMA for first-time viewers to the website.
On this page, the visitor can see a photo, a short description, and an interview with our head trainer. You also like to implement photos and interviews with some of our fighters.
In this part, you can find the timetable with an explanation of the classes and describe what criteria you need to meet to participate in them. The timetable will change the size depending on the size of the screen on which it will be opened.
On this page, I placed an iframe of the location of the gym along with a form to ask a question to the site owner.
I included in the footer the telephone number (nonexistent) to the gym with the address and icons for all social media (Facebook, email, Instagram, Youtube). This part will appear on every page of the site.The footer will change the size depending on the size of the screen on which it will be opened.
-
Function of booking a place in classes.
-
Online store with accessories for practicing MMA
The website was tested with:
| Test Label | Action | Expected Outcome | Test Outcome |
|---|---|---|---|
| Responsiveness of the website | Checking the site in the lighthouse tool of the built-in Google Chrome browser | The page will change appearance as the display size changes | Pass |
| Pass through the official (W3C) validator | Passing HTML and CSS codes through the W3C validator | Passing the Validator without any error | Pass |
| Check the grammar of the page content | Using the Grammarly Application to check text | Text checking and correction of noticed errors | Pass |
- Error with empty heading on slideshow replace h1 with p,
- remove thead from timetable headers for mobile devices,
- move the script from outside a body section to inside body,
- remove a frameborder from all youtube links,
Index
About
Timetabel
Contact
- No errors found,
- pictures on the website about off-center,
- Add the name of the page to the navbar as a link to the home page,
- changing a maps size on contact page
This project was made on Gitpod and Github. I create a new repository on GitHub and wrote the code on Gitpod workspace. I tried to add regular code changes and push them to GitHub so that my work would be saved in the repository.
This project was deployed via GitHub by following these steps :
- Navigate to the repository on github and click Settings.
- From there, go to the Source section within the Github Pages section.
- Select master branch on the dropdown menu, and click save.
- Make sure to refresh your page to confirm that the deployment is done
- The page will be available at this link K-Fit Dojo.
If you want to run the project locally you should
- Log in to Github and open the repository that you wanted to deploy
- Click on the repository then press the button code
- There you will find Clone and Download ZIP
- Open your preferred integrated development environment (IDE)
- Run your local server
Pictures are taken from the Facebook page of K-Fit Dojo .
Video with interviews with coaches and fighters are taken from Youtube of K-fit Dojo K-Fit Dojo.
All of the pictures and interviews are taken with the permission of the owner and Head Coch of K-Fit Dojo.