The website The Olive Tree to help customers to obtain information about a local cafe, The Olive Tree. The customers can contact through the website as well as access the social media.
-
- As a First Time Visitor, I want to know more about what the cafe can offer.
- As a First Time Visitor, I want to have a clear understanding on where everything is located so that I can quickly access.
- As a First Time Visitor, I want to have to able to access the menu so that I can decide what I want before visiting the place.
- As a First Time Vistior, I want to verify the testimonials to know what people thinks about the place.
-
- As a Returning Visitor, I want to verify check the menu to remember what I ate last time.
- As a Returning Visitor, I want to check the opening times.
- As a Returning Visitor, I want to be able to find the contact information.
-
- As a Frequent User, I want to verify if there is a new dish added to the menu or if something was updated.
- As a Frequent User, I want to use the map on the contact page to add to the route of my GPS.
-
- The website has pastel colors such as #787254 and #F8F0DC.
-
- The website uses Montserrat fonts as this is very well used in different websites on the internet and users will be already familiar.
-
-
The home page contains a page that contains a cup of coffee. That can get the customer's attention and wish to drink coffee.
-
About page will contain an image of the front of the cafe.
-
The website was created with multiple pages which consists of Home page, About Us, Menu and Contact. All the pages contain a similar header and footer.
The header has the logo on the left and the menu on the right. The menu highlight the current page and it also highlights when we hover the mouse over the links
The initial page will show a big heading with the title and a background of coffee. Right below, there are testimonials of customers that already had some experience with this place.
This page provide more information about the cafe with an image on the side so that the customer can read and see at the same time how the cafe looks like.
This page shows two menus. One menu called "Brunch All Day" and another one "Lunch". It contains the name of the item in the menu, what composes this item and the price for this particular dish. The information shows all the information perfectly aligned and easily readable when on mobile.
There are two sections on this page. On the left-hand side, we can find the contact form that can be submitted. Once the form is submitted, it redirects to a page informing the user that the form was submitted. On the right-hand side, there is a sub-section which contains a sub title called "Opening hours" and will provide the times when the cafe is opened as well as the location of the cafe.
The website can have extra implementation such as sign up page so that the customers can always receive an update when a new item is added to the menu.
More than one validator mechanism were used to verify the quality of the website. Each validation are shown below:
-
The website render correctly on Google Chrome, Mozilla Firefox and Safari.
-
All the pages open correctly in all Apple main mobile devices.
-
Images on home page and about us load fine in all the devices.
-
@media screen is add to the CSS to adequate the content to the mobile devices, from mobile phone to laptops and external monitors.
-
About Us and Contact page contain flexbox so that the content can be one under the other when the page is narrowed.
-
All the links open on the same tab. Social icons at the footer open on a new tab.
-
The form fields are required and validate correctly before the form is submitted.
- The footer on the Contact page was floating on the page because there wasn't content enough to push the footer to the bottom of the page. After adding
min-heightattribute obtained from the Stackoverlow, it helped to push to the bottom. Credit has been given in the appropriate section.
- HTML5 for the website structure.
- CSS3 for all the customization of the website.
- Balsamiq created the wireframe for all the pages.
- CodeAnywhere CodeAnywhere IDE
- Github as a repository for the entire project.
- Google Fonts imported on CSS.
- Color Hunt used to choose the correct color palette for the project.
- Adobe Color confirmed the contrast of the colours were matching.
- UI Dev Initial screenshot that shows the site rendered on all the devices.
- Pesticide was used to assist on the content alignment.
-
Github was used as a repository for this project. A new repository was created before the project initiate which allowed to host the webiste.
-
To deploy the website, access [The Olive Three][https://github.com/rafaelallan/the-olive-tree], Settings, Code and automation and Pages. On this page, there is an option called Branch where option is changed to main.
-
After the steps above, GitHub will provide after a couple of seconds a link on the same page. This link can be used to access the live version of the project.
- The text from the Testimonials and About Us page was generated using Open AI.
- W3C Schools was used for great references along the project.
- Make body have 100% of the browser height helped to keep the footer at the bottom when the content of the page is not big enough to push it down.
- Font Awesome icons were added to the footer and Menu page.
- TinyPNG resized the images to upload do CodeAnywhere and add to the project repository.
- Images used on the website were obtained from Pexels.
The Code Institute has provided me all the content to have this project to happen. I appreciate all the help from my mentor narender_mentor, he shared several ideas for this project.
I also want to thanks Cesar.Garcia_5P who we had a few video calls to discuss about the progress of the project and motivated me even when I was working on the project sick.