Click here to view the live project.

Click here to view the repository.

• User Experience (UX)

• Features

• Technologies Used

• Testing

• Deployment

• Credits

• Acknowledgements

• Site Goals

  Global Warning is an informative front end website explaning the major causes and effects that everyone is facing due to Global Warming. It also describes few solutions which can help maintain the balance. Additionally, it also provides a feature for interested users to signup and receive weekly notifications for any updates to the website. The site is targeted towards everyone to create awareness of the consequences and the measures everyone can take to tackle this global issue.

• User stories

  • First Time Visitor

    1. To easily understand the main purpose of the site.
    2. To be able to easily navigate throughout the site to find content.
    3. To locate their social media links to see their followings on social media.

  • Returning Visitor

    1. Easy access to the information about the causes, effects and solutions about Global Warming.
    2. To instantly know the navigation.

  • Frequent User

    1. To sign up to the Weekly Newsletter to receive updates to the website.
    2. To check to see if there is new information available.

• Design

  • Colour Scheme

    The main colours used are Dark Chocolate, Sinopia, Green Lizard, Deer, Black and White.

  • Typography

    The Montserrat font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Merriweather font is used for headings with Sans Serif as the fallback.

  • Imagery

    Images are important to strike and catch users attentions. Large background hero image is used. Also images are used to describe the causes, effects and solutions.

• Wireframes

  • Landing (Home) Page Wireframe - Landing-Page

  • Causes, Effects and Solution Pages Wireframe - Causes,Effects,Solutions

  • Sign Up Page Wireframe - Sign-up

• Navigation Bar

  • Featured on all pages, the full responsive navigation bar includes links to the Logo, Home page, Causes, Effects, Solutions and Sign Up 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 to the previous page via the ‘back’ button.

  

• The landing page image

  • The landing includes a photograph with text below to allow the user to know about Global Warming.

  

• The Grid

  • The grid has images, brief information and responsive nagivation to the Causes, Effects and Solutions pages.

  

• The Footer

  • The footer section includes link to a short video giving more information about Global Warming. The link will open to a new tab to allow easy navigation for the user.
  • It also includes links to the relevant social media sites for Global Warning. These links will also open to a new tab to allow easy navigation for the user. And is valuable to the user as it encourages them to stay connected via social media.
  • The footer is identical on each page for easy access.

  

• The Causes

  • This page inlcudes explanation and the major causes of Global Warming.
  • It also includes supportive images and short description about each making it easier for the user to understand.

  

• The Effects

  • This page inlcudes explanation and the major effects of Global Warming.
  • It also includes supportive images and short description about each making it easier for the user to understand.

  

• The Solutions

  • This page inlcudes explanation and few solutions of Global Warming.
  • It provides simplified ways to tackle the issue which can be followed by each one in their day to day life.

  

• The Sign Up Page

  • This page will allow the user to get signed up for weekly newsletter. The user can sign up by providing basic details like full name, email address and comments.
  • Once signed up the user will be receive latest updates about the website.

  

• Future Enhancements

  • Add blogs and live news for latest updates.
  • Add information about upcoming events to spread awareness and raise funds for affected areas/regions.

• Languages Used

  • HTML5
  • CSS3
  • MARKDOWN

• Frameworks, Libraries & Programs Used

  • Google Fonts:
    • Google fonts were used to import the font into the style.css file which is used on all pages throughout the project.
  • Font Awesome:
    • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
  • Git
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  • GitHub:
    • GitHub is used to store the projects code after being pushed from Git.
  • Balsamiq:
    • Balsamiq was used to create the wireframes during the design process.

The W3C Markup Validator and W3C CSS Validator were used to validate every page of the project to ensure there were no syntax errors in the project.

• Following errors were found and fixed while validation:-

  • (HTML) No space between aria label attributes and stray end tags.

    • Error
    • Results

  • (CSS) Value Error : left only 0 can be a unit. You must put a unit after your number : 5

    • Error
    • Results

• Lighthouse Results

  • The Landing(Home) Page

    • Desktop
    • Mobile

  • The Causes

    • Desktop
    • Mobile

  • The Effects

    • Desktop
    • Mobile

  • The Solutions

    • Desktop
    • Mobile

  • The Sign-Up

    • Desktop
    • Mobile

• Further Testing

  • The Website was tested on Google Chrome, Microsoft Edge, Safari and Mozilla Firefox browsers.
  • On Firefox browser, the form on Sign-Up page was distorted. This was fixed by adjusting the height of the white background. Commit message
  • The website was viewed on a variety of devices such as Desktop, Laptop, iPad, iPhone 6, 7 & 8.
    • On some mobile devices the Hero Image on home page and sign-up page pushes the size of screen out more than any of the other content on the page. This was fixed by adjusting the height of the hero image. Commit message
  • A large amount of testing was done to ensure that all pages were linking correctly.
  • Friends and family members were asked to review the site to point out any bugs and/or user experience issues.

• Known Bugs

  • There are no outstanding issues found.

• GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Main Branch".
5. Click "Save".
6. The page will automatically refresh and provide you with a link to the Live GitHub Page for the repository.

The Page can sometimes take longer to load and go live. This is an expected behaviour.

• Making a Local Clone

  1. Log in to GitHub and navigate to the GitHub Repository
  2. To clone the repository using HTTPS, click Code and copy the address.
  3. Navigate to Git Bash and clone the repository.
  4. Press Enter and your local clone will be created.

• Code

  • Love Running walkthrough project was referred for designing of the webpages and technical implementation.
  • W3 Schools was used throughout the project majorly for styling and alignment purpose.

• Content

  The following websites were referred to gather information about the project.

  • National-Geograhic
  • Wikipedia
  • Tree-Hugger

• Media

  All images used within this site are free and do not incur any copyright issues. These images have been provided by following websites:

  • Pexels

    • Blue-Globe
    • Garbage
    • Industrialization
    • Oil-Driling
    • Deforestation
    • Hurricane
    • Wildfires
    • Recycle
    • Switch-Off
    • Cycling
    • Led-Light
    • Tree-Plantation
    • Classroom
    • Planet-Earth

  • Stockvault

    • Earth-Protection
    • Industry-Smoke
    • Melting-iceberg
    • Earth-Friendly

  • Pixabay

    • Fertilization
    • Climate-change
    • Thermometer
    • Woolly-Mammoth

  • Unsplash

    • Melting-Glaciers

• My Mentor for continuous helpful feedback and advises.
• Slack community and my fellow slackers for being available at any given time of the day.