Recipe page

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

Tried my best to pixel-copy the design. Might not do that again. I think the time wasting on setting the spaces of marker and li is not worth. And the resulting html seems to lack of some accessibility. For instance, I put span in lis.

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

1. Set the spaces between bullet markers and texts. My approach is making li a two-column grid. And set the counter in li::before by hand. I don't think this is a good thing to do, but I've learned a lot from the process. Hat off to Prof. ChatGPT.

2. The table. Still, I used a lot of measurements from figma. For example, in order to keep using the table element and still want to apply the 'correct' spacing between two rows, I add a padding-bottom as 12px, which is not defined in the design system. (Why 12px? It is because the gap between two rows are setting to spacing/300: 24px, but there's a divider at the middle of the gap!)

3. Responsive design and the work flow. I've lost too many times to mimic the design. At the end of the day, I couldn't even remember what I've written in the CSS. Not even to mention the responsive design. I haven't overcame yet, but I think I need to find a more approachable and managable workflow.

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

Where can I find some resources discussing the workflow of implement a design?

Any advice and suggestion is welcome!