I am particularly proud of having managed to efficiently implement a responsive design with CSS Grid and Flexbox, while integrating variable fonts. The layout adapts perfectly to different screen formats and the use of CSS Counter
for the recipe steps was a real plus to make the content dynamic and easy to maintain.
If I had to do this project again, I would spend more time on accessibility.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges was managing the CSS grid for the nutritional information. I wanted each row to be well aligned with the labels on the left and the values on the right, while keeping a consistent underline. By using CSS Grid and adjusting the alignment with grid-template-columns
and nth-last-child
, I managed to achieve the desired rendering while keeping a flexible and maintainable structure.
I would like to get more specific feedback on using CSS Grid in my project, especially for the layout of the nutritional information. While the current layout works well, I am wondering if there are more optimized techniques or best practices I could apply to make the grid even more efficient, flexible and maintainable. Also, I would like some advice on managing bullet points in lists.