You in Africa

The aim of this project is to show what You in Africa is, how it works. Thus getting donations and volunteers to help You in Africa. I explained how the project started, and what has been done so far.

User Experience

1. Strategy

Project Goals:

To learn about what the project is.
To be able to easily donate and increase donations.
Create a visually appealing website, and fully responsive on all devices and screen sizes.

Customer Goals:

Website clear and user-friendly. Explain as much as possible about the project, but keep it short and simple to not overwhelm.
Easy way to donate.
Inspire people to become a volunteer.

2. Scope

I kept the project simple enough to be understood with no difficulty and the user have a good experience

Learn more about the project
Easy way to donate
Easy way to apply to become a volunteers
Contact with a question
Visit social media channels
I used some animations to make the user experience more pleasant and enchanting

3. Structure

The main goal here is to allow users to quickly assimilate the information. The fixed navigation bar for the desktop screen and fixed footer for the smaller screens was one of the most important things because with it the user always will be close to a donation button.

Although the main goal of the website is to get more donations, I did not want to look like the project is just about money. With this in mind, I made it clear that be a volunteer or share the project on social media was a big help as well.

4. Skeleton

Wireframes
Home, About, Volunteering, Galerry, and Contact Section.
Fixed navigation bar on large screens with the menu headings and donate button.
Fixed Footer on small screens with social media icons and donate button.

5. Surface

Colors: As the project already had pages on social media with defined colors, I decided to keep basically the same style. I used to main colors a dark yellow #F18E04 and a standard brown #5C411A, which provides a good contrast.

Typography: In the beginning, I wanted to use a different font for headings and general text, but choosing Work Sans was great because it looks nice for both cases. I only used Signika for the pictures on the carousel because it looked better.

Images: All the images were provided by You in Africa.

Features

Existing Features

Designed with HTML5, CSS3 and Bootstrap.
Donate button directing to another website.
Fixed navigation bar for large screens to keep visible the donate button.
Fixed footer for small screens to keep visible the donate button.
Contact Form with radio buttons.

Features Left to Implement when skills develop

Donate button directing to a page on the website with a payment system.

Technologies Used

1. Languages

HTML5 - Used to create the form and add content to the website.
CSS - Used to style the HTML5 elements.

2. Integrations

Bootstrap - I used Bootstrap's for the navigation bar and carousel.
Google Fonts - Typography.
FontAwesome - Used for icons.

3. Workspace, version control, and repository storage

Gitpod - IDE (Integrated Development Environment) used to write the code.
GitHub - Repository hosting service to host the deployed website and track previous versions of code.
Git - Version control tool to record changes and updates to my files.

Resources

W3.CSS - General resource.

Stack Overflow - General resource.

Youtube - General resource.

Deep Image - Enhance image.

CSS Matic - Box Shadow Genetator.

CSS Gradient - Gradient Generator

CommonMark - For Markdown language reference.

Coolors - Find matching color palette for site.

TinyPNG - Efficient compression of images for site.

Balsamiq - Wireframing design tool.

Code Institute SLACK Community - General Resource

Testing

W3C Markup Validation - Used for validity HTML
W3 CSS Validation Service - Used for validity CSS
Tested across multiple browsers (Chrome, Safari, Firefox, Internet Explorer)
Tested on multiple mobile devices (iPhone 7, 8, X, Samsung Galaxy, and Xiaomi)
Tested About, Gallery, Volunteering, and Contact links in the menu to make sure it points to each page correctly.
Tested the Donate Button and Social Media icons to make sure they open the correct pages in a new tab on the browser.
Tested carousel arrows move to the next image correctly.
Tested Name and Email input were required.
Tested Name, Phone Number, and Email request the right input. Not allowing you to put numbers on the name or leave the email without a "@".
Tested radio buttons to make sure only one option can be selected and one of them is required.

Deployment

This project has been deployed on GitHub Pages with the following process:

All code was written on Gitpod, an online IDE.
The code was then pushed to GitHub where it is stored in my Repository.
Under the settings section of the GitHub repository, scroll down to the GitHub Pages section.
Under 'Source' drop-down, the 'Master branch' was selected.
Once selected, this publishes the project to GitHub Pages and displays the site URL.
There is no difference between the deployed version and the development version.
The code can be run locally through clone or download.
You can do this by opening the repository, clicking on the green 'Code' button, and selecting either 'clone or download'.
The Clone option provides a URL, which you can use on your desktop IDE.
The Download ZIP option provides a link to download a ZIP file that can be unzipped on your local machine.

Credits

Content

Most of the content was provided from the Instagram page of You in Africa. I just had to translate and made a few modifications to make more sense for English speakers. I also had the fundamental help from the volunteers of the project who helped with beautiful testimonies.

Media

All the images were provided from You in Africa team. I only had to edit some images.

Code

I used a lot of flex-boxes on my project, I searched a lot on Google about it, but this particular video helped a lot to understand it deeper.

Acknowledgments

Thanks to my mentor Excellence Ilesanmi for his time, patience, and excellent advice.
Thanks to the Code Institute Slack Community. Without you, it would have been much harder.
Thanks to my wife for all the support she gave me.

code-institute-submissions / ci-ms1-you-in-africa Goto Github PK

ci-ms1-you-in-africa's Introduction

Table of Contents: