INTERACTIVE DESIGN - Exercise 3: Creating a Recipe Card

on

23.10.2025 - 29.10.2025（Week 5)
Lee Xiang Ling / 0384095 
Interactive Design / Bachelor of Design (Honours) in Creative Media 
Exercise 3 / Creating a Recipe Card

LIST / JUMPLINK

LECTURES

Week 5 _ HTML & CSS

HTML BASIC
1. ID & Class Attributes
  • ID: Each elements can have a unique ID for styling or scripting.

  • Class: Shared by multiple elements to apply the same style.
Keynotes: By default, these do not affect appearance unless styled with CSS.

2. Block vs Inline Elements
  • Block Elements: Start on a new line (<p>, <h1>, <ul>)

  • Inline Elements: Stay on the same line (<i>, <b>, <img>)

CSS BASIC
1. Purpose
Defines how HTML elements look -- color, font, layout, etc.

2. Structure
Selectors target elements; properties and values define their style.

3. Ways to Add CSS
  • External: <link> to .css file (recommeded)

  • Internal: <style> inside <head>

  • Inline: "style" inside HTML tag (not recommeded)

Common Styles in CSS
  • Color & Background:  Set text, border, and back ground colors or image.
    Example:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • color: red; background-color: #000000

  • Text Formatting:  Adjust text appearance.
    Example:
    • color - text color
    • text-align - text alignment (left, center, right, justify)
    • text-decoration - underline, overline, or none
    • text-transform - uppercase, lowercase, capitalize
    • text-indent - first-line indentation
    • letter-spacing / word-spacing - space between letters or words
    • text-shadow - adds shadow effect to text

INSTRUCTIONS


<iframe allow="autoplay" height="480" src="https://drive.google.com/file/d/1tcDY9tWQDWifRXmBV5E5en214xlpXnk8/preview" width="640"></iframe>

EXERCISES

For this exercise, we are required to apply the HTML and CSS knowledge we've learned over the past few weeks to create a recipe card webpage. The page must include the recipe title, image, an ingredient list, and step-by-step instructions.

We first searched for a recipe we liked on the website provided by our lecturer (101 Cookbooks). The website offers a complete list of ingredients, preparation steps, and important notes. Our task is to design and create a recipe card webpage in our own style based on this information.

 I chose my favorite recipe—Glazed Lemon Cake. 
This is the receipe jumplink: https://www.101cookbooks.com/glazed-lemon-cake/

Fig. 1.1 - Lemon cake's receipe in 101cookbooks

During the process, I felt that the separation between the image and text sections was too plain. Therefore, I did some research and added a side-by-side layout that places the image and text next to each other, making the overall page more visually appealing, balanced, and clean.

Fig. 1.2 - Side by side layout

After completing the webpage, we needed to upload the HTML file to Netlify to generate a web link. 


My Final Outcome (PDF)

REFLECTIONS

This CSS lesson made me realize how interesting web design can be. 

While creating the recipe card webpage, I practiced layout and color design, and through self-research, I gained a deeper understanding of how CSS works. From text formatting to backgrounds and font choices, I learned how small adjustments can completely change the overall look of a webpage. Although I faced some challenges at first, seeing the final result gave me a strong sense of achievement and joy in design. I also came to understand that web design is not just about coding — it’s a form of creativity and self-expression.