Description Dream Teahouse is a newly established premium teashop that offers a unique, high-quality tea blend as its flagship product. The Dream TeaHouse website aims to be the ultimate online resource for tea enthusiasts and casual drinkers alike, providing comprehensive information on various teas, their origins, brewing techniques, and health benefits.
This is the live website and repo:
- Sign in to github and find the right repository.
- Click on settings and then pages.
- Under build and deployment, make sure set the source: "Deploy from a branch" and Branch: "main" - another dropdown will I appear beside this; make sure the selected item is "file icon/root".
- Click save to begin the building process. When the page is refreshed the link to the live deployment website will be available at the top.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository.
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and find the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 3.
$ git clonehttps://github.com/JonFD4/dreamTeaHouseProject.git
- Press Enter. Your local clone will be created.
Create a functional and aesthetically pleasing website that is responsive, considers accesbility and is user-friendly.
Remaking portfolio one
- Tea Enthusiasts: Individuals with a deep interest in learning about different types of tea, their preparation, and history.
- Health-Conscious Individuals: People looking for information on the health benefits of various teas.
- Casual Drinkers: Individuals who enjoy tea casually and are looking for basic information and recommendations.
- Extensive Tea Database: Detailed descriptions of various teas, including their origins, flavor profiles, and brewing instructions.
- Health Information: Articles and resources on the health benefits of different teas and how they can be incorporated into a healthy lifestyle.
- Educational Content: Guides, videos, and tutorials on tea preparation, storage, and tasting techniques.
-
Scenario 1: Exploring New Teas
- User: A tea enthusiast looking to discover new varieties of tea.
- Interaction: They browse the Dream TeaHouse website to read detailed descriptions and reviews of different teas.
- Value: The comprehensive information helps them make informed choices and enhances their tea-drinking experience.
-
Scenario 2: Understanding Health Benefits
- User: A health-conscious individual researching the benefits of green tea.
- Interaction: They visit the Dream TeaHouse website to read articles on the health benefits and recommended daily intake of green tea.
- Value: The accurate and detailed health information helps them incorporate green tea into their diet effectively.
-
Scenario 3: Basic Tea Preparation
- User: A casual drinker looking for simple brewing instructions for black tea.
- Interaction: They find and follow a step-by-step brewing guide on the Dream TeaHouse website.
- Value: The easy-to-follow guide ensures they can brew a perfect cup of black tea, enhancing their enjoyment.
First time user
- I want to understand the primary goal of the site.
- I want to the website to be easily navigable through the website and clear directions as well as CTAs.
- I want to find product sections and learn about the purpose of each product.
- I want exploration and usage of the site to be intuitive
Returning and/ or Frequent user
- I want exploration and usage of the site to be intuitive
- I want to be able to readily and easily purchase products
When developing the website for Dream Teahouse, the website developer would focus on the following aspects:
-
Engaging Design: The developer would create an aesthetically pleasing and user-friendly website design that aligns with the teahouse's brand identity. The design should evoke a sense of tranquility and elegance, reflecting the essence of tea.
-
Responsive Design: The developer would prioritize making the website fully responsive, ensuring it functions seamlessly across various devices (desktops, tablets, and mobile phones). This enhances the user experience and accessibility.
-
Integration of Multimedia: To enhance the user experience, the developer may integrate multimedia elements such as high-resolution images and videos demonstrating tea brewing techniques. These elements can make the website more engaging and informative.
-
SEO Optimization: The developer would implement search engine optimization techniques to improve the website's visibility on search engines. This helps potential customers find Dream Teahouse easily when searching for tea-related information or products.
-
The developers aims to make use and achieve understanding of the potential of CSS and its implementation for web development.
-
Imagery: The images used are vital in conveying peace and traquility witouth overshadowing the writting context of the page. The ones used in the products sections are to attract user and give them an idea of the product they will be receiving.
-
Colours: Notably, the primary colour seen consitently is green colour palette. This represents health. Additional colours including black and white used, especially on text, is to create contrast.
-
Fonts:
cursive, sans-seriffont used creates elegance and keeps the page from being overly uniformed and boring.
Balsamiq was used in the design of the website.
The structure of the image was designed with the intention that not all of it will be implemented in the website, due to stylistic changes and determine what fits the aim of the website.
Lo-fi prototyping of dream tea house website with balsamiq
Description of Home page
Landing Page
- The navigation bar is fully responsive, and redirects the user to:
- about, blog, and contact. The home button reloads the page.
- The elements are styled so that as user hovers background changes.
- the responsive styling converts the navigation bar to a hamburger menu that retains all features.
- the navigation bar can be seen through out all the web pages. Except for the thank you pages
- The landing page, on load, shows a fade in of the welcome text.
- The button underneath directs user to product section
About section
- The about page gives details about the company and their mission for ethical productions.
- The button when clicked shows more details. This function is implemented using JS.
Product section
- The product section acts as a precursor to the whole product page. It allows user to view some interesting and popular products.
- It has scroll function that shows images three at a time and one at a time when screen width is reduced.
- The more product button sends user to the product page.
Knowmore section
- The image inspire calm and relaxation related to the product.
- Hovering over the text causes the scale to increase.
- The button sends user to an article about the product.
Blog section
- The blog section consists of a number of articles that when hovered on the box shadow effect appears.
- The buttons do direct user to a simple page that represents each of the tiles on that section.
location and contact
- The location section shows a whimsical image to attract customers, a map, opening times, and contact information.
- A map for user direction, contact details, as well as opening and closing times
- The footer consists of empty text to represent buttons. (All elements under
teahouse events,stay connected on social media,andcareers) - Hovering over the text causes the scale to increase.
- Elements of
Discover out teadirect user to product page - Subscribe newsletter button directs user to thank you page
- It also has a button that directs user to the top of the page. This button remains fixed through out the age as user scrolls.
Description of product page and Cart-page
- The navbar is remains the same with index page.
- It maintains the same functionality as the index page. The buttons present will direct user to the sections on index.html.
- the responsive feature remains the same.
- Each product is in a tile. A button to chose the number of products the user wants and beside is the basket icon which leads user to the cart-page.
- The description feature reveals the product details and how to use it.
- The cart-page shows a layout based on a user's selection.
- It has a non-functional delete button, an input to apply discount, and a proceed to checkout button that sends user to purchasecompletion page.
Description of purchase completion and thank you page
Thank you for your purchase
- This page acknowledges the user purchase.
- A link to send user to the home page
Thank you for subscribing
- This page acknowledges the user.
- It also presents icons for the user to access the companies social media
- A link to send user to the home page
Description of popular product page
- The page features a navbar the functions in the same manner as the other pages.
- It contains descriptive text about the popular product. Including images and a video.
- The video, on load is muted, however has controls for user to determine what they want to do with the video.
- At the bottom is a link that directs user to the product page.
Language
- CSS
- JavaScript
- HTML
- Bulk Resize : to resize images
Libraries and Frameworks used
- VS Code
- git and github- used for version control
- Balsamiq- used for wireframes
- AmIResponsive - Used to verify responsiveness of website on different devices.
- Chrome Dev Tools - Used for overall development responsiveness and performance.
- Font Awesome - For icons
- W3C - Used for HTML Validation.
- Jigsaw validator - for css validation
- freepik - used for images
- pexel - used for images
- pinterest- for inspiration
Validations were carried out and used to make necessary improvements to the code for the final product.
Lighthouse Validation
The accessibility aspect of the code was challenging. Some flaws highlighted by the Lighthouse validator and subsequently fixed by the developer included:Lighthouse was used to evaluate the performance of the website on each page. The most troublesome page was the product page, which had multiple layout shifts. This was remedied by changing the images and restyling the HTML to minimise layout shifts, improving the performance score from 75 to 89.
Landing Page
- Forms ID and label mismatch
- Image loading issues: not fixed
- Contrast issues
Product Page
- Input label mismatch - labels not necessary
- Buttons do not have accessible names
Thank You Page
- No meta description
Background Image Loading Issues on the Homepage
- This caused a reduction in accessibility and performance. However, the other pages had better performance and accessibility.
Fixing and Debugging
-
Lighthouse errors were fixed and tested again. Some errors, such as image loading issues, were not resolved as fixing them would break the website.
-
There were no errors with CSS according to the Jigsaw validator. This can be seen here. Any issues identified were fixed.
-
Many of the W3C tests found throughout the HTML were similar, consisting mostly of bad practices and trailing slashes. These were noted and the relevant changes were made in accordance with W3C validation standards.
Errors Not Fixed
Lighthouse Home Page
- Background and foreground colours do not have a sufficient contrast ratio
<frame>or<iframe>elements do not have a title- Elements with visible text labels do not have matching accessible names.
- Image elements have
altattributes that are redundant text
Lighthouse Product Page
- Buttons do not have an accessible names
- Elements with visible text labels do not have matching accessible names
- Image elements have
altattributes that are redundant text - Select elements do not have associated label elements
- Forms were tested to ensure they send users to the correct location
- The developer ensured forms indicated a required alert when the user clicked on the submit button
- The links were verified to ensure they sent users to the correct location
The website was tested on Google Chrome, Firefox, and Safari browsers with no major issues noted, except for the display of the favicon.
- I would like to thank code institute for providing the opportunity to learn and redo this task.
- Gratitudes to Tutor support for assisting with css.
Images were acquired from freepik library.