The Guide to the Orchestra aims to provide an exciting resource and educational site, targeted at students, musicians and anyone interested in classical music.

• Navigation Bar
  • Featured on all pages to allow the user to navigate to all pages (home, and the four sections).
  • Identical on all pages to ensure consistency and easy user experience.
  • Responsive navigation bar when using different screen sizes.

• Hero Image
  • The hero image of an orchestra is included on all pages.
  • This bring consistency to the site with a simple eye-catching image on every page.

• Introduction
  • The introduction on the home page provides a welcome to users, along with a brief description of the orchestra.
  • Additionally a video has been included of a famous orchestral work. This helps the user understand the orchestra as a whole, before exploring the separate sections individually. The video has been set to not autoplay, as this would be a poor user experience.
  • This section is responsive, being a horizontal alignment for larger screens, and a vertical alignment for smaller screens.

• Explore section
  • This section allows the user to see the four sections of the orchestra in alphabetical order - brass, percussion, strings and woodwind.
  • Each image is clearly labeled, and there is a change to the image opacity when hovering to help the user see which is selected.

• Copyright Footer
  • The footer contains the copyright information for the website and is present on all pages for consistency.
  • Social media links to Twitter and Facebook have been included. These are small as they are not the focus of the site purpose.

• Section Introduction
  • Within each subpage, the section introduction gives information on the instruments within the section, along with some useful facts to educate the user.
  • A table of instruments has been included to give a quick reference on the section. This includes key facts on each instrument.

• Famous Works
  • Within each subpage, three videos are included of famous works related to that section.
  • These will provide real-life examples and bring to life the information on the page, assisting with the user's learning.

• HTML
  • No errors were returned when using the official W3C validator.
• CSS
  • No errors were found when using the official Jigsaw validator.
• Accessibility
  • No errors were detected when using the Wave (Web Accessibility Evaluation Tool) extension.
  • Google Lighthouse report outputs a 100 score for accessibility.

The site was deployed to GitHub pages using the following steps:

• In the GitHub repository, navigate to the Settings section.
• Open the Pages section.
• In the Source section, select the Master Branch.
• Click Save.

The live link can be found here - https://chrischerng.github.io/p1-orchestra-guide/

• The icons used in the headings were taken from Font Awesome.

• The photos used thoughout this site have been taken from the following open source resources:
  • Pexels.
  • Flickr, adapted from a photograph by TEIA.

• My mentor, Victor Miclovich, for his valuable insights, feedback and advice.
• My partner, Scott, for his support throughout the project.
• My family and friends for user testing and feedback.