The Brief of the project was to create a static front end only website. I chose to create my own project and create a website for a fictional football team known as the Valley Titans. The website needed to be 4-5 pages, responsive and make use of bootstrap grids and navigation.

When designing the website, I created user profiles and personas of who I expected the typical user would be. The personas were split into three categories of fans, players and journalists. A list of personas and user stories can be found here but for the purpose of testing the following user stories were created.

1. As a club Fan I want to be able to visit the website to get the latest news
2. As a club Fan I want to be able to check upcoming matches online
3. As a club fan I want to be able to watch highlights of recent matches
4. As a club fan I want to be able to look at action shots from the games
5. As a club fan I want to be able to access the website on my phone tablet and be able to read the same information as if I was on a desktop, with the same quality.
6. As a Rival fan I want to use the website to get information on the club and see when my club is due to play.
7. As a player I want to access the club’s social media via the website
8. As a Journalist I want to be able to get the club’s contact details from the website

Balsamq mockups was used to create wire frames of the webpages and these can be found here.

• Navigation bar – allows users to access different pages of website. This is responsive and shrinks to an icon on smaller screens
• Fixture list – shows users list of upcoming games, the game will be highlighted when the mouse hovers above it
• Squad list – shows users list of current squad players the squad member will be highlighted when the mouse hovers above it
• Fanzone – picture gallery showing best pictures from the matches. Videos showing best goals.

• Ticket form – place for users to apply for tickets. Will be linked to fixture list so that a user can click on a fixture and be taken to the ticket form for that game.
• Quiz – fanzone section to have a daily poll / quiz for users to take part in.

• JQuery
  • The project uses JQuery for animation
  • https://jquery.com/
• Bootstrap
  • Grid system used for webpage layout. Navigation bar and responsive deisgn
  • https://getbootstrap.com/
• Fontawesome
  • Used for social media and navbar icons
  • https://fontawesome.com/
• Googlefonts
  • For website’s fonts
  • https://fonts.google.com/

1. Navigation Bar

   1. Click all buttons on navigation bar
   2. All relative pages open as per description in navbar
   3. Change screen resolution and navbar becomes collapsible on smaller screens as expected.

2. Fixture List

   1. Open fixtures page
   2. Screen resolution changed and number of items per row changes as expected
   3. Hovering pointer over fixtures and colour changes to highlight which item you are selecting.

3. Squad List

   1. Open Squad page
   2. Screen resolution changed and number of items per row changes as expected
   3. Hovering pointer over squad member and colour changes to highlight which item you are selecting.

4. Fanzone

   1. Open fanzpone page
   2. Screen resolution changed and number of pictures and videos per row changes as expected
   3. All videos play as expected
   4. Images appear as expected

5. Website Responsive

   1. Open Home page
   2. Change screen resolution 3.
   3. Check grid layout changes as per code.

6. Social Media Icons

   1. Social media icons appear in correct places
   2. Not live links just checking when clicked they work
   3. Clicking shows message “Social Media Success”

7. Browser Test

   1. Link to browser test here

The website has been deployed via github pages and can be found https://cjmorgan1185.github.io/valleyTitans/index.html

• All news content was created by myself.

• The photos and videos used in this site were obtained from my own version of FIFA17 created on the PlayStation 4

• I received inspiration for this project from other football clubs websites.