Love Coffee

Welcome,

Love coffee it is a website for a startup coffee shop, offering basic information about what the business sells, when it is open, how can you get in touch with it or pass by, as well as a few reasons why customers would enjoy the "Love coffee" shop.

Technologies used

• HTML
• CSS
• Font Awesome icons
• Google fonts

User stories

• While I am a first time visitor, I would like to learn more about the business
• While I am a first time visitor, I would like to find out how can I reach the shop
• While I am a first time visitor, I would like to find what opening hours does the shop has
• While I am a first time visitor, I would like to ask some questions directed to various business departments
• While I am a first time visitor, I would like to find out what does the shop sells
• While I am mobile user, I would like the coffee shop website to be responsive, irrespective of which mobile or tabled device I use

Charasteristics

Home page

• Navigation
  • The menu it is horizontally set on the top of the page
  • The menu links are situated on the right side of the menu and lead to various other sections of the website, such Menu and Contact pages
  • Aside with the menu links, situated on the left side of the menu it is the logo and the business name
  • The links have animated hover effect
  • On mobile devices, the menu gets responsive and the menu links shift vertically ordered and centered under the logo

• Showcase area
  • The showcase area was intentionally left minimalistic
  • The simplicity of the showcase intends to convince each visitor about the website's business sector
  • In the showcase area there is a video animation about a coffee cup which keeps rotating

• About the coffee
  • This section contains a few reasons why the visitor would purchase products from this business or return the business
  • The content it is split in 3 areas, each centered individually to allow a responsive navigation

• Footer
  • The footer area contains the business social media link which open in a new browser window if clicked
  • Below the social icons, there is a copyright statement

Coffee Menu page

- This page maintains a minimalist aprroach as well to key offerings
- A few coffee types are presented, among with a basic description and their pricing
- The images of the coffess use a glowing animation
- Beside the main content of the page, the top menu and the footer are the same with the ones from the index page

Contact

- This page has a few features:
    - It provides visitors with opening hours for the coffee shop
    - It allows visitors to locate on a map the coffee shop
    - It provides a way for visitors to engage with various business departments
    - The contact form has basic content validation in place, such as email format, empty characters and other
    - Beside the main content of the page, the top menu and the footer are the same with the ones from the index page

Success

- Upon a successful GET action on the contact from, the website will redirect to a **SUCCESS** page

404

- If the user types a page that doesn't exists, that it is redirected to a safe 404 page as seen below

Testing

CSS & HTML

• During the development Visual Studio Code has been used for testing and debugging

• After the development the W3C SS Validation service has been used for CSS checks

  • CSS

  • Home page HTML

  • Menu page HTML

  • Contact page HTML

  • Success page HTML

  • 404 page HTML

Accessibility

• For the accessibility test, the Wave web accessibility tool has been used to validate the structure and review standard recommendations

Deployment

• Currently the website it is stored in Github and it uses Github pages for making it available to general public
• The website address it is: Love Coffee
• The website can also be hosted on an AWS S3 bucket since it is being built with static content
• For major improvements of Love Coffee website, an organization might choose to host the website in a personalized hosting environment or use Github Enterprise for better control

Credits

• CodeInstitute

  • Part of the website structure, such as menu and footer design code were taken from the Love Running

• Codepen.io

  • Part of the menu page structure, such as elements design were taken from Codepen.io Menu

• W3Schools

  • Part of the contact page structure, such as elements design were taken from W3Schools Contact Form

• Media

  • Licensed showcase video was obtained from ShutterStock
  • Free menu graphics were taken from Unsplash.com as:
    • Americano image designer: Gerson Cifuentes Unsplash americano image
    • Cappuccino image designer: Harris Vo Unsplash cappuccino image
    • Latte image designer: Harris Vo Unsplash latte image
    • Macchiato image designer: Daria Rudyk Unsplash macchiato image
    • Espresso image designer: Nathan Dumlao Unsplash espresso image
    • Cortado image designer: the blowup Unsplash cortado image

• Mentor

  • Last but not least, tremendous appreciation to CodeInstitute mentor Aleksei Konovalov Aleksei Konovalov Git page for all his dedication to guide and coach me during the development, testing and deployment process.

Wireframes

Home page desktop wireframe