Sheets Dojo

MS1 project for Code Institute, functioning as a start-up guide on Google Sheets.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
   • Wireframes
   • User Stories
4. Roadmap
   • Future Plans
   • Open Issues
   • Past issues
5. Testing
   • Functional Testing
   • Accessibility Testing
6. Contributing
7. License
8. Contact
9. Acknowledgements

About The Project

Built With

• Bootstrap 4.6 - Used to assist responsiveness and streamline the positioning & styling of the site.
• Gitpod / Gitpod Chrome extension - Used to develop the site and push the project to Github.
• FontAwesome - Used to add icons for social media links.
• GitHub - Used to host the project during and after development.
• Balsamiq - Used to set up the wireframes at the start of the dev cycle.
• Atom - Used as an alternative to Gitpod to develop the site and push the project to Github after running out of free time on Gitpod.

Getting Started

To get a local copy up and running follow these simple steps.

Installation

1. Clone the repo

   git clone https://github.com/lavadax/MS1-Sheets-Dojo.git

Usage

Wireframes

All wireframes are in a single file and can be found here.

User Stories

New Users

• As a new user, I want to easily understand the purpose of the site.
• As a new user, I want to be able to easily navigate the site and access the content it provides.

Returning Users

• As a returning user, I want to easily return to where I left off previously.
• As a returning user, I want to easily access specific parts of the site.
• As a returning user, I want to be able to easily contact the site creator with feedback.

Roadmap

Future Plans

• Add input field for other subjects, hidden by default, unhidden when "other" subject is selected.
• Make the main content of all pages more responsive

Open Issues

See the open issues for a list of proposed features (and known issues).

Past issues

• Top and bottom padding would start increasing before the screen would go past the height of the document, adding unnecessary whitespace.
• I ran out of time on Gitpod using my free account, so I had to swap from Gitpod to Atom near the end of the project.
• Had to use vh for top/bottom padding in the contact form, as using % is seemingly based on width of the element, instead of height.
• Positioning of nav in header caused the nav to overflow from the header, creating whitespace on the right at screen widths below 340px.
• Width rules for all footer sections conflicted with the built-in bootstrap breakpoints, causing the center section to get pushed down on the screen.
• The default negative margin of Bootstrap rows caused white space on the bottom and right of the page on screen widths of 575 pixels and below.
• Top nav bar spacing would overlap on extra small screen sizes, requiring a modified spacing solution by form of media query to ensure proper functionality down to screen widths of 280px.
• Adding "/" in readme headers stopped table of contents from redirecting correctly. Had to remove all symbols to ensure functionality.
• Project started on different repository, but after several days of testing, making edits to the master branch directly proved to be too risky. New repository was created as a safety precaution.

Testing

Functional Testing

• The first part of testing was done by putting the code through the Jigsaw validator for CSS and the W3 validator for HTML.
• Next I accessed every link on the site from every possible starting point to make sure all anchors were set up correctly.

Accessibility Testing

• Accessibility was first tested for responsiveness by running my code through a multi screen test.
  This made it clear that screens below 300px in width caused issues, but a fix was foregone due to the odds of a device with this width accessing the site.
  The other thing that stood out, was the responsive padding increasing on screens with ratios that fell outside of the expected range when considering phones, tablets, laptops, pc monitors and TVs. The biggest concern for this finding were pc monitors used in portrait mode, however since this just added some unneccesary whitespace, this was not deemed a priority issue.
• The second part of accessibility testing was done through the WAVE web accessibility evaluation tool. This pointed out that my social media links didn't contain any text or had any screen reader labels attached to them, so this was promtpy fixed. It also pointed out there was not enough contrast between some of the elements, so that was increased to assist the visually impaired users.
• Once the generic issues had been fixed, I tested the site on various browsers to make sure the code was processed correctly: Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave.
• And lastly, the very final step of testing: spellchecks. I went through all my code with a fine tooth comb for any misspelling I could find and fixed it.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Lavadax - Twitter - facebook

Project Link: https://github.com/lavadax/MS1-Sheets-Dojo

Acknowledgements

• https://github.com/othneildrew for providing the readme template.
• w3schools for a refresher on a lot of styling rules, including but not limited to: vertical and horizontal centering of text, usage of last-child css selector in nav bar, active status of nav element, etc.
• css-tricks.com To help with some more specific css issues I encountered.
• benlcollins.com for the basis of the guide content.