Visit the live Website : Terra Matter ➡️
Terra Matter is a learning web application that promotes curiosity and enjoyment in the process of acquiring knowledge about the impact of our daily routine on the environment.
This project is created in recognition of Earth day and our love and care of our home, the Planet Earth.
- Terra Matter is an interactive web app created to bring knowledge to its user about the impact of our daily routine on the Earth.
- It promotes curiosity and enjoyment in the process of learning for building lasting interest.
- It is and educational platform that makes learning fun.
- Develop an interactive website using HTML, CSS and JavaScript.
- Bring knowledge to the Users.
- Make learning fun.
- Teach environmental awareness.
- Entertain.
- Impact a broad range of Users.
- Be considered for valid tool in schools and other institutions.
- Learn about the impact of our daily routine.
- Learn how to improve our routine to better environmental impact.
- Improve and have fun.
The targeted audience is international and adress everyone (from Earth and beyong!).
- Learning.
- Improving their knowledge.
- Checking on some information.
- A challenge. (if quiz implemented)
- Having fun.
- It provides information on the different daily tasks we take at home.
- It follows the best learning practice.
- It displays the content interactively.
- It gives an enjoyable learning experience.
- It proposes a game to test and reinforce knowledge. =============================> If implemented
- It rewards users by displaying achievements icons upon leaning new things.
As a first time user, I want:
- The website to be appealing.
- The navigation to be easy and intuitive.
- The content to be informative but not overwhelming.
- To understand immediately what is the website about without the need of looking for it.
- The content to be interactive.
As a returning user, I want:
- To improve my knowlede.
- To keep my knowledge up to date.
- To contact and get information on the website owner.
- The logo and favicon are the same image to follow best practice and consistency.
The colours chosen for the website are bright and joyful.
Adobe color was used to create the colour scheme.
The swatches are said to be color-blind safe by Adobe Color.
The website uses bright and simple colours to provide the feeling of easy accessibility.
It presents a clean, playful, welcoming and trustworthy feel in order to bring quality information in a fun way!
For the full version:
The contact page is very simple and offer users a way to reach out to the website owner.
EmailJS has been implemented and allows the management of emails without needing the server side. It has been set to send an automatic email back to the user for better user experience.
There are four fields to fill up:
- Your name: → Who the person is.
- Email address: → To be answered back.
- Feedback or Question: → A textarea to provide additional information.
- A send button is displayed as well to send the form.
Upon sending, a pop-up will give feedback to the user thanking him for the message. It will provide as well a link to the home and about pages in order to provide the main navigation links for better user experience.
A similar feature will display if the form fail to send.
A custom page will handle the “404 error” by displaying a message explaining the error.
It provides a button to go back to the home page and some useful links.
- A link that will bring the user to a website that explain what is a 404 error.
- A link that bring the user to the contact page to report an issue.
This project uses HTML, CSS and JavaScript.
===================================================================== TO Be UPDATED
-
Balsamiq
For creating wireframes. -
Google Fonts
For importing fonts (Fredoka One, Handlee and Andika New Basic) into the style.css file. -
Font Awesome
For using icons throughout the website. -
Adobe Illustrator
For creating the logo and main site image content. -
favicon.io
For generating the favicon. -
BeFunky For cropping some images.
-
Adobe Color
For extracting the color scheme used on the website. -
Am I Responsive?
For providing screenshots of the responsiveness of the website across several devices. -
Autoprefixer CSS online
For adding prefixer in style.css for cross browser compatibility. -
EmailJS
For email service implementation using API and without server. -
Git
For Version control. -
GitPod
For Integrated Development Environment. -
GitHub
For storing the repository. -
GitHub Pages
For deploying the website live.
============================================================================ TO BE UPDATED
This project was developed on GitPod Workspaces IDE (Integrated Development Environment) committed and pushed to my GitHub Repository using GitPod Command Line Interface (CLI).
To make this website accessible to the public, Walking Around has been deployed on GitHub Pages as follow :
- Log in to my GitHub account.
- To create an account you need to sign up on GitHub.
- Go to the project repository.
- To create a repository see Create a repo.
- Navigate to Settings.
- Scroll down to the GitHub Pages section.
- Click on the link to go to the dedicated tab :
- Click on the None dropdown menu and select the branch to publish : master.
- Click on Save.
- The website is now deployed.
The link to the website is found in the GitHub Pages section of the repository settings.
When a repository is created on GitHub, it is located on GitHub website (“remotely”). You can create a copy of the repository locally on your machine. This process is called : “Cloning a repository”.
When cloning a repository you are actually copying all the data that the repository contains at that time to your machine.
To clone a repository, take the following steps :
- Create a GitHub account.
- Click on the Code dropdown button above the files list.
- There are three options available to clone the repository :
- using HTTPS
- using SSH key
- using GitHub CLI
- Choose an option and copy the link given.
- Change the current working directory to the location where you want the cloned directory.
- Open your IDE and in the CLI type :
git cloneand paste the link copied on step 4.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter to create your local clone.
For further information please go to Cloning a repository.
To Clone a repository Using GitPod, take the following steps :
- Create a GitHub account.
- Install the GitPod extension for Chrome or Add-on for Firefox.
- Navigate to the corresponding repository.
- Click on the GitPod button on the top right of the files list.
- This will open a workspace on GitPod where you can work on the repository locally.
The very first time that you do this, you need to connect GitPod and GitHub together. You need to log in with GitHub and launch your workspace (As explain above). And then you need to authorize GitPod to be able to access your GitHub account. You agree to GitPod's terms and conditions, and then create a free account. Then, it will open the workspace for you. Quote from : “Creating a GitPod Workspace” on Code Institute Full Stack Software Development Programme, by Matt Rudge.
Another option is available : GitHub Desktop. It consists of cloning a repository from GitHub to GitHub Desktop.
For full information about how to use this option, please visit GitHub Docs.
Forking a repository will copy it in your own repositories in GitHub.
A fork is a personal copy of another user's repository that lives on your account. Forks allow you to freely make changes to a project without affecting the original upstream repository. You can also open a pull request in the upstream repository and keep your fork synced with the latest changes since both repositories are still connected.
To Fork a repository take the following steps :
- Create a GitHub account.
- Navigate to the corresponding repository.
- Identify the
forkbutton on the top right of the page and click on it.
- Now you should find a copy of the repository in
Your repositories.
EmailJS is used in this project in order to manage the contact form of the website.
It is an API (Application Programming Interface), that allows emails management using JavaScript, without needing the server side.
To implement EmailJS take the following steps :
- Create an account by signing up. Free account are avaible and was used in this project limiting the number of email to 200 per month.
- Go to Email Services in order to link your email account.
- Create a template or use the default proposed in Email Templates.
- Go to the Docs → emailjs.send section in order to see how to implemnt the service. Different options are available.
- In order to implement the service you will need your user ID and Access Token that refer to the API keys. You will find them in the integration section of your account.
Testing information are published in a separate file : TESTING.md
favicon.io
For converting the favicon and providing the links and explanation on how to install the favicon for the website.
Various source images were used to create the site content:
- Television: Mockup template vector created by MasoudRezaeipoor
- Lamps and lights: Floor lamp vector created by pch.vector
- Bathroom Bathroom vector created by macrovector
- Kitchen Kitchen cupboard vector created by iconicbestiary
- Furniture Clip art vector created by brgfx
- Sofas Couch vector created by pch.vector
- Appliances Household appliances vector created by macrovector
- Trees Flat tree vector created by freepik
- Dishes Dirty dishes vector created by macrovector
- Power plant Shop house vector created by macrovector
- Windmills Green power vector created by brgfx
- Power Sockets and chargers Set vector created by kubanek