code-institute-submissions / zerofoodwaste Goto Github PK

GitHub Repository Link

Live Page Link

Zero Food Waste is a non-profit association whose mission is to contribute to reducing Global Food Waste.

For this purpose 1) it allows companies like restaurants and supermarkets that want to donate food to get in touch through it with charities and other organisations that could use this food. 2) offers information and a newsletter to raise awareness about this problem and inform users about related events.

The website provides general statistics and information about Worldwide Food Waste and their future predictions and a quiz to keep users engaged while learning. Also uses the Google Maps API to display the countries that waste the most food globally. About Us Page contains info about the company; its history, mission & values and their current & future actions to fight this problem.

• Understand the main purpose of the site and get to know the company.

• Easily navigate the site on all type of devices

• Check Social Media Sites to know if the organisation is reliable.

• Get Quizzed about their Food Waste Knowledge and learn new info in an enjoyable way (Quiz, Page).

• Be able to contact the company to donate (businesses), receive donated food (charities), collaborations and general queries.

• Get Information about the organisation; its history, accomplishments and future plans.

• Have the option to sign up for the newsletter to receive invitations to special events and tips about how to reduce Food Waste.

• Increase Brand Awareness and Brand Image.

• Get as many entities and people as possible to contact the company for exchanges of food, possible collaborations, and events.

• Grant access to visitors to relevant Food Waste statistics that will raise their awareness about the topic and contribute to reduce their ecological print.

The two main colours used are White and Green. Black is also a common complementary color, which was mainly chosen for buttons.

The Lato font is the main font of the website with Arial and sans-seriff as fallback. I opted for Lato because it's a sans-seriff that looks stylish and is easy to read.

I used a lot of Food Waste/Food Images, mainly to make the website look better and as background for the content.

• I thought it was better to include the general information about the company like its mission, history and so on in a separate section called about us. This way it won't deviate the attention of visitors from the main purposes of the page and the website will be better structured.

• Prefered to create a quiz that starts after pressing a button instead of ocupying a lot of space by displaying all questions on the quiz starting page vertically. I think it looks way better and visitors only see the most relevant part of the quiz for them for the moment.

• I though it was better to include info about the company partners in the about page instead of in the contact page.

• Header Logo – Present on every page, clicking on it allow users to access the home page.

• Header Navigation Bar – Allows visitors to easily navigate all the website's pages and access the desired section/information.

• Footer – Social Media Links and logo to go back to the home page.

• Informational Blocks – Relevant Food Waste Statistics and company info contained in parallax formated sections with a background image.

• Abous Us Info – The section about us features diverse info about the organisation.

• Contact Form - Allows visitors to collaborate and/or subscribe to the newsletter.

• Quiz - Tests visitor knowledge and gives them a score based on their number of correct answers.

• Google Maps Section - Shows the biggest worldwide contributors to the Food Waste problem and general info about them.

• An Events Page with external and internal events visitors can attend (Conferences, Meetups, Fairs, etc).

• Extend it to Waste Recycle and facilitate ways for people to recycle more.

• A Personalised Section with Log In/Sign Up functions. There businesses can publish ads about Food they want to donate and get in touch with charities/NGOs.

• Create the newsletter and automate email sending.

• HTML5

• CSS3

• JavaScript, JQuery

• GitPod: Used as the Development IDE.

• Bootstrap4: layout to make the form responsive, used a CDN to include it in the project.

• FontAwesome: Great Icons Resource.

• Auto-Prefixer: Extension that adds all necessary extensions to the webite so that it works properly on all major browsers.

• Unsplash: Website that offers high quality free images.

• Realfavicongenerator: Used to create the Favicon.

• FreeLogoDesign: Tool used to design the logo.

• Pencil: Great Wireframing Software.

• EmailJS: To make the form work and receive visitors requests.

• Google Maps API: Used to display the map of the biggest Food Wasting Countries. I also restricted the API request, so that only my website can make requests.

The code was validated with the W3C Markup, W3C CSS and JSHint Validator Services to look for syntax errors. The website passed all tests succesfully with no errors. An excel file with info about the tests performed was included in the repository.

• Understand the main purpose of the site and get to know the company. The site contains sufficient info on the About Section.

• Easily navigate the site. The site was tested covering the main type of devices and browsers. Also tried to made it as simple as intuitive to navigate as possible. TC001, TC002, TC003 and TC004.

• Check Social Media Sites to know if the organisation is reliable. Added Social Media buttons on the footer. TC005 Test.

• Get Quizzed about this topic and learn new info in an enjoyable way (Quiz, Page). TC007, TC008 and TC009.

• Be able to contact the company to donate (businesses), receive donated food (charities), collaborations and general queries. Can be done through the form, TC012.

• Get Information about the organisation; it history, accomplishments and future plans. Info Present on the About Page.

• Have the option to sign up for the newsletter to receive invitations to special events and tips about how to reduce Food Waste. Can be done through the form. TC012.

Complete Test Info can be found here (https://santiagoyanezferreiro.github.io/ZeroFoodWaste/assets/TestResultsMS2.xlsx)

It is an .xlsx file and will a compatible program like excel or google docs to open the file.

• The Site was tested on Google Chrome, Explorer, Opera and Microsoft Edge.

• The website was also checked on desktop, tablets and several phone devices (Iphone, Xiaomi, Xperia).

• All links were double checked to ensure they work as desired.

• Friends were also asked to check the website and give feedback about the site and any errors when found.

• It took me a while to format properly the containers. These two pages also didn't look too good until I implemented a parallax effect.

• The partners images in the about section didn't look too good initially since I just placed the images with the src. Improved a lof by setting them as a background image.

• EmailJS was not working in the beginning and took me a while to configure it and discover since there were minor mistakes in the code and wasn't used to the API.

• I also needed time and a lot of internet searches to make the Maps API work displaying the information correctly for each country.

The project was developed using GitPod, committed to git and pushed to GitHub. It was then deployed with Github pages from its GitHub repository following these steps:

• Log in into GitHub.

• Select the repository and open settings.

• Scroll down to the GitHub Pages section and click Master Branch. With this, the website is deployed.

• Go to the GitHub pages section to get the website link.

• Type ‘cd’ in the terminal followed by the desired directory name where it will get cloned.

• Click on ‘Code’ (the green drop-down button on the top of the page).

• Copy the last link and type and type ‘git clone’ followed by the copied name.

Used the Bootstrap library to make the site responsive. Also took advantages of its built-in classes, for example to make the nav menu responsive.

• Social Media Icons are from Font Awesome.

• Bootstrap Navbar Documentation helped me to create the navigation menu.

• Pictures are from Unsplash.com, Pexels and Google Images.

• The favicon was created using the resource Realfavicongenerator

• My mentor Narender Singh, was of great help in this project and introduced me to good changes and techniques to implement on it.

• I checked projects from other students to get an idea of the scope of the project and as inspiration for my project.

This is a fictional company and was created as my MS2 Code Institute Project.