Responsive recipe page with mobile-first workflow and BEM methodology

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

I am introduced with BEM naming convention and semantic HTML, and gradually implement them and try to get used to them.

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

This is my first time to challenge with list and table. I learn more about ul, ol, li, and table elements in depth.

List marker could be set to be inside or outside the container. Have to be really careful to set the marker gap, so it match to the design. I still need to learn how to properly set margin-left for list element.

For the nutrition table, to match it to the design, I use table elements (for semantic purpose) and use grid display for the td elements so it can match the design.

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

Need to learn more about:

• Semantics HTML in depth.
• Make an efficient, modular, maintainable CSS code to work with a team.

And also I found a quite thick white line at the bottom of the website screenshot picture. That's make the screenshot picture up a little bit.