Interactive Design Exercise 3: Creating a Recipe Card

23/10/2025-30/10/2025 ( Week 5- Week 6 ) 

Choong Yee Leng || 0381980

Interactive Design || Bachelor Degree in Creative Media || Taylor’s University 

Exercise 3: Creating a Recipe Card

TABLE OF CONTENT

1.Instructions

2.Url & Page development

3.Feedback

4.Reflection

Instructions

Objective:

In this exercise, student will design a simple recipe card webpage using HTML and CSS. The goal is to display a recipe’s title, ingredients, and instructions in a clean and visually appealing layout.

Choose a Recipe:

Select one recipe from the provided link: https://www.101cookbooks.com/?authuser=0

Create Your HTML File:

Name the file index.html.

Include the following sections in the webpage:

• Recipe Title
• Images related to the recipe
• List of Ingredients
• Step-by-step Cooking Instructions

Apply CSS Styling:

• Use the <style> element inside the HTML document to add CSS.
• Design the recipe card to be visually organized and easy to read.
• Use a combination of CSS selectors to style your content:
• Element selectors (e.g., body, h1, ul)
• Class selectors (e.g... recipe-title. ingredient-list)
• ID selectors (e.g., #instructions)

Design Goal:

Ensure your webpage is visually appealing, properly structured, and clearly presents the recipe content

Url & Page development

Netlify url: https://exercise3-recipeofbruschetta.netlify.app/

Page development:

Figure 2.1 Page development

Reflection

This exercise was both enjoyable and beneficial, as it allowed me to express my creativity while practicing my HTML skills. I also enhanced my website by applying additional knowledge to achieve my desired layout. For instance, I used the display property and flex values to structure the layout effectively. The declaration flex-direction: row enabled the image block and text block to align side by side—allowing the images to serve as decorative elements beside the text, creating a more organized and balanced composition. Additionally, I applied display: flex and flex-direction: column within the image block so that the inline images could be arranged in a column, resulting in a cleaner and more cohesive design.