Reduced the CLS (Cumulative Layout Shift) score to 0

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

I am proud that during this assignment I took the time to gain new knowledge that me helped improve the metric results such as LCP, CLS.

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

I forgot that img elements by default have display:inline. That means they are treated as text and have a space below reserved for descender elements. You can get rid of it in a number of ways:

• add a vertical-align:top rule to the image jsFiddle example
• add font-size:0; to the containing div jsFiddle example
• add display:block; to the image jsFiddle example

I found the solution here: https://stackoverflow.com/questions/19212352/div-height-based-on-child-image-height-adds-few-extra-pixels-at-the-bottom

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

none