I designed my project for those who love to cook and are searching for new recipes. The website utilises an API to return many different receipe options for whatever the user wants to search for. The user is presented with mutlitple options displaying images of the food, serving size and the time it will take to make! When a user clicks on their desired recipe, they are directed to the 'allrecipes' site for more information.

My search API is on a single page format and very user friendly.

This site has been built using a combination of the skills I have learnt so far in HTML, CSS, and JavaScript.

Links below to my GitHub Pages and Github Repository:

• Github Pages

• Github Repository

This website has been designed to act as an online recipes finder for people looking for specific meals or deserts. It has been created showing my skills in HTML, CSS and js so far. I wanted the colours to be fresh and modern but also simple. I wanted the page to look easy to use and navigate. The background Image works great as it instantly draws your attention to the center of the screen to where the search bar is location so that there is no hesitation of where to go.

The purpose of this site is to allow users to search for recipes. The search field and button are front and center with little else on the page to distract from that, in a similar way to the Google homepage.

This website is created for anyone who wants to expand their cook book and try a new receipe.

A user:

• A user who wants to search a new recipe to learn.

• A professional chief who is looking for a recipe.

• For someone with little cooking knowledge.

• For someone looking for a specific recipe.

As the page creater:

• I want the recipes to be up to date.

• I want the users to find classic or moddern dishes or methods of food receipes.

• A user who wants to get inspiration to try new recipes

• I want to utilise an API to provide up to date information to my users.

• I want this page to be simple for all age groups to be able to use and navigate the site with ease.

I desigined my site wireframe using Figma, please see link and screenshots below of my final draft. .

Figma - Click here to view my wireframe

My final product website has turned out exactly as planned with only a few little changes such as footer bar.:

1. The top navbar is now fixed at the top to ensure ease of navigation from all points on the page.

2. Boxes with pictures come up below main image showing recipes.

• Home - A home button to return right back to the search menu. at the first glance.

• Search bar - This section will search any recipe that is inputted.

• Navbar - on a mobile divice there is a nice and easy drop down that has the return to home button.

• An easy to navigate front page.

• A simple search bar.

• A huge list of what they are searching.

• A home button to return back to search page.

• Full recipes on what they are searching.

• JavaScript

  • To add functionality to my api.

• CSS(Cascading Style Sheets)

  • For Styling

• Bootstrap

  • For HTML and CSS framework

• Font Awesome

  • For icons

• Figma

  • To draft a wireframe

• Am I Responsive

  • To test responsiveness on all screen sizes

• GitHub Pages

  • Website hosted on GitHub pages

• Git

  • For version control

• GitHub

  • Repository hosted on GitHub

• Chrome DevTools

  • To check site throughout development and inspect

• Pingdom

  • To test the load time of the page

• HTML

  • To validate my HTML code

• CSS validater

  • To validate my CSS code

• HTML formatter

  • To ensure all HTML is formatted correctly

• Checked that the navbar stays fixed to the top of the screen whilst scrolling down the page.

• Checked that the back and forward browser buttons work correctly with no errors.

• Checked that when the Home button is clicked while the user is looking at receipes, it will navigate the user back to the top of the screen.

• Checked that when the search button is clicked it brings up a list of relevant receipes.

• Checked that if the user inputs invalid text into the search bar, they will get a pop up to alert them.

• Checked that is the user inputs a valid search, they are displayed a list of relevant receipes to choose from.

• Checked that when a receipe is clicked on, it successfully opens the API for 'allrecipes'

• Checked all links work correctly and open in a seperate page.

HTML Validator checked that all of my HTML code is valid.

CSS Validator checked that all of my CSS code is valid.

JSHint checked that all of my JavaScript code is valid, it does show two warnings in ES6 that may not run on all systems

Chrome Dev Tools were used throughout the creation of my project to ensure everything was running smoothly and working responsively on all device sizes.

Am I Responsive checked that my page is responsive on all screen sizes

Pingdom checked the load time for my page

Google Chrome The site was created using google chrome and tested thoroughly using this browser, no issues on that platform.

Internet Explorer The heading section layout changes when loaded in Internet Explorer, when on small screen sizes the image is too big and scrolls, on larger screen sizes.

• Post code in peer review on slack

  • No responses yet!

• I have sent it to friends and family to test on other phones and tablets.

  • It has been tested on iphones samsung s8/s10/s20, iPad and Samsung Galaxy S4. Works correctly in portrait and landscape.

The only bug I found during my testing is an ES6 error within the JavaScript code. This means that the code may not be compatible on all systems if they don't support ES6, this is a common error. I covered this within one of my mentor calls and this is absolutely fine.

The project is hosted on GitHub Pages

• Host a git repository on GitHub.

• Create project in GitPod saving each big change for version control to GitHub.

• Open your project repository in GitHub.

• Click on settings.

• Scroll down to the GitHub Pages section.

• Click on source and select master branch.

• After the page refreshes you will have a link to your deployed website.

• Final product now hosted on GitHub Pages.

• Have git installed

• Visit the repository

• Click 'Clone or download' and copy the code for http

• Open your chosen IDE (Cloud9, VS Code, etc.)

• Open a terminal in your root directory

• Type 'git clone ' followed by the code taken from github repository

• When this completes you have your own version of the website

• Feel free to make any changes to it

• The website can be run by opening one of the HTML files within a web browser

• Visit the link provided

• Your website with any made changes will appear

• Saved changes to the website will appear here after refreshing the page

The benefits of hosting your website on GitHub pages is that any pushed changes to your project will automatically update the website. Development branches can be created and merged to the master when complete. It may take a moment for changes to appear on the hosted website. During development the site is written in VS Code. It is run using Live Server plugin for VS Code.