INTERACTIVE DESIGN | Exercise 3: Creating a Recipe Card

__ 

09 October 2025 - 16 October 2025

Aishath Eshal Shihab (0381863)
Interactive Design | Bachelor of Design (Honours) in Creative Media | Taylor's University 

Table of Contents

• Instructions
• Netlify URL
• Feedback
• Reflections

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.

https://www.101cookbooks.com/?authuser=1

Netlify URL

https://bestchocchipcookies.netlify.app/

Feedback

 

Reflections