Visit the deployed site: Max_fps Gaming Cafe
Max_FPS is a premier gaming cafe that offers high-quality gaming experiences to its customers. Located in the heart of the city, Max_FPS is the go-to destination for gamers who want to immerse themselves in the latest computer games.
With a vast collection of games available, Max_FPS offers a diverse selection of genres to suit all tastes. From action-packed first-person shooters to immersive role-playing games, Max_FPS has it all. The computers are equipped with top-of-the-line hardware to ensure that players can enjoy smooth, uninterrupted gameplay.
In addition to its impressive collection of games, Max_FPS offers a comfortable and welcoming atmosphere for gamers. The cafe is spacious and well-lit, with plenty of seating and ample room to move around. The staff are friendly and knowledgeable, and always on hand to assist customers with any questions or concerns.
Whether you're a seasoned gamer or a newcomer to the world of computer games, Max_FPS has something to offer everyone. With affordable prices and a commitment to customer satisfaction, Max_FPS is the perfect choice for gamers looking to enjoy a premium gaming experience in a relaxed and welcoming environment.
- What is the current Games available and what to play.
- Find information about the pricing and hours.
- How to become a member and take part of the gaming community.
- Discover tournaments, promotions, discount and events.
- Contact the company and to schedule a gaming experience or request more information.
- To be able to view the site on a range of device sizes.
- To make it easy to register as a member.
- Continuously improve services and offerings based on customer feedback.
- Offer special promotions, events and tournaments to enhance customer experiences.
- Establish Max_FPS as a premier gaming destination in the city.
- Create an interactive and user-friendly experience for all ages.
- Feel comfortable and welcomed in the spacious and well-lit gaming atmosphere.
- Navigate the site easily to find information as booking, opening hours and contact information.
- Leave with a positive impression and desire to return.
- Easily take part of any tournamnet or promotion.
- Find information about upcoming events or promotions.
- View updates or changes to the business's services, products, or pricing.
- Schedule additional appointments for gaming experience.
- Become an expert in their favorite games and challenge themselves to improve their skills.
- Participate in gaming events or tournaments regularly and compete against other skilled gamers.
- Collaborate with other gamers to form teams for competitive play, and strive for excellence together.
- Continuously provide feedback about their experiences and suggest ways to improve the offerings and services.
- Take advantage of any loyalty programs or rewards offered by the cafe for frequent visitors as members points and display in profile.
We wanted to choose colours that reflected the environment of dark and gaming, so we have chosen a variety of grey, red and white for our site.
These colors are going to be implemented as 60-30-10 rule with the base of the color GunMetal. We want to have a more dark theme on the website.
The colour palette was created using the Coolors website.
Google Fonts was used for the following fonts:
- "Lato" is used for headings and bigger content on the site. It is a sans serif typeface family.
- "Poppins" is used for the body text, paragraphs on the site. It is a geometric, sans serif typeface family. Each letterform is nearly monolinear, with optical corrections applied to stroke joints where necessary to maintain an even typographic color.
All the images displayed in this site was originelly downloaded by the sites below, and modified in Photoshop.
Wireframes were created for mobile and desktop. I used the web application called Balsamiq for creating the wireframes for website Max_Fps Gaming Cafe.
Click on the links below to see an large seperated image of each page.
The website is comprised of seven pages, four of which are accessible from the Navigation menu (home page, about us page, games page & booking page). The last 3 pages are a "sign up", "log in" and "hours & pricing" which is shown in the Navigation menu but cant access or use it. The "sign up " and "log in" pages are available becouse this requires another programming language along with a database which is not included into this project.
-
All Pages on the website have:
-
A responsive navigation bar at the top which allows the user to navigate through the site. To the left of the navigation bar is the two links for "sign up" and "Log in". In the middle of the navigation bar an image of Max_Fps logo.. To the right of the navigation bar are the links to the websites pages (home, about, games, pricing and booking). When viewing with mobile devices the navigation links change to a burger toggler. This was implemented to give the site a clean look and to promote a good user experience, as users are used to seeing the burger icon when on mobile devices to navigate a site.
-
A footer which contains social media icon links to all the plattforms along with other important links as companys policy and regulation. There is also an company logo which takes the user to the contact us page. Icons were used to keep the footer clean and because they are universally recognisable and attract more young audience. The footer is also including the opening hours as this information are crusial for the user experience. Important information are in the footer and everyone knows that. The "Support" section in my footer is not available at this moment. The links are not working. This is only for display purpose only.
-
-
Future Implementations.
- Want to implement the "Sign up" "log in" function. Want to have a database were members can create membership and log in to have discounts, promotion and to see their gaming profile. Members should have their own profile, were they can see hours played etc.
- I want also to develop a more smoother booking system. Where the client/customer can see a map of all seats, computer available in the Gaming Cafe to click and book. Live updating booking system for better performance.
I have been mindful during coding to ensure that the website is as accessible friendly as possible. I have achieved this by:
- Using semantic HTML elemts as, header(), section(), article(), footer(), nav(), details().
- Declare the Language in the beginning of every html page.
- Using descriptive ALT attributes on images and links on the site.
- Using a hover state on all buttons on the site to make it clear to the user if they are hovering over a button or not.
- Providing information for screen readers where there are icons used and no text.
- Ensuring that there is a sufficient colour contrast throughout the site.
- Ensuring menus are accessible by marking the current page as current for screen readers.
HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) were used to create this website.
Balsamiq - Used to create wireframes.
Git - For version control. The hours were ended for my profile at GitPod and I was needed to upload the last commits/files by github, therfore my commit message and description wasn't good at the end.
Github - To save and store the files for the website.
Google Fonts - To import the fonts used on the website.
Font Awesome - For the iconography on the website.
Google Dev Tools (Google Browser) - To troubleshoot and test features, solve issues with responsiveness and styling.
Tiny PNG To compress images.
Favicon.io To create favicon.
Am I Responsive? To show the website image on a range of devices.
Shields.io To add badges to the README
Github Pages was used to deploy the live website. The instructions to achieve this are below:
- Log in (or sign up) to Github.com.
- Find the repository for this project, "PP1".
- Click on the Settings link.
- Click on the Pages link in the left hand side navigation bar.
- In the Source section, choose main from the drop down select branch menu. Select Root from the drop down select folder menu.
- Click Save. Your live Github Pages site is now deployed at the URL shown.
To fork the PP1 repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, https://github.com/KimBergstroem/PP1.
- Click the Fork button in the top right corner.
To clone the PP1 repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, https://github.com/KimBergstroem/PP1.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Throughout the entire build, I conducted ongoing testing and utilized Chrome developer tools to identify and troubleshoot any issues as they arose.
| Type | Bugg | Fixed |
|---|---|---|
| Navbar | I cant get the company logo to be still visible after my responsive hamburgar takes the navbar. When the mediaquires kicks in and the navbar is displaying as hamburgar meny, my company logo are also inside the hamburgar meny after. I want my company logo to be displayed beside the hamburgar logo, not inside it with the navbar links. | I created another class with name "logo2", gave it a declaration off "diplay: none:" while in the mediaquires the class "logo2" was declared to "display: block" and property "position" with value "absolute". Then the company logo is displayed when my hamburger meny is kicked in and when it isnt, my class "logo" will display the normal company logo as normal. |
| Navbar | "Element div not allowed as child of element label in this context. (Suppressing further errors from this subtree.)" | The solution was to put a "span" attribute instead of div and then give the span attribute a declaration of "display: block;" |
| Footer | Need to display columns and centered in mobile version. | Fixed it with media queries and use of flex and "flex-wrap: warp;" |
| Footer | How to get the footer content stuck at the bottom of the page on all pages excluding the content on the pages. | This was fixed by setting the declaration "margin: auto;" to the footer element along with declaring in the html selector "height: 100%" and in the body selector "min-height: 100vh". |
The W3C validator was used to validate the HTML on all pages of the website. It was also used to validate CSS in the style.css file. Click on the below links to have the validation. No error was found.
To assess the website's performance, accessibility, best practices, and SEO, I employed Lighthouse as part of the Chrome Developer Tools.
To check the color contrast ratio between foreground and background elements, ensuring that the website is accessible to all users, including those with visual impairments.
Further testing was conducted by friends and family members using a range of devices and screen sizes. I'd like to extend my heartfelt gratitude to them for going the extra mile in testing the website thoroughly for me. No issue rapported.
I'm grateful to Code Institute for equipping me with the education and resources necessary to improve my HTML and CSS skills. Their lessons have been essential in my understanding of the basic principles of web development.
I used this YouTube channel to learn about, how to create and play with the responsiveness of a website along with flex/grid layouts Kevin Powell
Instructions and information about "forms" I have gotten from W3 Schools
Navigation setup was from W3 Schools and Kevin Powell
Used this website to create gradient backgrounds, that are used in the webpage CSS Gradient
Paragraphs / text for the webpage was written together with ChatGPT
Tips and inspiration on how to create a better readme.md file kera-cudmore powerpoint
The photos used throughout the webpage is coming from Unsplash.
The game photos that are used for display purpose only in my game page are coming from interfaceingame "Don't possess any form of license towards the game displayed"
I'd like to give recognition to the individuals who supported me in finishing this project:
- I'd like to express my appreciation to my family for their patience and helping me spot spell mistakes and testing issues.
- Naoise Gaffney, my Code Institute Mentor.
This project is licensed under the MIT License - see the LICENSE file for details.