The City Hub is a fan-site aimed at the supporters of Norwich City Football Club, with the view to bring updated information to members of the hub. Allowing the fans to interect with each other and have their own input into the site, via the squad page and line-up section.

The purpose of the site is to provide a platform for fans to see information about their club.

As a football fan, I look for a site that has relevant information about my team. An avenue in which I can talk to others about opinions, tactics and players.

The landing page is the Hub Home page with reasons to 'join the hub'. Following these are recent match reports, with an active link to the official reports on the official Norwich City Website.

This page provides the user with the recent updates from the club, including snippets of information, with the option to view more at the click of a button. Transfers and Gossip are also available to see with the same format.

A visual representation of a line-up preferred by The City Hub team is displayed, with the option of members to have their own preferred line-up displayed on the site.

A page where new users can become a site member, and existing members can sign in.

Each page has the same navigation bar and footer, so the user is able to navigate between the pages conveniently. The layout and design of each page is consistent with each other, except for the heading images and content.

Used to build the pages of this website. For more information on this language; https://en.wikipedia.org/wiki/HTML5

I used this language to style my HTML5 pages through alignment, spacing and colour scheme. For more information on this language; https://en.wikipedia.org/wiki/Cascading_Style_Sheets

This is a CSS framework that assists the developer in creating mobile responsive front-end projects. https://getbootstrap.com/

Web developer tools integrated in Google Chrome. Used to inspect the site on various mobile devices. For more information; https://developers.google.com/web/tools/chrome-devtools

An online IDE in which the HTML5 and CSS3 code was created and tested. https://gitpod.io

A website which works with GitPod, it provides hosting for software development version control using Git. https://github.com/

This was used to validate the HTML5 and CSS3, which notifies you of any errors. https://validator.w3.org/

An online services which assists in beautifying and formatting your code to look elegant & professional. https://beautifier.io/

-I created wireframes for my site using Balsamiq. The original idea was to have a dark-theme website with the natural colours of Norwich City, yellow and green. These designs were the implemented into the creation of the website when first constructed, and throughout the development of the project the site changed colour scheme and also its pages and content. -Throughout development, I felt that the colour scheme was not supportive in what I wanted the site to look and feel like, did not feel professional. So I changed the colour scheme and content layout to suit a lighter background, whilst still incorporating the traditional Norwich City Colours. -The pages on the site changed as well, as I felt that having the full squad on the page was not interactive enough, so I decided to implement a feature in which the members can contributed to as well.

The site has been tested on Google Chrome and Internet Explorer. The content is displayed well on all viewports.

Using the Chrome Developer Tools, a various range of mobile devices were tested on. The site responds well with all the following device viewports;

• Galaxy S5 - Google Pixel 2 - Google Pixel 2 XL - iPhone 5 / 6 / 7 / 8 / X - iPhone 6+ / 7+ / 8+ / X+ - iPad - iPad Pro The site was also tested on my own Samsung Galaxy S10+ and responded well to this. The images, content and links were clear and precise.

http://ami.responsivedesign.is/ was used to visually display and test the pages on 4 Apple products simultaneously. This is the display you can see at the beginning of this document.

The project was sent to a football fan, who does not support Norwich City, to get an insight into what they thought about the website. "You can easily access the content, get what its about. Its an advanced fan base with access to real news and gossip, easy to distinguish which is which"

• The project was created thought GitHub and developed on GitPod.
• All files/images used to create the site have been uploaded to GitPod and GitHub respectively.
• To see the project published on Google Chrome, I selected the master branch in the GitHub settings and saved. This allowed the following url to be used to view the site in Google Chrome. Live Site - https://rjanderson94.github.io/The-City-Hub/
• To view the code used, please visit the GitHub page for The City Hub. GitHub Account - https://github.com/RJAnderson94 GitHub Repository for The City Hub - https://github.com/RJAnderson94/The-City-Hub

1. Bootstrap;

• Card Template for displaying information on Home, News and Squad pages.
• Form layout used for Join / Log In page.
• Mobile responsive display, used in cohesion with JavaScript to make the site responsive on all devices, providing Burger Menu icon. https://getbootstrap.com/

2. Google Fonts; for the font style used across the site; Righteous. https://fonts.google.com/
3. Norwich City Football Club Website; for information on recent news and match reports. https://www.canaries.co.uk/
4. Norwich City Football Club Website, news page for the latest news and information. https://www.canaries.co.uk/News/latest-news/
5. Code Institute; for guidance on the README.md file. https://github.com/Code-Institute-Solutions/readme-template

1. Norwich City Football Club Website, squad page; used for the images to create the line-ups section. https://www.canaries.co.uk/first-team-squad/first-team/
2. Font Awesome; for the icons used across the site. https://fontawesome.com/start
3. Am I Responsive Web Design for displaying the viewport for each device, as seen in the image at the beginning of this document. http://ami.responsivedesign.is/
4. Balsamiq Wireframes 4; for the beginning of the design process. https://balsamiq.com/

1. Adegbenga Adeye - Code Institute Mentor - for development and design guidance and advice on this project, inlcuding the readme.md file.
2. The Code Institute Slack Community - for inspiration and the lively community it has, constantly sharing advice, opinons and views.
3. Oliver Henderson - for giving feedback on finalised project.