Interactive Design - Exercise 3 : Creating a Recipe Card
23/10/2025-30/10/2025 / Week5-Week6
Tan Tzu Yu / 0374460
Interactive Design / Bachelor of Design (Honors) in Creative Media / Taylor's University
Creating a Recipe Card
LECTURE NOTES
[ CSS Basics ]
CSS works in two parts:
Property: What you want to change (e.g., color, font-size)
Value: The setting for that property (e.g., red, 16px)
[ Types of Selectors ]
Element Selector
Targets specific HTML elements (e.g., p, h1, div).
Class Selector (.)
Targets elements with a specific class name.
Example: .container { color: blue; }
ID Selector (#)
Targets an element with a unique ID.
Example: #header { background: grey; }
Universal Selector (*)
Targets all elements in the document.
Example: * { margin: 0; padding: 0; }
Descendant Selector (space)
Targets elements inside another element.
Example: div p { color: green; }
Child Selector (>)
Targets direct children only.
Example:
Here, <li> is a child of <ul>.
Element Selector
Targets specific HTML elements (e.g., p, h1, div).
Class Selector (.)
Targets elements with a specific class name.
Example: .container { color: blue; }
ID Selector (#)
Targets an element with a unique ID.
Example: #header { background: grey; }
Universal Selector (*)
Targets all elements in the document.
Example: * { margin: 0; padding: 0; }
Descendant Selector (space)
Targets elements inside another element.
Example: div p { color: green; }
Child Selector (>)
Targets direct children only.
Example:
Here, <li> is a child of <ul>.
[ Pseudo-Class Selectors ]
Used for adding styles to elements in a particular state, often for links or interactions.
Examples:
a:link→ default link (usually blue)a:visited→ visited link (usually purple)a:hover→ changes when the mouse hovers over (e.g., underline or color change)
These styles usually affect one column layout or text interaction.
[ Pseudo-Element Selectors ]
Used to style specific parts of an element.
Examples:
p::before→ inserts content before a paragraphp::after→ inserts content after a paragraph
These are often used in two-column or decorative designs.
[ Block vs Inline Elements ]
Inline elements: Stay in the same line (e.g., <span>, <a>)
Block elements: Start on a new line (e.g., <div>, <p>)
Inline elements: Stay in the same line (e.g., <span>, <a>)
Block elements: Start on a new line (e.g., <div>, <p>)
[ Responsive Design ]
Responsive design ensures that a website looks good on all devices.
Different layouts or versions are designed for desktop and mobile screens.
Helps improve user experience across various screen sizes.
- Block elements: Start on a new line (e.g.,
<div>, <p>)
<div>, <p>)Week 7
EXERCISE 3 : CREATING A RECIPE CARD
Objective:
We will design a simple recipe card webpage using HTML and CSS. The webpage should display a recipe’s title, image, ingredients, and cooking instructions in an attractive layout.
Instructions:
Choose a Recipe
Select ONE recipe from the link provided in google classroom.
Create Your HTML File
Name the file
index.html.Structure the webpage with the following sections:
Recipe Title (e.g.,
<h1>Chocolate Cake</h1>)Image of the recipe
List of Ingredients (use
<ul>or<ol>)Step-by-Step Cooking Instructions (use
<p>or<ol>)
Add Styling Using CSS
Use the
<style>element inside your HTML document (inside the<head>section).Write CSS rules to style your recipe card (for example, change colors, fonts, borders, spacing, etc.).
Use CSS Selectors to Organize Your Styles
Apply different selectors to target various parts of your webpage:
Element selectors: e.g.,
body,h1,ul,pClass selectors: e.g.,
.recipe-title,.ingredient-listID selectors: e.g.,
#instructions
Ensure Visual Appeal
Arrange your elements neatly.
Make sure text is readable, images are properly sized, and spacing looks balanced.
 |
| Fig 1.0: Strawberry scone recipe website |
 |
| Fig 1.1 : My strawberry scone recipe card website |
 |
| Fig 1.2 : Introduction section |
- Highlighted specific words using
<span></span> Added an image with
<img>andaltattributeStyled the text and layout using CSS (e.g.,
text-align,font-size,color)
[Notes section]
 |
| Fig 1.3 : Notes section |
- Created a table using
<table>,<tr>,<th>, and<td>to organize notes clearly
- Applied borders, background color, and padding with CSS for better readability
 |
| Fig 1.4: Ingredients section |
- Displayed items using bullet points with
<ul>and<li>
- Styled the list using CSS (e.g.,
list-style-type,margin,padding)
 |
| Fig 1.5: Instructions section |
- Displayed steps using numbered lists with
<ol>and<li>
- Used CSS to adjust spacing, line height, and numbering style for clarity
 |
| Fig 1.6: Variations section |
- Listed alternative ideas using bullet points (
<ul>and<li>)
- Used consistent font and spacing to match the ingredients section
- Added a “Back to Top” link using
<a href="#top" class="top">Back to Top</a>
- Styled the link with CSS pseudo-classes (
.top:link,.top:visited,.top:hover) to match the color scheme and create a hover effect
REFLECTION
Throughout this exercise, I have learned more about HTML and CSS. This recipe card exercise taught me more than just HTML and CSS. Designing the recipe card felt like mixing creativity with code — choosing colours, arranging text, and learning how everything works together. I also discovered how important accessibility and structure are for a good website.
In the end, I loved how something technical could turn into something that actually feels like me. It’s simple, pretty, and sweet — just like the scones I based it on.
Comments
Post a Comment