Recipe Page | Semantic HTML, BEM, and Environmental Sensor

What are you most proud of, and what would you do differently next time?

What I am most proud of: I am really proud of how I moved away from just "guessing" where to put code and instead started planning like an architect. For every section, I created a "Blueprint"—a physical sketch on paper where I drew out the HTML layers and arrows to show exactly where my semantic tags would go before I ever touched my keyboard.

I’m also very happy with my "Environmental Sensor". Instead of just seeing media queries as a chore, I treated them like a sensor that detects when you're on a small phone (375px) and automatically switches to a "Mobile Protocol". This allows the main image to stretch edge-to-edge in a "Full-Bleed" style while keeping the text safe and readable in its own "inner room". Finally, I'm proud of the technical polish I added, like using the "50/50 Table Rule" to keep the nutrition data perfectly aligned and the "List Alignment Trick" (using padding-left instead of text-indent) to make sure long sentences stay perfectly straight and don't crash into the bullet points.

What I would do differently next time:

• Fluid Typography: I successfully used clamp() to make the card width act like a "rubber band," but next time I want to use it for my text too. I want the font sizes to grow and shrink smoothly so they never "jump" when you resize the window.
• Intermediate Testing: While I hit the 375px and 1440px targets from the style guide, I want to get better at testing all the screen sizes in between to make sure the site never has an "awkward phase".
• Advanced Accessibility: I’m continuing to use ISO 8601 time codes to help machines understand the recipe, but I want to push further. My next goal is to learn more advanced techniques to make complex tables even easier for people using screen readers.
• Refining the "Maestro" Protocol: My AI collaboration worked great, but sometimes I had to remind the AI to slow down. Next time, I’ll be even more disciplined about finishing the deconstruction of one part before moving to the next section.

What challenges did you encounter, and how did you overcome them?

1. The List Alignment "Stepping Effect" I faced a layout issue where long sentences in my lists were creating a "stepping effect". I initially tried using text-indent, but I realized that this property only affects the first line of text. This caused the second line to jump back to the left, breaking the clean vertical column of the text block and failing to match the professional look of the Figma design. To overcome this and keep the entire block of text perfectly aligned, I switched to using padding-left on the list items. This ensured that all lines of text stayed in their own "column", properly separated from the bullet points.

2. The Mobile Switch (Environmental Sensor) Managing the transition between a 1440px desktop screen and a 375px phone was a significant structural challenge. On mobile, the design required the main image to be "Full-Bleed" (stretching to the edges of the screen), while the desktop version needed the image to sit neatly inside a card. I overcame this by building an "Environmental Sensor" (a Media Query) that detects the device size. When it senses a phone (<= 375px), it triggers a "Mobile Protocol" that resets the image margins and removes the card's side padding while keeping the text safe in its own "inner room".

3. The Favicon Mystery I encountered a "desync" error where the favicon worked perfectly on my local server (127.0.0.1:3000) but wouldn't show up on the live site, even though the code was present in the index.html. I solved this by performing a "force sync" of my blueprint and refining the file path—ensuring consistency with the other assets in my Design Token Vault—to force the browser to recognize the asset.

4. The 50/50 Table Rule In the nutrition section, I had to ensure that the labels and data points stayed perfectly aligned regardless of the screen width. To solve this, I applied the "50/50 Table Rule" giving each column exactly 50% of the width. By then applying text-align: left, I managed to keep the middle alignment point perfectly straight and professional, bringing the whole table in line with the Figma design.

5. Maintaining the "Maestro" Protocol Since I collaborated with an AI as a Senior Reviewer, a unique challenge was keeping the pace of the deconstruction. At times, the AI would try to jump ahead to the next section before I was 100% satisfied with the current logic. I overcame this by strictly enforcing my "Maestro Protocol", reminding the AI to slow down so we could finish polishing every engineering detail—like the ISO 8601 time codes—before moving forward.

What specific areas of your project would you like help with?

I would love to get feedback on a few technical areas where I am working to move from "functional" code to professional-level engineering:

• Fluid Typography Mastery: While I successfully used clamp() to make my recipe card act like a "rubber band" (scaling its width smoothly), I haven't fully applied this to my text yet. I’d appreciate any advice or "math" tips on how to use clamp() for font sizes so my headings and paragraphs grow and shrink smoothly without any "jumping" when the screen size changes.

• Advanced Table Accessibility: For the nutrition section, I used the "50/50 Table Rule" to ensure perfect alignment and used ISO 8601 time codes for the preparation stats. However, I want to go deeper—are there specific ARIA attributes or structural tricks I should use to make data tables even easier for screen reader users to understand?

• Managing the "Awkward Phase": My "Environmental Sensor" (Media Query) is set to 375px and 1440px based on the style guide. I’d love to hear how other developers handle the "in-between" sizes (like small tablets) to ensure the layout never has an awkward or broken phase when resizing the window.

• The "Maestro" Protocol for AI: I’ve been using a specific "Maestro" protocol to turn AI into a high-level mentor for iterative deconstruction. I’d be curious if others have found effective ways to use AI as a Senior Reviewer to polish technical documentation (like my "Swimming Pool Lanes") without the AI trying to take over the coding process.

• List Alignment Best Practices: I solved the "stepping effect" in my instructions by switching from text-indent to padding-left. I’m interested to know if there are even more modern or robust CSS techniques for keeping the entire text block perfectly aligned in its own column, separate from the bullet points.