INTERACTIVE DESIGN - Exercise 3 Creating a recipe card

-


2025-2025(week - week)
FANN WONG JING EN｜0382237

Design Principles | Bachelor of Design (Honours) in Creative Media

GCD60904 Interactive design

TABLE OF CONTENT

MODULE INFORMATION BRIEF (MIB)

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

Exercises 3
- Creating A Recipe Card -

For this exercise, I created a fun little recipe card webpage using HTML and CSS. The idea was to take a recipe and turn it into something that’s not just readable, but also looks nice and engaging. I picked a recipe from the resource provided and organized my page into a few main sections:

· Recipe Title： I've made it big and bold at the top so that this is the first thing that people see.
· Images： I added some images to make the page more lively. I even gave the PNG images a shadow effect, which made them pop a bit more, following this tutorial.
· Ingredients：I put them in a simple list that’s easy to read.
· Cooking Steps：I'm breaking down the instructions step by step and styling them so they are clear and separate from everything else.

fig1.1 exercise 3 code PDF-One Bowl Banana Bread

Link of resources used

Comments

Post a Comment

Popular posts from this blog

Typography - Task 1: Execises

-
Image
21.4.2025 - 20.5.2025 (week 1- 5) FANN WONG JING EN｜0382237 Design Principles | Bachelor of Design (Honours) in Creative Media  Typography GCD60104 TABLE OF CONTENT  MIB        Lecture Note      Task 1      Feedback       Reflection       The further reading MODULE INFORMATION BRIEF (MIB) LECTURE NOTE Week 1: Development 0. Introduction to Typography • Typography is a core part of design learning. It not only improves the sensitivity to details and composition, but is also a key skill applied in all visual designs such as graphic design, websites, apps, animations, logos, and brands. • It c...
Read more

TYPOGRAPHY- TASK 2 :Exploration & Communication

-
Image
2025-2025(week6 - week7) FANN WONG JING EN｜0382237 Design Principles | Bachelor of Design (Honours) in Creative Media Typography GCD60104 TABLE OF CONTENT MIB        Lecture Note        Task2         Feedback        Reflection       The further reading MODULE INFORMATION BRIEF (MIB) LECTURE NOTE Week5: Letters | Understanding  1. Visual symmetry of letters Although some letters look symmetrical, designers have actually made many adjustments in details to make them "look" symmetrical but actually slightly deviate. This subtle design is intended to make the text more natural and harmonious visually. ⸻ ...
Read more

TASK1 :EXPLORATION

-
Image
TASK1:EXPLORATION   03.2.25-17.2.25 (week1-3) FANN WONG JING EN｜0382237 Design Principles | Bachelor of Design (Honours) in Creative Media ———————————————————————————— MODULE INFORMATION BRIEF (MIB) ELEMENT OF DESIGN  • Point : Point is the most basic design element. The size, position and closeness of the point have a great influence on the composition of the design. • Line : Line it can be straight, curved or broken line. The thickness, length and direction of the line can express different emotions and intentions. • Shapes:  Shapes can be divided into geometric and organic shapes (irregular, the outlines of natural objects). Shapes can also express emotions. For example, circles often bring a sense of smoothness and non-aggression, while sharp corners may bring tension. • Textures : Textures affects the touch, visual effect and overall atmosphere, such as wood, metal, glass, cloth, etc. • Space : Reasonable use of space can create visual balance and rhythm, enhanc...
Read more