Accessible and Responsive Recipe Page: Flexbox, BEM and Media Queries

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

There are various subtle details in this project, and I made my best to pinpoint as much of then. I'm very satisfied with the result. I think I did a good job including semantic tags for accessibility and organizational structure, leading to legible and self-explained code. The BEM methodology was applied to enhance the use of Sass, leading also to a very legible SCSS stylesheet. Next time, I would like to get into the subject of delivering responsive images.

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

A difficult part was finding a way to style the list bullets and numbers differently than the contents themselves. I solved this by applying the desired bullets or numbers styling to the whole list (ul, ol), wrapping the li content in a span, and applying the content styles to this span.

Also, I liked styling a table, which led me to refresh some basics of this subject (and I think it is always a good idea to know how to style a table). For example, I produced the table division lines styling the bottom border of the td's, but had to set the table's border-spacing to zero to avoid a visible gap.

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

I would love to get feedback on any point of this project, including the way I apply the BEM methodology, the use of semantic tags, etc. Thank you!