Moody Waters Website

Moody Waters, a versatile multimedia artist and DJ, seeks to captivate potential booking agents and clubs through his engaging website, which also serves as a central platform for his followers. Designed with a responsive layout, the site ensures an attractive and user-friendly experience across all devices.

This submission represents my Milestone Project 1 for the Code Institute's Diploma in Web Application Development program. My website comprises five pages and utilizes the HTML and CSS technologies I have acquired throughout the course.

Repository

Find the project repository here

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. First-Time Visitor Goal: Swiftly comprehend the website's core objective while acquiring in-depth knowledge about the Artist.
    2. First-Time Visitor Goal: Effortlessly traverse the site, locating relevant content with ease.
    3. First-Time Visitor Goal: Seek out testimonials to gauge user opinions and establish trustworthiness, while also identifying social media links to assess the artist's online presence and reputation.

  • Returning Visitor Goals

    1. For Returning Visitors: Seek updated details on audiovisual and Music related Artist output.
    2. For Returning Visitors: Effortlessly discover optimal methods for reaching out to the artist with inquiries.
    3. For Returning Visitors: Access valuable links and resources for further engagement.

  • Frequent User Goals

    1. For Frequent Users: Stay up-to-date on the latest audiovisual and music projects.
    2. For Frequent Users: Regularly explore newly published blog posts for insights into the artist's creative journey and industry trends.
    3. For Frequent Users: Subscribe to the newsletter for exclusive access to significant updates, goodies, and noteworthy news related to the artist.

• Design

• Colour Scheme

  • A minimalist and cohesive color palette has been employed to facilitate seamless navigation, while simultaneously capturing the profound essence of the artist's sonic signature.

• Typography

  • The Roboto typeface serves as the primary font across the website, with Sans Serif acting as a fallback option should any issues arise with the font importation process. Renowned for its crisp appearance and prevalent use in programming, Roboto is both visually appealing and contextually fitting.

• Imagery

  • Imagery plays a crucial role in capturing user interest. The prominent background hero image boasts a striking, eye-catching design, accentuated by its contemporary and dynamic visual appeal.

• Wireframes

  • Home Page Wireframe - View

Features

• Responsive on all device sizes

• Interactive elements

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of some parts of the website such as footer and navigation bar.
2. bestJquery.com:
   • Best Jquery was used on the navigation. pages to create a hover effect.
3. Google Fonts:
   • Google fonts were used to import the 'roboto' font into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was utilized across the entire website to incorporate icons, enhancing both the visual appeal and user experience, particularly in the footer and Discography section.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the animation on the navbar.
6. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. Photoshop:
   • Photoshop was used to create edit the background images, resizing and editing photos for the website.
9. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
10. Pexels

• Pexels was used to source imagery for the website.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator

• W3C CSS Validator

#Lighthouse

Lighthouse Report for Homepage (Desktop)

Lighthouse Report for Homepage (Mobile)

• First Time Visitor Goals

  As a First Time Visitor, I want to easily grasp the website's primary purpose and learn more about the artist. Upon arrival, visitors are greeted with an intuitive and legible navigation bar for effortless access to desired pages. A captivating hero image with text and a "Learn More" call-to-action button is prominently featured. Key information is conveyed through the hero image, guiding users to either click the call-to-action button or scroll down to explore further about the artist. As a First Time Visitor, I want to seamlessly navigate the site and locate content with ease. Designed for a fluid user experience, the site ensures visitors never feel trapped. A clear navigation bar is available at the top of each page. The first three pages include a call-to-action at the bottom, guiding users to the next relevant section. On the Contact Us page, submitting the form refreshes the page and directs users to the top, where the navigation bar is located. As a First Time Visitor, I want to review testimonials to gauge the artist's reputation and locate social media links to assess their online presence. After exploring the Contact and portfolio pages, visitors encounter the press and visuals pages. Social media links can be found in the footer of every page. At the bottom of the Contact page, visitors are informed that they can also reach out to the artist via social media, emphasizing the availability of these channels.

• Returning Visitor Goals

  As a Returning Visitor, I want to discover new audio-visual and DJ mixes.

A banner message prominently highlights recent updates. Visitors are directed to a dedicated page featuring another hero image and a call-to-action button. As a Returning Visitor, I want to easily connect with the artist or organization for inquiries.

The "Contact" page is clearly marked in the navigation bar. Visitors can complete the on-page form or opt to message the artist on social media. The footer contains links to the artist's Facebook, Twitter, Instagram, Tik Tok. Each link opens in a new tab for convenient navigation back to the website. Clicking the email button launches the user's email app, auto-filling the artist's email address in the "To" field.

The Facebook and other social media Page link is accessible in the footer of every page, opening in a new tab for a seamless experience. Alternatively. Like other external links, it opens in a new tab for easy return to the website.

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are updates and new music/visuals.

     1. The user would already be comfortable with the website layout and can easily navigate the pages.

  2. As a Frequent User, I want to check to see if there are any new blog and press posts.

     1. The user would already be comfortable with the website layout and can easily click the blog link

  3. As a Frequent User, I want to sign up to the Newsletter so that I am emailed any major updates and/or changes to the website or organisation.

     1. At the bottom of every page their is a footer which content is consistent throughout all pages.

Further Testing

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone x,IPad, iPhone pro & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

• on some devices the hamburger menu gets slightly positioned out of the layout.
• some problems were encountered ebbeding Nft's on the Polygon blockchain. I had to change to ETH.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

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...

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

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. 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.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Music by Moody Waters. 
visuals by Moody Waters.
hover effect on navbar taken from bestJquery: https://bestjquery.com/tutorial/link/demo169/
Glitch effect on text taken from Piotr Galor : https://codepen.io/pgalor/pen/OeRWJQ

Code

• The full-screen hero image code came from Pexels

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

Content

• All content was written by the developer.