Project_P

Save Hyrcania

View the live project here.

This website is for a group of people who desire to make the situation better in North of Iran for the Hyecanian Forest which is going to be extincted in the NEAR FUTURE.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn how to help the NGOs.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find community links and new updates.

  • Frequent User Goals

    1. As a Frequent User, I want to sign up to the Newsletter so that I am emailed any major updates and/or changes to the website or organisation.

• Design

  • Colour Scheme

    • The two main colours used are taken from forrest Green and white.

  • Typography

    • The Lato 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.

  • Imagery

    • Imagery is important. The large, background hero image is designed to be striking and catch the user's attention. It also has a modern, energetic aesthetic.

• Wireframes

  • Home Page Wireframe - View

  • Gallery Wireframe - View

  • Contact Us(Participate) Page Wireframe - View

Features

• Responsive on all device sizes

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Hover.css:
   • Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
2. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
3. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for Footer icons.
4. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
5. Photoshop: View
   • Photoshop was used to create the logo, resizing images and editing photos for the website.
6. Balsamiq: View
   • Balsamiq was used to create the wireframes during the design process.

Testing

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

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

     1. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a expresive image of the subject with Text.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find if there is a new campagin to join in or get news about the recent activities.

  2. As a Returning Visitor, I want to find the best way to get in contact with the NGOs with any questions I may have.

     1. Here they can fill out the form on the page or are told that alternatively they can message the organisation on social media.
     2. The footer contains links to the organisations Facebook, Twitter and Instagram page.

  3. As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.

     1. The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any newly added gatherings of NGOs in the Forrest or demonstation.

  2. As a Frequent User, I want to sign up to the Newsletter so that I am emailed any major updates and/or changes to the website or organisation.

     1. At the bottom of every page their is a footer which content is consistent throughout all pages.

Further Testing

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.

Known Bugs

• On some mobile devices the small writing in on the big screen becomes bigger and covers all the screen.

• Sometimes footer doesn't show. Footer goes under the photos or other elements.

Deployment

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.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by 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) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Content

• Content was written by the developer and some part of was taken from other websites which were about the NGOs andclimate change activists.

Media

• All Images were gathered by the developer. Mostly from Activists and NGO's websites.

Acknowledgements

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.