
Accessible and Responsive Recipe Page: Flexbox, BEM and Media Queries
Design comparison
Solution retrospective
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.
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!
Community feedback
- @mazinger086Posted 4 days ago
Hey mate, you really made it, for that challenge it was a little bit hard, depending on how do you handle in mobile and desktop version. It' take me a while but I think you handle better than me. Awesome work.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord