- This is the main climate change website, a platform designed to help individuals achieve their goals and make positive changes in their lives by creating awareness of the issues of global warming and how making some simple lifestyle changes can keep our nautral habitat and earth safe which will help improve our planet.
- This website is responsive and accessible on a range of devices, making it easier for users to navigate and find valuable content.
The site address is: Climate Change
This website targets audience around the world, because of its useful insight, ideas and information. Children and Adult age 10 and above habe found the website infomative and encouraging and finds great insight to help make positive lifestyle change.
-
The purpose of the Climate Change website is to create awareness of issues affecting the planet and how daily lifestyle change can reduces the effect of these cause globally.
As a user I want:
- A website that is easy to read and navigate.
- Clear information about the website; purpose and need of the site, how to access content on the site.
- To navigate the site easily and option to sign-up for update and information.
As the develpoer of the wesite I want:
- To provide clear and relevant information regarding the website.
- To provide a place for people to ask any questions they might have regarding climate issues.
- To provide information on how to reduce/stop the effect of cimate change.
-
- As a First Time Visitor, I want to easily understand the purpose of the website.
- As a First Time Visitor, I want to be able to easily navigate throughout the website to find content.
- As a First Time Visitor, I want to locate their social media links to follow them on social media.
-
- As a returning Visitor, I want to find new information about the website.
- As a returning Visitor, I want to find the best way to sign up to newsletter on the website.
- As a returning Visitor, I want to find new updates and links to information.
-
-
As a Frequent Visitor, I want to check to see if there are any newly added resources.
-
As a Frequent Visitor, I want to sign up to newsletter or events to stay updated with information about improving our planet.
-
As a Frequent Visitor, I want to find the best way to locate the events hosted on the website.
-
-
To attract more people who would want to collaborate to bring this project to the world.
-
To secure sponsorship opportunity for future development of the project.
-
To have new subsriber to increase our targerted audience.
-
The colors used are primarily derived from the logo, the hero image, and other images in the website, to create a cohesive contrasting color scheme from beginning to end. I used constrast grid.eightshapes to identify the three colors (in the middle) for background and images and add another two colors that fit well with the other three.
-
The website primarily uses a combination of vibrant colors, including grey and white to create an energetic and engaging visual experience.
-
#d6ffff
-
#41a323
-
#333
-
#ffffff
-
#33831b
-
A mixture of all the above colours were used throughout the site.
-
-
All of the fonts were sourced from the Google Fonts.
-
Main font: Lato.
-
Lato is used as the main font, for all paragraphs,
and links in navbar and footer. lato was chosen because it has modern, clean, and simple style, and following the recommendation in Google fonts of popular pairing font with oswald. -
Oswald and Roboto. Both front are used as the header for the website. It was chosen first, since I wanted to choose a beautiful and impactful font for the heading to give a great first impression of the website from the user’s perspective.
-
Lato, Oswald and Roboto were used as main and fallback font. Lato and Oswald are clean, modern and vibrant font that adds to the overall aesthetic and readability of the content.
-
-
- These images were sourced from Freepik, and Unsplash.
- Hero Image is chosen because it’s blends with the tittle, so the heading text can stand out more, and it’s giving a clean and fresh feeling of living “climate change”.
- All of the images in the website were taken from a free stock-photos website, as representations of what’s inside the shop, to provide clear imagery to the user and let the user know what to expect.
-
Wireframes were created using balsamiq to design the navigation and interface of the website. The developer designed it with a good UI design in mind, which allows immediate interaction in first-time learning, and perfectly meets the needs of the intended audience.
The wireframes can be found in the link below:
-
-
The Navbar consists of a Logo on the left side that links to the top of the site, and three navigation links (nav-bar) on the right side that link to the sections. It occupies 100% width of the site.
-
The Navbar is fully responsive on all device sizes. On desktop view, the user can see all the
links. -
The Nav-links have an active state which changes according to which section the user is currently looking at.
-
The Nav-links have a subtle hover state when the user hovers over them.
-
The Navbar is fixed at the top of the user’s device screen, it follows along when the user scrolls down.
-
-
The home page has all the information and detailed ideas about the project.
-
Hero image.
-
The backround image, shows the adverse effects of the cause and danger of climate change.
-
The two coloured effects shows how quickly actions needs to be taken to keep our planets safe.
-
The choice of hero image showing the liveness and health of the planet through the bubbly tree
full of life and then turn into an empty and withered tree portrays a message about the effects of climate change. which makes it a perfect choice for the hero-image. -
About and Purpose.
-
Easy to read and visible purpose of the site can be seen after the hero image.
-
Causes and Effect.
-
The effect of change can be seen after the purpose of the site.
-
Combacting Climate Issues.
-
Likely solution to the climate change isssues were highlighted in this section.
-
-
- This section contain Images of some effects of climate and how it afffects things around us.
-
- The images explicit the effects of the climate and the damages it causing our plantes which show the user stories purpose of creating awareness of the problem.
-
- Each footer page has the iframes showing the map address of meet up location.
- Socail links, icons for social meida look up and follow.
-
- This sections offers an option for sign-up to anyone who wants to know more about the project.
-
-
The map iframe was created to give credibility to the website, according to finding users are more to engage with a website that has a addresss, hence the reason for incorporating a map address.
-
-
social link and icons using accessible links to social media pages like facebook etc helps user trust the page and want to engage and find out more on socila media.
-
Shows the the map location.
-
Addition feature to sign up to newsletter to recieve latest updates was also added to offer preference for returning user.
-
-
-
The following social meida links where visible on the site.
-
Facebook link.
-
Instaram link
-
Twitter link
-
Youtube link
-
Google link
-
- [bootsrap5](https://getbootstrap.com/
docs/5.0/getting-started/introduction/)
Bootstrap 5 was used to assist with the responsiveness and styling of the website. - Google Fonts
Google fonts was used to import the “Lato” and“Oswald” fonts into the html file, and were used on all parts of the site. - Font Awesome
Font Awesome was used 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 was used to store the projects code after being pushed from Git. - Balsamiq
Balsamiq was used to create the wireframes and the high fidelity mock up during the design process. - Am I Responsive
Am I Responsive was used to preview the website across a variety of popular devices. - Tiny JPG
Tiny JPG was used to reduce the file size of the images. - contrast-grid.eightshapes
Constract grid was used to create a cohesive color scheme for the website. - [Balsamiq](Wireframe design)
- youtube I did lots of personal learning on youtube.
- Gitpod Gitpod was use to finalise and complete the project.
- Code anywhere
- [GoogleDevTools](https://developer.chrome.com/docs/ devtools/)
- Html corrector
- PageSpeed Insights
- Lighthouse
- [bootsrap5](https://getbootstrap.com/
docs/5.0/getting-started/introduction/)
-
- The website was tested using html and css code validators.
which show some issues from bootsrap link.
- The website was tested using html and css code validators.
which show some issues from bootsrap link.
-
The website was tested using lighthouse and pagespeed-insight:
-
- Initially the site was recieving a lot of errors due to an outdated Font awesome link.
- I struggled with trying to import Font awesome,however managed to stick it through
and get the issue resolved.
-
I tested for responsiveness using am i responsive site with images attached here:
- The website was responsive on various destop and laptop, the home page was well responsive and all features came great and easy to access, the gallery page took few minutes to load images and the sign-up page all allign and fit to content.
.png)
.png)
.png>)
-
- The website was responsive on various tablets and mac, the home page was well responsive and all features came great and easy to access, the gallery page took few minutes to load images and the sign-up page all allign and fit to content. had a bit of issues with the images and sign up page, i inspected using dev tools and fix the issues by reducing the size of images and removing some css styling.
-
- The website was responsive on various mobile phones, the home page was well responsive and all features came out great and easy to access, the gallery page took few minutes to load images and the sign-up page didnt allign and fit to content. had a bit of issues with the images and sign up page, i inspected using dev tools and fix the issues by reducing the size of images and removing some css styling on the sign-up page.
-
-
The first testing had some errors and isssues as seen below.
-
I run the test again after fixing some of the issues. .png) .png) .png)
-
-
- Users enjoyed the sites visuals however later found out that the visuals were taking too much space and were too large. This resulted into compressing the image files which led to the decrease in some image quality. The issues were fix and tested again.
-
- As a First Time Visitor, I want to easily understand the purpose of the website.
- As a First Time Visitor, I want to be able to easily navigate throughout the website to find content.
- As a First Time Visitor, I want to locate their social media links to follow them on social media.
.png)
 -
As a returning Visitor, I want to find new information about the website.
-
As a returning Visitor, I want to find the best way to sign up to newsletter on the website.
-
As a returning Visitor, I want to find new updates and links to information.
.png)
-
As a Frequent Visitor, I want to check to see if there are any newly added resources. - As a Frequent Visitor, I want to sign up to newsletter or events to stay updated with information about improving our planet.
- ### As a Frequent Visitor, I want to find the best way to locate the events hosted on the website. .png)      -
-
- While working on the project, i started with codeanywhere and open my workspace accordingly.
- I started experiencing difficuities with commiting my change to github, then diverge main and branch issues also came up which took considerably amount of time which should have gone into getting the project ready for submission. Images attached below:
-
I had isssues setting the sign-up reason h2 to fit to the middle of the mobile
-
The project was developed using Gitpod as the code editor, committed to Git as a local repository, and finally pushed/ stored to GitHub.
-
The website was originally created using code anywhere worspace and dev tools, due to lots of issues and bugs, and to meet up with the submission deadline I was advised to download project files and open a new workspace using gitpod which was used to complete and submit the project.
-
The website is deployed using GitHub Pages, which hosts the project directly from the GitHub repository. Changes made to the repository are automatically reflected on the live site.
-
Getting into the habit of commenting when submitting any changes to the site allowed me to better document the changes I made when creating the site.
-
Using terminal to pull and push my repository.
-
.png)
.png)
The project was developed using Gitpod as the code editor, committed to Git as a local repository, and finally pushed/ stored to GitHub.
The project was deployed to GitHub Pages using the following steps:
- Log in to GitHub.
- Navigate to the main page of GitHub Repository that will be deployed.
- At the top of the Repository, locate the "Settings" button on the menu and click it.
- Inside the Settings, on the left side of the page, there’s a list of tab menu. Locate the “Pages” tab, and click it.
- Under "Source", click the dropdown called "None", select "Main branch", and then click the “Save” button.
- The page will automatically refresh.
- There’s a notification message that provides the now published site link: “Your site is ready to be published at "https://57esther.github.io/Climate-Change/ "
By forking the GitHub repository you can make a copy of the original repository on your GitHub account to view and/or make changes without affecting the original repository, by using the following steps:
- Log in to GitHub.
- Navigate to the main page of the GitHub Repository that you want to fork.
- At the top right of the Repository just below your profile picture, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
Changes made to the forked repository can be merged with the original repository via a pull request.
-
- All content was written by Oluwaseun Adeoye
- The structure of the home page was discuss with my mentor and I decided on the finish looks and colours.
- The structure of the gallery page was similar to the "Love Runing" page. I followed the same step to create my gallery page and added other features.
- The sign-up page was created from reading up and looking at other project on github and youtube.
- Some paragraph was quoted from united nation website.
-
- All images were sourced from the following site.
- [logo] (https://logo.com/)
- Freepik
- Unsplash.
-
- My mentor, Oluwaseun Owonikoko, for the helpful feedback on every detail of the website.
- Iris Smok, My facilitator for her help and support.
- Oscar Bartrand, For his help and support.
- Pri Dom, For his help and support.
- My husband Joseph, for his daily continuous support and for testing the website across our mobile devices.
- The Code Institute #peer-code-review channel for feedback.
- Slack community, as the first help to ask when I encountered a problem.