Interactive Design - Exercise 3

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

Lim Yeng San (0366316)

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylors University

Exercise 3

PROCESS WORK

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

Week 5

Chosen recipe: https://www.101cookbooks.com/gnocchi-recipe/

I followed the same steps taught in class to create the website. As the recipe had a lot of text, I cut down a lot of it and focused on the instructions. I added a leafy background and use a green colour scheme.

Fig 1.1: Background image used

I used an unordered list and ordered lists for the ingredients and instructions.

Fig 1.2: Unordered and ordered lists

I added a small table similar to the one in the original website.

Fig 1.3: Table in original website

Fig 1.4: Table in my website

I made the table row colours different with class selectors.

Fig 1.5: Class selectors

I used an ID selector to adjust the main title.

Fig 1.6: ID selector

Once I was done, I published the website onto Netlify. 

Link to published website: https://690255ba3be1eb0071d3f04a--exercise03-limyengsan-0366316.netlify.app/