All solutions

This was my first project using grid. It took some initial figuring out how to do the different designs between the desktop and mobile version, but eventually I figured it out.

Things I tried to do in this project:

• Proper semantic HTML. Someone said to use only <div>'s, but since all three blocks belong to one big element, I feel like semantic elements are appropriate here. The top block seems like an introductory element, so that one became a <header> while the other two are <section> elements.
• Efficient class naming and element styling. I tried to group elements that had the same styling together with the same class, and gave them other classes when it was necessary to style them differently or add some style on that specific element.
• Comments in CSS for extra navigation and structure.
• Mobile-first workflow
• Added some reactivity to the button, so I gave it some colours depending on the state and animated the transitions!

I honestly don't really have many questions. The solution looks solid to me and works well when switching to smaller screen sizes.

The only thing that I would like feedback on is the layout of my HTML. Currently I'm using a <section> element with a <header> element inside for the icon, <h1> for the title, <p> for the little paragraph of text and a link for the button. Is this good practice?

I have a few questions about this solution:

• One thing I just couldn't get to work is the positioning of the stats at the bottom. If you compare my result to the image closely, you can see that in my solution, "803K" is slightly off to the right. In the original, that number is perfectly centered, but when using justify-content: space-evenly, it doesn't, because the spacing is not evenly between the numbers, but between whatever is the widest (for example, "followers" is wider and thus decides the bounding box). Of course this is negligible, but I find it a fun challenge trying to get these stats spaced evenly between the numbers while still keeping the values and category labels grouped. How could I manage this?
• Are there things I can improve when it comes to semantic HTML/best practices?
• I want to get more into accessibility as well, so what are things I can do to improve the accessibility of this project?

I tried a different challenge earlier, but that one proved to be too difficult, so I decided to do this one since it seemed a good entry point.

What I found a little difficult was figuring out how to get the card centered. However, after figuring out how flexbox works and playing around with it, I managed to get to a decent solution!

A few questions I have:

• In regards to my HTML layout, is this a good workflow, having the <main> and <footer> tags and putting the actual content in <div>'s within these semantic tags? Or is it better to use the <main> and <footer> elements as the structural objects instead?
• Is the way I worked out the CSS good or could it be more concise/ordered differently?
• Is it better to use the <img> element, or a <div> and add the image to it using background-image in CSS?