Giters

akshatnitd / milestone-3-seed-shelf

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

You can see the live website here.

Responsiveness

To open any links in this document in a new tab press CTRL + Click.

UX

Contents

UX

User Stories

All Users

  1. As a user I want to be able to understand what the site is for immedietly from the home page.
  2. As a user I want to be able to easily navigate through the site

Unregistered Users

  1. As an unregistered user I would like

Site Owner Goals

User Requirements and Expectations

Requirements

  • The user should be presented with a visually appealing website.

  • The user should be able to clearly navigate through the website even on their first visit.

  • The user should be able to contact the owner of the website.

Expectations

Design Choices

Fonts

Colours

Icons

  • The icons that I used in this project were provided by Font Awesome. I decided to use icons as they offer a pleasant visual aide to the site, also users tend to know that icons usually work as buttons.

Wireframes

Original Wireframes

The original wireframes from before I started building this website can be found at the following links:

Actual Wireframes

The wireframes for the actual website can be found at the following links:

Changes to Original Wireframes

Features

The main features of this website are:

  • an attractive design.
  • a navigation bar that the user understands how to use even on their first visit to the website and that brings them to the appropriate part of the website.
  • a working contact us form so that the users can ask questions and give feedback about the website.
  • links to social network platforms.

Features that will be added in the future are:

Technologies

Languages

Other

  1. Tiny PNG
    • This was used to compress the size of every image used on in this project.
  2. Font Awesome
    • The icons used were found at Font Awesome.
  3. Ucraft
    • Ucraft was used to make the logo for the favicon.
  4. Bootstrap 4.5
    • Bootstrap was used throughout this website, in particular for the navbar, form and for the responsiveness and styling.
  5. jQuery
    • jQuery was used through this website for interactive features.
  6. Google Fonts
    • The fonts used for this websites were found at Google Fonts.
  7. Balsamiq
    • The wireframes were made using Balsamiq.
  8. Github
    • This project was stored on Github.
  9. Gitpod
    • Gitpod was used to write the code used for this website.
  10. Git
    • The version control system used for this project was Git.
  11. Chrome DevTools
    • Chrome DevTools was used to test out code before adding it to this website.
  12. WebFormatter
    • WebFormatter was used to format the html code.
  13. Google Maps API
    • The Google Maps API was used for the map.
  14. Am I Responsive
    • Am I Responsive was used to see how the website looked on different devices.
  15. Unsplash
    • Unsplash was used to get images to use for the website.
  16. Emailjs
    • Emailjs was used to send the information added into the form to the owner of the website.
  17. JSHint
    • JSHint was used to test the JavaScript code.

Resources

The following websites were used as learning resources throughout the building of this project:

Testing

Manual Testing

Testing User Stories

Bugs

Bugs fixed while building the website:

  1. cards displaying 3 times, change location of for loop

Deployment

Credits

Credits for Fonts

Media

Code

Content

Acknowledgements

  • I would like to thank mentor Akshat Garg for all his invaluable advice during my three mentor sessions.
  • I would also like to thank the turors at Code Institute, in particular Tim, Michael and Fatima for their help during this project.

Contact

If you have any questions regarding this project feel free to contact me at farrelleoin93@gmail.com.

About

Languages

Language:HTML 56.5%Language:Python 16.8%Language:CSS 10.7%Language:JavaScript 6.4%Language:Shell 4.9%Language:Dockerfile 4.7%