Diana Bergelin
A responsive, accessible, and visually engaging website for the fictional gaming page Game Hub, built as part of the Front-End Development course at Noroff School of Technology and Digital Media.
- Description
- Project Goals
- Key Features
- Built With
- Getting Started
- Project Structure
- Features & User Stories
- Contributing
- Contact
- License
- Acknowledgments
This project is part of a series of assignments focusing on different aspects of front-end development, including Design, HTML & CSS, and JavaScript. The website is built for a client GameHub, an online shop where users can browse, view, and purchase a variety of computer games. The goal was to create a responsive and interactive site with a focus on best coding practices and accessibility standards.
1. Design an Interactive Prototype: Using Figma to create a high-fidelity design for the website.
2. Develop a Responsive and Accessible Site: Implementing the design using semantic HTML and modular CSS.
3. Integrate JavaScript for Dynamic Interactions: Fetch data from an API, display products, and create a working shopping cart and checkout system.
-
Product Listing: Display a list of products on the homepage.
-
Filtering Options: Filter products by category, gender, or genre.
-
Product Details: View more information about a specific product on its own page.
-
Shopping Basket: Add and remove products from a cart.
-
Order Summary and Checkout: View cart contents and proceed to checkout.
-
Confirmation Page: Display an order confirmation after completing a purchase.
The project uses the following technologies and tools:
API Integration: Fetch products and handle user interactions.
Git & GitHub: Version control and code hosting.
To get a local copy up and running, follow these steps:
git clone https://github.com/Anaid0616/cross-course-project-design-html-css.gitcd cross-course-project-design-html-cssSince this is a static HTML, CSS, and JavaScript project, you can open the index.html file directly in your web browser.
Alternatively, you can use a live server (like the Live Server extension in Visual Studio Code):
Open the project folder in VS Code. Right-click on index.html and select "Open with Live Server".
The following pages are available on the site:
-
Homepage (/index.html): Displays a list of all available products.
-
Games Page (/games.html): A catalog page that lists all available games.
-
About Page (/about.html): This page provides details about GameHub, including its background, mission, and vision.
-
Contact Page (/contact.html): A simple form that allows users to get in touch with GameHub for inquiries, support, or feedback.
-
Product Page (/product/index.html): Displays detailed information about a specific product.
-
Checkout Page (/checkout/index.html): Shows the contents of the shopping basket for review before purchase.
-
Order Confirmation Page (/checkout/confirmation/index.html): Displays a confirmation message after a successful checkout.
Since this is a school project, contributions are not needed. However, if you have any feedback or suggestions, feel free to reach out!
If you want to connect or learn more about me:
Email: diana.bergelin@live.se
This project is not currently under any open-source license as it's a school project.
I would like to thank:
Information: Mollify, w3schools
My friend jimmy Rickardsson for helping me forward when i was all lost.
Sources for inspirations: Youtube tutorials from Kevin Powell, Web Dev, developed by ed etc.
My Front-End Development (FED1) instructors for their feedback and support.
Box shadow site: https://cssgenerator.org/box-shadow-css-generator.html
Images:
Midjourney
Covers från https://www.gamekeys.se/
Icons: https://www.iconfinder.com/
Icons plugins in Figma