View the live project here. Console-Origin

The purpose of this site is to give the visitor an insite to all the different generations of there favourite console. The site is based around the three main contenders in the market today Nintendo, Playstation and Microsoft. They are greeted on the home page with the qustion "Where did they Start?" With the main commercials from the launch of each of the company's first console. Under the commercial they can then click on the logo for the console they want to find out more about. When they go to the page they are looking for, the console are layed out from first released to last. Each section has four parts the start up music from that console, some info about the console, a photo of the console and then some easy read stats.

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

• Design

  • Colour Scheme

    • The three main colours i used are blue black and white. I keep the colour scheme simple as not to take away from the photos of the consoles. Most of the photos have a white background and the console's them selves are mainly black and white in colour. The background colour has a gradient of light blue to dark blue so when the user is scrolling down through the page its not just the same block colour.

  • Typography

    • The Roboto font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Roboto is a clean font used frequently in programming, so it is both attractive and appropriate.

• The wireframes for the project can be found here Wireframe

• In my wire frames I had my logos and videos laid out in two rows of three. I have this changed this to three rows of two to keep the site more uniform.

• I also had my navigation bar to the right in mobile view but centered this to give it a more uniform look.

• Responsive on all device sizes

• HTML5
• CSS3

1. Balsamiq: This was used to create the wireframes for the project.

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 -
• W3C CSS Validator -

• First Time Visitor Goals

• Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice.

• The user has two options from the home page use the navigation bar at the top of the page or click the logo for the console they want to find out more about.

• When they get to the console page they are looking for they can scroll down and through them or there is a sub menu bar to take them straight to there console of choice.

• 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 Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

• In mobile view the youtube videos collapse down and are not as uniform as in the desktop view.

• Further development of this site would include adding more companys and there consoles.

• Adding a gaming hand held section.

• Include a section for fixs for common know issues.

• Include tear down videos for cleaning and restoring vintage consoles and hand helds.

• The website was deployed to Github pages.

  1. From the Github repository go to 'Settings'.

  2. From there navigate to the section 'Pages'.

  3. From the dropdown menu in the section labeled 'Source' choose the option 'Master Branch' and click 'Save'.

  4. Once saved a notification informing you the site has been published will appear with a link to the website.

• The background were sourced using CSS Gradient

• All Console information was sourced using Wikipedia

• All of the videos were sourced from Youtube

• Photos were sourced from wedsite's with free lisence file can be found here IMAGES

• My Mentor Chris for continuous helpful feedback and advice.