Know All Gamestop
Welcome.
This website is called "Know All Gamestop" it is a place where courious new games can stop by and inform themselves about a certain character they have recently came across while gaming. This website would be extreamily useful for young people learning about gaming and all ages that have recently took gaming as a hobbie on board. Users are greeted with a comforting mssage "Developed By Gamers For Gamers" they then know that Know All Gamestop is a reliable place to get there information from.
Features On Home Page
The Landing Page Image
This image is from the game Last Of Us II, I made this the Landing Image as it makes the overall website central. The comforting message "The Know All Gamestop Developed By Gamers For Gamers" portrays a good relationship between the user and the developer (Me). The user gets the impression that this website is reliable and trustworthy.
Navigation Bar
Featured on all three pages, the full responsive navigation bar includes links to the Gearlt, Ellie, and Kratos.
Interatcion Section
This section has three images that portaray the available pages for the user to view. The three images are also clickable the same as the navigation bar.
Gearlt (The Witcher) Page
The Landing Page Image
This image is from the home page, I made this the Landing Image as it make the overall website easier to navigate.
Navigation Bar
The Navigation bar in the page "Gearlt (The Witcher)" is shortened to make a more simplistic design and easy navigation.
Interatcion Section
This section has three images of the character for the user to view.
About The Witcher
This section is the main purpose of the website, it gives a breif discription of "The Witcher". This simplistic design enables the user to get the information about the character whilst not being overwhelmed by an enormous amout of information.
YouTube Video
This section is to give the user a breif video which enables the user to get more information on the character.
Ellie Page
The Landing Page Image
This image is from the home page, I made this the Landing Image as it make the overall website easier to navigate.
Navigation Bar
The Navigation bar in the page "Ellie" is shortened to make a more simplistic design and easy navigation.
Interatcion Section
This section has three images of the character for the user to view.
About Ellie
This section is the main purpose of the website, it gives a breif discription of "Ellie". This simplistic design enables the user to get the information about the character whilst not being overwhelmed by an enormous amout of information.
YouTube Video
This section is to give the user a breif video which enables the user to get more information on the character.
Kratos Page
The Landing Page Image
This image is from the home page, I made this the Landing Image as it make the overall website easier to navigate.
Navigation Bar
The Navigation bar in the page "Kratos" is shortened to make a more simplistic design and easy navigation.
Interatcion Section
This section has three images of the character for the user to view.
About Kratos
This section is the main purpose of the website, it gives a breif discription of "Kratos". This simplistic design enables the user to get the information about the character whilst not being overwhelmed by an enormous amout of information.
YouTube Video
This section is to give the user a breif video which enables the user to get more information on the character.
Testing
I have taken great lengths for testing this website from testing:
- The Responsive Desgin
- Resizing The YouTube Video To Match The Viewport
- Making Sure The Images Fit My Desired Design
Bugs
Throughout testing i have come across some stobern bugs such as:
- Content Of The Navigation Bar Not Fitting Mobile Viewports
- The "Gearlt Page" Was Displaying As Half The Actual Width In Chrome Developer Mode
- The "Gearlt Page" Landing Page Was Not Fitting Correctly This Let Me To Restart The Page All Over
Validator Testing
HTML
- No errors were returned when passing through the official W3C Validator CSS
- No errors were found when passing through the official (Jigsaw) validator
Deployment
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - https://seangrant18.github.io/Website/
Content
- Landing page Header was taken from the Code Institute Coders coffeehouse Website
- Instructions on how to implement the YouTube elements was taken from W3Schools
- Font was taken from Google Fonts
Media
- All images were taken from Google Images