Idea of this website to give something special to the community who love cheese so much that they can't live without it. There are already websites for recipes including recipes of food with cheese in it. But I decided to make a website with the recipes of tasty, delicious and famous food made from cheese or used cheese as its main ingredient. It means every recipes in this website has cheese in it as its main ingredient.
Many people around the world love cheese and food made from cheese, even some on them use it as their regular part of daily meal. Kids love food with cheese in it and they always want something cheesy. It is a good idea to have them all in one place for their mommies. So, they don't need to go to website and look for cheesy recipes, as these are all cheesy in this website.
GitHub repository can be found by clicking here. and the deployed live link for the website can be found by clicking here.
- Website should be easy to navigate on all different screen formats such as desktop, tablets and mobile phones.
- It should be visually pleasing.
- Provide users good quality content.
- Should have useful information regarding the main ingredient.
- Easy to follow recipes.
- I want to see easy to follow recipes, without any amiguity.
- I would like to see the image of the cooked food, following the recipe.
- I should be able to give feedback. So, I can give any suggestions I have.
- I would like to find some interesting facts in the website.
- It should look professionally designed.
- Easy to navigate.
- Easy to read and follow the instructions.
- To have a simple Feedback form.
- When clicking on external link, I expect the page to open in a new window.
- After submitting the feedback, there should be a message delivered to confirm the feedback submission.
I have used Google fonts to find the desired font styles for this project and have decided to use font 'Lato' and 'Oswald'. These two font styles complement each other very well.
-
I used Oswald font style for the headings. Oswald makes the headings clear and nice to look at.
-
For the body content and recipes and forms, I used Lato font. It make the website very easy to read.
I have used all the icons in the footer from the Font Awesome library.
I used a colour similar to navy rgb(23, 16, 44) for the all the texts and heading to give a uniformity throughout the website and used a similar to light pistachio rgb(198, 213, 167) colour for the background to give a good contrast between the text and the background, which makes it easy to read.
-
Website has a header element with logo on the left side of the website.
-
There is a nav bar beside logo on the right hand side.
-
Navigation bar links are increase in size when the particular navbar link is hovered.
-
The navigation link is underlined for the current active page.
-
These properties and looks of the header and navbar are consistant throughout the website.
-
The logo and nav bar link items have sticky position. These stay on the top of the screen, even when user is scrolling down.
-
Nav bar hanging against the logo on the right hand side, but it chages its position for smaller screen it moves under the logo for screen sizes 950px and smaller (for tablets). It reduces its font size for screen sizes 600px and smaller (for smart phones/ tablets in portrait mode).
-
On home page there is a hero image, which is consistent throughout the website.
-
On the Hero image on the right hand side there is a text overlay block showing brief description about what is this website for.
-
The cover text (text overlay) shift towards the left hand side for the smaller screens.
-
Under the hero image it has some text including some facts about cheese and why people think it is amazing, what actually cheese is and what is the origin of cheese?
-
It has a picture on the right hand side of the text, which covers 50% of the screen normally but it take up 100% of the width when screen size is reduced to 600 pixels or less.
There are currently 2 recipe pages available, Mac n Cheese and Cheesy Pizza. These recipe pages have same header and footer layout.
-
On the recipe pages under the hero image there are two sections, Ingredients and Method.
-
Igredients are listed as an unordered list.
-
In the section with ingredients there is a picture as well, which covers 50% of the screen width.
-
The picture sits besides the ingredient list.
-
But this picture takes 100% width for the smaller screens and ingredients shifts under the picture.
-
Under ingredients it has a method section showing how to cook the food step by step.
-
Footer contains social media icons which are linked to the corresponding external websites.
-
These links open in a new tabs, so the user stays on our website.
-
The footer section covers 100% of the screen width on all screen sizes.
-
The links centerally alligned.
-
Aria label attribute is used for all the external links to communicate the text to screen reader users.
Feedback page was designed to get user login and their feedback about the website, get the new ideas from the target audience. There are 4 fields in this form.
-
Email
- Takes user's email address and it is a required field. It validates the entry for the right email syntax and form will not be submitted without having it filled correctly.
-
Username
- It takes user's unique ID picked by user and it is a required field and form cannot be submitted without entering a valid data.
-
Password
- It can be filled with user's own choice of password. It is a required field as well and form will not be validated without it.
-
Feedback
- Last item is a textarea, which is to be filled in with user's suggestions or opinion or anything they have to say regarding the website.
This page was created to thank users for taking their time to fill up the feedback form and to give them confirmation that their feedback has been validly entered. The box height and width gains in size to accomodate the text on the smaller screens.
As I am doing HTML/CSS project, I used only HTML5 and CSS3 throughout the project. I used media query to make the website responsive to different screen sizes.
I used Gitpod IDE to code my website.
-
Following procedures are to be followed to get to the Gitpod IDE.
-
Firstly you need to login to your GitHub account.
-
Create a new repository by clicking green "New" button on the right hand side.
-
Once the repository is created, click the repository to open it.
-
Once it is opened, click the green "Gitpod" button on the right hand side to create a Gitpod workspace. It takes some time to create it.
-
-
Note: Once the Gitpod workspace is created for certain repository, do not click the green Gitpod button again, as it will create another workspace for the same repository. Everytime after the Gitpod workspace is created, access it by clicking gitpod.io/workspaces.
-
In the Gitpod IDE there are three main sections:
- On the left hand side there is an explorer that shows the list of the files and folders in the project.
- The right hand side is divided into two portions vertically.
- Bigger portion on the top is for write codes and the bottom is to write commands for the Gitpod IDE.
-
Every change made to the any file and folder in the project has to be sent to GitHub, otherwise the deployed project will not show those changes.
-
To send the changes to GitHub following three steps to be followed:
- First, changes are to be added by giving command 'git add filename' or use 'git add .' for adding all the changes to more than one item in the project.
- Once these changes are added, a commit command to be entered by giving command 'git commit -m "message regarding changes made since last commit" '.
- After the commit command 'git push' command is to be entered to push all the chages to the deployed project.
-
-
Testing was carried out on Google Chrome, Microsoft Edge and Mozilla Firefox for following devices:
-
Google Nexus 10
-
iPhone 13 Pro
-
iPad
-
iPad Pro
-
OnePlus 9
-
Huawei Mate 20 Pro
-
Samsung Galaxy Fold
-
Samsung Galaxy S20
-
Samsung Galaxy S21
-
Samsung Galaxy Tab S4
-
-
Following features were tested for all of the above screen sizes
-
Logo stayed on the top left hand side on all the pages of the site. Font size reduced for 600px and smaller screen sizes.
-
Navbar sat on the right hand side of the logo on all pages. It moved under the logo for screen sizes 950px and smaller. Its font reduced for the screen sizes 600px and smaller.
-
Hero image stayed under the Header area covering 100% of the width on all pages.
-
Cover text stayed on the right hand side on top of the Hero Image but it moved to the left hand side for 950px and smaller screen sizes. It reduced its font for the screen size 600px and smaller.
-
Body area of the home page and the recipe pages covered 100% of the screen including the picture which shared 50% of the width of the top of the body area. Text took over the full width under the image as it was intended. The image took over 100% of the width for 600px and smaller screen sizes.
-
Footer stayed at the bottom of all the pages with social media link, which worked as they intended and opened in the new tab.
-
On the feedback form submit button, it didn't let it submit without entering all the required fields and checked for the valid syntax.
-
When all the required fields on the feedback form were validated, the submit button brought me to the "Thank you" page.
-
-
No errors were detected by W3C validator for all html files.
-
No issues were indicated by W3C CSS (Jigsaw) validator for css file.
-
I confirmed that colours and fonts are readable.
-
I used the lighthouse option in the Google Chrome Dev Tools to verify the website integrity. Following is the screenshot of the report.
-
I have a sticky header and navbar, situated side by side on the top of each page of the site. On the smaller screens, navbar moves under the logo, creating another row. For the mobile screens, navbar used to go under logo but the navbar items were stacked on top of each other and it was covering almost half of the screen. I fixed it by reducing the font of the navbar item, so these can fit on one row under the logo.
-
The sticky header and navbar had another issue that when I was scrolling down, it was staying on the top of all the items except the hero image. I used z-index on the header area and hero image and gave the one for header area higher value than the one for the hero image to resolve the issue.
I deployed my website through GitHub.com.
-
I started by logging in to my own account and clicked on "your repositories" link in the "my account" menu.
-
I clicked my project repository, it opened another page with all my files I created for the project.
-
On top of the screen just above the list of file there was a menu.
-
Next, I clicked the setting option on the right hand of the menu, which brought me to the setting page.
-
I scrolled down untill I found GitHub Pages option.
-
Then I clicked "check it out here" link under it to open Github Pages full menu page and it said that my site was published at the web address.
I would like to inform you all that this project (Cheesy Cheese) is built for educational purpose only and I have rendered the following items and information from different resources. I would like to thank all of these resources for helping me completing my project.
All recipes were copied from "bbcgoodfood.com"
-
Image used as hero image is downloaded from "pixels.com"
-
Rest of the images on the main page and recipe pages are downloaded from "istockphoto.com"
-
All Social media icons were downloaded from "Font Awesome"
-
Idea for the feedback form was taken from "CSS Sign Up Form Tutorial" from the "freecodecamp.org" with some modification.
-
Text overlay idea was taken from "love running" website.