code-institute-submissions / world-of-essence Goto Github PK

World of Essence Website

This has been designed to be a simple, clean and professional (and initially) static website. Easy to navigate , appealing, engaging and responsive. The aim is to eventually provide an ecommerce platform for the sale of products currently highlighted.

UX

Primarily this website is designed for the convenience of customers and potential customers to view, compare and (eventually) purchase from a range of products. The future considerations are for a simplified, non technical way for offers to be added to the website, images to be added/removed as the range expands or changes. by the owner.W

The original concept was for:

1. Simple navigation bar incorparating the company logo, light appealing colours and intuitive navigation aids to successive pages. The logo is also a "home button"
2. landing page, visually introducing the customer to the range of products by means of a carousel.
3. About page to give an idea of the ethos of the company. Simple and assuring text , a further option to move straight to the products via a simple button.
4. A products page to display the items with a brief description.

I believe that the result is visually appealing, professional looking and responsive. Whilst there are improvements to be made this is a perfect example of what can be achieved using HTML5,css,Bootstrap and some javascript.

Features

Existing Features

1. Header: a navigation bar with links to all pages. Buttons transform on hover and change colour and shape on click.
2. Landing page: with an image carousel. Based on BS carousel from W3schools.com, utilising bootstrap 4.5 and modified to suit.
3. About page:Simple information page utilising "Jumbotron" from bootstrap for visual appeal and a button link to products page and an e-mail link.
4. Products page: based on portfolio with filtering from W3schools.com,utilising bootstrap 4.5 and modified to suit. Filter allows items to be sorten into types for ease of viewing.
5. footer section with social media links.

Features Left to Implement:

1. An ecommerce purchasing feature to enable customers to purchase products.
2. A sign up/register section for existing and new customers (modal/form/page?)
3. A contact page/section (modal/form/page?)
4. The complete product range to be added to the gallery on the products page.
5. More information to be added on products (description, usage, "tasting notes!!")
6. The about page needs more information regarding the staff/family.
7. The ability to share and /or like on social media easily.

Other feature ideas:

1. A stock level monitor for managerial use.
2. A simplified system for adding offers and images as offers and products change.

Technologies Used:

HTML5 CSS3 Code institute template Bootstrap 4.5 Google fonts Font Awesome Javascript

Testing:

I heve tested the website as responsive on all media types and am reasonably convinced as to it's effectiveness. There may be some snall visual anomalies which will need to be ironed out. All navigational links have been seen to be working.

To run a frontend (HTML, CSS, Javascript only) application in Gitpod, in the terminal, type:

python3 -m http.server

A blue button should appear to click: Make Public,

Another blue button should appear to click: Open Browser.

Photos used in this website were provided by S.Kendal and remain the property of World of Essence.

Many thanks to The Code Institute and W3schools website for helping me to this stage. Onward and upwards.