Exercise 3

 

Exercise 3 - Creating a Recipe Card

Strawberry Jam：https://exercise3-steawberryjam.netlify.app/

🧾 Task Description

This exercise involves creating a "Recipe Card" website using HTML and CSS. The instructor hopes that we can integrate our previously learned knowledge of web page structure and style to ensure that the website not only displays text and images correctly but also has good typography and visual design.

🌸 Design Process Blog: Strawberry Jam Recipe Card Web Design Process

According to my teacher's request, I want to make a recipe website about strawberry jam

I first looked for the content and photos I would use for the Strawberry Jam website.

Website content and image files

Exercise 3 - Creating a Recipe Card，作者 tian dong

Design Inspiration: https://www.101cookbooks.com/apple-cinnamon-hand-pies/

My design was inspired by the overall style of the 101 Cookbooks website. The website evokes a clean, natural, and healthy vibe. I wanted my website to convey a similar warmth and naturalness through:

• soft tones;

• clear typography;

• high-quality food photography;

Code source file

Typography & Colors：

To enhance the overall aesthetic, I incorporated two fonts from Google Fonts into the website:

• For titles (h1, h2), use Abril Fatface: This font has an elegant, decorative feel, perfect for recipe titles.

• Body copy (p, ul, ol) uses Poppins: a clean, modern sans-serif font with rich weights for distinguishing levels.

In terms of color matching, I used a combination of light pink and off-white to make the page echo the theme of strawberry jam. The background uses soft light colors to make the text and pictures stand out more.

Demo Video

Once the webpage was complete, I uploaded the code to Netlify and generated a live website link:

👉  https://exercise3-steawberryjam.netlify.app/

WEEK 9

The teacher checked my code and asked me questions.

He asked me what this piece of code meant. For a moment, I couldn't answer. In my third exercise, I used tutorial videos from various websites to do some of the code. I found the code very difficult, so I had to refer to tutorial videos from other websites again after each time I got out of class and during each exercise session.

Later, when I went back to review my previous code and watched some tutorial videos, I realized that this was a mobile-optimized response query. When I was doing this exercise, I wanted the webpage to be clearly visible on both computers and mobile phones.

This is the instructional video I watched back then.

🍓 Reflection

After completing this exercise, I became increasingly aware of one problem: I was truly unfamiliar with coding. When trying to express the interactive and dynamic effects taught by the teacher through code, I always got stuck on basic syntax, didn't know why I was making mistakes, and didn't understand the logic behind certain functions. Every time I thought I was keeping up, I would press the run button only to find an error in the console and a wrong display – this frustration was very real.

But it was precisely this "lack of understanding" that spurred me to learn very diligently. I repeatedly watched the teacher's demonstrations, repeatedly read my notes, and bravely asked questions in class. Every time I failed to debug, I forced myself not to give up – first I Googled it, then I went back to my class notes, and then I compared my approach with others. Although I was slower than my classmates, at every step I was trying to transform "just following along" into "I really know why I wrote it this way."

There were several interactive points in the exercise that I had to try several times to get the rhythm and delay right, and some of the lighting and sound effects were achieved because I painstakingly analyzed the logic of each transition. While the final result wasn't quite as smooth and perfect as I envisioned, I found myself gradually developing a programming mindset: not blindly following code, but thinking from a design perspective about "logic → interaction → experience."

Most importantly, this exercise made me realize that design and technology can actually complement each other. Even if I were someone who "knew nothing about coding," I could still transform my design intentions into truly functional and interactive works through continuous effort, experimentation, and debugging.

In the future, I have two clear directions: First, strengthen my fundamentals—I need to diligently study syntax, understand each function, and practice small code snippets; second, maintain a proactive approach to asking questions and experimentation—ask questions when I encounter difficulties, and try again after each failure. I want to transform this initial confusion into motivation for growth, ensuring that my work not only remains at the design level but also truly becomes practical and interactive.