Simple Omelette Recipe Solution

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

I am really satisfied with the alignments of texts, contents, even table, in the mobile settings. In past projects I've had media query of max-width of a small device, but moving forward the media query will be used for larger devices.

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

This was a huge challenge initially because I've started using * { margin: 0; padding: 0; box-sizing: border-box; } when starting out, from previous suggestion. Thus, previous assumption of elements in terms of margin and padding had to be reconsidered and re-learned. Styling table was also difficult and many of them were new content for me. For example, I had hard time spacing out the columns, and padding of the columns were different as well. Mozillas' tutorial on table was very helpful for me (https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables). Pseudo-elements was also new, although I had some sort of idea what they were before starting the project, so it was great to finally use it in this project.

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

I think because it was my first time resetting margin and padding, I may have added too many paddings and margins on some of the elements.

The assignment also specify only two views, and hence the height of article was set manually for desktop/pc. However, when testing on different sizes, it looks like the images is being cut off. I'm not sure the best way to approach this at the moment.