Blog Preview Card using CSS Flexbox

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

I'm most proud of applying what I've learned from the first challenge I did. I implemented the feedback also from the community that they conveyed to me. I am proud of making the css scalable by using css variables for font colors, font weights. I also made custom text css classes so the text-theme's can be easily re-used.

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

The challenges I faced were using correct and proper semantic HTML. Here I really focused on using correct and proper semantic HTML. I really researched the difference between using an article for standalone content, a section for important relatable content with H tags within the overall content, and div's are really for everything else that just need content to be grouped. Also using figma to make it pixel perfect is also a challenge and there is quite a learning curve but I think I am getting the hang of it. I could not find in figma exactly where the :hover effects measurements for the html elements were located. I knew that the card-container was what the :hover was being applied to, but the exact html elements that had the "effect" were he H1 blog-title and the card-container box-shadow. But in figma I could not find what exactly the measurements for the box-shadow were. Also the type of transition I could not find the "exact" way the figma prototype was doing it.

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

I would love help on getting any feedback on if my HTML setup is the most proper and professional. And if not, how can I make my HTML setup as proper and professional as possible. I really focused on getting pixel perfect and scalability. So now I need help on doing it the proper and professional way. Also please tell me your process on how you go and get the active/hover/focus states in figma design, and convert that into CSS code.