Clover was created with users working from home in mind. With the global pandemic of the previous two years, things have shifted dramatically within work places. We want to assist folks who are having trouble working from home. The website has a lot of resources for people to look over in order to get relevant information. It's critical that people realize they're not fighting alone in whatever battle they're now engaged in. We hope to generate participation from you and look forward to hearing from you.
Heres a link to the website.
- As a user, I would like to be able to browse the website.
- As a user, I would like to know more about Clover.
- As a user, I would like to sign up for a newsletter.
- As a user, I would like to find Clover on other websites.
- As a user, I would like to be able to find links to useful apps and other informative sites.
- As a user, it is important I understand how to use the website.
- Home page with general information about Clover.
- Main image with links to the rest of the site.
- 4 internal pages on different topics.
- sign up form for Newsletter.
We would have to loved a social media section with a place for home working people to communicate with each other.
- HTML5 was used to structure webpages.
- CSS3 used for styling the website.
- JavaScript was used to add interative content.
- JQuery was used to add interative content.
- Git was our version control system.
- GitPod was used as local IDE and repository.
- GitHub as our remote repository.
- Visual Studio Code was used as local IDE and repository.
- Hatchful was used to create our brand logo.
- videoplayer for our video plugins.
- hamburgers for the hamburger menu.
- smtpjs to send email.
- elasticemail - to host smtp server.
- gmail - for mail address.
- jokes api API for the jokes.
- activities api API for the ativities.
- quotes api API for the quotes.
- facts api API for the facts.
- video.js - plugin to play youtube videos through .
This website was built as a desktop first solution with adjustments then made for smaller devices.
Below is a table we used to keep track of adjustments and to test adjustments made.
- A = Adjusted
- n/a = Not affected
- X = Not included
| Features - Widths | 1570px | 1350px | 1050px | 970px | 768px | 485px |
|---|---|---|---|---|---|---|
| Navigation bar | A | |||||
| Home page | A | |||||
| Main images | A | |||||
| About | ||||||
| Articles | A | A | A | A | ||
| Stress page | ||||||
| Exercise page | ||||||
| Concentration page | ||||||
| Sleep page |
The color contrasts were tested on Contrast Grid.
The HTML was tested using the W3C validator. To do this we put the URL of each webpage into the validator.
We recieved some errors due to imported files, but none on the site itself.
The CSS was tested using the W3C validator. We did a direct input for our CSS file.
The test did test did not contain any Errors.
The JavaScript was tested using the JSHint. We did a direct input for our JS file. The file was tested without warnings.
To test our websites performance, accessibility, best practices and SEO we used Chrome Developer Tools resource Lighthouse.
We used GitPod and Visual Studio Code as a local repository and IDE & GitHub as a remote repository.
Process for GitPod:
- The repository was created on GitHub and we gave it the named team-5-january-hackathon.
- We then opened that repository on GitPod by prefixing 'gitpod.io/' to the URL at the top of the page within this repository.
- GitPod opened new workspaces for us to use.
- Opened a new terminal.
Process for Visual Studio Code:
- We opened VS code on our local machines.
- Made sure we had git installed.
- Opened a new terminal.
Together using our terminals:
- We each created a new branch for each of us to use by typing: git name-of-branch
- We navigated to our branches by typing: git switch name-of-branch
Once we were in our branches we used:
- git pull origin main This pulls all data from the main branch.
- git add name-of-file This adds a file to be committed.
- git commit -m "Commit message" This allows us to attach a message to our committed code.
- git push origin name-of-branch This final command pushes our work to a branch of our choosing.
As a deployment solution to our project we chose to use 'GitHub Pages'. This is a resource a developer can use to test how their websites look on a cloud platform.
Here are the steps we took to deploy our website.
- In the repository we selected 'settings'.
- Within the options on the left middle of the screen we navigated to the 'pages' section.
- We then selected a branch to test.
- Once this was completed we received a URL for the website.
Below is a list of steps to help you clone this repository:
- Please log in to your GitHub account to get started.
- Then create a new repository within your account and give it a name.
- In this repository at the top of the page click the green button labelled 'code'.
- Choose the HTTPS option and copy the URL link you see to your clipboard.
- You will need to open your 'IDE' and have 'git' installed.
- Once you have git installed open a terminal.
- Type: git clone URL-from-this-repository
Once steps 1 - 7 are completed you will now have a clone of this repository on your local machine to use.
This was my second Hackathon wit Code Institute. I could've not even imagine before that a team can be so collaborative. That was a really great experience for me. Thank you team!
This has been my first hackathon and I have really enjoyed it. Thank you to everyone within my team for your hard work! I look forward to the next one. Thanks everyone!
After one year without coding at all, this was my second Hackathon and I was a pleasure to be part of this great team. The teamwork was really nice. Thanks guys.
This was my third Hackathon and I must say it has been an absolute pleasure to be a part of this fabulous team. The teamwork has been fantastic. Thanks to all of you!!
This hackathon was a lot of fun for me. This was my first hackathon, and I'm happy for the experience and the opportunity to collaborate with such amazing people in the industry! Thanks everyone.
We would like to thank Kasia Bogucka for the cheering you supported us with during this Hackathon. Thank You 😃 Back to the top of page