MS1 Project-Codeinstitute

This is my website based on Munster Rugby Football Club.

• As a first time user, I want to easily find my way around the site and find what Im looking for quickly.
• As a first time user, I want to be able to see where the stadium is, and also get directions to the stadium.
• I want to find information on the Munster Rugby team and also images and some history on the team.
• As a fan I want to see dates for upcoming matches, and also find out where I can purchase tickets for the upcoming games.
• As a fan, I want to be able to view merchandise and order/buy merchandise, or else have a link to be able to do so.
• As a First time user, I want to see if there are any links to the clubs social media channels.

• As a returning user, I want to check on the results of the team.
• As a returning user, I want to check on upcoming fixtures again.
• As a returning user, I want to see if there is any new updates about the team or club as a whole.

• As a frequent user, I want to check on the news of the club each day.
• As a frequent user, I want to be able to link to the social media pages/accounts of the club in an easy manner.
• As a frequent user, I want to check for new details on upcoming games and ticket availability.

• I used red and blue mainly in my colour scheme as they are the colours of the club and I wanted to keep these colours prevalent.
• The image of the stadium I used on three pages was to showcase the stadium and also grab the users attention.
• The font roboto was used as i felt it mixed nicely with the background image and one of the attractive images.

My aim in the design was to keep the home page simplistic with a captivating image to get fans/users attention immediately.I also wanted the user to be able to naviagte the site very easily and have it as user-friendly as possible.

For users, I wanted to provide them with as much info about Munster RFC as possible. I also wanted to add options for tickets (through a link).I also wanted to have a contact page within my site,so a user could get in contact with the club easily on any matter they wanted addressing.

In the home page I wanted a image that would draw the attention of the user immediately. I also wanted a naviagation bar that is easily useable, and can get you to the rest of the site without much effort. In the history section I wanted to detail a small bit of history on the club. I also wanted to show what the club had won and when they had won a certain competition. In the matches section I wanted to inform the user upcoming fixtures. Plus have a link to buy tickets for the upcoming fixtures. In the footer of each page i wanted to have links to the clubs social media accounts.

• Home Wireframe
• Fixtures Wireframe
• Club Wireframe
• Contact Wireframe

The hero image on the homescreen was to showcase the stadium the club play their matches in. The color scheme was in-line with the clubs colors of blue and red. As i felt the hero image/ background image worked well I decided to use it for my fixtures and club page also, as you can see from my wireframes I was not goin to use the image for each page. With more time and knowledge I would of liked to have added teams crests and logos and also information on the stadium the matches were being played at.

• HTML
• CSS
• BOOTSTRAP
• GOOGLE FONTS
• FONT AWESOME
• HOVER.CSS
• GITHUB
• BALSAMIQ

• To test my CSS I used the W3C validation service
• To test my HTML I also used the W3C validation service
• I tested my site on a variety of different size devices to check if it was responsive.
• Also I tested the site on different browsers to check for functionality.
• Within the coding I tested the links every so often to make sure they were working properly, and directing to where I wanted.

• On some mobile devices my table on the fixtures page is not 100% responsive, and with further time I hope to eradicate this.

• This project was deployed on githubpages.com, to deploy the project:
• 1. login to github and locate repository.
• 2. at the top of the repo click the settings button.
• 3. locate github pages section.
• 4. under source, click the dropdown called none and select the Master Branch.
• 5. go back down through the page and finf the site link in github pages section.

• Thomondpark.ie for my background image used throughout the site.
• Pinterest.ie for my logo used on my navbar.
• Bootstrap4.com for my nav and code throughout the project.
• Googlefonts.com for the font I used in the site.
• Fontawesome.com for the icons in my footer.

• My mentor at Codeinstitute
• All the tutors at Codeinstitute
• My fellow students at Codeinstitute
• Slack

This site is for educational purposes only!