LINK TO DEPLOYED SITE

1. Project Goals

2. User Goals

3. User Stories

4. Site Owner Goals

5. User Requirements and Expectations

6. Design choices

7. Structure

8. Wireframes

9. Technologies used

10. Features

11. Validation

12. Testing of User Stories

13. Bugs

14. Deployment

15. Acnowledgements

The goal of this project is to create a web application for children or beginners to learn the basics of music theory. It is also a personal goal for me to implement JavaScript for the first time.

Users who visit this site want to learn basic music theory and have fun doing it. It is as simple as that!

The user should see straight away that the content of this web application is simple; lots of space and a user-friendly but elegant design makes it attracive for both children and adults.

Target Audience

• Children
• People with learning difficulties
• Beginners or parents

1. Be able to play a quiz which teaches tone names, symbols, clefs and note lengths
2. Be able to hear the tone in question, and find out if the question was answered correctly or not
3. Be able to play tones on a piano on the screen and see which tone is being played
4. Read a few pages on basic music theory with learning material for the quiz
5. Be presented with a friendly user interface
6. Get in touch with the site owner

This website does not return profit or anything else anything to the site owner, so the benefit will end on the users side, unless the user decides to contact the owner.

1. Users should feel welcome when entering the website
2. Users should easily be able to navigate through the contents of the website
3. Users should find it easy and fun to play the music quiz
4. Users should have a page where they can play keys and see the note on a stave
5. Users should be able to contact the owner should they wish

The website should have five pages:

1. Home

Here, the user is given three main options; * To play a quiz * To learn about music theory * To play the piano and see the notes played Users can also contact the website owner at the top right of the page.

2. Quiz

Here users can play a simple game where they are presented with notes or musical symbols and have to answer correctly to get a point. Users have to answer as many questions correctly in one minute.

3. Learn

On this page, users will find the sites main text and picture content; here are the basic blocks of learning music theory; the notes, in treble and bass clef, the different clefs, note lengths, accidentals and rests.

4. Play

This mainly a piano and a stave above. When the user clicks a key, they can see how the note looks on the stave and can hear it being played.

5. Contact

On the Contact page, users can fill in a simple contact form to get in touch. They can also see the email adress.

Wireframes were made for both mobile device, tablet and desktop versions of the website. They can all be viewed here.

This page consists of Five pages, each a feature in itself. As this is a page directed mostly to younger people, navigational links are limited on all pages, so the user can focus on that pages content. If the link is not visible, all the user needs to do is click home.

The Home page has three big buttons, each a main feature of the site. Quiz, Learn and Play. Due to the simple nature of this site, there is little more here to distract, only the main logo and a contact link at the top.

The "quiz" page features two boxes, a questions-box and an answers-box. In the questions-box, a question and a picture will greet the user and they can then input their answer in the answers-box below. There, there is a text input and a submit button. The user gets points for answering correctly store in the top left corner and in the top right corner a timer keeps track of the clock, ticking down from 1 minute.

The "play" page has two features, a miniature piano and a stave showing both the bass clef and treble clef. When the user clicks a key, the relevant note displays on the stave. The correct note is also heard when clicking it.

On the "learn" page, users can start learning the very basics of music theory from the beginning. Here, they learn the clefs, the stave, note names, and more. Pictures and text go hand in hand to teach the user the knowledge Which later can be tested in the quiz.

Finally, the "contact" page contains a simple form, where the user can fill in their name, email address and query, which they can send by clicking the submit-button.

This is a basic web application but could be expanded with all kinds of sections and functions. For example, there could be a play-by-ear section, where notes are played and the user has to answer which note. There could also be a chords-section, introducing chords and their uses in music. i am sure this platform will be expanded in the future.

• Github

• Gitpod

• HTML5

• CSS3

• JavaScript

This website has been deployed using GitHub pages.

To deploy a page yourself, do the following:

1. Access your GitHub account and find the relevant repository.
2. Click 'Settings' in the repository.
3. In Settings, click 'Pages' in the left-hand menu.
4. Click 'Source'.
5. In the dropdown menu displaying 'None', select 'Master Branch' or 'Main'6.
6. Allow the page some time to deploy your website.
7. At the top of Github Pages you will see a link to your live website.

To make a clone, or 'Fork' this repository, follow the steps below.

1. Access your GitHub account and find the relevant repository.
2. Click on 'Fork' on the top right of the page.
3. You will find a copy of the repository in your own Github account.

1. Access your GitHub account and find the relevant repository.
2. Click the 'Code' button next to 'Add file'.
3. To clone the repository using HTTPS, under clone with HTTPS, copy the link.
4. Open Git Bash.
5. Access the directory you want the clone to be have.
6. In your IDE's terminal type 'git clone' and the paste the URL you copied.
7. Press Enter.
8. You now have a local clone.

The tutors at Code Institute