CHIAH CAI JUN 0365352
Bachelor of Interactive Spatial Design / Taylor's University
Interactive Design / Sept 2025
Week 05 - Week 06
---------------------------------------------------------------------------------------------------------------------------
PROJECT 03: CREATING A RECIPE CARD
Instructions
In this exercise, we are required to 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. Mr Shamsul has provided us with a recipe website, allowing us to find our favourite recipe and further develop it into a recipe card. We should use our creativity to make the page look appealing and interesting. Here are the requirements of this exercise:
- 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.
Exploration Stage
When Mr Shamsul introduced us to this exercise brief, I began researching the recipe I liked on the provided website. Since I like eating pastries and desserts, I decided to develop a recipe card for Shaker Apple Pie after scrolling through the website.
To kickstart, I have planned the sections that I will be including in this exercise:
- Introduction
- Table of Contents
- Ingredients
- Instructions
- Making The Pie Dough
- Heat The Oven
- Make The Apple Pie Filling
- Roll Out The Pir Dough
- Assemble The Pie
- Bake, Cool, Serve!
- Lattice Pie Crust Guide
Hyperlink
In my recipe card, I added a navigation bar for my Table of Contents and Instructions section to direct users to different topics. I organised the navigation topics for the Table of Contents section in an unordered list as it doesn't require steps, while the topics in the Instruction section are being organised in an ordered list to show a sequenced step.
To make the hyperlinks look different in various statuses, I make changes by adding a background to the selected hyperlinks while hovering (so users can observe the changes when they move their mouse cursor within different hyperlinks). When users clicked on the hyperlinks, the page would scroll smoothly to the selected sections, while the visited hyperlinks would then be changed into a lighter colour, showing that users had clicked and been directed to that particular topic. ID selectors are being used in this scenario to call the action of referring to the IDs that I assigned to each header of the sections.
As I can't fit in most of the information on my recipe card, I decided to add external hyperlinks that direct users to the website in a new window for further reading. I did similar stylings as the section hyperlinks, which include changes in active link state, hover state and visited state.
Font Styling
I used Google Fonts to search for typefaces that fit the mood of my Recipe Card, which carries a vintage and classical feeling. I chose "Quintessential, Serif" as my body text, while having "Croissant One, Serif" as my headings (h1, h2). As all my body text will be using the same font family, I used element selectors to assign "Quintessential, Serif" to my Recipe Card.
Next, I decided to apply different colours and backgrounds to my h1 and h2, but still use the same font family. So, I created 2 classes (h1: header, h2: subheader) and used a class selector to style them differently. As a result, my h1 headers will remain plain without any changes made, while my h2 subheaders will have a lighter font colour highlighted by a dark background, and both of them share the same "Croissant One, Serif" font family.
Background & Images
I used the Pexels website to search for a free watercolour background image and saved it in my Images folder. I locate the background image URL in the body styling and modify the background settings by covering the website with the image, fixing the image's position on the page, and preventing it from repeating.
Then, I also added relevant recipe images saved from the Shaker Apple Pie Recipe website for easy visualisation when going through the steps of making an apple pie. The current procedure images are located as in-line elements, which means they can't be aligned to the center of the webpage. After doing my research on Google, I realised that this issue can be solved by setting the image display as block element.
Coding Screenshots
My Recipe Card Link
Reflection
In this exercise, I applied internal CSS styling to design a visually appealing recipe card while exploring different types of selectors. Using element selectors like body, h1 and ul, I built the foundation of my background and page layout with different sections. With class selectors, I styled headings and text consistently to match a vintage mood using Google Fonts, while ID selectors allowed me to link navigation items smoothly to specific sections of the page. I also learned how to enhance user interaction by styling hyperlink states and centring images through CSS display and margin properties. Overall, this exercise strengthened my understanding of how structure, style, and creativity work together to create an engaging and user-friendly webpage.
Comments
Post a Comment