Blog Preview Card with Media Query

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

I'm proud of how close I got to the original design. Next time I would have really liked to notice that the instructions ask you not to use a media query for mobiles. Oops. 🤦‍♀️

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

Probably the most challenging aspect of this was deciding on a semantic structure that could be re-used. You have to imagine that this is a template for other cards that will go next to it on a larger site. If that's the case, how do you make this code easy to reuse, for different articles etc.

Without another card to compare to, I think you sort of just have to make a best guess at what might change and what will stay the same, and that's all I've done here.

There's a school of thought that suggests you shouldn't do extra work before it's needed; so before you actually know what the requirements will be for a whole set of cards- don't spend too much time building out all the hooks and connection points. For all I know, the client might decide that all the other cards are rounded triangles, or that they all have an edge-to-edge video etc. 😋

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

To get a pixel perfect result, I think technically the 1px black border needs to be on the inside of the card element's width:384px and height:522px.

But, as the height of the element isn't set (to allow for user font sizes), I couldn't account for the line border thickness properly; so I'm ~2px too tall at default 100% zoom font-size:16px. What's the best way to overcome that?

Also, how would you refactor this to use a smaller font-size on mobile without using a media query. I reckon I could do it in JS, but I'm not 100% sure what the best practice would be for CSS alone. 🤔