Interactive Desing | Exercise 3

-

 

23.10.25  |  Week 5 

Haley Alexandra Gray  |  0369029  |  Bachelors of Design in Creative Media

Interactive Design GCD60904

Exercise 3  |  Creating A Recipe Card

Table of Content :


Lecture Notes

Interactive Design GCD60904

Lecture Notes


Instructions

Week 5 |  Exercise 3

Objective

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.

Task

  • 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



Creating A Recipe Card

For this task, we have to create a recipe card using HTML and CSS, where we have to design a basic webpage displaying a recipe's ingredients and instructions in a visually appealing format.

Through learning more about CSS in class, I also used online research to help my understanding and guide me to help form the vision of my website better. I got inspired when searching for how recipe cards look like by this image from Canva, where I got the idea to split the page up to highlight ingredients and steps to make :


Link of resources used -

Exercise
From the website he gave us to choose recipes, I chose the recipe for 'Apple Cinnamon Hand Pies' to create a recipe card; my HTML website / recipe card : 


My Code -


My Code - Dreamweaver


Feedback

Week 5 (23.10.25)

General Feedback :  Start this exercise and use what we learned in class to develop your code.




Reflection

This exercise was different to the past two, and felt more advanced in terms of coding. Despite it being things we learned in class, while researching what a recipe card was it had quite a few design elements to it, so I decided to follow an inspiration, and recreate it, and so I had to find additional resources to teach me how to get the desired visual design through HTML and CSS. It was quite fun adjusting everything and making it look put together, but initially learning how to separate the page into two columns was tedious and frustrating, and I can tell that making an advanced website later on in the semester will be really difficult, in my opinion.



Comments

Post a Comment

Popular posts from this blog

Typography | TASK 1 : Exercises

-
Image
22.4.25 - 20.5.25  |  Week 1 - 5 Haley Alexandra Gray  |  0369029  |  Bachelors of Design in Creative Media Typography GCD60104 Task 1  |  Exercises Table of Content : Lecture Material Instructions Task 1 | Part 1 Task 1 | Part 2 Feedback Reflection References Lecture Material Typography GCD60104 Week 1 (Introduction & Development) 0. Introduction / Typo 1 - Typography is a fundamental aspect in any design study. It develops attributes that are fundamental to any discipline; attention to detail, composition, etc, as well as develop skillsets that are applicable to all design areas. It is the creation of typefaces, which can be applied in  many different facets of life; in animated forms, influences designs of websites, app designs, signage design, logos, etc. - Typography is full of terminologies, conventions, and unwritten rules depending on disposition / influences regarding to style. It is beneficial to any dis...
Read more

Interactive Design | Exercise 1

-
Image
25.9.25 - 1.10.25  |  Week 1 - 2 Haley Alexandra Gray  |  0369029  |  Bachelors of Design in Creative Media Interactive Design GCD60904 Exercise 1  |  Web Analysis Table of Content : Lecture Notes Instructions Exercises Feedback Reflection Lecture Notes Interactive Design GCD60904 Week 2 - Usability : Designing Products for User Satisfaction - W hat is usability?          -  Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.          - It is part of UX design          - A designer's usability depends on how well its features accommodate users' needs          - When users first encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge. -  Principle of Usability   ...
Read more

Design Principles | TASK 3 : Development & Design

-
Image
Haley Alexandra Gray  |  0369029 Bachelors of Design (Honours) in Creative Media Design Principles GCD60804 Task 3 |  Week 5 - 7 (3.3.2025 - 17.3.2025) Table of Content : Lecture Material Instructions Task 3 Feedback Reflection References Lecture Material Design Principles GCD60804 Week 5 - 7 - See Previous Lecture Notes      -   Task 1 Lecture Material     -   Task 2 Lecture Material Instructions MIB for Bachelors of Design (Honours) in Creative Media | The Design School at Taylor's University 2025 Task 3 Recap : For this task, we will be creating a design based off of the ideas created back in Task 2 , where we are to develop our chosen design idea through the exploration of colouring, composition, and more, to come up with a final design that utilises our knowledge of design principles, as well as a 200 word rationale describing and explaining our design choices.                   ...
Read more