INTERACTIVE DESIGN EXERCISE 3: CREATING A RECIPE CARD

October 30, 2025

INTERACTIVE DESIGN EXERCISE 3: CREATING A RECIPE CARD

Week 3 (09/10/2025)

Felice Lee (0381272)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercise 3: Creating a recipe card

EXERCISE 3

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.

Task

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.

Progress:

Before I start, I choose A recipe from the website provided and decided to go with Shaker Apple Pie.

Create an HTML file named "index.html."

First I create a new folder and open it in VS Code, then I create a new file with the name "Index.html"

Recipe title

Website View