Food Donation Brazil is a website that helps people, community and NGOs (Non-governmental organization) to provide food to severe people in Brazil. As the last few years after started the pandemic the number of people without anything to eat day-by-day in Brazil increase. This number reported in a Survey from the National Survey on Food Insecurity 2021 provided a context of the enviroument. READ the Report.
The report suggest around 9% of the brazilian population is in severe food insecurity - that is, 19 million people.
The data are available in 3 languages on the website OLHE PARA A FOME (LOOK AT THE HUNGER).
This Website is created for the purpose of completing the first Portfolio Project for the Code Institute's Full Stack Developer course. It was built using the knowledge gained from the HTML and CSS Modules.
But it includes data of real-life and a real purpose of the project.
- To easily understand the main purpose of the site and learn more about the organisation.
- To be able to easily navigate throughout the site to find content.
- To view the website and content clearly on mobile devices.
- To get more information and details regarding how they can help the people.
- To contact the organisations so they can help and get more information.
- To check data regarding NGOs working with food donation for Brazil.
- To check how they can help on this propose.
- To register to help with one or more ways available.
All Pages contain a Navigation menu at the top of the Webpage that directs the user to a new Page to allow users to Navigate the site easily. The Nav Menu is positioned on the center to make user easy navegate in any device.
Color - The Color scheme is Brazil flag colors to convince the user that case is helping brazilian people.
Typography - The Font used in this project is called "Times New Roman", that one is generic font family.
Background - I used the yellow that a strong color in brazilian flag, utilizated in a lot of places to represent the sun in Brazil.
- To show the user how to help with the food issue in Brazil.
- Provide Further information about data food survey after COVID-19 pandemic.
- Gain people around the world to help with this case.
- Users looking to help starving people.
- Users looking to see what's happining in Brazil after COVID-19 pandemic.
- Help each other.
- Familiar with case starving people in Brazil.
-
Navigation Bar
- Featured on all four pages, the full responsive navigation bar includes Logo image, Title of website, Home page,about us page, NGOs page and Contact us page and is identical in each page to allow for easy navigation.
- This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
-
Home Page
- The home includes a photograph with text reference below to allow the user to see exactly which location site and author of this picture.
- This section introduces the user to Food Donation Brazil with details regarding National Survey report and where all this data comes from.
-
About us Page
- The about us page will allow the user to see more details regarding the case and National report survey in Brazil.
- How the user can help in this case and who they can help with data diagram picture.
-
NGOs Page
- This page will allow the user to see some NGOs (Non-governmental organizations) that can help local in Brazil.
- There are contact details and map address from each NGO with link to redirect the user to NGO website when they can find more details.
-
Contact us Page
- This page will allow the user to get details regarging users interested to help with ways available. The user will be able specify if they would like to take part of volunteers, help with money or food. The user will be asked to submit their name, email address and mobile phone.
-
The Footer
- The footer section includes links to the relevant social media sites for Food Donation Brazil. The links will open to a new tab to allow easy navigation for the user.
- The footer is valuable to the user as it encourages them to keep connected via social media.
- In the footer has copyright information with year of the site created.
- Translate this site in other 2 different languages (Portuguese and Spanish).
All pages have been tested across all screen sizes for a responsive experience and web pages have been Styled accordingly. During this time I realised I made some silly mistakes mainly with sizing and had to go back through and change some size values to work correctly.
Once testing was completed and I was happy with the result I used validators to ensure my code was up to standard and best practices. I did this using W3C validator for HTML, Jigsaw Validator for CSS, WAVE (Web Accessibility Evaluation Tool) and Lighthouse in Google Chrome.
As this project is static and contains no back-end functionality at this time, the testing performed was on the visual effects and layout of the Website. Testing has been done on at least four web browsers and all screen sizes down to 320px wide.
All nav links direct to the correct html pages as per their names. The Home page is the exception, this one will redirect to index.html.
All links to external websites open in a new browser.
All links show a difference in Color when you hover over the link.
All images are responsive.
- I have tested responsiveness and functionality on the following devices and browsers:
-
Apple:
- Ipad mini
- Iphone 7
- Iphone 11
- Iphone 12
- Iphone 13 Pro Max
-
Desktops/laptops:
- Dell XPS15 9570 Laptop
- MacBook Air
-
Browsers:
- Chrome
- Edge
- Firefox
- Safari
-
-
HTML
- Some errors and warnings have been found when validated the code through official W3C HTML Validator. All of them has been fixed.
-- About us Page --
-- Home Page --
-- NGOs Page --
HTML - W3C HTML Validator
- Some errors and warnings have been found when validated the code through official W3C HTML Validator. All of them has been fixed.
-
CSS
- No errors were found when passing through the official Jigsaw CSS Validator.
CSS - Jigsaw CSS Validator
- No errors were found when passing through the official Jigsaw CSS Validator.
I used lighthouse in dev tools to test the website in many ways, for example I had to test my text colors contrast and adjust accordingly.
As you can see by the above screenshot I used this to improve the websites overall performance.
Chrome Dev Tools played a huge role in my testing on a day to day basis, I was able to edit my css in real time to confirm the code I'm writing had to correct output as I was coding. It mostly helped when Styling for responsive mode.
I tested all links across all pages to make sure they all redirect to the correct pages. I also made sure that for links leading to external websites I used the target _blank attribute to open a new tab so the user does not lose place on our website.
- Each page has been through wave.webaim.org for accessibility testing.
No bugs identified that needs to be fixed.
I would like more time for styling some of the items to get more responsive.
To create this project I used the Code Institute Gitpod Full Template by navigating here and clicking the button labelled 'Use this template'.
Next I was directed to the 'create new repository from template page' and entered in my repo name, then clicked create repository from template button.
The commands used for commits throughout the project:
git add filename - This command was used to add files to the staging area before committing. git commit -m "commit message explaining the updates" - This command was used to to commit changes to the local repository. git push - This command is used to push all committed changes to the GitHub repository.
-
Log in to GitHub and locate the GitHub Repository
-
At the top of the Repository (NOT at the top of page), locate the "Settings" Button on the menu.
-
Scroll down the Settings page until you locate the "GitHub Pages" Section.
-
Under "Source", click the dropdown called "None" and select "Master Branch".
-
Click Save and the page will automatically refresh.
-
Scroll back down through the page to locate the now published site link in the "GitHub Pages" section. Link
Forks are used to either propose changes to someone else's project or to use someone else's project as a starting point for your own idea. - This is the definition from Github Docs.
-
Navigate to the GitHub Repository you want to fork.
-
On the top right of the page under the header, click the fork button.
-
Fork
-
This will create a duplicate of the full project in your GitHub Repository.
-
Navigate to the Github Repository you want to clone.
-
Click the drop down menu labelled "Clone".
-
Either Download the ZIP file, unpackage locally and open with IDE (This route ends here) OR Copy Git URL from the HTTPS dialogue box.
-
Open your developement editor and open a terminal window in a directory of your choice.
-
Use the 'git clone' command in terminal followed by the copied git URL.
-
A clone of the project will be created locally on your local machine.
- GIT
- For version control, commiting and pushing to github
- GITPOD
- The IDE used to code this website
- GITHUB
- Used to store repositories, files and images pushed from gitpod
- Am I Responsive
- Used to test responsiveness of the website at different screen sizes
- CHROME Developer tools
- For checking compatibilty, troubleshooting and editing code
Most of the content and data on this website is from the below location:
Olhe para a fome (Look at the hunger)
National Survey of Food Insecurity
Banco de Alimentos (Food Bank)
Photo by Joel Muniz on Unsplash
I'd like to thank my mentor Benjamin Kavanagh for his guidance and support throughout my project.
HTML - W3C Validator
Validating my HTML
CSS - Jigsaw Validator
Validating my CSS
Chrome Lighthouse and Chrome Developer Tools
To check website performance
GitPod
Dev Environment using GIT to commit changes to Github
GitHub
Stores repository and version control
I am responsive
Screenshot the website to a responsive design
Character Count
Count the character to add commit with max 50 characteres
Comment best-practice
See best practice to add a comment in your code
CSS Reference
Library for CSS code
Markdown Cheatsheet
This is intended as a quick reference and showcase
WAVE
WAVE Web Accessibility Evaluation Tool for accessibility validation