INTERACTIVE DESIGN - EXERCISE 3: RECIPE CARD

20/10/25 - 26/10/25 (Week 5)

Nicole Ng Ying Yan  0382412

GCD60904 Interactive Design

Exercise 3: Recipe Card

---

1.0 EXERCISE 3 - Recipe Card

INSTRUCTIONS

In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from the link below.

https://www.101cookbooks.com/

Create an HTML file named "index.html."

Create a section that displays the following information:

• Recipe title
• Include necessary images for the page
• List of ingredients
• Step-by-step cooking instructions

Apply the style element in your document.

Apply CSS rules to style your recipe card.

Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Use your creativity to make the page look appealing and interesting.

Submission Requirements:

Deploy the exercise in Netlify and update your e-portfolio.

---

Chosen recipe:

https://www.101cookbooks.com/great-chocolate-chip-cookies/#recipe

Netlify link:

id-recipecard.netlify.app

Fig. 2.1 VSC Code

Fig. 2.2 Final Interface Design Outcome

⌅

---

2.0 REFLECTION

I am quite satisfied with the outcome of this exercise. I tried to make it as similar as the original interface which is quite minimalistic, so I didn't add any fancy background image. This is a good exercise to implement the techniques we have learnt so far.

---

⌅