The live site link can be found Here
- Introduction
- User Stories
- Design
- Features
- TESTING.md
- Bugs and Issues TESTING.md
- W3C-Validation TESTING.md
- Technologies and Frameworks
- Deployment
- Credits
Code Institute April 2020 Hackathon
Earth Day 2022.
A Hackathon is a 5-day sprint-like event in which teams collaborate intensively on software projects. The goal is to create a functioning project by the end of the event.
This website was designed to provide users with Earth Day tips. The main focus of the site is to create an online presence allowing users to find ways to celebrate Earth Day, things you can do for Earth Day, What can you do for Earth Day at home and relevant information.
The website is build using primarily HTML5, CSS3, JavaScript and Bootstrap.
Emily Asquith on GitHub
Ivan M Ulysses on GitHub
Kelven Hughes on GitHub
Paul Browne on GitHub
Peter Anny-Nzekwue on GitHub
Raivis Petrovskis on GitHub
Team Facilitator: Rachel Rock on GitHub
- As a user, I want to be able to access site on various devices such us mobile, tablet or pc.
- As a user, I want to easily understand the main purpose of the site.
- As a user, I want to be able to easily navigate throughout the site to find desired content.
- I also want to locate their social media links.
- I want to get in contact with the site Administrator if any questions I may have.
- As a Site owner, I want to Provide potential users with Earth Day tips.
- As a Site owner, I want to Provide everyone who visits the site to have a good user experience.
- As a Site owner, I want to Provide user with easy site navigation.
- As a Site owner, I want to Build trust with customers - providing with social. media links.
- As a site owner, I want to provide user with contact options to Improve.customer satisfaction through better service.
- Able to understand the main purpose of the site.
- Navigate the site easily through categories clearly.
- Easy Navigate the site and find the relevant content.
- Find Website owner on their preferred social media platform.
- Contact Administrator if any issue or bug.
- Provide user with simple user friendly interface.
- Provide a good site navigation to easy understand.
- Categorize content by its Subject types and relevance.
- Stay connected with users by providing social media links.
- To Provide user with contact options.
- The website
- Use of Bootstrap for responsive design
- Website Navigation with internal site links.
- Internal lins is Linked in the website template pages
- Categorized navigation by its Subject types and relevance.
- Responsive bootstrap website navigation
- Thumbnail Gallery view
- On click to reveal individual item detailed view with Javascript or Bootstarp.
- Customer Support contact form.
- Javascript API form control or similar
- Social Media links to external resources.
- NavBar
- Internal site navigation Links with categories
- Site brand name
- Links to social media
- Landing Page
- Full size Central Hero image
- Tile and description text
- Categories pages
- Image thumbnail linked to relevant detail modal
- Tips title
- Short description
- Detailed view
- Tips Image
- Tips title
- Tips Description
- Contact page
- Contact Form
- Links to Contributor Github pages
- footer
- Copyright information
- Social Links
- FaceBook, LinkedIn, Instagram
- Color scheme used through out the site.
beaver: #A88C7D
- Body main text font family Montserrat As a backup sans-serif.
- Header-text font family Lato As a backup sans-serif.
All the images was supplied from adobe stock photos
-
Navigation
- Featured on all pages, the full responsive navigation bar includes links to the Logo, Home page and is identical in each page to allow for easy navigation.
- Allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
-
Landing page
- Large background image span the full width across the whole viewport and is responsive to all other browser sizes.
- In the center outlined key earth day tips feature for users to easily understand the main purpose of the site.
- Images was cut and crafted to match categories page style with Adobe Illustrator.
- Keyframe based animation, with the geometry effects between keyframes and added smooth transition effects.
-
Categories page
- Responsive Image Grid that varies depending on screen size.
- Click on image to reveal individual item detailed Modal.
- Some of the Thumbnail images was created in Adobe illustrator to match rest of the images
-
Detailed Modal
- Description, Image that Provides information on a relevant Earth Day tips.
- For detailed descriptions we are using bootstrap Modals
- The modal is positioned over everything else in the document.
- By clicking on the modal “backdrop” will automatically close the modal.
-
Contact Page
- Contact form allows users to communicate with the site owner
- Contact page features Contributors names and contact info
-
Footer
- Footer was designed to be responsive across all devices.
- Footer features social media links and copyright information.
- HTML5 Hypertext Markup Language (HTML)
- CSS3 Cascading Style Sheets (CSS)
- JavaScript Interactive functionality.
- Bootstrap: was used to assist with the responsiveness and to style the website.
- Google Fonts: were used throughout the site.
- Font Awesome: was used throughout the website to add icons.
- jQuery: came with Bootstrap.
- Git Git was used for version control.
- GitHub: used to store the projects code.
- gitpod.io gitpod Was used for codding.
- Balsamiq: was used to create the wireframes.
- Log into GitHub or create an account.
- Locate the [GitHub Repository](https://github.com/pbtrad/team-5"Link to GitHub Repo").
- At the top of the repository, select Settings from the menu items.
- Scroll down the Settings page to the "GitHub Pages" section.
- Under "Source" click the drop-down menu labelled "None" and select "Master Branch".
- Upon selection, the page will automatically refresh meaning that the website is now deployed.
- Scroll back down to the "GitHub Pages" section to retrieve the deployed link.
- At the time of submitting this Milestone project the Development Branch and Master Branch are identical.
- Log into GitHub or create an account.
- Locate the [GitHub Repository](https://github.com/pbtrad/team-5"Link to GitHub Repo").
- At the top of the repository, on the right side of the page, select "Fork"
- You should now have a copy of the original repository in your GitHub account.
- Install the GitPod Browser Extension for Chrome.
- After installation, restart the browser.
- Log into GitHub or create an account.
- Locate the [GitHub Repository](https://github.com/pbtrad/team-5"Link to GitHub Repo").
- Click the green "GitPod" button in the top right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally.
How to run this project within a local IDE, such as VSCode:
- Log into GitHub or create an account.
- Locate the [GitHub Repository](https://github.com/pbtrad/team-5"Link to GitHub Repo").
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone', and then paste the URL you copied in Step 3.
git clone https://github.com/USERNAME/REPOSITORY
- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here
- stackoverflow.com: Useful website for code tips.
- The icons in the footer were taken from Font Awesome
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
