Africa Musical Legends

Live Site

Africa Musical Legends is a Milestone 2 project, it is part of the Fullstack WEb Development Course of Code Institute.

Table of Contents

1. Project overview
2. UX

• UX Planes
  • Scope Plane
  • Structure Plane
  • Skeleton Plane
  • Surface Plane
• User Stories
• Design
  • Libraries
  • Typography
• Wireframes

3. Features

   • Existing Features
   • Features Left to Implement

4. Technologies Used

5. Testing

• Validators
• Manual Testing

6. Deployment

7. Credits

• Content
• Media
• Acknowledgements

Project Overview

This is a front-end web page for a history magazine/blog. This web page is created to showcase Africa's Musical Legends, both past and present, living and the ones beyound. And at the same time expresss the history behind their songs and activism for Africa's libration. It is meant to be a monthly edition which i wish to continue after this project is marked by Code Institute.

This webpage was created as the first milestone project as part of the Code Institute ‘Full Stack Development’ course.

The deployed version can be viewed at:https://salute03.github.io/ms2-project-africa-legends/

This is for educational purposes only.

UX

Africa Legends is aimed at B2C users. It is designed with pictural display that can expand at a click with rich history of each Legend.

Design

A standard layout is fully responsive on mobile devices and larger screens.

Typography

Google Fonts Redressed, Akaya Telivigala and Dancing Script was used across the site.

Wireframes

I used pen and paper for the wireframes.

back to top

Features

Existing Features

• Navigation links
• Read more
• Google maps with clickable makers
• Social media icon links (Font awesome).
• Card panel images thats opens and closes at a click.
• Sendine Email page for getting in touch for more history.

Features Left to Implement

• Animated nav header
• search location box for more Africans countries and communities of Africa Legends.

Technologies Used

1. HTML (Hyper Text Markup Language): Used throughout the site;
   HTML: https://www.w3.org/TR/html/

2. CSS (Cascading Style Sheets): Used throughout the site; https://www.w3.org/Style/CSS/Overview.en.html Javascript Emailjs google map

3. Bootstrap: Used to aid responsive design and for componants such as navbars, buttons. This project uses Bootstrap as a framework to assist in page grid layout & navigation. Bootstrap v4.5 was used. https://www.bootstrapcdn.com/

4. JQuery: This project uses JQuery to assist in execution of bootstrap. https://jquery.com/

5. GitHub: THis site was published using GitHub pages. http://github.com

6. Chrome/Firefox/Bing DevTools: Regularly used to test the the site https://developers.google.com/web/tools/chrome-devtools

7. Font Awesome: The social icons, Facebook, Twitter, Linked-in, instagram were imported from Font Awesome. https://fontawesome.com/icons

8. Google Font: Redressed, Akaya Telivigala and Dancing Script Font family were used throughout the project. https://fonts.google.com/

##Version Control This project was written on gitpod. https://www.gitpod.io/

Validators

1. HTML W3C HTML Validator Used to identify HTML errors. few errors were identified, which has to do with the modal form. The text in the heading of the form and the label texts were not showing, which i fixed by sinmply changing the colors to black and i got this idea from slack. Then i made a mistake in the input, i used type="name" instead of type="text".

2. CSS W3C CSS Validator Used to identify CSS errors

Testing

1. amiresponsive Am I Responsive Used to test responsiveness across a range of devices.

2. Developer Tools Chrome, Firefox and Microsoft Edge, web dev tools using iPhone 6,7,8,x plus, smasung s and Ipad as toggle devices to test responsiveness.

3. Mobile Devices I used my Google Pixel 3a phone and Amazon Fire tablet to test the site, using this method I found that not all of the fonts were loaded properly originally.

4. Friends and family I asked for feedback from friends and family in order to get a users perspective and i got very good feedback.

5.Lighthouse A number of issues were resolved using lighthouse. I used lighthouse to determine the rate of performance, accessibility, best practice and SEO.

Deployment

1. I Created a Github account at https://github.com My account url; https://github.com/salute03

2. I installed Git and set up a username and password.

3. I created a repository on Github (https://salute03.github.io/ms2-project-africa-legends/)

4. I uploaded all files to my Github repository.

5. To publish the project to see it on the web, I then went into the Settings on my respository, scrolled down to the heading, GitHub Pages. Under the Source setting, I used the drop-down menu to select master branch as a publishing source and saved it. Refreshed the github page, and you are then given a url where your page is published; Your site is published at https://salute03.github.io/ms2-project-africa-legends/.

Credits

1. Code Institute This project was written using code institute's template https://github.com/Code-Institute-Org/gitpod-full-template. The Email.js and google map was copied from code institute tutorials.

2.Slack The slack community .

3.All text was written by me and with some ideas from the project of salute03.github.io/ms2-project-africa-legends/

4. Travasy Media card panel idea was from 50 projects in 50 days by @Travasymedia.

Media

All pictures in this project were gotten from google.

Acknowledgements

1. My mentor Moosa Hassan for his support and input.

2. My peers on slack for their generosity in sharing their knowledge and experience. But most importanly , @Feawos, @Toby, Anthony just to mention few.

back to top