Semantic HTML and Responsive Blog Preview Solution using Flexbox

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

I'm proud to finish this whole project and make the component look as similar as possible to the given end result image.

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

1. I found it difficult to center the author's name. I fixed it by setting vertical-align: middle to the image element.
2. I changed the text color of the title when it receives focus and found that there is a default border when the title receives the focus. At first, I did not know how to remove the border but later learned that I could use outline: none; for it.

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

1. Accessibility
2. Code readability and reusability
3. Could someone please tell me what should be the behavior of this project on orientation change of a mobile device?
4. I would very much appreciate any suggestions that could improve my skills.

Thank you so much!