A responsive website documenting the importance of Herbal Tea's
Mellow Tè is an informational guide to the best tea's available for people to drink and enjoy.
The site will have a section dedicated to the properties of various herbal tea's, their history, properties and benefits.
I hope to show people the great benefits of Herbal teas and how it can help improve their daily life.
The target users for this site are people that wish to learn more about the different types of Herbal Teas available and the benefits that they can bring to them. This will breakdown health areas to tackle such as sleep deprivation, digestion, diabetes etc. This is a user friendly website that has access to an index of a variety of teas. All the links are displayed clearly and navigate to the user where to go if they want more straight to the point information.
Wireframes were created with Figma
#1B5A3B - Sea Green - used as the Header font to contrast with the light background
#DFF5DE - light Green - used for the navigation and footer of the page
#EFF6EE - Honey Dew - used for the background of most of the pages of the site.
#080D0B - Black - used for the main paragraph texts on the herbal tea and about pages
•Existing Features Navigation Bar
Featured on all three pages, the full responsive navigation bar includes links to the Logo, Home page, Gallery and Sign Up page and is identical in each page to allow for easy navigation.
This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
Nav Bar
•The landing page image
The landing includes a photograph with text over the image to let them know that the site will have information for all tea Lovers. This section introduces the user to Mellow Tè with a little bit of information on why Herbal teas are good and catches their attention.
•The Footer
The footer section includes links to the relevant social media sites for Mellow Tè. The links will open to a new tab to allow easy navigation for the user. The footer is valuable to the user as it encourages them to keep connected via social media.
•About Page
Will give a a brief overview of the mission of Mellow Tè and what it's mission statement is. This user will see the value of subscribing to the Mellow Tè Newsletter, also displaying a careers page and a sustainability mission statement. This should encourage the user to start introducing herbal tea remedies in to their life, how they can help contribute to the eco-system of the planet or Join the team at Mellow Tè.
•Herbal Teas page
This section of the sites starts to break down the information of each herbal tea available. Listing the benefits of different types of tea and its properties. This section offers the information that would be most useful to the users that visit the site. Encouraging them to start including Herbal tea into their lifestyle.
•Subscribe page
This section of the site contains the form for the users to fill in order to be sucbrscribed to the newsletter. here they will enter in their name and email in order to have this service. This will keep the user up to date from when they leave the website and will also encourage the user to visit the site more often.
•HTML •CSS
•Github Used to host sites code and deploy via Github Pages
•Git Used via Gitpod to code in terminal straight to Github
•FontAwesome Used to deploy icons through out pages.
•GoogleFonts Fonts used from Google Fonts
Testing was achieved through Google Chrome Lighthouse and W3C Markup Validator for HTML and CSS
•Website works on browsers such as Edge, Firefox, Safari and Google Chrome.
•Website content is easy to read and follow.
•Links between pages work harmoniously.
•Accessibility was tested for Website on various browsers such as Edge, Firefox and Chrome.
I encountered a few bugs while trying to deploy the Media Queries for different sections of the site. Some Queries would stick with a particular page size. i.e. media queries for Tablets where:( @media only screen and (min-width: 768px) ) would remain even after going back and checking all the CSS styles.
I rectified this by making sure brackets were correct in code and closed.
In order to deploy site to Github I had to do the following: • Select Settings at top of Repository page. • Click on Pages button on the navigation for GitHub Pages. • Click on source and select Master Branch to commit action of page to. Link below: Github Pages
•Readme template sampled off of Codeinstitute Readme.MD template. • CSS flexbox used from CSS Tricks • CSS Grid used from W3Schools
Photos used from •Pexels •Unsplashed
All code was learned from Code Institute and FreeCodeCamp