An informational website for anyone interested in music, and especially in theory of music. A useful information for beginner piano players; some basic concepts of notes, their types and classification.

Subscription form is available for the actual updates related to theory of music.

Solfeggio for Piano project link

The website is designed so that the new features can be easily added with no harm to the initial design concept.

• Navigation Menu

  • The navigation menu allows user to navigate throught the website and has fixed position on all pages - Home, Notes and Signup.

    

• Social Media Links

  • Links to the mainstream social media and relevant resources: Spotify, SoundCloud, Facebook, Twitter, YouTube, Apple Music, Instagram.

  • This section will help the user to find thematic groups, news and discussions.

    

• Embedded video

  • A visual demonstration of a technique that might be useful for beginner piano players.

    

• Embedded audio

  • In this section the user can play a melody with provided audio controls.

    

• Notes page

  • This section allows the user to familiarize with the basic concepts of notes with explaining images.

  • Anchor links will help to jump to different paragraphs in a more convenient manner than scrolling.

    

• Signup form

  • Signup form is designed for subscription to relevant news and updates.

  • E-mail and name fields are mandatory for submitting the form.

    

• Adaptive design

  • The website is designed to suit different scales of the display, starting from large 1600px and to minimum of 350px.

• More informational pages like 'Notes' could be added, such as 'Intervals', 'Clefs', 'Accidentals', etc.
• The 'Notes' link could be transformed to drop-down menu for convenience, keeping the initial website design.

Testing was performed on different stages of the project, with the final, more comprehensive after deployment.

• Tested all links(navigation links, social media links, anchor links, signup form completion link) to make sure that there are no broken ones, leading to error page.

• Text font color was tested to ensure that it's readible when positioned on the bright part of the background image.

• Also tested different elements of the website to make sure that they are correctly alligned and not clipping/overlapping when changing the screen size. Minimum screen size that keeps the elements well aligned: 350px. Checked images in different screen sizes to ensure that they are correctly scaling with no streching.

• Tested signup form to make sure that input fields are working as intended, e.g. e-mail field only accepting the input in the correct form. Also tested the maximum amount of symbols that allowed in e-mail/name fields(was set 50 in the code).

Some of the bugs that were identified on the course of testing:

• Misaligned footer on different pages.

• Unreadable text due to text color on smaller screen sizes.

• Inconsistent autofill background color in signup form.

All the bugs found were fixed and passed the final testing.

• HTML

  • No errors identified in W3C HTML validator

• CSS

  • No errors identified in W3C CSS validator

The project was deployed to GitHub by following these steps:

1. Login to GitHub
2. Select the repository
3. Navigate to 'Settings' -> 'Pages'
4. In the 'Source' drop-down menu select 'main'
5. Press 'Save'
6. The link becomes available straight away and the project loads once the building process is finished

Design for the main page was partially taken from WIX

Images(excluding piano keyboard) were taken from Pixabay

Paragraph text was taken from the following resources: MUSICCA and Complete Songwriter

The icons were taken from Font Awesome

Font was taken from Google Fonts

The following resources were used for solutions and ideas:

• W3Schools

• Stack Overflow