Recipe Page built using CSS Architecture

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

• Better understanding different HTML elements.

• Studing the aside tag, found that it is used as a call-out box Aside definition from web.dev.

• Always thought that tables were old school, but I understand now that tables are suitable for displaying tabular data in a structured and understandable manner, as it is in the Nutrition section.

• Learnt how to change color of the bullet markers.

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

• Learnt this CSS property list-style-position: inside; to deal with inline bullet lists. Not the case in this project.

• Explored how bullet lists are rendered from ul and ol tags. See this content Custom bullets with CSS ::marker.

• I wouldn't add a container encapsulating header, main and footer. I don't like this, but since we have backgrounds all over the project and we have to add margins, paddings and stuff to the global layout. To solve this, I added a pseudo-element ::before to the body, so now I have two backgrounds placed correctly.

• Changing the default behaviour of li from display: list-item to display: flex will cause the loss of appearance of markers. You will have to manage it manually.

• To get better responsiveness and attend to the design, the li tags must be display: flex; and align-items: center.

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

Not sure. If you find anything please feel free to help. Thank you for your help!