Future_Forest / My-first-project1

This is a website For Eco friendly enthusiast's,a small newly non-profit organisation indepented group trying to make a big impact to deforestation globally. The goal for the company is too spread awarness and too create eco friendly areas for our future to come by recieving donation's & volunteer groups.

The aim of the project is to build an easily navigatable, Responsive website using HTML and CSS.

Prototype site

• Justinmind.com was used to make the prototype at the beginning

Prototype's of all pages

• Home-page

• About-page

• Donate-page

• Gallery-Page

*Logo & Navigation Bar

• Footer

• SignUp-Page

Colour Scheme

• I used rgbacolorpicker.com to choose a color that would be easily readable and visually appealing to users , suitable for the overall look of the site.

Typography

• I used Google fonts to select and import the fonts that were used on the site which where ispired by love running walk through lesson.

Logo and Navigation Bar

• The logo and navigation bar is located across all pages ,The navigation menu brings you to the correct page when clicked, too return back to home-page you can also click the logo across all pages. The logo has a hoover effect for making it easier for the user to understand that its clickable, Too make the website more responsive on the navigation on smaller mobile devices i used w3shools to make the hover effect and used code to help with this.

The Main video of home-page

• The home-page video is only located on the landing page when the user first enters the site.

The Footer

• The footer displays across every page of the site and displays social media icons with links to the corresponding social media website to allow the user to fully explore all platforms easily i took this idea from the love runnning project with some slight changes to suit my site.

Homepage

• This is the landing page that the user will be brought to when first entering the site.

• Homepage

• Homepage Footer

About Us

• This page allows the user to get a look into the background of the reason why it started & its ambitions for the future. I used flexbox to make the website more easier and to make it more responsive i used a guide from csstrick.com to be able to implement this to suit my site.

• About Us Page

Donate

• This is were the user can see what way they can donate and help them on the future for our climate and forest.I used flexbox to make the website more easier to make responsive , I used a guide from csstrick.com to be able to implement this to suit my site.

Gallery

• This is were you can find our photographers 4k photos taken from pexels.com and upslash.com , The code was taken from 3wschools.com to make the slide show responsive with a few slight changes to fit the site.

• Gallery slide Responsive

Gallery Embedded video

• This is located under the slide show image on the Gallery ,to show the true beauty of our forest & wildlife in a 4K video .The Video was taken from Youtube and is play/stop/mute for user preference when clicked. This video was taken from Youtube.

• Gallery Embedded Video

Signup Form

• This is were the user will sign up to be able to Donate and Volunteer to help fight climate change once they make there account they then will have the options to Donate, Gift a tree , Volunteer

• Signup Form

• This form was taken from a youtube Tutorial with a few slight changes to make it more suited towards the overall look my Website -

Features Left to Implement

• Create the page that is made after you have signed up too the site showing you the process of Donations/Volunteer work and community.

• I wanted to add a background Image behind the slider gallery but i could not solve the issue id like to come back and solve this.

• Id like to make the images and home page video to change with the seasons of the year.

• Create an app with gps of where the trees were planted when you gift a tree.

• Take my own photos of trees and landscapes to get better Qaulity Images for across the site.

HTML5

• HTML5 was used to create the structure of the site.

CSS3

• CSS3 was used to add styling to the site.

Font Awesome

Font Awesome was used to import icons used across the site.Fontawrsome.com

Github

Github was used to store the project's code after being pushed from Git.

Gitpod terminal was used to commit my code using Git and push it to Github.

Git was used for version control through the Gitpod terminal.

Functionality Testing

When testing my site i used Google chrome & firefox which everything loaded correctly for me ,I also had my friends and family test it on theres which there was a problem with loading the icon on the logo and some problems with the video not loading up correctly. This problem

• Jigsaw validator was used to test the sites css which passed with no issues.

• W3C validator was used to test the sites html which passed across all pages with no issues.

• Lighthouse Accessibility - Dev tools test

  • Home-page
  
  • About-page
  
  • Donate-page
  
  • Gallery-page
  
  • Signup-page
  

  • Bugs left to fix I would like to come back and figure out what is causing the issues with the performance and others that are color orange and to fix these to make the results better.

  • There seemed to be a bug with the Logo Icon (Tree) it didnt seem to be loading on some mobile devices , issue unsolved as i had ran out of time and could not find the cause i would like to come back and fix this.

Deployment

This section should describe the process you went through to deploy the project to a hosting platform (e.g. GitHub)

The site was deployed to GitHub pages. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab From the source section drop-down menu, select the Master Branch Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - Future_Forest P1

Local Deployment

In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:

git clone Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

Credits

code

• Code for the main video background was inspired from Code Institute's Love Running walkthrough project with some changes to suit this website structure.

• The footer code was also taken from the previously mentioned walkthrough project with some changes added to best suit my project 1.

• The font styles was also taken from love running site which i really liked because its easy to read.

• The homepage video , the code used for this is from w3schools i used this to get a understanding of how to implement videos onto html,css.

• Too make the website more responsive on the navigation on smaller mobile devices i used w3shools to make the hover effect and used code to help with this - hover effect w3schools

• I used flexbox to make the website more easier and to make it mote responsive i used a guide from csstrick.com to be able to implement this to suit my site. to create the about and donation page - flexbox tricks

• The code was taken from 3wschools.com to make the slide show responsive with a few slight changes to fit the site -slideshow

• This form was taken from a youtube Tutorial with a few slight changes to make it more suited towards the overall look my Website - FORM tutorial

• All photos used on throughout the site are used from www.pexels.com and www.upslash.com