Foodie is a food blog or website. The project has been build using html and CSS. This is a personal blog and the owner wants to share her experiences or experts in food with others. Through this website the owner shares her personal food recipes and want the visitors of the website to know about them and contact her regrading food recipe questions or suggestions through contact me page.
Visit the live website.
- Purpose of the project
- User Stories
- Features
- Future Features
- Typography and color scheme
- Wireframes
- Technology
- Testing
- Deployment
- Credits
- As a visiting user, I would like to know more about the owner of this blog/website.
- As a visiting user, I would like to contact the owner for business enquiries
- As visiting user, I would like to view more recipes by the owner
- As a visiting user, I would like to view recipes instructions in a separate page.
- As a visiting user, I would like to view all recipes within one page.
- As a visiting user, I would like to have a confirmation message after submitting the queries form in the contact me page.
- As a visiting user, I would like to find the social media accounts of this website/blog.
- As a visiting user, I would like to open social media links in to another tab.
All pages have a header and footer.
-
Header - The header contains the logo in the left side and a side navbar in the right side.This is located at the top of every page.
-
Logo - The logo has the home page hyperlink that returns the user to the home page. The logo has been created in an online software.
-
Nav Bar - The nav bar has the links to the different sections of home page and pages of the website.
-
-
Footer - The footer exists on all pages. The footer consists of social media links at the center of it.
Including the header and footer, the home page also contains the hero image with welcome text, About me section & Favourite recipe section.
-
Hero image this is the a landing section of home page. It has a simple text with a hero image.
-
About me section This section comes after hero image. This section shows the image of the owner of this blog and gives a detail information about her, by using 1st person.
-
My favourite Recipes section This section has three chosen or favourite recipes of the owner. Each recipe has a container with short information about the food and has a button. By clicking this 'read more' button, the user will be directed to the recipe isntructions' section which is located in to 'recipes' page.
-
Apart from header and footer this page has three sections that contains the instrcutions of each recipe from home page.
-
The design and HTML strcuture is the same for all the three sections apart from contents.
-
Each section has two parts, ingrdients and instructions of how to make the food.
Recipes page Image
Including (header and footer) this page has a container which has two parts.
-
Form part/ The user can send their inquires, suggestions or comments to the owner of this blog.
-
Message to the user By reading this text the user will understand the objective of this form. This will help the user to fill out the form effectivetly.
-
This page has simple thank you image in the right side and a recived message in the left side.
-
The user will be directed to this image after submmiting the contact me form.
-
This page has been created so the user would know that their form details has been sent successfully.
-
If the user tries to submit the form empty, it will give a message to fill the form fields. All the form fields should be filled to be able to submit it.
- Newsletter form
- Add more recipes section
- View recipe list
- View video tutorials for recipes
- View photo gallery
- The following google font was used for the website.
'Roboto', sans-serif;
- The website uses the following colors that has also been used in the logo.
- The colors were used in different types as hex and rgba.
As these were the first prototype. There are some changes between them and the real website. For instance, images and some other slight changes that the developer changed while coding.
Wireframes / prototypes
- HTML
- CSS
- Figma: create the prototype / wireframes.
- Git
- Github
- Gitpod
- Google Fonts
- Font Awsome
- Favicon
- Am I responsive
- ezgif.com: Changed jpg to webp
- The W3c validator was used to validated the each HTML page sepeartly. Also it was used to validate the style.css page.
-
W3C Jigsaw CSS
-
W3C HTML Validation
-
HTML validation of Home page
-
HTML validation of Recipes page
-
HTML validation of Contact-me page
-
HTML validation of Confirmation page
-
-
To analyze the performance, bes practice, accessibility annd SEO for the each page in the website the lighthouse within dev tools was used.
-
Home page
-
Desktop Full Report
-
Mobile Full Report
- Most of the performance marks were cut due to 'Eliminate render-blocking resources' warning. As for this project compressing css file has not been recommneded. Therefore, I did not change the css file.
-
-
Recipes page
-
Desktop Full Report
-
Mobile Full Report
-
-
Contact me page
-
Desktop Full Report
-
Mobile Full Report
-
-
Confirmation page
- Desktop Full Report
- Desktop Full Report
-
- This site was manually checked after uploading each feature. The features were interactive and worked successfully.
- This website can work properly on Chrome, Firefox, Safari.
-
The website wasn't loading style.css page and was giving an error. The error was about favicon(this little icon that shows in the browser tab). To fix it, favicon was added in the header.
-
W3S HTML validator found no error in the home page, but a warning, "Section lacks heading" in all the sections of the page. Two approaches were taken to solve this issue
- remove section tag
- add h2 or h1 inside section tag
-
W3S CSS validator found parse error and in the Text-Area section. A semicolon was missing in a line of code. Therefore, by adding semicolon this issue was fixed.
-
W3S HTML validator found another error, "Bad value for attribute srcset on element img: No width specified for image 'ramen' ".
- Fixed this issue by giving width to the image.
-
W3S CSS validator found another error "the value 'text' is deprecated". An unused line of code with no semicolon was found in the css file. By removing it this error was fixed.
-
While checking the perofmance of the website in the lighthouse dev tools the following error occured:
- Document does not have a meta description. Fixed this by adding meta description in the header of recipe page.
-
While deploying the website in the github pages, Readme page would appear as deafult page and the css properties wouldn't apear. Therefore, the home.html name was changed to index.html to solve one part of this issue. Also, the link path for style.css was changed from absolute to relative.
This website was developed in Gitpod. It was deployed on github.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
- A part of footer's code was taken from Love Running Code Project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent