Recipe Website

Joint project with MAD9014 to create a recipe website.

Submission

Push your completed deliverable to GitHub, invite professor, and submit link on BrightSpace.

Due: Fri Dec 13, 2024

Website Content

open_in_new

Content

# Introduction

You will build a responsive recipe website that will be a join project for MAD9013 and MAD9014. To satisfy the requirements for MAD9013, you must create the website using the best practices for html and css that we have discussed and practiced throughout the semester. I will not be grading you on your javascript skill. The only way your javascript will impact you MAD9013 grade is if you fail to complete portions that generate required html content output or interfere in any way with the usability of your website.

You may create the website either using fully custom css or with Tailwind CSS (opens new window). Your website design should be customized, so regardless of whether you use the Tailwind CSS framework, or built off of the patterns we created in class, you are expected to customize the layout, design, colour scheme, font, and type styles.

# Project Requirements

# General

You will be marked on both the quality of your code and the quality of the design.
You may use either custom css or Tailwind CSS.
The design and layout of your website must be original. You cannot use any Tailwind CSS web themes or any other component/pattern libraries. Doing so will result in a zero.
Website must be fully responsive
- You must demonstrate use of both @container and @media queries and related properties when creating responsive styling.
Website must properly use all provided content (opens new window). No placeholder text. Properly sourced and credited stock photography is allowed.
- Try Unsplash (opens new window) for great free images.
Add a new Google Font (opens new window)
Create a new colour scheme (that is different than the example)
Include accessibility features and conduct an accessibility audit
- Skip Links
- Proper keyboard navigation with tabbing
- To Top button
- Run a WAVE browser extension check and clear all Errors and Color Contrast Errors. Review all Alerts and clear as many as possible.
  - Removing all Alerts is not a requirement, as based on your design or content it may not be possible. However, the expectation is that you review all Alerts and implement suggested changes from Alerts where possible to remove as many as possible.
Connect your newsletter sign up form with Formspree (opens new window) to collect email responses
- Note: the free plan only gets 50 submissions per month. Make sure when testing to not overdo submissions so that both of your professors can also submit it a few times each.
- View the Formspree Set Up video below.
Create a new private GitHub repository
- Name the repository madd-project-recipe-website
- invite Professor Adam & Professor Steve
- make live with GitHub Pages

# Website Content & Structure

Use the provided content document (opens new window) for the recipe website. It provides all of the required content and instructions for how to structure the website, as well as some functionality requirements.

Certain portions of the website will have content that will be dynamically fetched from the recipes from DummyJSON (opens new window). Where this should be done has been outlined in the content document and more details will be provided in MAD9014.

# Elements required on each page

Every page must have the same navigation menu at the top of the page and the same footer at the bottom of the page.
- The nav menu lets the user navigate between Home, Recipes, and Blog page.
- The nav menu must have a search form to search recipes.
Every page must have a consistent footer that includes all content in the content document.
The colour scheme needs to be consistent on every page.
A consistent container should be used across the website.
Consistent transitions on all hover/focus states

# Example Site Walkthrough

# File Structure

Your file structure will vary depending on whether or not your choose to implement Tailwind CSS.

A custom css project should have this file structure:

./css/main.css
./images
- Whatever images you include in your project
./js
- javascript files as per Steve's requirements
blog.html (displays the static blog post content)
recipes.html (displays recipes list with filter page)
recipe.html (displays individual recipe page)
index.html (home page)
.gitignore

A Tailwind CSS project should have a file structure similar to this:

./dist/output.css (Tailwind output file)
./images
- Whatever images you include in your project
./js
- javascript files as per Steve's requirements
blog.html (displays the static blog post content)
recipes.html (displays recipes list with filter page)
recipe.html (displays individual recipe page)
index.html (home page)
input.css (Tailwind working file)
package.json
tailwind.config.js
.gitignore

Please Note!

Steve will also specific for the javascript portion. Please default to his instructions for all javascript specific file structure requirements.

# Frequently Asked Questions

Q: Do I need to make my site look exactly like yours and include all the various design flourishes?

A: No, in fact it should look different! Your site must include all of the content from the content document and include all structure requirements in the document and this assignment's instructions. Other than that, the design is up to you and should be made as original and interesting as possible!

Q: Does my subscription form need to have a submit action?

A: Yes, you should set up a simple form submission handling using Formspree (opens new window). This is a simple tool that allows you handle form submissions and receive the data via email. Note: the free plan only gets 50 submissions per month. Make sure when testing to not overdo submissions so that both of your professors can also submit it.

# Formspree Set Up Video

Here is a quick video showing you how to set up Formspree.

# Submission

WARNING

Due Friday December 13th at 11:59pm

Please note: This is due on the last day of classes. Because of this, no extensions can be given. Please plan accordingly.

Create a new private GitHub repository
- Name the repository madd-project-recipe-website
- invite Professor Adam arobillard & Professor Steve prof3ssorSt3v3
- make live with GitHub Pages
Do not put this code/repository within the mad9013-deliverables repo
Open BS LMS and go to the Activities > Assignments page. Go to the Recipe Website project and submit the URL to your Private Repo.

Submit it early!

There is no need to wait until December 13th to make this repository and invite me! I will not look at your code until the morning of December 14th. You might as well create the repo, invite me, and submit it as early as possible so that you can catch any issues with it as soon as possible! Do it today even!

← Two Page Site