Interactive Design · Exercise 3 · Creating a Recipe Card
3/6/2024 - 10/6/2024 / Week 6- Week 7
Yang Zhi Ching (Chelsea) / 0365154
Interactive Design / Bachelors of Design (Hons) in Creative Media
Exercise 3 · Creating a Recipe Card
Instruction
Doc 1.1 MIB of the module
In this exercise, we need to create a recipe card using HTML and CSS.
Goal: To design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
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
Create an external CSS file named "style.css." 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.
Progress
1.1 HTML Structure
I summarized the contents from the original website, separating them into a few parts: ingredients, step-by-step guidance, and preparation time and cooking time. After gathering the content, I applied effects like bolding, strong emphasis, and ordered lists to give my file a clear structure. Additionally, I attempted to implement a navigation bar and footer.
 |
| Fig 1.1 HTML Preview, Week 7 |
1.2 CSS Styling
The most challenging aspect came with the CSS file. Mr. Hamimi requested an external CSS link for this task, so I created another CSS file instead of just embedding the CSS into the HTML, as taught in class. CSS styling posed difficulties; while I had many ideas for enhancing the recipe's appearance, I struggled with coding them in CSS. After spending much time searching for ways to implement complex designs, I decided to start with something simpler.
To connect the CSS file into HTML, i add
<link rel="stylesheet" href="style.css">
in the <head> part. Then my boring HTML being stylized.
 |
| Fig 1.2 CSS Preview, Week 7 |
 |
| Fig 1.3 CSS Preview #2, Week 7 |
Feedback
No Feedback Received.
Reflection
| Experience |
In this task, I was still unfamiliar with coding, and I couldn't figure out what I should do right away. I had a lot of ideas for design, but I couldn't implement them.
| Observation |
I noticed that I typed a lot of code while looking for tutorials online, and even copied some code and checked them one by one before I knew what they did.
| Findings |
I found that my basic knowledge of coding was not enough. I needed to make up for more basic knowledge.
Comments
Post a Comment