Supa Sax

The "Supa Sax" website is an online presence for a music artist based in Harlem, NYC.

Users of this website will be able to hear some samples of the artists work and utilise a contact form to get in touch for any bookings. The site will also offer links to direct the user to other sites that host the artists work.

Features

Navigation

• Featured at the top of the page on the left of the navigation bar is the logo. It links to the home page when clicked.

• The other navigation links are to the right. They change color when the user hovers over them to alert the user that they are interactive.

• The font is coloured similar to the brass of a saxophone with a background color that was taken from the shoes of a model in the main image.

• The navigation area clearly shows the logo so the user knows that they are in the right place. The other links are clear and their function is easy to understand for a first time user.

• When the screen size is reduced to mobile size, a hamburger menu replaces the existing nav bar. The logo remains in it's position. This feature creates a clean interface on mobile. Without it, the nav bar could take up too much precious real estate and looked cluttered on smaller devices.

• The menu opens to show the links in a column and can be closed with the X.

Hero Image

• The hero image was selected for it's pleasing mix of colors that could help to keep the pallette consistent across the site. It feautures a saxophonist in the throes of a solo. The user can be sure that they have arrived at the right site.

About

• The left side about section features a short description of the artist. Again, this is to let the user know that they have found the correct website.

• The right side features a positive quote about one of the artists recent performances.

Footer

• The footer contains three links to sites that host the artists work.

• The footer links change color when hovered to add some feedback to the user experience.

Listen Page/Section

• Features a embedded video from youTube with some samples of saxophone music which help to allow the user to sample some of the artists work should they wish to hire them.

• Features an audio player which has autoplay turned off and also loads muted to avoid impacting the user experience negatively.

Contact Form

• Features a first name, last name, email and message input.

• Features a submit button which loads a page confirming that the submission has been accepted.

• The "required" attribute has been utilised to ensure that the inputs are filled with valid data before sumbission.

• Placeholder text prompts the user to enter a value. This helps to make the user experience flow better.

• The submit button changes colour when hovered to alert the user that it is interactive.

Testing

• I have tested the website on Chrome, Firefox and Safari.

• I have tested the site at different screen sizes using Chrome Developer Tools.

• I have given the site to users for feedback on the experience.

• I have confirmed that the links work on every page.

• I have checked that the form requires valid inputs.

• I have confirmed that the audio did not play without user input.

Bugs

Solved Bugs

• I had an issue after deploying the hamburger menu where the links were in reverse order. I had to look into the flexbox documentation to discover the flex-direction: column-reverse; fix.

• I had an issue where some of the elements lower down the page were riding on top of the pinned nav-bar. I solved this by using the z-index property to raise the nav-bar above the rest of the elements.

Validator Testing

HTML

• There were no errors found using the W3C HTML Validator.

CSS

• There were no errors found using the W3C CSS Validator.

Accessibility

• I confirmed that the site had a good accessibility score by using the Chrome Lighthouse tool.

###Unfixed Bugs

-There are no unfixed bugs.

Deployment

• This site was deployed using GitHub pages. The steps are as follows:
  • In the GitHub repository, navigate to the settings tab.
  • From the source section drop-down menu, select the master branch.
  • Once the master branch had been selected, the page provided the link to the completed website.

The live link can be found here Supa Sax.

Credits

Content

• I didn't know how to make a hamburger menu and I thought it was a vital addition to the site. I watched this tutorial to learn how to do it. There was no reason to change a lot of the code so I left it as is in the tutorial but there were some parts that I had to change to fit the site as I wasn't using flexbox in the rest of the site. This brought up an interesting bug I mentioned earlier which reversed the order of the menu but I was able to find a fix in the doc.

Media

• The hero image was taken from Pexels.