Interactive Design (Task 1): Exercise 3

23.10.2025 - 30.10.2025 / Week 5 - Week 6
Aw Wen Chia / 0368828

Interactive Design / Bachelor of Design (Honours) in Creative Media / Graphic Design

---

TABLE OF CONTENTS

1. Instructions

2. Exercise

3. Feedback

4. Reflection

---

1. 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.

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

Deploy the exercise in Netlify and update your e-portfolio

---

2. EXERCISE

Using the knowledge I got from the previous exercise, we were tasked to make a recipe card by choosing a recipe from 101 Cookbooks. I chose the Spicy Chickpea Pasta Bowls.

I made the website in Adobe Dreamweaver and posted it on Netlify.

Fig 1, Progress

Website on Netlify: https://690334c45df11b03cf58f28c--awwenchia-exercise3.netlify.app/

back to the top

---

3. FEEDBACK

My tutor told me that the background needs to extend all the way to the end and to make sure the background contrasts with the text for readability.

back to the top

---

4. REFLECTION

This task was quite fun, as it was relatively easy after my tutor taught us the basics. At first, I felt intimidated by the task and was unsure of my ability to complete it. However, once I started working on it and following the steps, it became much simpler and more enjoyable than I initially expected. The clear guidance helped build my confidence and made the process feel more approachable.

One of the most enjoyable parts of the task was seeing the recipes my friends chose and how they designed their websites around them. Everyone interpreted the task differently, which made it interesting to compare layouts, visuals, and creative decisions. This experience not only made the task more engaging but also inspired me by showing how the same brief could result in a variety of unique and creative outcomes.

back to the top