Interactive Design Exercise 3

Creating a Recipe Card

Introduction:

When I started this exercise, I wanted to make something simple but nice to look at. I chose a chocolate chip cookie recipe because it’s one of my favorite snacks, and I thought it would make the page feel warm and friendly.

At first, I just focused on getting all the sections to work — title, image, ingredients, and instructions. Then I played around with CSS to make it look cleaner and easier to read. I also added some colors and rounded corners to make it more “fun” instead of just plain text.

I think the hardest part was making sure everything lined up properly and looked balanced. But after I got it working, it was actually quite satisfying to see the final result online. Overall, this was a nice way to practice both HTML structure and basic CSS styling in a creative way.


Website link:https://foodrecipe0379395.netlify.app/

Website home page:

Code:






 

Comments

Post a Comment

Popular posts from this blog

Interactive Design Exercise 1

Image
Exercise 1 Week 1 Website Analysis For this exercise, I have selected five websites to review and analyze. The focus is on examining their design, layout, content, and functionality, while identifying strengths and weaknesses that influence the overall user experience (UX). Each analysis highlights the site’s purpose, main color palette, visual presentation, and interactive features, followed by an evaluation of how effectively the website communicates with its intended audience. Finally, recommendations are provided to suggest potential improvements for usability, performance, and brand impact. 1. https://www.juice.agency 2. https://culinaryodissey.uprock.pro 3. https://joseph-san.com 4. https://atom.uprock.pro 5. https://xlncdigital.com 1.   Website: juice.agency  （https://www.csswinner.com/winners） Purpose and Goals Juice is a creative branding and digital agency. Its main goal is to showcase its capabilities in branding, web design, and marketing, while also attracting po...
Read more

Spatial 2 assignment 1

Image
Here are the project what we shuld do. 🧠 Assignment Overview: You are required to conduct a precedent study and analysis of two retail stores: One international (overseas) store – researched online. One physical store – that you can visit in person. This assignment is individual and counts for 20% of your final grade. 🎯 Objective: To apply design processes critically and creatively by analyzing real-world retail environments. You will propose innovative, context-specific solutions that improve spatial quality, customer experience, and brand identity. 📌 Analysis Areas to Cover: Store Overview Name, location, and type (e.g., fashion, electronics, lifestyle) Brief brand history or background Design Features Layout: Floor plan sketch; how the layout guides flow and interaction Materials: What materials are used and their functional/aesthetic effect Lighting: How lighting contributes to mood and experience Color Scheme: How color supports brand identity and ambiance Brand Identity How...
Read more

Spatial design 2 FINAL

Image
Starbacks Name:HE KEHUA Student ID:0379395 This is my spatial design. This is my sketch at the beginning. This is my initial modeling. The teacher asked me to modify it. Put the order area at the door. Add a little designed locker to the empty area. After the teacher gave feedback, I revised and improved the content. Light In the last class, the teacher continued to give me some feedback, asking me to continue to make changes on my existing basis, slightly increase the children's area, the bad material of the floor of the service area, and install a window at the gate, and put two small mats under my two apple core cabinets. Here are the final project i made
Read more