Interactive Design - Exercise 3 (Recipe Card)

03/06/2024 - 13/06/2024 ( Week 7 - Week 8 )

Chong Wee Han / 0368863

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Exercise 3 - Recipe Card

---

LECTURES

Week 7 - Lecture 07

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1_LR3FnphEcPH66w9nxaUtexUfHB5F2h-/preview" width="640" height="480" allow="autoplay"></iframe>

Exercise 3 (Recipe Card)

Requirements for exercise 3

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

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.

Use your creativity to make the page look appealing and interesting

Process

I choose Cottage Cheese Muffins as my recipe on my webpage. 

https://www.101cookbooks.com/cottage-cheese-muffins/#recipe 

I first put together all the important item in a folder and named it HTML - recipe card in case I got wrong folder. I included my HTML file named index.html, CSS folder and images folder that would be shown in my recipe card.

Figure 1.1

HTML & CSS

Part 1

I want to add a search bar for other recipes in my web page.

Figure 1.2 Outcome

Figure 1.3 HTML

Figure 1.4 CSS

Part 2

This will be my title and introduction to the cottage cheese muffins.

Figure 2.1 Outcome

Figure 2.2 HTML

Figure 2.3 CSS

Figure 2.4  CSS

Part 3

I added the Ingredients part with bullet text and left alignment on my image.

Figure 3.1 Outcome

Figure 3.2 HTML 

Figure 3.3 CSS

Part 4

I also added the Instructions part with the number listed but with the HTML code "firstpara" to make the first word point size bigger and right alignment on my image.

Figure 4.1 Outcome

Figure 4.2 HTML 

Figure 4.3 CSS 

Part 5

I have these 2 boxes which are my "Little Notes" and "Cottage Cheese Muffins: Variations". The text of my second box was used .option>li:nth-child(even)/(odd) to make different colours on the text.

Figure 5.1 Outcome

Figure 5.2 HTML 

Figure 5.3 CCS 

Part 6

In the last box I included some text and images of the muffins.

Figure 6.1 Outcome

Figure 6.2 HTML

Figure 6.3 CSS

Entire Screenshot of Recipe Card

Figure 7.1

Final Submission - Exercise 3

Website Link : https://chongweehan-exercise3-recipecard.netlify.app

---

REFLECTION

Doing the HTML and CSS exercise was a great learning experience. I learned how to structure web pages using different HTML tags and style them with CSS selectors. Adding text, images, and forms was straightforward but required careful attention to detail. Applying styles and experimenting with colors, fonts, and layouts was enjoyable. Some challenges included ensuring the CSS file was correctly linked and debugging alignment issues. Overall, this exercise improved my confidence in creating and styling web pages.