(Developer: Robin Bosch)
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Validation and Testing
- Bugs
- Deployment
- Credits
- License
- Get to learn what components are in a PC.
- Get to learn what a component does in a PC.
- See PC components location
- Have a reference to use again
- Have a PC parts overview
- Educate people about PC components
- Share knowledge of PC components
- Promote social media
- Use it as a portfolio project
- People who have little knowledge of PC components
- People who need a reference page for PC components to look back to
- People who want to know what's in their PC.
- Teachers who would like to introduce students to PC components
- Simple navigation between PC components
- Introduction on how to start learning
- Links and videos need to work as expected
- Easy and short explanations on PC components
- Clear defined structure on how to read the page
- Readability and Accessibility on every device
- I want to know what this website is about
- I want to know where to start.
- I want to know what is in my PC.
- I want to see where component [X] is in my PC.
- I want to remind myself what [X] component does.
- I want to give feedback.
- I want to follow the site owners social media to learn more.
- I want to see what air and water cooling looks like.
- I want to see the motherboard keyboard shortcuts that access the BIOS
- I want to know more about power supplies
- I want the user to get quickly around the site
- I want the user to be able to learn about PC components
- I want to promote my social media
This website design was kept simple to not distract from all the information. The width of the website was limited to make it more readable and pictures have been added to aid the text and not make it boring.
The color palette was used from a website. Link to color palette. Orange and blue are on the opposite of their color spectrum, which makes them good for color blind people. They also harmonise well together. A black text color has been added to compliment the white text color, mainly for the text on orange.
The Ubuntu font from Google Fonts was chosen because it is visually a good looking and clear font, that is easily readable. It was also chosen because of the fitting name for the project (Ubuntu is also an Operating System). The second font is sans-serif if the font is not loading.
Link to Ubuntu font
The page is structured in an easy way with a header, the informational content in the middle and a footer at the bottom.
The header has a burger button which expands the navigation menu.
The footer has the social media buttons as well as the link to the feedback page.
A single component page is meant to cover the questions: “What is it and what does it do?” and “Where is it?”. Sometimes there is additional information or videos.
The pages of the website are:
- The homepage with an introduction and component overview
- The feedback page with a form
- The single pages that cover the components:
- Processor page
- Motherboard page
- Memory page
- Power Supply page
- Graphics card page
- Storage page
- A 404 page that redirects back to the start page if anything goes wrong
Home
Open menu state
Processor page
Motherboard page
Memory page
Storage page
Power Supply page
Graphics Card page
Feedback page
404 page
- HTML
- CSS
- Font Awesome
- Google Fonts
- Git
- GitHub
- Visual Studio Code
- Balsamiq
- PC Building Simulator 2
- Adobe Photoshop
- Colorhunt
- CSS Generators (to generate effects like drop shadows)
The website has 9 pages in total. 6 pages are There are 22 features. Two sections repeat on the 6 component pages.
- Shows the logo to the user
- The navigation menu can be closed and opened
- Burger button toggles the navigation menu
- Shows the navigation to the different component pages
- User stories covered: 3, 12
- Gives a short introduction to the page
- Describes what to expect and where to start
- User stories covered: 1, 2
- Shows all components in the PC
- Encourages user to start with and component
- User stories covered: 2
- Shows all social media links
- Button to the feedback page
- Short footnote who created the website
- User stories covered: 6, 7, 13
- Is on the following pages:
- Processor page
- Motherboard page
- Memory page
- Storage page
- Power Supply page
- Graphics Card page
- Text that introduces the component explaining what it is and what it does
- Motherboard page has a video instead of text explaining the component.
- Shows a picture of the component (Exception: The Motherboard page only shows the video)
- User stories covered: 5, 3, 12
View "What is it and what does it do?" section for other pages
- Is on the following pages:
- Processor page
- Motherboard page
- Memory page
- Storage page
- Power Supply page
- Graphics Card page
- Text that explaining the position of the component in the PC
- A picture (or several pictures) that shows the position of the component within the PC
- User stories covered: 4, 12
View "Where is it?" section for other pages
- Explains the importance of processor cooling
- Shows off air and water cooling and how it looks in the PC
- User stories covered: 8, 12
- Gives additional info about motherboards
- Features a small table with keyboard shortcuts for motherboard
- User stories covered: 9, 12
- Shows a video which dives deeper into power supplies
- User stories covered: 10, 12
- Short text explaining the importance of graphic cards
- User stories covered: 3, 5, 12
- A form for the user to send feedback
- User stories covered: 6
All HTML validation tests have been passed.
Home
Processor page
Motherboard page
Memory page
Storage page
Power Supply page
Graphics Card page
Feedback page
404 page
The full website gets errors in the CSS validation test from the font awesome framework.
Validating the single files passes the tests.
Variables can't be validated, they show up as warnings.
Whole website CSS
Reset CSS
Styles CSS
Header CSS
Footer CSS
All Wave accessibility tests pass.
9 Alerts per page are from the navbar, which uses p elements.
Home
Processor page
Motherboard page
Memory page
Storage page
Power Supply page
Graphics Card page
Feedback page
404 page
The lighthouse tests were good. The performance section was a little weak on pages with youtube videos embedded.
Some performance issues were due to the images not being served in next gen formats.
Below are all reports to every page.
The website was tested on the following devices:
- Windows 11 PC (Screen resolution: 2560x1440)
- Xiaomi MI 9 with Android 11 (Screen resolution: 1080x2280)
Other screen resolutions were tested in the browser with dev tools from 2560x1440 down to 320x568.
The following browser were tested:
- Microsoft Edge (Chromium based version)
- Google Chrome
- Mozilla Firefox
Webkit based browser (Safari) could not be tested. Chromium based and Quantum based browser should be working.
- I want to know what this website is about
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Introduction section | Visit page | To learn what this page is about | Works as expected |
Screenshot
- I want to know where to start.
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Introduction section | Visit page | The last paragraph is telling the user where to start. | Works as expected |
| Part overview | Scroll down | The overview paragraph tells the use where to begin. | Works as expected |
Screenshots
- I want to know what is in my PC.
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Component pages | Browsing the component pages | The user learns through all the component pages what in their PC is. | Works as expected |
Screenshot
- I want to see where component [X] is in my PC.
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Component pages: Where is it section? | Selecting the component [X] page in the navigation and scrolling to the "Where is it?" section | The user finds the section and learns where the component is located in the PC | Works as expected |
Screenshot
- I want to remind myself what [X] component does.
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Component pages: What is it and what does it do? | Selecting the component [X] page in the navigation and scrolling to the "What is it and what does it do?" section | The user finds the section and learns what the component does | Works as expected |
Screenshots
- I want to give feedback.
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Feedback page with the feedback form | Scroll to the bottom of the page and click the "Give feedback" button | The user finds the feedback form and sends feedback | Works as expected (If action points to a server to receive the feedback) |
Screenshot
- I want to follow the site owners social media to learn more.
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Footer with social media | Scroll to the bottom of the page | Social media are at the bottom of every page | Works as expected |
Screenshot
- I want to see what air and water cooling looks like.
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Processor cooling section on the processor page | Open navigation menu and navigate to the processor page and scroll to the "Processor cooling section" | The user finds the "Processor cooling" section and looks at the pictures | Works as expected |
Screenshot
- I want to see the motherboard keyboard shortcuts that access the BIOS
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Additional info section on the motherboard page | Open navigation menu and navigate to the motherboard page and scroll to the "Additional info section" | The user finds the "Additional info" section and finds the table with the keyboard shortcuts | Works as expected |
Screenshot
- I want to know more about power supplies
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Deeper dive into power supplies section on the power supply page | Open navigation menu and navigate to the power supply page and scroll to the "Deeper dive into power supplies" section | The user finds the "Deeper dive into power supplies" section and watches the video | Works as expected |
Screenshot
- I want the user to get quickly around the site
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| The navigation menu | Open navigation menu with the burger button at the top right and navigate to any site | The user finds every component page easily | Works as expected |
Screenshots
- I want the user to be able to learn about PC components
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Component pages | Visit any component page with the navigation or the part overview | The user finds information about PC components | Works as expected |
Screenshot
- I want to promote my social media
| Feature | Action | Expected result | Actual result |
|---|---|---|---|
| Social media icons in the footer | Scroll to the bottom of any page | The owner and user finds the social media icons | Works as expected |
Screenshot
| Status | Bug | Fix |
|---|---|---|
| Fixed | Menu burger button is inconsistently disappearing on smaller screen sizes. Update: The button is only disappearing on one page: motherboard | Fixing a table for mobile layout brought the button back. Table extended the layout and took the button further out of the screen. |
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 box at the top saying: "Your site is live at https://alphaclass6143.github.io/WhatsMyPC/"
You can fork the repository by following these steps:
- Go to the repository on GitHub
- Click on the "Fork" button in the upper right hand corner
You can clone the repository by following these steps:
- Go to the repository on GitHub
- 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.
All component picture have been taken in the PC Building Simulator 2:
PC Building Simulator 2
The two embedded videos are from the PowerCert Animated Videos channel:
PowertCert Animated Videos
Icons are taken from Font Awesome:
FontAwesome
CSS Reset has been used in the reset.css file.
It was written by Andy Bell in a blog post:
Blog post
Guides on Flexbox and Grid from CSS-Tricks, that have been used multiple times as a reference.
Complete Guide to Grid
Complete Guide to Flexbox
- A special thanks to my mentor Mo Shami for his feedback and advice, especially on the documentation.
- A thanks to the Code Institute for the great learning resources
This project is published under the MIT license.
License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent