Skip to content

alexandergrib/ms1

BranchesTags

Repository files navigation

CI logo

Milestone 1 project

Live website on github pages

Responsive display

Table of contents

INTRODUCTION

This website is built for the private teashop, which offers a of subscription based tea delivery service. Website features different varieties of tea to choose from, as well as some useful information to the user, such as tea history and tea drinking traditions. The website offers clean and structured design, allowing users easy and intuitive navigation.

UX

Website owner business goals

  • As the site owner of this imaginary teashop, I want to deliver clean and easy to read information about how the subscription works, what it includes, price and help users choose the tea for their subscription by explaining different types of tea that exist in the world. Tea varieties offered on the website are green, black, white and pu’er teas.
  • As a business I would like to help customers learn more about how tea is grown, how it processed and delivered around the globe and end up in their morning cup of tea. With increased interest users have a easy way to quicly get in touch with us by using the contact form to start their subscription.

User goals

  • As a user I want to have easy navigation and intuitive navigation through the website
  • Simplicity of reading headlines and have a clear view of the pictures
  • Ability to navigate between pages and has possibility to return to the home page with one click
  • Site must be readable under all screen sizes, must include mobile (in my case it would be Samsung s8), and it should work with tablet screen and under high-res desktop screen
  • Website should contain media gallery inside picture snippets with rounded edges and light border, with a possibility to scroll itself

User stories

As a business owner:

  • I want to provide an in-depth information about the products I offer through click-in option on the product images
  • For my customers to be able to place an order and enquire further about the subscription through “Contact us” form.

As a new customer:

  • As a user, I want to have easy and intuitive navigation through the website
  • As a user, I want to be able easily access contact details
  • As a user, I want to see relevant information about products offered on the website
  • As a user, I want to see reviews about products offered which would help me make my decision about specific item I may be interested.
  • As a user, I want to find out more about how tea was discovered
  • As a user, I want to have option to stop subscription if I wish to

Structure of the website

The website is set up to be used on as many devices as possible, this includes small mobile phones as well as extra-large 4k tv screens. Website has to be easy to navigate between sections by clicking the required link in the navigation bar. Also includes easily accessible "contact me" form with an acknowledgement message after completing and send.
There are small differences on some pages between mobile and desktop, to have a better visualization of the content, based on the device.

Wireframes

Wireframes can be found here:

Desktop
Tablet
Mobile

Surface

Fonts

I decided to go with Google Roboto font and sans-serif as a fallback font.
I think Roboto font is the most used font across whole internet and it would not look too different for the user coming from any website they used to use. This will create a more familiar feeling for the users.

Colors

Trying to keep whole webpage in harmonic design and have it associated with “tea” colours, I decided to go for the light green colour for the header and footer. To keep it contrasted but organic I went for the blue-ish for the background. To keep high contrast for the text I set colour to white with black shadow outline.
I used following colours:

  • Body background color: #C6E7C6
  • jumbotron color: #215020
  • Headings color: #474545
  • Text color: #474545
  • Background color header and footer: #93C47D

Images

  • All images on the website were taken from internet resources with all credit information stated in "Credits" section of this README file.

Text

  • As I tried to provide useful information on my website, I copied certain text mainly from Wikipedia page. Most text information is credited in “Credits” section in this README file

Features

The website is a single page with interactive links to sections on the page with popup window with a "send me a message" - type of form.

Existing Features

Navigation Bar (in the Header):

  • Visible on all pages and attached to the top of the page
  • Mobile view collapses links into a “Burger menu”
  • Left side of navigation bar contains Logo image with active link to homepage
  • Right side of navigation bar contains 4 hyperlinks:
    • Home
    • Tea traditions(gallery)
    • Tea History
    • Contact me (modulo popup with email and textbar)

Footer:

  • Visible on all pages
  • Contains "contact us" link
  • Imaginary business address information
  • Fontawesome icons with links to default home page of LinkedIn, Facebook, GitHub
  • Copyright information

Home (index.html):

  • Introduction text for what the website is about
  • Clickable Pictures with tea icon
    • black tea page
    • green tea page
    • white tea page
    • puer tea page
  • Picture gallery
  • History section
  • Customer reviews section
  • About us section

Contact form (contact.html):

  • Required form fields: Name, Email address, tea selection and Message fields
  • On submit, "thank you" alert message will be shown (submit form sends information to CI server to display values sent)

Features left to implement

  • Add handler to perform action on "subscribe now" button
  • Add payment handling system
  • Create user dashboard where users can manage their subscriptions

Languages used

  • HTML
  • CSS

Technologies used

  • Pycharm

    • Pycharm was used to create this project

  • Bootstrap

    • Bootstrap was used to assist with the responsiveness and styling of the website.

  • Fontawesome

    • Font Awesome was used throughout the website to add icons for aesthetic and UX purposes.

  • Jquery

    • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.

  • Google Fonts

  • Github

    • GitHub is used to store the projects code after being pushed from Git.

  • Git

    • Git was used for version control by utilizing the Pycharm terminal to commit to Git and Push to GitHub.

  • Balsamiq

    • Balsamiq was used to create the wireframes during the design process.

  • Trello

    • Trello was used for KANBAN project organizing.

Testing

HTML W3 code validator

All pages were tested.

W3 HTML validator displaying 1 error message:

Consider using the h1 element as a top-level heading only

This error appeared because my h1 element is wrapped inside div element. It's done to position elements properly.

W3HTML

W3C CSS validator

All pages were tested. No errors were detected.

Google chrome developers tool

Mobile

  • Functionality testing – I used Google Chrome developers tools to test different screens responsiveness of webpages, as well on actual mobile phone and large screen monitor.

  • Code Validation – Lighthouse(google dev tools)

  • Issues found during site development – see section problems encountered

  • Performance testing Lighthouse(google dev tools)

    • Performance score: 81 (lower score due to loading external bootstrap scripts, and some images are slightly on the larger side)
    • Accessibility score: 96
    • Best Practices score 93

Desktop

  • Performance testing Lighthouse(google dev tools)
    • Performance score: 99
    • Accessibility score: 93
    • Best Practices score 93

Responsiveness testing

  • Tested in Google Chrome, Mozilla, Edge browsers in full screen mode
  • Adjusted screen to 1024px(Ipad pro)
  • Adjusted screen to 320px. This screen size have an issue displaying in Google Chrome, it but looks better in mozilla

User stories testing

Each user stories tested throughout website

As a user, I want to have easy and intuitive navigation through the website

Navigational bar is implemented into website, so any customer is able to access relative information quickly and easily. Navigational bar on Medium and Large screens: Navigation on large screen

Navigational bar on Medium and Small screens:

Navigation on small screen

As a user, I want to be able easily access contact details

"Contact us" form is implemented.

contact us form

As a user, I want to see relevant information about products offered on the website

Implemented description on how to order, what customer will receive and selection of choices to pick from.

product info

As a user, I want to see reviews about products offered which would help me make my decision about specific item I may be interested.

Implemented "what customers think about us" section displaying reviews on home page

customer reviews

As a user, I want to find out more about how tea was discovered

Implemented history section: History section

As a user, I want to have option to stop subscription if I wish to

Implemented Delivery and Returns page giving customer information about delivery and cancellations Delivery and returns section

Manual testing

Throughout the website every link, button, icon and image were tested and all results are displayed in the table below:

Location Type Expected Result Actual Result Pass/Fail
Header Logo icon Click on Logo Navigates to home page Navigates to home page Pass
Header HOME link Click on HOME link Navigates to home page Navigates to home page Pass
Header TEA TRADITIONS link Click on TEA TRADITIONS link Navigates to TEA DRINKING TRADITIONS section Navigates to TEA DRINKING TRADITIONS section Pass
Header TEA HISTORY link Click on TEA HISTORY link Navigates to TEA DRINKING TRADITIONS section Navigates to TEA HISTORY section Pass
Header Contact us link Click on CONTACT US link open modulo with form where user can submit message Modulo displayed correctly Pass
Home page JOIN NOW button Click on JOIN NOW button to open modulo with form where user can submit message Modulo displayed correctly Pass
Home page/SELECT YOUR TEA section BLACK TEA Link Click on BLACK TEA navigates to domain/black.html Navigates to domain/black.html Pass
Home page/SELECT YOUR TEA section GREEN TEA Link Click on GREEN TEA navigates to domain/green.html Navigates to domain/green.html Pass
Home page/SELECT YOUR TEA section WHITE TEA Link Click on WHITE TEA navigates to domain/white.html Navigates to domain/white.html Pass
Home page/SELECT YOUR TEA section PU'ER TEA Link Click on PU'ER TEA navigates to domain/puer.html Navigates to domain/puer.html Pass
Home page / TEA DRINKING TRADITIONS Image carousel Displaying images/ Click on next/previous arrows change slide Displaying images, next/previous arrows changes slide Pass
Footer Homepage link Click on Homepage link Navigates to Homepage Navigates to home page Pass
Footer Traditions link Click on Traditions link Navigates to TEA DRINKING TRADITIONS section Navigates to TEA DRINKING TRADITIONS section Pass
Footer History link Click on History link Navigates to HISTORY section Navigates to HISTORY section Pass
Footer Delivery and Returns link Click on Delivery and Returns link navigates to domain/delivery.html Navigates to domain/delivery.html Pass
Footer Facebook icon Click on Facebook icon open Facebook website on the new page Open new page with Facebook Pass
Footer LinkedIn icon Click on LinkedIn icon open LinkedIn website on the new page Open new page with LinkedIn Pass
Footer GitHub icon Click on GitHub icon open GitHub website on the new page Open new page with GitHub Pass
Contact us modulo Input field Name/Email address require field to be filled, otherwise will display error Click submit with Name/Email empty fields with displayed Please fill out this field Pass
Contact us modulo Submit button Click submit button with correctly filled fields redirects to Code Institute form response page Redirected to Code Institute form response page Pass
domain/black.html <HOME PAGE/ GREEN TEA> button-link Click on GREEN TEA button redirects to domain/green.html Redirected to domain/green.html Pass
domain/green.html <BLACK TEA / WHITE TEA> button-link Click on WHITE TEA button redirects to domain/white.html Redirected to domain/white.html Pass
domain/white.html <GREEN TEA / PU'ER TEA> button-link Click on PU'ER TEA button redirects to domain/puer.html Redirected to domain/puer.html Pass
domain/puer.html <WHITE TEA button-link Click on WHITE TEA button redirects to domain/white.html Redirected to domain/white.html Pass

Deployment

Deploying on GitHub Pages

  1. Log into GitHub or create an account.
  2. Locate the GitHub Repository.
  3. At the top of the repository, select Settings from the menu items.
  4. Scroll down the Settings page to the "GitHub Pages" section.
  5. Under "Source" click the drop-down menu labelled "None" and select "Master Branch".
  6. Upon selection, the page will automatically refresh meaning that the website is now deployed.
  7. Scroll back down to the "GitHub Pages" section to retrieve the deployed link.

Forking the Repository

  1. Log into GitHub or create an account.
  2. Locate the GitHub Repository.
  3. At the top of the repository, on the right side of the page, select "Fork".
  4. You should now have a copy of the original repository in your GitHub account.

How to run this project within a local IDE, such as Pycharm/VScode

  1. Log into GitHub or create an account.

  2. Locate the GitHub Repository.

  3. Under the repository name, click "Clone or download".

  4. In the Clone with HTTPs section, copy the clone URL for the repository.

  5. In your local IDE open the terminal.

  6. Change the current working directory to the location where you want the cloned directory to be made.

  7. Type 'git clone', and then paste the URL you copied in Step 3.

    git clone https://github.com/USERNAME/REPOSITORY

  8. Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub here.

Bugs

Problems encountered:

  • Git merging branch with local Pycharm. "The “fatal: refusing to merge unrelated histories” Git error"

    • resolved by applying git pull origin master --allow-unrelated-histories

  • Issue with text overflowing boundaries of jumbotron

    • Added :before and :after css to break line in exact place where intended, and reduced size of the text on small screen solution

  • customer images change shape from circe to oval on small screen sizes

    • fixed by adding @media query to resize image

  • Navigation bar not collapsing back

  • Image on the tea page has text overlapping the image

    • fixed by setting image height and width to responsive instead of fixed values

  • Issue with alignment of columns in footer section

    • Added div container around row, this helped to squeeze columns bit closer to the center. (Tutor assisted with the solution)

  • Section headers are hiding under navbar when the links to sections are clicked

    • Wrapped section in div and set padding top in css. (Tutor Assisted with solution)

  • Some images overflowing screen in small resolution (320px)

  • Footer displayed incorrectly in some cases

  • Issue with horizontal scroll appearing some times, this issue is intermittent and I cannot find what causing it - on refresh this issue goes away.

  • Background image under jumbotron looks stretched on very wide monitor. It looks ok on normal size screen, and smaller screen

    • moved the image from css into a seperate container

Credits

Credits for text and modules

Skeleton structure of the README.md file was copied from Jacqueline Kraus
Most of my text and educative information was copied from Wikipedia

Credits for images used:

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages