Water is the most abundant resource on planet earth. Despite this, how often do we stop and ask ourselves; "what is it?", "how is it used?", "what's its current state in planet earth" or "what's so special about it?".

This project aims to answer some of these questions, but also open the audiences eyes to appreciate issues with water today. It ends with portraying some solutions that organisations in the world today are working on. So please, click and welcome yourself through the journey.

This website is for those looking to find out more general information about water. The site does this by allowing the user to go through a journey.

As a water enthusiast, I want to know more about water, so that I can appreciate the liquid a bit more.

As someone who is worried about climate change, I want to understand the challenges we face as a result of water pollution so that I can find out what I can do about it.

As someone who cares about water poverty, I want to know what the issues we face in the world are, so that I look for solutions to these problems.

As a student wanting to research about water, I want to learn about the substance, its properties, the problems that water encounters every day and how we are trying to solve these issues. I want to do this to improve my knowledge on water and appreciate what organisations are doing to improve the earth.

The mock-up for the project was designed on paper. Please access the url to view: https://drive.google.com/open?id=1UntFSllJfbt40sUt2_rEOD2N_3rkxcBZ

The beginning of the project shows a navbar with a "drop" as the logo. This "drop" links to the top of the page.

The sections have scroll-spy links on them for quick navigation.

As you scroll down, you encounter three positive images. The first is a child drinking water, which everyone has experienced. The second is two children playing at the edge of a beach, jumping on the sea. The third is a group of school children experiencing joy at a water pump.

The next section is a few facts about water in text form.

These facts are highlighted deeper in the video below.

The next section is about the chemical properties of water and examples of how these present themselves in nature.

The "challenges" section identifies issues with water in the world today.

Naturally, the next section presents solutions to some of these problems using a navbar. Each section shows a different company or project.

Finally the "contact us" section is presented, whereby users can fill out a form to get in touch.

The siter closes with a copywrite bar to ensure symmetry from top to bottom.

• The video feature allows users to appreciate water facts in an entertaining way. It uses visuals and sound to portray the message.
• The text summary, image and table allows the user to appreciate the chemical properties of water in a summarised text form.
• The solutions feature presents the user with concise information about water projects across the globe. It was made in sections so that the information was not a burden to read.
• The "contact us" section allows for the user to ask for feedback, request more information or even contact the makers to help contribute to the website.

In addition, you may also use this section to discuss plans for additional features to be implemented in the future:

• Another feature idea could be a "live news feed" of water news around the world. This could provide the user with "live" snippets of water news.
• Also, a "world water status" map could be used as an interactive tool. This could be designed as an interactive map that the user explores to find out information on the status of water poverty in countries across the world.

• The technologies used include

• [Html]

• [CSS]

-[Bootstrap] (https://getbootstrap.com/)

• JQuery
  • The project uses JQuery to simplify DOM manipulation.

The sections were build individually. This allowed for testing each part if the code did not run as expected. The main issues arose with positioning, but these were resolved through trial and error of placement. The biggest issue with the overall webpage was the scrollspy. The bootstrap code was used and an "offset" was defined to ensure the navbar links navigated to each section heading. This did not initially happen, and so line breaks were used as a compromise. Another issue encountered was the resizing of the images. It was therefore decided to ensure auto resize based on the screen demensions. Using the chrome browser, these were tested. The navbar links were tested in various screen sizes to ensure it was adaptable.

The "contact us" page was made as a dummy and so no testing was required.

Users tested the webpage and commented on grammar and formatting in order to enhance the user experience

The website was tested on browsers including; chrome, internet explorer and firefox.

The website was tested on different devices including; android phones (Huawei mate 20 pro and samsung galaxy s8) and the amazon kindle.

Using the chrome browser, different screen sizes were tested. These included;

The project was deployed to a Github repository, where it is available for public view: https://mismiles.github.io/project-water/

• The text for the World Facts section was taken from iWaterPurification

• The text for the Chemical Properties section was taken and summarised from: -(1) https://www.usgs.gov/special-topic/water-science-school/science/surface-tension-and-water?qt-science_center_objects=0#qt-science_center_objects) -(2) https://chem.libretexts.org/Bookshelves/General_Chemistry/Book%3A_Chem1_(Lower)/07%3A_Solids_and_Liquids/7.03%3A_Hydrogen-Bonding_and_Water -(3) https://chem.libretexts.org/Bookshelves/Physical_and_Theoretical_Chemistry_Textbook_Maps/Supplemental_Modules_(Physical_and_Theoretical_Chemistry)/Physical_Properties_of_Matter/States_of_Matter/Properties_of_Liquids/Unusual_Properties_of_Water -(4) https://courses.lumenlearning.com/introchem/chapter/the-structure-and-properties-of-water/

• The text for the Challenges in the world today section was taken and summarised from -(1) https://www.wateraid.org/facts-and-statistics -(2) https://www.unwater.org/water-facts/ -(3) http://wsscc.org/ -(4) https://www.skyjuice.org.au/30-world-water-facts-know/

• The text for the Solutions section was taken from: -(1) [SusWASH] (https://washmatters.wateraid.org/suswash) -(2) [UNWATER] (https://www.unwater.org/) -(3) [Circle of Blue] (https://www.circleofblue.org/about/) -(4) [The Water Project] (https://thewaterproject.org/about_us) -(5) [The SeaBin Project] (https://seabinproject.com/about-us/our-purpose/)

The photos used in this site were obtained from various sources:

• Photos for the image carousel were obtained from: -(1) https://andoverandvillages.co.uk/wp-content/uploads/2017/10/www.romseyandvillages.co_.uk_images_child-drink-water.jpg -(2) http://www.metrokids.com/Blogs/June-2015/5-Tips-to-Keep-Kids-Safe-Around-Open-Water/kids_ocean_40713_med.jpg -(3) https://www.pumps-africa.com/wp-content/uploads/2018/07/New-desalination-technology-to-turn-oceans-into-fresh-water.jpg

• The image of the h20 molecule was obtained from: https://d2jmvrsizmvf4x.cloudfront.net/HY4dPvhTTWmK0LkADVO8_H2O_Lewis_Structure_PNG.png

• The logos for the "solutions" section were obtained from: -(1) https://washmatters.wateraid.org/sites/g/files/jkxoof256/files/a-diagram-showing-the-ingredients-of-a-strong-wash-system.png -(2) https://vfs.cloud9.us-east-1.amazonaws.com/vfs/32ef7c81817346129785c29c625e7740/preview/images/unwater.jpg -(3) https://www.circleofblue.org/wp-content/uploads/2018/06/Circle-of-Blue-Water-Speaks-600x139.png -(4) https://thewaterproject.org/images/twp-resp-logo.png -(5) https://seabinproject.com/wp-content/themes/seabin/images/logo.png

• The video on water was obtained from: Youtube Video

• I received inspiration for this project from drinking water.
• Additionally, reading the issues on water worldwide has changed my perspective on how to manage water issues.