The Cook Club is a page for kids looking for a fun cooking club aged between 7-18. Cook Club offers fun cooking classes for young adults to help them improve their cooking skills. On this website, users will be able to find the information that they need about the Cook Club such as meeting times, age groups, package offers, photos of kids cooking and sign-up form.
- Feature at the top of the page, the navigation shows the club’s name in the left corner: Cook Club which links to the top of the page.
- The other navigation links are to the right: ABOUT US, GALLERY and SIGN UP which links to different pages.
- The navigation clearly tells the user the name of the club and website and makes the sections easy to read.
- The header explains the club is for kids and young adults aged between 7-18.
- This section provides the user with clear information about the site and who is the club for.
- On the right hand size in the header it is a picture with kids cooking.
- The About Us section offers a better insight into the club concept and what is included in the package when a kid joins the Cook Club.
- In this section, users will be able to find a table with the day, time and age information.
- It contains the contact details and social media links. The footer gives the users the ability to find and contact the Cook Club if they want.
- The footer encourages users to get in touch and provides a phone number, email address, and street address where they can be found.
- Also, in the footer are social media icons so users can find the Cook Club on Facebook, Instagram and Twitter.
- The favicon provides an image in the the tabs header to allow the user to easily identify the website if they have multiple tabs open
- Favicon taken from Love Math Project
- A 404 page will be implemented and will display if a user navigates to a broken link.
- The 404 page will allow the user to easily navigate back to the main website if they direct to a broken link / missing page, without the need of the browsers back button.
- The landing page has an image with kids cooking along with brief information about the site giving the user an idea what the website is about.
- The Gallery section shows pictures of the kids cooking with different age groups.
- This will allow website’s users to see a little insight of how it is like to be part of the Cook Club.
- The gallery will be fully responsive on all devices and allows the user to filter by categories provided in a sub navigation.
- Responsive design
- Resposive gallery
- Sign Up Form
- Implementing filtering at the gallery page
- Animate the galley page
- The signup section has a form to collect details for the user so user can sign up for the Cook Club.
- The form collects the user’s name and email address.
- The sign up form is important because through this method the users can sign up and join the Cook Club.
- The structure of the Website was developed using HTML as the main language.
- The Website was styled using CSS.
- Source code is hosted on GitHub and deployed using Git Pages.
- Used to commit and push code during development of the project.
- The social media icons were taken from Font Awesome
- The images used in the Cook Club project were taken from Pexels
All pages were tested to ensure that responsive according to the W3c Web Accessibility on Chrome and Firefox browsers. Steps to test:
- Open browser and navigate to Cook Club
- Open the developer tools (right click and inspect)
- Set to responsive and decrease width to 320px
- Set the zoom to 50%
- Click and drag the responsive window to maximum width
Expected:
Website is responsive on all screen sizes and no images are pixelated or stretched. No horizontal scroll is present. No elements overlap.
Actual: A few pictures size in the gallery have been changed to fit the responsiveness. As a result, the quality of some picture has changed. This issue is mentioned in bugs section.
Manual accessibility testing was performed using Lighthouse. I confirm that the colors and fonts are easy to read and accessible by running it through lighthouse in devtools.
Testing was performed to ensure all navigation links on the respective pages, navigated to the correct pages as per design. This was done by clicking on the navigation links on each page.
| Navigation Link | Page to load |
|---|---|
| Home | Index.html |
| Gallery | Gallery.html |
| Sign Up | Signup.html |
The sign-up form was tested to ensure it functioned as expected when correct data was input and when incorrect data was input. The following scenarios were covered.
Scenario One – Correct Inputs
Steps to test:
- Navigate to Cook Club-Sign Up Form
- Add the following data:
- First Name: Tom
- Last Name: Smith
- Email: [email protected]
- Click Join Now!
- User should be redirected to signup.html confirmation page.
Expected:
Form submits with no warnings or errors and user is redirected to contact.html confirmation page.
Actual:
Website behaved as expected with no errors or warnings.
Scenario Two - Missing Required Field First Name
Steps to test:
- Navigate to Cook Club- Sign Up Form
- Scroll down to the form and input the following data:
- First Name:
- Last Name: Tom
- Email: [email protected]
- Click Join Now!
Expected:
The form does not submit and an Error is displayed to tell the user that the field is required.
Actual: Website is displaying a message letting the user know that a field was not filled.
Scenario Three - Missing Required Field Last Name
Steps to test:
- Navigate to Cook Club- Sign Up Form
- Scroll down to the form and input the following data:
- First Name: Tom
- Last Name:
- Email: [email protected]
- Click Join Now!
Expected:
The form does not submit and an Error is displayed to tell the user that the field is required.
Actual:
Website is displaying a message letting the user know that a field was not filled.
Scenario Four - Missing Required Field Email
Steps to test:
- Navigate to Cook Club- Sign UP Form
- Scroll down to the form and input the following data:
- First Name: Tom
- Last Name: Smith
- Email:
- Click Join Now!
Expected:
The form does not submit and an Error is displayed to tell the user that the field is required.
Actual:
Website is displaying a message letting the user know that a field was not filled.
Scenario Five - Incorrect email format
Steps to test:
- Navigate to Cook Club- Sign Up Form
- Scroll down to the form and input the following data:
- First Name:Tom
- Last Name: Smith
- Email: tom.smithgmail.com
- Click Join Now
Expected:
The form does not submit and an Error is displayed to tell the user that a valid email is required and the format it should be in.
Actual:
The website is informing the user that “@” is missing.
Testing was performed to ensured that each social media icon opened in a new tab. Each item opened a new tab when clicked as expected.
- No errors were returned when passing through the official W3C validator .
- No error found when returning through the official (Jigsaw) validator .
Some pictures in the gallery page have changed the quality therefore, the quality of some pictures are not clear. I was unable to resolve this issue on tome but I will address in a future release.
The site was deployed on GitHub pages. The deploy steps are:
- 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 provided the link to the complete website.
- The code to make the social media links was taken from the Code Institute Love Running Project.
- The code to make the navigation bar were inspired by the YouTube tutorial Responsive Website Landing Page Design and Code Institute Love Running Project.