This is a website, where the users can find easy and tasty recipes.
Its purpose is to help them try and cook homemade food and constantly return for more inspiration.
-
-
As a First Time Visitor, I would like to easily understand what the site is about and what it's purpose is.
-
As a First Time Visitor, I would like to be able to quickly navigate through the site.
-
As a First Time Visitor, I would like to see relevant information.
-
-
-
As a Returning Visitor, I would like to find recipes which include a full list of ingredients and preparation method.
-
As a Returning Visitor, I would like to see food images through the site.
-
As a Returning Visitor, I would like to find social media links where I can share my experience
-
-
-
As a Frequent User, I would like to see new recipes during a period of time.
-
As a Frequent User, I would like to be able to contact, share recipe ideas and information.
-
-
-
- Main colors used are white, orange, black
-
- The Lato font is the main font used through the site and Sans Serif is used as a fallback font.
-
-
The background image for the landing page is used to get the user's attention.
-
Images used in the Recipes section are there to show the user how the food will look after following through the instructions.
-
-
-
As the site is responsive, it allows the user to view it on different devices.
-
Having a fixed Navigation Bar lets the user get back to any section of the site.
-
Going through the Home section of the site user can quickly navigate to the Recipes section by clicking the "Let's get cooking" button.
-
Images
-
Text information
- Change the resolution of the logo for a better view on mobile devices
- Bootstrap v4.5.3:
- Bootstrap was used to assist with the responsiveness and styling of the website.
- Google Fonts:
- Google fonts were used to import the "Lato" font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was used to add icons to the site.
- jQuery:
- jQuery came with Bootstrap
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the project's code after being pushed from Git.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
- No errors found View results here
- All errors and warning are from bootstrap View results here
-
Laptop & Desktop
-
Chrome
- All tested and working fine
-
Edge
- All tested and working fine
-
Opera
- All tested and working fine
-
Firefox
- All tested and working fine
-
Internet Explorer
-
When tested on this browser found the following errors:
-
The text and button on the Home page are pushed to the left and are not aligned.
-
In the Recipes section text for Method is pushed to the left and not aligned.
-
In the Footer of the site, social media icons are pushed to the left and have no padding in between.
-
-
-
Tested on Chrome using different devices via google chrome device emulators and all works fine.
-
Also tested on the following physical mobile devices:
-
Samsung Galaxy S9 plus and works fine
-
Samsung Galaxy s8 and works fine
-
Huawei P30 and works fine
-
-
-
-
As a First Time Visitor, I would like to easily understand what the site is about and what it's purpose is.
Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar which can lead them to a page of their choice. Underneath there is a Hero Image with text and a "Let's get cooking" button. Also, the site Logo and Hero image give clear information about what the site is about.
-
As a First Time Visitor, I would like to be able to quickly navigate through the site.
At the top of the page, there is a fixed top navigation bar which can assist the user in returning or navigating to any section of the site. Also clicking on the Logo, in the top left corner of the navigation bar, will take the user back to the Home section.
-
As a First Time Visitor, I would like to see relevant information.
As the site is about Recipes and food, therefore all information and images used are of food as well.
-
-
-
As a Returning Visitor, I would like to find recipes which include a full list of ingredients and preparation method.
By clicking on the Recipes link on the navigation bar or by clicking the "Let's get cooking" call to action button on the Home screen, will take the user to the Recipes section, where can find recipes with a full list of ingredients and also a method of preparation.
-
As a Returning Visitor, I would like to see food images through the site.
Upon entering the site, the user is greeted with a full-page background image of food. Also by scrolling down user can enjoy other beautiful images of food.
-
As a Returning Visitor, I would like to find social media links where I can share my experience
At the footer of the site are placed social media links, where user can share their experience.
-
-
-
As a Frequent User, I would like to see new recipes during a period of time.
By going to the Recipes section, the user can see all of the recipes currently on site.
-
As a Frequent User, I would like to be able to contact, share recipe ideas and information.
By clicking on the Contact link in the navigation bar, the user will be taken to the Contact section of the site. There the user can fill up a form and leave a message or share an idea.
-
-
Following steps were used:
- First login to GitHub
- Locate the Repository and click on settings.
- Scroll down the settings page till you see GitHub Pages.
- Then under source choose master branch by clicking the button.
- Click Save and wait for the page to refresh.
- Scroll down again to GitHub pages.
- Find the URL for the site under GitHub pages.
- Login to GitHub
- Locate the Repository.
- In the top right corner click Fork button.
- Login to GitHub
- Fork the Repository.
- Then click Code under the Settings button.
- Choose HTTPS, SSH, or GitHub CLI, then click the copy button to the right.
- Open Git Bash
- Change the directory to the location where you want the cloned directory to be made.
- Type git clone and paste the URL you copied before.
- To create the clone press Enter
-
Code for full page background image found on https://css-tricks.com/perfect-full-page-background-image/, also found in the videos for Whiskey Drop website lesson and modified to fit project needs.
-
Code for linear-gradient background taken from https://www.w3schools.com/css/css3_gradients.asp and modified to fit project needs
-
Code for a responsive image taken from https://www.w3schools.com/css/css_rwd_images.asp and modified to fit project needs.
-
Bootstrap: Bootstrap Library used throughout the project mainly to make the site responsive using the Bootstrap Grid System.
-
Autoprefixer CSS online - Used to add vendor prefixes to my css code.
-
Code for navbar taken from Whiskey Drop website lesson, also found in Bootstrap and modified to fit project needs.
- All content was written by the developer
-
- Used Free Logo Design to create the logo for the site.
-
-
Home section image is taken from:
- Photo by Lidye on Unsplash
-
About section image taken from:
- Photo by Lisa Fotios from Pexels
-
Recipes section images taken from:
-
The responsive image of the site taken from Am I Responsive
-
- My mentor, Adegbenga Adeye, for continuous helpful feedback and support.
- The team at Code Institute, for teaching me the necessary skills to create this site.
- @JimLynx_lead from the Slack community, for his helpful sessions on MS1 planning and how to use Git and Github
- Used Whiskey Drop Lesson and Resume Project for ideas and inspiration.
- w3schools for all the useful information found on the site.