Giter VIP home page Giter VIP logo

user-centric-frontend-development-milestone-project-1's Introduction

Cottage Tea Rooms

This is a front-end website for 'Cottage Tea Rooms' cafe, which is a lovely, historic irish cafe in Old Firhouse Village.
In the website there is information about the cafe itself, options to book a table, contact the cafe directly, information about their working hours and their menu/prices.
This website was created as a project for Code Institute. To view the live site, press HERE.

UX

The website was built for the customers of the 'Cottage Tea Rooms' for an easy reach of basic information about the cafe and book a table online. These user stories were made durring planning stage and were used in creating different features for the website:

  • As a customer, I want to check the cafe's menu, so that I'd know it suits my taste.
  • As a customer, I want to book a table online, so I'd be sure I won't need to wait for one.
  • As a customer, I want to find working hours of the cafe, so I could plan my time.
  • As a customer, I want to read reviews of the cafe for credibility.

Also, in the planning stage, I created these wireframes. Although, the design and some features changed over the development process.

Features

These are some of the features implemented for this website:

  • Navigation bar - helps customers navigate through the page with links to different sections of the website. Also, has a logo with a link to the home page.
  • Embedded video - shows a short clip from YouTube about the place around 'Cottage Tea Rooms'.
  • Embedded audio files - emerses customers into 'Cottage Tea Rooms' atmosphere by showcasing examples of the music played there.
  • 'Book a table' form - allows customers to book a table in the cafe from the comfort of their home.
  • Menu - showcases the menu options for food and beverages, as well as prices.
  • Google Maps location - interactive way to check the location connecting to Google Maps. Possibilities to check directions and time needed to arrive at their destination.
  • Working Hours - shows the working hours of the cafe.
  • Social links - Links to connect and follow the cafe on social media.

Technologies Used

  • HTML and CSS
    Base languages used to create the website.
  • Bootstrap 3.3.7
    Used for styling and layout of the page.
  • Javascript and jQuery
    Languages used with a help of Bootstrap empowering the collapsed menu button.

Testing

  • The document was validated with an HTML validator
  • The css was validated with CSS Lint
  • Site tested on these browsers:
    • Google Chrome
    • Internet Explorer
    • Mozilla Firefox
    • Opera Mini
    • Microsoft Edge
    • Safari

Deployment

The website was published using GitHub pages

Credits

Content

Menu, working hours and reviews are taken from 'Cottage Tea Rooms' facebook page.

Media

  • The video about 'Cottage Tea Rooms' is embedded from YouTube.
  • The audio files was dowloaded and added from Royalty free site - Free Music Archive.
  • All images were taken from 'Cottage Tea Rooms' facebook and instagram pages.
  • Location with Google Maps was embedded from Google Maps.

Acknowledgements

I received inspiration for this website from my dear friend Antoinette who is the owner of 'Cottage Tea Rooms'.
Many thanks, for help creating this website to mentor - Antonija Simic, tutors - Niel and Haley and for the whole Slack community.

user-centric-frontend-development-milestone-project-1's People

Contributors

surelis848 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.