Interactive Design : Exercise 3 - Creating a Recipe Card

 Interactive Design

 Exercise 2: HTML Exercise: Simple Personal Profile Page

Start from 23.9.2025

22.10.2025 - 2.11.2025 / Week 5 - Week 6

LI XIN LI / 0379305

Interactive Design  / Bachelor of Interactive Spatial Design 

Exercise 3 - Creating a Recipe Card

Introduction:

This exercise required me to create a recipe card webpage (index.html) using HTML and CSS. It included a recipe title, image, ingredient list, and step-by-step instructions. I needed to use different types of CSS selectors (element selectors, class selectors, and ID selectors) to style the page and make it aesthetically pleasing. Once completed, I deployed the page to Netlify and updated the link in my e-portfolio.

Homemade Pesto—https://www.101cookbooks.com/pesto-recipe/#recipe

(Source: https://www.101cookbooks.com/?authuser=0)

The webpage was structured using a clean and semantic HTML layout.

The <header> tag was used for the main title and short introduction. The content body was placed inside a <div class="container">, which serves as the main section for all recipe information.

Key HTML elements include:

• <h1> for the recipe title

• <h2> for each main section (e.g., “Ingredients,” “Instructions”)

• <ul> and <ol> for listing ingredients and steps

• <img> tags to insert images for each section

To make the page easier to read, I arranged the sections in a logical order:

Introduction → What to Eat Pesto With → Storage → Variations → Ingredients → Instructions → Notes.

CSS Styling:

The visual design focused on simplicity, readability, and color harmony that matches the theme of green basil.

Key styling techniques include:

• Using the Inter font from Google Fonts for modern and clean typography.

• Setting the body background color to #f6faf6 (a light green tone) for freshness.

• Applying a green header (#a8d5a3) with a darker border to emphasize the title area.

• Creating a .container class to center the content, add padding, rounded corners, and a soft shadow effect.

Font:

• Playfair Display for headings (h1, h2) → Elegant, handwritten feel, like the titles of a printed recipe book.

• Poppins for body copy (p, li, notes, etc.) → Clean, modern, and easy to read without being gimmicky.

The .ingredients and #instructions sections were given light background colors and left borders to visually separate them.

To make the recipe more engaging, several images were inserted into different sections of the page.
All image files were stored in an images folder within the same directory as the HTML file.

Each image was added using the following code pattern:

This inline style ensures that:

• Images are centered on the page (margin: 0 auto;)

• The width is controlled for consistent size (e.g., 60–70%)

• The corners are rounded to match the card design (border-radius: 10px;)

The webpage was previewed and debugged using Adobe Dreamweaver.

During testing, some images initially failed to load because of incorrect file paths (e.g., “.jpd” instead of “.jpg”). After renaming and correcting the paths, all images displayed properly.

In some cases, images exceeded the container width. This issue was solved by adjusting the width percentage and adding overflow: hidden in the container’s CSS.

After completing the design and verification, I uploaded the project to Netlify for online display.

Link:

Homemade Basil Pesto - exercise03-lixinli.netlify.app

Demo Video:

Code source file:

All files:

REFLECTION

In this exercise, I learned how to create a simple yet beautiful recipe card webpage using HTML and CSS. The task involved structuring the page to display the recipe title, image, ingredient list, and step-by-step cooking instructions. First, I focused on building the basic HTML structure, ensuring all required elements—including headings, paragraphs, lists, and ingredient and instruction sections—were clearly organized.

After completing the HTML layout, I applied CSS to make the page more appealing. I used a soft green theme to create a calming, natural feel that complemented the fresh flavor of the basil pesto recipe. I also added rounded corners, box shadows, and padding to give the layout a clean, card-like appearance. To improve readability, I used the "Inter" font from Google Fonts, which offers a modern, minimalist style. I then experimented with CSS selectors (such as class, ID, and element selectors) to style different sections individually.

During this process, I also learned how to properly insert and center images. Initially, some images appeared too large or misplaced, but I resolved this by adjusting their width percentages and using margin: 0 auto; inline styles. Creating a separate "images" folder and properly linking each photo to the HTML file helped me understand the importance of folder structure in web development.

One challenge I encountered was that after changing the font and updating some CSS, the green title bar disappeared. I learned this was due to a CSS override conflict and resolved the issue by restoring the original title style with clearer color and border definitions. This experience helped me understand how CSS specificity and cascading rules influence the final appearance of a web page.

Through this project, I gained a deeper understanding of the relationship between HTML structure and CSS design. It was rewarding to see how subtle design adjustments—such as spacing, font choice, and color contrast—could significantly improve readability and visual balance. Overall, this exercise gave me greater confidence in organizing web content, designing with CSS, and systematically resolving style issues.