Interactive Design Exercise 3: Creating a Recipe Card

Interactive Design Exercise 3: Creating a Recipe Card
-

22.10.2025 - 29.10.2025 / Week 5 - Week 6

Dave Christian Moniaga / 0385630

Interactive Design / Bachelor of Design (Hons) in Creative Media

Exercises 3: Creating a Recipe Card

Lecture
Instructions
Exercise
Feedback
Reflection

Lecture

Week 5: HTML & CSS

ID attribute is used to identify an element with other elements,

must be unique within the document
allows us to style that a specific element aside from others

Fig 1.1 Example of ID attribute

Class attribute is a group of element that has the same class name,

can identify several elements as different / carry the same value

Fig 1.2 Example of Class attribute

These attributes will only change their appearance if CSS rules are involved.

Block elements are elements that start on a new li, for example: <h1>, <p>, <ul>, and <li>. These element stack on top of each other (top to bottom) just like in our normal documents.

Inline elements appear on the same line as other elements, like: <b>, <i>, <em>, <a>, and <img>.

Fig 1.3 Example of block <tr> & inline <td> elements

<br> single break line

<div> division generic block element

semantic elements: section, aside, main (empty boxes)

Introduction to CSS

Cascading Style Sheet (CSS), creates rules to specify how an HTML element looks like. They contain two parts: a selector & a declaration.

Fig 1.4 CSS selector for <p> & declaration

The selector indicates which element the rule applies to and can specify more than one element if you separate it with commas.

The declaration sit inside curly brackets and they indicates the rule itself. They are split into a property & value, separated by a colon.

Fig 1.5 Rule indicates h1, h2, & h3 are in Arial typeface, in yellow color.

The property indicates the aspect that you want to change, while the values are the setting of that property.

There are two methods to employ a CSS, each one with their order of precedence listed below (highest to lowest):

Internal CSS places CSS rules within an HTML page as <style> element either in each element tag or sits inside the <head> page.

The <style> element needs to have the type text/css
This method is not recommended if you are building a site with more than one page as it is easier to alter one file for multiple pages than individual page

Fig 1.6 CSS as style in HTML page

External CSS uses a <link> element in the HTML page that locate where the CSS files is. It should also sit in the <head> page.

There can be multiple CSS links
it should contain:

href; the path to CSS file
type; the type of document which is text/css
rel; the relationship between HTML to CSS which is stylesheet

Fig 1.7 External link to CSS

CSS Color: sets background color of text, color on text, or border color.

CSS Background: Set background color, image, repeat, attachment, and shorthand.

CSS Text Formatting: Text color, alignment, decoration, transformation, spacing, and shadow.

CSS Font: Can be acquired through Google Fonts or use web safe fonts.

Week 6: CSS Selectors

CSS Selectors allow us to target & style HTML elements on a web page.

Universal Selector, affects all the elements on a page, represented by an asterisk *.

Fig 2.1 Universal Selector

Element Selector, targets HTML elements by their tag name. p for <p> element.

Fig 2.2 Element Selector

ID Selector, targets and element with specific ID attribute. It uses the # symbol followed by the id name.

Fig 2.3 ID Selector

Class Selector, targets elements of a class attribute. To select the class, you need to use a . symbol followed by the class name.

Fig 2.4 Class Selector

Descendant Selector, selects an element that is a descendant of another element.

All <a> elements inside a <div class="container">: .container a {}

Fig 2.5 Descendant Selector

Child Selector, a direct child element.

For example, ul > li

Fig 2.6 Child Selector

Pseudo-class Selector, select elements based on their state or position

For example, link state order (a:link, a:visited, a:hover, a: active) a:hover {}

Fig 2.7 Pseudo-class Selector

Pseudo-element Selector, select parts of element ::before and ::after.

For drop cap, p::first-letter {}

Fig 2.8 Pseudo-element Selector

Instructions

Exercise 3: Recipe Card

In this exercise, we will be demonstrating a combination of our HTML and CSS knowledge based on the lectures and tutorial to create a recipe card from the link given.

The recipe I chose is this Wonton Soup as I thought It is a recipe that I would actually like to try making in my own time.

Here is the original recipe in the webpage attached for perusal,

Fig 2.1 Original Recipe Page

Instead of using Notepad for HTML, I went and immediately made my HTML file in Dreamweaver as I will be implementing CSS in it.

I first started by placing all of the important and necessary content such as the headings, paragraph, unordered lists that are in the recipe page.

In Real-Time Preview, the page currently looks like this:

Fig 2.2 Naked HTML page of the recipe

As of right now the information spans too long without any page breaks or margins, there's lack of visuals, and default text style makes the page look boring.

But now with all of the information placed into my html file, editing and adding stuff into it will be much easier.

The first addition I wanted to make was a background for this recipe page. After looking at a long list of pictures, I decide to make my own inspired by the hand written notes of a recipe.

Fig 2.3 Background of the recipe page

As I want to place the text inside of the paper background, I adjusted the maximum width and set up margins that fit with the background that I have made.

For the fonts themselves I looked through Google Fonts and chose the ones that match the theme I am going for. For the main title I used Caprasimo and the rest of the body text I use Special Elite.

Fig 2.4 Fonts for the heading and body text

As the color of <h1> and background are placed, I made my choice on the color scheme for this web; pink and red. I think these colors gives a lighthearted and warm home-like feeling.

Fig 2.5 Red (#b82627) and Pink (#d8829d)

Following that, I placed images that are necessary to show the process, ingredients, and final dish into the webpage. I decorated the images to have a rounded edge and dashed borders.

Fig 2.6 Example of decorated images

To create more interactivity to the page, I looked up how to implement a button for printing. I think this element is very useful and practical for a recipe page.

From the guide shown, I learn both the button element as well as the javascript "window.print()" that opens the browser window's built in print option.

Though as the print size does not match the browser, the result will distort the background like this:

Fig 2.7 Failed print example

I then have to also make adjustments for the background image printing options by using "@media print" in CSS.

Fig 2.8 Printing adjustment

As this recipe page spans quite long, I also placed a "back to top" button at the bottom of the page to improve user's convenience.

I ended up placing the information about serving size, prep, & cooking time as a table at the top of the page as I feel like this information is usually the first to be mentioned in a recipe page.

Fig 2.9 Recipe information table

Before finalizing the webpage, there were a couple of tweaks and improvements that I made for user experience and accessibility.

Making sure image size are set in percentage so that it scales accordingly in different browser sizes.
Giving padding for the table element <th> & <td> so that there is enough space for text when the browser becomes too small.

Fig 2.10 Padding for table data

Placing some images as float to shorten webpage spread and length.

Fig 2.11 Float property for images to the right

Adding a smooth movement in scroll behavior.

Fig 2.12 Smooth scroll behavior

Doing these adjustments allow for the content to be viewed clearly and properly in any browser size available, for example: in 1440px and 517px.

Fig 2.13 Recipe Webpage in 1440px

Fig 2.14 Recipe Webpage in 517px

I then uploaded this recipe card webpage through netlify for everyone's perusal.

Netlify link: https://exercise03-davemoniaga.netlify.app/

I have attached the HTML file as a PDF for ease of viewing.

For ease of viewing, I have also attached a PDF printed view of what the webpage would look like when viewed through a browser.

Search This Blog

Dave Christian Moniaga (0385630)