This website is a part of my second assignment for the code institute about interactive front-end development. This project is a website that show cases Global Warming and gives you a better understanding about what the causes of temperature increases as well as what the effects are on our enviornment and nature. We talk about the temperature changes since 1880 and carbon emissions that are produced by each individual from the 1950's and also emissions that are produced by fossil fuel.

The last part of the website we talk about the cumulative CO₂ emissions of the 9 worst countries since 1900.

• Create a simple website that is easy to comprehend and also entertaining at the same time.
• Create graphs that are easy to understand and also filled with useful information.
• Applying the usage of Javascript and specially d3.js as well as the different libareries such as:
  • DC Charts
  • Crossfilter
  • jQuery

• To have a better understanding of the story behind the causes of Global Warming and How long back in time it goes.
• To see the effects of greenhouse gases on our planet.
• To give a glimpse of how much carbon emissions are produced by each individual.
• To expand knowledge on which countries are the highest contributors to global warming.

• Climate change activists
• People who are insterested in learning more about global warming
• People that want to have more understanding about how to fight climate change

Press here to view the used wireframes that were made with Baslamiq

For the Design i used a consistent way of styling just to make the website easily readable and also to make sure that the reader is not exposed to too many colors that could lead to bor her/him.

So i used the following style:

• White backgrounds to make the website easy to digest
• 2 different fonts taken from google fonts
  • Oswald for the Navbarand h1 & h2
  • Roboto for the Paragraphs
• Pictures for the first and second page to make it more entertaining
• Black and colored graphs to make them more readable
• Fontawesome github icons to connect the Repowith the website
• Used Bootstrap 4 to create the NavBar
• The bootstrap grid system to make the website responsive on all devices

As a User I would prefer to see a website that:

• Is easily to understand
• Is good to navigate through
• Offers good information that enrichs my general knowledge
• Show the source of the information and also links to more information about the matter
• Has a Navigation bar that is available at all times

For the testing i asked some of my family members and also colleagues at work, They tested the following things:

• The navigation bar and the linking to all 4 pages
• The source links to the paragraphs
• The graphs rendering
• Grpahs modifications
• The return to the top Button
• The linking to github repository
• The website was tested across multiple internet browsers such as:
  • Chrome
  • Internet Explorar
  • Safari
  • Mozzila Firefox

The HTML and CSS code were validated by W3C Validator.

I also tested myself to go with the left aligned text but figured out that the centered text will look a way better and also used Class= "container" just to make the graphs and the text of the graphs centered.

The code was tested with a html code tester to make sure that everything is ordinary.

The website was also tested on mutlipe phones with no problems:

- Huawei Mate 20 pro
- Samsung galaxy s9
- Iphone 8
- Iphone x

This project was develped using Visual Studio Code (VSC).

To deploy the project I used github pages in order to do so:

Please click here to get to the website.

In case you want to clone this porject, please do the following:

1. Login into Github
2. Click on my repository
3. Go to the button "Download" and click it
4. Click on either "Open in Desktop" or "Download ZIP"

I used the bootstrap grid feature to make the website responsive on all devices and also used a sticky Navbar to make it visible for the readers at all times to navigate smoothly through the page.

1. HTML 5
2. CSS
3. Bootsrap 4
4. d3.js
5. DC.js charts
6. Crossfilter
7. Fontawesome
8. jQuery

This project was intially built with Amazon Cloud 9 but after experiencing some problems with the IDE I researched more about different code editors and finally settled with the VS Code because of it's reliability and simplicity.

The pictures on the website were taken from google images.

I used the following Page to get my paragraphs and some facts about global warming.

The data sets were taken from Kaggle.com and dived into different data sets to use it for different graphs.