Responsive Recipe Page with Sass

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

I'm proud of taking a mobile-first approach to this challenge and having a responsive solution for different screen sizes. I was also able to learn a lot about the list marker pseudo-element and how to use pseudo-classes when styling the nutrition table.

I think some things are easier to do in a Figma design file than to implement with CSS. Next time, I would try not to spend too much time getting every little thing exactly right, especially if it's a feature that doesn't have any significance to the functionality of the website, and very little impact on the page's overall look.

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

A challenge I encountered was trying to vertically center-align the bullet points for the unordered lists, particularly when the text wraps onto multiple lines. I found out that the pseudo-element :marker has limited CSS properties to modify, and some suggested using :before for a more customizable marker. However, when I tried this method, I realized that it required significantly more code (for example, I had to specify width, height and border radius just to create a circle shape, when the default marker is already a dot, and I had to use flexbox to format each list element to achieve the center alignment I wanted). I also came across a weird bug where certain longer list elements would cause the marker to warp from a circle into an oval, despite the width and height being the same. In the end, I was unable to figure out what was causing this warping, and given that using :before required significantly more code than using :marker, I chose to revert back to using :marker and just accepting that the bullet points wouldn't be vertically center-aligned.

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

Is there a simple way to vertically center-align the list marker?

Although it's not noticeable when the list text is only one line, when the list text wraps onto multiple lines, the list marker is always aligned with the first line of text. Is it possible to have it align with the middle of the list text? Would it require using :before and flexbox or is there a better/alternative method?