Responsive Recipe page

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

I’m most proud of how I reverse-engineered the design using just a single given font size (16px for paragraph text). From there, I calculated all other font sizes, card widths, and layout spacing by analyzing the 1440px and 375px views. I got it as close as possible to the original design, and that process really sharpened my eye for responsive scaling and proportions."

"If I were to do it again, I’d approach it with more confidence from the start and document my steps better—so I could both explain my logic clearly and speed up the process.

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

One of the main challenges I faced was with the title font not displaying correctly. I double-checked the font import and usage, but it still didn’t work—likely due to a browser or loading issue. I attempted several fixes but eventually had to move on and focus on the rest of the project.

Another issue was with the <hr> tag. It had a default border that didn’t match the design, so I had to explicitly remove it by setting border: none. Even after setting a custom color, it sometimes wouldn’t update properly—probably due to conflicting styles.

Lastly, I ran into trouble with a table where the default table borders made it tricky to apply a clean bottom border to the <td> elements. I had to reset the table styles completely and manually recreate the border layout to get the intended look.

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

I’d appreciate help figuring out why the font isn’t loading properly, despite linking it correctly. I’ve double-checked the import and usage, but it still doesn't seem to apply. I'd also love feedback on any design details I might have missed or misaligned, especially things that could make the layout more pixel-perfect.