Interactive Design : Exercise 3

Berlian Johanna / 0360054
Interactive Design/ Bachelor of Design in Creative Media (Hons) 

Exercise 3 : Creating a Recipe Card

---

Interactive Design : Exercise 1 & 2

---

Instruction

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.

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.

Process

Fig 1.1 Make html Folder

Make html folder and named it CSS Selector Tutorial. Then, inside the folder create another folder but named it as index.html and also made a folder named Image for easy to track.

Fig 1.2 Dreamweaver Progress

In this progress, I use Dreamweaver for making the entire code for our exercise 3. Following the structure and tutorial from the video recorded by our lecturer I manage to finish the progress. Also     I use  making vanilla cake as a recipe for this exercise.

Fig 1.3 Progress for Result

This is the progress result as I saved when I updating the coding in dreamweaver. I keep checking the index web in order to avoid the mistakes.

Final Results

CSS Selector Tutorial

Vanilla recipe - Google Drive