This is a website for people who love music, where the user can be a part of a community to learn about new music or teach others about their favourite music.

Live site: https://romcgill.github.io/when-they-said/index.html

• As a First Time Visitor, I want to easily understand what the site is for and why I should be interested in it.

• 

• As a First Time Visitor, I want to be able to easily navigate throughout the site to find content that relates to my interests.

• As a First Time Visitor, I want to be excited, intrigued and feel I am in a fun and safe place with other users who share my interests.

• As a Returning Visitor, I want to find information on the most recent community contributions.

• As a Returning Visitor, I want to find out how I can contribute to the community.

• As a Returning Visitor, I want to find a way to personally connect with other community members on a platform that I am more familiar with.

• As a Frequent User, I want to contribute more and help with the growth of the community.

• As a Frequent User, I want to check the most recent updates from community members.

• As a Frequent User, I want to get in contact with the site owner and see how I can be more involved in the development of the community I love.

• As a Frequent User I want to be able to access the site on all of my devices.

• The colour scheme used is Black, White and Alice Blue for great contrast and readability. Imagery was used to add extra pops of colour and interest to the basic palette.

• The Montserrat font is the main font used throughout the whole website with Sans Serif as the fallback font, this is in case for any reason the font isn't being imported into the site correctly. Montserrat is a clean font used frequently in programming, so it is both attractive and appropriate. It is also familiar and widely used. This gives the user a feeling of familiarity and trust towards the site.

• (update) The new font family used for the nav bar is 'Segoe UI', I chose this font after receiving feedback from family and friends who thought that Montserrat was too sharp to be at the top of the page and would be better left for the page content instead. As a back-up I added in some other font families that are not unlinke Segoe UI with a final destination of sans-serif if all else fails.

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

-The imagery used was purposely chosen, sized and positioned to convey a sense of professionalism and trustworthiness without being dry or boring. This use of imagery will promote a positive emotional response due to its fun and colourful nature.

The hover animation used for the character images which make them bounce was also used to elevate the user experience.

When the site is viewed on a mobile device the imagery for the genre links (the characters) hover over the nav bar at the top of the screen. This was intentional and also a Catch 22. Following best practice rules for UX it is unusual and untypical to have this happen.

Using the z-index the character hovers over the nav bar when scrolling through the sections. This was implemented intentionally and serves a purpose, that purpose being that when the user is scrolling through that section of the page their attention is kept to that specific section. This was done to avoid any distraction and lead to a user clicking away before they found what they are looking for. It also adds a refreshing design element that may interest or excite the user.

• Remain anonymous when contributing

When testing I shared a link to friends and colleagues one helpful suggestion was that there should be an option to remain anonymous when submitting the form.

• A check box with the value of yes-remain-anonymous was added to the form.

html

                    <label for="anonymous-button">click here to remain anonymous</label>
                    <input type="checkbox" id="anonymous-button" name="anonymous-button" value="yes-remain-anonymous">
                </div>

Result

Resulting email.

1. The design of the site is fully responsive on all modern devices.

" As a Frequent User I want to use the site on my phone while I am away from my desk."

• The site uses a combination of the Grid layout and media queries to achieve this.

Example (code for characters to re-align if screen width is less than 800px)

HTML

 <div class="character-container">
    <div id="character-1">
    <a href="hip-hop.html">
    <img src="./assets/images/hiphop.png" class="character"  alt="hip-hop character">Click me to learn about HIPHOP</a> 

CSS

 @media screen and (max-width:800px){
    .character-container{
        display: grid;
        gap: 1.5rem;
        grid-template-columns: 2fr 2fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        
    }
    #character-1{
        grid-column: 1;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        
      }

2. The site is easy to navigate

" As a First Time Visitor, I want to be able to easily navigate throughout the site to find content that relates to my interests."

• The site uses a header with a fixed position so the user can always navigate to each page with ease.

Example (code for my header and nav bar.)

HTML

 <header>
        <a href="index.html">
            <h1 class="logo">When They Said</h1>
        </a>
    <!--nav bar--> 
<nav class= "menu">
    <ul>
        <li class="genre-links"><a href="rock.html"><I class="fas fa-guitar"></I>Rock</a></li>
        <li class="genre-links"><a href="hip-hop.html"><I class="fas fa-music"></I>Hip-Hop</a></li>
        <li class="genre-links"><a href="country.html"><I class="fas fa-headphones"></I>Country</a></li>
        <li class="genre-links"><a href="pop.html" ><I class="fas fa-microphone"></I>Pop</a></li>
        <li class="genre-links"><a href="form.html"><I class="fas fa-file-upload"></I>Contribute</a></li>
    </ul>
</nav>
            
    </header>

CSS

 header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 3;
    box-shadow: 0 -20px 30px #000;
}

3. The footer element is at the bottom of each page with clearly defined social media links represented by icons.

" As Returning Visitor, I want to find community links and a way to personally connect with other community members on a platform that I am more familiar with."

• The site uses icons from fontawesome.com to achieve this and some css styling to make the icons match the colour scheme of the site.

Example (HTML and css code for my footer)

HTML

<div>
    <footer>
        <ul class= "footer">
            <li>
                <a href="http://facebook.com" target="_blank" rel="noopener" aria-label="Visit our facebook page (opens in a new tab)"> <I class="fab fa-facebook-f"></I></a>
            </li>
            <li>
                <a href="http://twitter.com" target="_blank" rel="noopener" aria-label="Visit our twitter page (opens in a new tab)"> <I class="fab fa-twitter"></I></a>
            </li>
            <li>
                <a href="http://instagram.com" target="_blank" rel="noopener" aria-label="Visit our instagram page (opens in a new tab)"> <I class="fab fa-instagram"></I></a>
            </li>
            <li>
                <a href="http://youtube.com" target="_blank" rel="noopener" aria-label="Visit our youtube page (opens in a new tab)"> <I class="fab fa-youtube"></I></a>
            </li>
        </ul>
    
    </footer>
    </div>

CSS

footer .footer{
    text-align: center;
    /*background-color: #316B83;*/
}

.footer > li{
    display: inline;
    height: 20px;
    /*background-color: #316B83;*/
    text-align: center;
   
}
footer I {
    font-size: 160%;
    margin: 1%;
    padding: 5%;
    color: lightslategray;
    /*background-color: #316B83;*/
    text-align: center;
    
}

4. The Contribute page is for users to share the meaning or story behind their favourite songs and is fully functional

" As a Frequent User, I want to contribute more and help with the growth of the community.

• To achieve this the Contribute form is linked to formspree which allows the site owner to receive form data directly to their email address. This data is then converted to HTML and uploaded as content to the site. This technique of linking formspree was learned from the youtube video https://www.youtube.com/watch?v=vc9rgFHr098&t=290s

Example (code to link formspree and creating/styling the form)

HTML

<section>
            <div class="container">
              <form action="https://formspree.io/f/myyoyanj" method="POST" id="my-form">
          
                <div class="form-group">
                  <label for="firstName">Name</label>
                  <input type="text" id="firstName" name="firstName" required>
                </div>
          
                <div class="form-group">
                  <label for="songname">Song Name</label>
                  <input type="text" id="songname" name="songname" required>
                </div>
          
                <div class="form-group">
                  <label for="email">Email</label>
                  <input type="email" id="email" name="email" required>
                </div>
          <!--not sure if drag and drop is possible -->
                <div class="form-group">
                  <label for="text">Add your text here.</label>
                  <textarea name="text" id="text" cols="30" rows="10" required></textarea>
                </div>
          
                <button type="submit">Submit</button>
              </form>
            </div>
            <div id="status"></div>
          </section>

        </div>
    </section>

CSS

.form-group {
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
  }
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 5px;
    font-size: 18px;
    border: 1px solid rgba(128, 128, 128, 0.199);
    margin-top: 5px;
  }
  
  textarea {
    resize: vertical;
  }
  button[type="submit"] {
    width: 100%;
    border: none;
    outline: none;
    padding: 20px;
    font-size: 24px;
    border-radius: 8px;
    font-family: "Montserrat";
    color: rgb(27, 166, 247);
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s ease background-color;
  }
  button[type="submit"]:hover {
    background-color: rgb(214, 226, 236);
  }

HTML Formspree

 <form action="https://formspree.io/f/myyoyanj" method="POST" id="my-form">

1. I would like the form data to be automatically uploaded onto the live site.

When a user submits their favourite song and the meaning or story behind it I want that data to be uploaded to the site instantly or after an approval phase.

• This would require more knowledge of Java Script and backend frameworks. I have looked into this and have found someone using Google Apps Script to populate a google sheet from form data entries you can view this here. (https://support.google.com/docs/thread/48344518/solved-auto-update-auto-populate-the-form-with-realtime-data-from-sheet-after-response-is-submitted?hl=en).
• I think another way to achieve this could be to create a forum page and have the action of post and the URL linked to a new forum submission so when a user enters data into the form it will get sent to the new submissions area on the forum page. This may not be the best way to implement such a feature but might be my only option without knowledge of java script or any backend frameworks or API's.

2. I would like to have a hamburger menu on my nav bar for when viewing on mobile devices.
   On some devices the links can be cluttered and lack breathing room which I think negatively impacts the asthetic of the nav bar. This is possible to do with javascript and a media query and I intend to add this feature soon. I have started my research on youtube to grasp the basic concept one video I found helpful was https://www.youtube.com/watch?v=dIyVTjJAkLw&t=200s

3. I would like to add the option to create an account and store users information and allow them to post/upload directly onto the site. To achieve this I would need more backend knowledge from what I have seen in this video https://www.youtube.com/watch?v=gCo6JqGMi30 it seems like PHP and MYSQLi databases must be used also.

4. I would like to add a content block that bolcks mature content, in the case of explicit language or mature content. Java Script is required for this so I intend to add it at a later date. My research has brought me here https://vpsfix.com/1806/adult-content-warning-javascript-image-hosting-sites/ This details the process to add an adult content warning to the page as you enter. I want only relevent content to be blocked with a small checkbox above that the user must click to gain access to the content, all other content would still be visible if the checkbox was left unchecked.

The site is written with only HTML and CSS my testing will be focused on accessibility,functionality and the visual asthetic.

1. Accessability

To test the accessibility of my site I carried out some manual testing using google dev tools, amiresponsive and different devices and screen sizes. One thing I was looking for was if my media queries were performing as expected. To achieve this I used dev tools to resize each page of the site in each test the media queries functions how I expected without fault. 2. #### Functionality

• To test the functionality of the site I used a combination of manual testing and markup validators. Using the W3C markup validator the site had no errors or warnings to show on any page. I generated a lighthouse report on dev tools and recieved 100 on accessibility, best practice and SEO and 78 on performance. This issue was soon fixed by resizing my images and using tinypng.com to compress each png file to make it a smaller file size for faster load times, I also received some advice on stack overflow to preload my hero image. Using these three methods I got the performance score up to 100. due to a function google has in active development I am no longer receiving 100 in best practice, the score is now at 93. I am confident once google fixes this bug my site will achieve 100 in every category. I used the The W3C CSS Validation Service to test my CSS code, The result came back with no errors.
• Manual Testing. To test the site manually I ensured that all links opened to the correct page and all of the pages in the nav bar lead to the correct destination. I have also made many submissions into the form to make sure that everything is functioning as it should, throughout the process of coding the website I was continuously testing every feature added and never left a feature that didnt work in the project until it was fully functional.

3. Visual aesthetic

• I manually checked the colours on my site using colors.co, I did this because I felt that the contrast validators were not great at recognising where the colours are on the page. They try to contrast two colours that are not relevant to eachother. Using colors.co the contrast between the text and background received a score of 11.63 and 4 out of 5 stars.

1. On my landing page for desktop use I wanted to layout my "genre characters" with text underneath them until the screen size reached a width of 800px. As this was early on in the project I did not know whether to use Flex, Grid, or Floats.

• Fix After getting some advice from my mentor the fix was to use display-grid and divide the the container by fractions, this allowed me to have 4 columns and 2 rows when the screen size was more than 800px. I then added a media query with the max width of 800px and divided the container to have 4 rows and 2 columns. This gave me my desired outcome.

CSS

.character-container{
      display: grid;
      gap: 1.5rem;
      grid-template-columns: 1fr 1fr 1fr 1fr ;
      grid-template-rows: 2fr 2fr;
      padding: 30px 14px;
      

    
  }
  .character-container a {
      text-decoration: none;
      font-size: small;
      text-align: center;
      color:#0645AD;
  }
  #character-1{
    grid-column: 1;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    z-index: 4;
    
  }
  #character-2{
    grid-column: 2;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    z-index: 3;
   
}
    #character-3{
        grid-column: 3;
        text-align: center;
    margin-right: auto;
    margin-left: auto;
    z-index: 3;
      
}
    #character-4{
        grid-column: 4;
        text-align: center;
    margin-right: auto;
    margin-left: auto;
    z-index: 1;
    
}
@media screen and (max-width:800px){
    .character-container{
        display: grid;
        gap: 1.5rem;
        grid-template-columns: 2fr 2fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        
    }
    #character-1{
        grid-column: 1;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        
      }
      #character-2{
        grid-column: 1;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
       
    }
        #character-3{
            grid-column: 1;
            text-align: center;
        margin-right: auto;
        margin-left: auto;
          
    }
        #character-4{
            grid-column: 1;
            text-align: center;
        margin-right: auto;
        margin-left: auto;
        }  
        /* text under character */

        #character-text-1{
            grid-row: 1;
            grid-column: 2;
        }
        #character-text-2{
            grid-row: 2;
            grid-column: 2;
        }
        #character-text-3{
            grid-row: 3;
            grid-column: 2;
        }
        #character-text-4{
            grid-row: 4;
            grid-column: 2;
        }
        
}

How I worked out the issue on paper

Outcome

For this project I have used Gitpod. throughout the process I have been adding and committing code to my Github repository. From there I can deploy my live site to make it accessible to everyone. I do this by using Github Pages.
1. From my Github repository navigate to settings on the far right near the top of the page 2. In the left hand side of the screen there will be a list of options, from these options select pages
3. When in the pages section select "branch : main" as the source and ensure the directory is selected as "/(root)" then click save. (my save button is currently grey and unclickable as I have aready deployed my site).

4. When all of the previous steps are complete you should be given this message

The site is now live and ready to view by anyone with the link. It can take Github a couple of minutes to push all of the data to the live site and to publish the page.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

Log in to GitHub and locate the GitHub Repository At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button. You should now have a copy of the original repository in your GitHub account.

Log in to GitHub and locate the GitHub Repository Under the repository name, click "Clone or download". To clone the repository using HTTPS, under "Clone with HTTPS", copy the link. Open Git Bash Change the current working directory to the location where you want the cloned directory to be made. Type git clone, and then paste the URL you copied in Step 3. $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY Press Enter. Your local clone will be created.

 git clone : https://github.com/YOUR-USERNAME/YOUR-REPOSITORY"
- Cloning into `CI-Clone`...
- remote: Counting objects: 10, done.
- remote: Compressing objects: 100% (8/8), done.
- remove: Total 10 (delta 1), reused 10 (delta 1)
- Unpacking objects: 100% (10/10), done.

• HTML5
• CSS

Balsamiq was used to create wireframes for the project

The project uses icons from Font Awesome in the nav bar

The colour scheme and palette were generated and tested using coolors.co

This was used to test and debug my site as I went through the process of building it. The lighthouse feature was used to create a report on the performance of the site.

The fonts used on the site are imported from Google Fonts.

This was used to link my contribute form directly to my email address.

These services were used to validate my css and HTML code to ensure there was no errors.

This was my IDE and where I wrote all of my code, Made commits and pushed to Github.

• https://www.wikipedia.org/ for information on music genres.
• https://www.billboard.com/ + https://www.rollingstone.com/ for in depth information on the songs and artists.
• https://www.freepik.com/ + https://www.shutterstock.com/ + https://unsplash.com/s/photos/singer for images.
• https://youtube.com/ for all video content.

• I would like to thank my Code Institute mentor Antonio Rodriguez for all of his help, tips and feedback.
• My Cohort facilitator Kasia for all of her help and encouragement throughout the project.
• WEB CIFAR on youtube for a great video on how to set up formspree
• The stackoverflow community for responding to questions and having built up a massive database of invaluable tips,tricks and bug fixes
• https://medium.com/ for teaching the bounce animation in a clear way
• W3schools.com for easy to follow lessons on Grid and Flex
• Kevin Powell on youtube for all of his Css tips and tricks.
• Fellow students at Code Institute for answering all of my questions.
• Peter Szabo for his attention to detail and great feedback.
• Code Institute for supplying an amazing course, from the content to the staff and alumni.