All solutions

First the things I did I used a lot more semantic markup than I ever have. Instead of too many DIVS I used <main>, <section> and <article> I added the media query for the mobile look, and it appears to be working ok.

Issue My main issue is responsive CSS. I have stayed away from PX as much as I can. I have been using %, VH, VW, MIN/MAX width etc. However I am still having issues with its responsiveness.

  With this project, it goes out of whack when I zoom in or out. It looks ok at 100% zoom, but it does not look right when zooming in or out. 

   What is the trick for this? While my CSS understanding has grown I am clearly having some issues understanding it fully

While the desktop version looks decent, I am unhappy overall due to the amount of code used. Using media query made it look more bloated.

My main goal on my next project will be to make a more responsive CSS page in which I wont need to use media query. I want to be able to utilize VH, VW, clamp(), aspect ratio, min(), max(), etc. These are somewhat new concepts for me so it may take time to post my next project, depends on how quickly I pick up these concepts

1. I found getting the color of the photo correct rather tough, I did not end up getting the exact color.

2. Getting the font weights and sizes was tougher that I realized. Getting it exact is tough as I think my solution fonts are a little larger still

Most difficult thing is setting the margins, padding etc. I used some relative measurements but sometimes they did not always work so I went with static measurements which I know is not ideal. With more experience it will click.

I implemented flexbox to center my main content and used the <main> which I did not do the in first project. I ceased using hyphens in the ALT section of the <img>. In one I did use a space and now noticing it I wonder if that space should be removed.

My biggest concern with my projects ( I have done others) is I always feel I can write less code, essentially do more with less.