This is the main website for my Collect'em All javascript web application.
This is the second milestone project completed by myself while working towards my qualification with the Code Institute.
The main goal of the Collect'em All application, is to enable users to find information and price data on original Pokemon cards.
- Pokemon card collectors
- Pokemon card sellers
- Pokemon Hobbyists
- High quality, easily accessible information.
- Pokemon card price data.
- Ability to purchase Pokemon cards.
- To make Pokemon card information easily accessible.
- To give users accurate price data on Pokemon cards.
- Find information about Pokemon cards.
- Find information about the value of Pokemon cards.
- To be able to buy Pokemon cards.
-
- As a First Time Visitor, I want to easily navigate the website to find the information needed.
-
- As a Returning Visitor, I want to find information about where I can sell or purchase the desired Pokemon cards.
- As a Returning Visitor, I want to compare prices of cards found elswhere with current sales data.
-
- As a Frequent User, I want to check to see if there are any updates to price data for specific Pokemon cards.
- User friendly.
- Accessible.
- Fully responsive.
- Clear high quality images.
Created with Draw.io
GitHub Link - View [Insert path]
- Every page has a simple yet effection Navigation bar that is transparent but transitions to black on the scroll of the page to stop content overlap.
-
The navigation bar is also responsive and collapses on smaller screen sizes into a "burger" menu to keep the design clean and simple.
-
I implemented a hover effect when the user highlights a menu item to give the navigation menu an interactive feel.
-
I also added an orange background to the "contact us" menu item to divert the user's attention to the contact page. On smaller screens where the menu collapses, I added an alert above the navbar to have the same desired outcome.
- Every page has a consistent header with an H1 element and a background image.
-
Every page follows the same content structure:
- The website's text containers have an RGBA transparent background which helps the text stand out from the background image giving a clear contrast and making the text easy to read.
- Each section of the content is clearly defined with a new heading making the flow of information easy to follow.
- Each page divides the text with either images or videos to keep the user's attention for longer.
- Every page has the same styled footer:
My Collection "Page":
- Gives users an easy way to track what cards they already own in their collection.
- Allows users to identify which cards they need to complete their collection.
- Allows user to estimate the value of their collection.
- In this project I used the Exo font for titles and headings and Poppins for the main text, I also set a fallback font of sans-serif for cross-browser compatibility.
- Bootstrap 4.4.1:
- Bootstrap was used to assist with the responsiveness and styling of the website.
- Hover.css:
- Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
- Google Fonts:
- Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
- jQuery:
- jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the projects code after being pushed from Git.
- Photoshop:
- Photoshop was used to create the logo, resizing images and editing photos for the website.
- Draw:
- Draw.io was used to create the wireframes during the design process.
- React:
- The React libary was used to simply the UX / UI design.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
-
W3C Markup Validator - [Results]
-
W3C CSS Validator - [Results]
-
-
First Time Visitor, first impressions:
-
Returning Visitor stories:
-
Frequent User stories:
- It would be nice if there was a newsletter I could sign up to receive updates by email."
-
- The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
- The website was viewed on a variety of devices such as desktops, laptops, Ipad Air, Ipad Mini, iPhone SE, Samsung Galaxy s8 & Samsung Galaxy s20 ultra.
- Friends and family were asked to test the website on a range of devices and their experiences were noted.
- I also tested the performance of the website using the lighthouse feature in the browser dev tools.
- [List bugs]
The project was deployed to GitHub Pages using the following steps...
-
Select the Settings tab in your GitHub repository.
-
Locate the GitHub Pages section and chose the master branch (mine was called "main") as the source to enable GitHub Pages.
-
Save the master branch as the source, wait till the page refreshes and locate the URL to the deployed website.
-
Test the URL to make sure the website has deployed properly.
-
The full-screen hero video code came from this StackOverflow post [Insert link to youtube video]
-
Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
-
MDN Web Docs : For Pattern Validation code. Code was modified to better fit my needs and to match an Irish phone number layout to ensure correct validation. Tutorial Found Here
- All content was written by the developer.
- All Images were created by the developer or supplied by the API used.
- Videos were sourced from youtube.
-
My Mentor Guido for continuous helpful feedback.
-
Tutor support at Code Institute for their support.