Hockey History provides a brief history of the game of field hockey, outlining key events in the development of the game. It also provides additional details related to the game in Ireland. The Resources page provides links to Irish and international organisations and resources, which support the development of the game.

The site is aimed at both sports enthusiasts and history scholars. The aim is to provide a history of the game, as well as acting as a useful resource.

• Navigation Bar

  • The fully responsive navigation bar provides navigation to all the main pages; Home, Ireland and Resources. The current page is highlighted for easy indentification and users can easily navigate to the other pages.
  • The HTML code is contained on each page, and the CSS is in styles-nav.css.

• The landing page image

  • The main image on the landing page consists of a photograph with text overlay to allow the user to see the purpose of this site.
  • When loaded an animation is used to attract the users attention. However, when the user has specified they prefers reduced motion, a simple fade in animation is used.

• The Footer

  • The footer section includes links to social media sites via icons, which open to a new tab to allow easy navigation for the user.
  • The social media links serve as a call to action to the user to stay engaged with the site.
  • A link to the Built With page is provided for users interested in the information sources and resources used on this site.
  • The link icons have tooltips, should users be unfamiliar with a particular icon.
  • The HTML code is contained on each page, and the CSS is in styles-footer.css.

• Overview Section

  • This section provides a brief overview of the game, including its popularity and reasons to enjoy the sport.

• Origins Section

  • This section details a brief bird's eye view of the origins of hockey.
  • An embedded YouTube video provides a visual record of the evolution of modern hockey.

• Timeline Section

  • The timeline provided in this section gives key dates in the history of the game.
  • The timeline is responsive, switching from horizontal to vertical on smaller screens.

• Main Page Code

  The Main page code is in index.html.

• Ireland Facts Section

  • The Ireland page provides a series of information cards with interesting hockey facts specifically related to Ireland.
  • Each card provides a small description intended to inform.

• Ireland Code

  The Ireland page code is in ireland.html.

• Rules Section

  • This section provides a brief overview of the rules of hockey and a link to the full rules book.
  • The pitch image acts as a link to Pitch Page

• Organisations Section

  • This section provides a links to national and international hockey organisations.
  • Hovering over a specific card, reveals the links, which open in new tabs.

• Pitch Section

  • This section consists of a large scale image, with the dimensions, line markings and key field area definitions.

• Built With Section

  • This section lists the resources used to develop the site.

• Information Sources Section

  • This section lists the information sources for each section of the site.

• Add additional content.
• Float article content around rotated titles to increase screen space utilisation.
• Use horizontal article titles on narrow screen widths.

The design specification is available in design.md.

Details of the testing undertaken are outlined in test.md, along with the results.

The site was deployed as a static website, hosted directly from the GitHub repository via GitHub Pages.

The following steps were followed to deploy the website:

• Navigate to the Settings tab in the GitHub repository
• Under the Code and automation section, select Pages
• Under Source, select main from the Branch dropdown menu
• Once the website is published, the page will refresh indicting the successful deployment, and providing link to the live website.

The live website is available at https://ibuttimer.github.io/hockey-history/

The following resources were used to build the website.

• The information sources for the site are listed in the Information Sources Section of the Built With Page.
• The icons on the site were taken from Font Awesome
• The favicon for the site was generated by favicon.io
• The timeline is based on this example by Joe Maffei from stackoverflow, customised, adapted to meet W3C Nu Html Checker standards and made responsive.
• Tooltips courtesy of CSS Tooltip Generator
• YouTube embedded player facade courtesy of Paul Irish
• Hamburger menu based on Responsive CSS Hamburger Menu - CSS only from 10+ Hamburger Menu Examples ［CSS Only］ by Luke Embrey
• Sticky footer courtesy of There is flexbox from Sticky Footer, Five Ways by Chris Coyier

• Hero image by BugWarp - Own work, CC BY-SA 4.0, cropped
• Hero image layout based on CodeInstitute: LR101, Love Running - Essentials Project
• The Responsive Mockup image was generated courtesy of Am I Responsive
• Hockey field image, Hockey_field.svg: User Robert Merkel on en.wikipedia, derivative work: Lcmortensen, Public domain, via Wikimedia Commons, derivative work: landscape, updated labels, length and width dimensions
• Maps by FreeVectorMaps.com, Attribution License (Free), cropped, transparent background
• Flag of Ireland hockey team image, Caomhan27/Mysid, CC BY-SA 3.0, via Wikimedia Commons
• Pitch lines image by TaniaRose from Pixabay
• Cups image by Arek Socha from Pixabay
• Ireland provinces image, Ireland_location_provinces.jpg: User:Asarlaíderivative work: Ninrouter, Draceane, Public domain, via Wikimedia Commons
• Ireland team 1908 image Unknown author, Public domain, via Wikimedia Commons
• Olympic rings image, Vusi vilanculos, CC BY-SA 4.0, via Wikimedia Commons