INTERACTIVE DESIGN | EXERCISE 3: RECIPE CARD
23.10.2025 - 30.10.2025 /Week 5 - Week 6
Interactive Design: Exercise 3Loh Kai Xuan (0365780)
TABLE OF CONTENTS
LECTURE
Week 5
We were given another lecture, this time on CSS.Slides:
Fig. 1.1. week 5 lecture slides
➤ Back to top ✮♱ ༻¨*:·
EX 3. Recipe Card
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 titleInclude necessary images for the pageList of ingredientsStep-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 interestingDeploy the exercise in Netlify and update your e-portfolio
Link to Recipes: CLICK HERE
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
Link to Recipes: CLICK HERE
Week 5
After the lesson on CSS we used Dream Reaver to create a recipe card based on the recipe we chose.
Fig. 1.2. Recipe Card screenshot
Link to website: CLICK HERE
REFLECTION
Week 5
This was a good exercise to revise the html and css we learned.
Comments
Post a Comment