View the live project here.
Although we are living in the 21st century with enormous technological and industrial developments, many people and economies are suffering from a shortage of freshwater. This project aims at addressing the lack of freshwater in vulnerable areas by raising donations, encouraging more academic research in this field, providing policymakers with potential solutions, and absorbing valuable members and volunteers.
We tried to design this project with concise content and a direct message. The pages are highly responsive and work on different devices.
This website belongs to the philanthropic and non-profit organization named WSAF (Water Scarcity Action Force).
Business Goals
The site users are divided into two groups:
- People who are willing to contribute to combating climate change effects. They reach their goal by donating money or doing volunteering jobs via this website.
- Researchers, scientists, and job seekers in environmental fields. They achieve their goals by applying for the available positions and vacancies.
The WSAF organization is interested in raising donations and absorbing volunteers and members to carry out their environmental and conservation projects. The final goal is addressing the water scarcity problems.
User Stories
-
I want to make sure that my money is getting spent in a reliable and helpful way.
-
I want to know the projects that I want to contribute to them at a quick look.
-
I want an easy navigation throughoutthe website to get the important information.
-
I want to see the contact information for applying for the jobs and getting to know the projects.
-
I want to get updates on projects on a regular basis.
-
I want to get updates on the newly announced job oppurtunities.
-
I want to know if the deadlines have been extended.
I designed this website based on these criteria:
- The message of the website is clear and easy-to-read. There should be no need to scroll too mush to find the purpose of the organization.
- It is simple and decent at the same time that I can both manage coding and comming up with a nice interface.
- It is easy-to-maintenance
- It includes eye-catching media.
- The contents are convincing for the users.
- The general needs of the owner and users are meet thoroughly.
I designed four pages (home, vacancies, your contribution and contact) with backgroound images for each page and project pictures for home page. the background picture of the donation and contact page change on smaller screen sizes to fit the screen. There are a fixed navigation bar, header, footer and sections for each page.
Although the primary wireframe does not exactly look like the final page, we based our design on that.
For each page and section I tried to find the best contrast between the images and the texts. I also changed the pictures for different screen sizes whenever I found better combinations of colors and images.
- The images of the home page were selected based on the real projects to accurately convey the message of the website.
- I implemented the Sans Serif, Roboto and Exo fonts of the google font collections.
- I used the Icons of the FontAwesome website to make its interface more apealing.
All pages have a fixed navigation bar on top of the page that can be accessed throughout the entire page, and users can go to their desired page at any time. The navigation bar collapses on small screen devices (tablets and cell phones) and works as a toggler, and also the logo of the company changes to its acronym. Moreover, by clicking on the name (or logo) of the company, users can navigate to the Home page.
- The Home page contains an overlay (blurred) image in its header with the company purposes and slogans sharper on the right side. The company slogans disappear on smaller screens (only on medium and large screens).
- Completed field projects: Photos of the successful projects in Asia and Africa are shown on a section with image captions with brief description.
- Research topics: The pictures and the main topics and a short description of the research conducted in different case studies are shown in the next section.
- Vacancies’ announcement: A list of available jobs and volunteering positions and the corresponding application process. We used a table to list the jobs that the color of the rows of the table change by hovering on them.
- This page contains different ways that users can donate money to the WSAF.
- Contact information: Provide users with the WSAF's social media and contact information.
- There is aslo a form that users can directly type there message.
- Raising money: Adding a “Donation” section that navigate to the Your Contribution page.
- Raising money: Adding a “How to contribute” section that navigate to the Vacancies page.
- The contact info of the WSAF
- Providing a direct payment terminal
- the form in contact page should include an id to save the messages
- Providing each project with a separate page containing more details
- providing a page for the upcoming projects
- Bootstrap 4.5 - A mobile-first responsive library used to construct various parts of the project, including the Navbar, Modal Forms, Featurettes and Cards.
- GoogleFonts - Exo and Robot and Sans-Serif fonts
- FontAwesome - For Icons
- Balsamiq - for generating the wireframes
- ami I used this one to check the responsive capability of the website.
- Github - To store the code and use of Github Pages to deploy the website.
- Gitpod - The primary version control IDE for development to further push and commit code to Gihub.
- Code Institute Course Content - Some codes copied and modified from the course materials.
- ChromeDevTools - As the primary source of bug and error detection.
- W3Schools - I found this website a very helpful tutorial.
- StackOverFlow - I found the answers to many of my questins in here and helped me to fix the errors.
I mostly checked the functionality of the website with the Chrome inspection tools. I made sure that all links work properly and the external ones open in a new page.
HTML - W3C - Markup Validation
There was two errors only in Home page:
- I removed h2 and h4 elements from the ul element and put al of them in a div to solve this error
.png)
CSS - W3C - CSS Validation
No error found in the css file although There are warnings related to the Mozila browser compatibility:
I encountered other errors in the project by using the chrome inspection tool that I tried changing the css properties in a live procedure to fix them. My main issue was related to postioning and display property that the positions of the elements did not fit as I expected. Finally I managed to fix them by trial and error in different screen sizes.
- Since I already had a Github account, I just opened my profile and created a new repository with the Code Institute's template.
- I opened my newly created repository in Gitpod as the main IDE that I used to write the codes.
- I add and commit mt repository quite often with these codes ("git add ." and git commit -m message") that all messages and process are tracable in Github because I pushed the repository there every day.
- Then in Github, I put the Master Branch as the source to create a live URL.
- Now the code is accessible through the clone button in Github as a URL or a file.
- The full repository template of Code Institute was used for the initial wbesite developement: Gitpod Full Template
- The initial code for the form in the contact page and the social links hover style on the footer were copied and modified from the Code Institute course material.
- The photos of the projects on the Home page was downloaded from the Stockholm Resilience Center which is a research institute belongs to Stockholm University and conducts research in the planet resilience.
- The photo of the Vacancies page was downloaded from Undraw
- The photos of the Your Contribution page were downloaded from this source and this source
- The photos of the contact page were downloaded from this source and this source
- I appreciate all of the helps of Nishant Kumar, the Code Institue mentor, that without them I was not able to complete this project.