INTERACTIVE DESIGN / EXERCISE 3 - RECIPE CARD

-

INTERACTIVE DESIGN / EXERCISE 3 - Recipe Card

-

20.10.2025 -30.10.2025 (week 5 - week 6) 
Low Xin Er / 0374596 / Bachelor of creative media
Interactive Design / Exercise 3 - Creating a Recipe Card
LECTURE NOTES

week 6 (30/10/2025)

CSS=2 part=property & value
Selector
  • elements selector
  • class selector
  • id selector
  • universal selector
Descendant selector 
  • <table>
  •     <tr>
  •         <th>

Child selector
  • <il> is children of <ul><ol>

Pseudo-class selector
  • usually using in link text
  • a:link (blue)
  • a:hover (purple)
  • a:hover (effect with mouse moving)
  • 1 column

Pseudo-element selector
  • 2 column
  • p::before
  • p::after
Notes
  • new inline element stay in same line
  • new block element come for new line
Responsive design
  • different device different version (desktop & mobile)

Exercise 3: Creating a Recipe Card


Fig 2.1 Final Website Design

Fig 2.2 Final Website Design

Fig 2.1 Progress using DreamWeaver



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. Healthy Recipes and Whole Foods Cooking for Everyday - 101 Cookbooks
  • 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.

REFLECTION

This assignment was based on designing existing website content, I was able to appreciate the joy of design even more. Code comes in many types and has many characteristics that require a certain amount of memorization. Although it's difficult to remember everything, I will try my best to develop muscle memory so that I can be more adept at modifying and designing websites in the future.

Comments

Post a Comment

Popular posts from this blog

Typography - Task 1:Exercise

-
Image
April21,2025 TYPOGRAPHY｜Task 1:Exercises ||    17 /04/25 – 30/05/25 (Week 1-Week 6)  ||    Low Xin Er , 0374596 ||   Typography ||    Exercises / Type Expression & Type Formatting .  TABLE OF CONTENTS 1.0 Instruction 2.0  Lecturers 2.1  Introduction and Typo_1_Development 2.2 Typo_3 Text part 1 2.3 Typo_4 Text part 2 2.4 Typo_2 Basic 2.5  Typo_5 Understanding    2.6  Typo_6 Screen & Print 3.0  Progress of Work 3.1  Research and ideation (Exe 01-Typography) 3.2  Exploration and sketch 3.3 Adjustments 3.4  Final Sketch Design   3.5  Digitalize    3.6  Final Digital Design 3.7 Animation 3.8  Kerning,Tracking,Leading  3.9 Text Formatting 3.10  Reference (Exe 02-Text Formatting) 3.11 Exploration & Draft 3.12 Top 5 Selections   3.13  Final Design 4.0  Feedback 5.0 Reflection 6.0 Futher Reading 1.Instruction <iframe src="https...
Read more

Typography - Task 2: Typographic Exploration & Communication

-
Image
 May  25,2025 TYPOGRAPHY｜Task 2:Typographic Exploration & Communications  ||    19 /05/25 – 08/06/25 (Week 5-Week 7)  ||    Low Xin Er , 0374596 ||   Typography ||    Typographic Exploration & Communication/ Type Expression & Type Formatting .  TABLE OF CONTENTS 1.0  Instruction 2.0  Lecturers 3.0 Progress of Work 3.1 Research and ideation   3.2 Exploration & Sketch 3.3 Digitalize  & Final 3.4 Layout explore  3.5 Adjustment 3.6 Final Design 4.0 Feedback 5.0 Reflection 6.0 Futher Reading 1.Instruction 2.Lectures The complete notes can be viewed at Task1 Blog 3.Progress of Work Task-2_Editorial 3.1 Research and ideation     FIG.1,2,3 Research on Pinterest (19/05/25 week5) 3.2 Exploration & Sketch   FIG.1,2,3 Sketches of Title PUNK   (19/05/25 week5)   FIG.Sketches of Layout Design   (19/05/25 week5) 3.3 Digitalize  & Final ...
Read more

Typography - Task 3: Type Design and Communication

-
Image
  Jun, 9 ,2025 TYPOGRAPHY｜Task 3:Type Design and Communication ||    0 9 /06/25 – 28/06/25 (Week 8-Week 10)  ||    Low Xin Er , 0374596 ||   Typography ||   Type Design & Communication TABLE OF CONTENTS 1.0 Instruction 2.0 Lecturers 3.0  Progress of Work 3.1 Research and ideation 3.2 Exploration & Sketch 3.3 Digitalize  & Final 3.4 Layout explore  3.5 Adjustment 3.6 Final Design 4.0 Feedback 5.0 Reflection 6.0 Futher Reading 1.0 Instruction 2.0 Lecturers The complete notes can be viewed at  Task1 Blog 3.0 Progress of Work Progress Sketches Fig3.1.sketches of a,b,g,t ( 09/06/2025 week 8) Fig.3.2.  4 types designs （11/6/2025 week 8） Fig.3.3. sketches of final design series (16/6/2025 week 9) Fig.3.4.detail dissection of the letters (16/6/2025 week 9) Observation: Since font designs have a certain balance and symmetry, the circles or lines used in the ins...
Read more