Interactive Design: Exercise 3 - Creating a Recipe Card

on
Name: Liong Xenyi (0383125)
Module: Interactive Design GCD60904
Date: 23/10/2025 - /2025 (Week 5 - Week )
Degree: Bachelor of Design (Honors) in Creative Media 
University: Taylor's University

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.


Process
This is the recipes I took information from: Shaker Apple Pie and All-Butter Flaky Crust. Since they are two things that are needed to combine the whole item, I decided to put both recipes down in this website.

I made a new file called Exercise 3, and made a new index.html using Dreamweaver. I first put in the main information of the recipe: ingredients and instructions. After inserting the main information and coding to how I imagine it will look, I only then started adding CSS. I added the pictures provided from the website.
Fig 1.1 Files for Exercise 3

I added CSS using element selectors, class selectors and ID selectors, depending on the information and style type. I used both inline and internal CSS to apply the style appropriately.
Fig 1.2 CSS applied in HTML

I checked the webpage while making it, to ensure the details are how I want it. This is a look of the webpage.
Fig 1.3 Recipe card webpage

Submission
This is the website:


Comments

Post a Comment