All solutions

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

Without figma files to base the layout on, (budget : $0.00 😅) I found it challenging to get a close match to the jpg design images.

To solve this, I pasted the design images directly into the HTML, with position: absolute and opacity: 0.5 to see where my layout was different from the original.

I hope it's turned out okay; (but I have been burned by the automatic screenshot on here using an elderly browser version before, so it might not look like it! 😤)

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

I experimented using min() and max() to dynamically adjust the width and padding of the element, but I haven't quite figured out how to make those changes feel proportionate - so that they happen at the same time and same rate.

Any tips on that would be appreciated!

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. 🤔

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

It was fun taking a simple project like this and building it out according to the specifications. I think I'd probably look to use more modern methods next time, rather than relying on magic numbers. And with that I'd look to build in more consideration for responsive behaviour - and for using the component in a modular way inside other projects.

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

I've never had to make components for another project before, so it was interesting working to a specification / design document for the first time, and putting aside instinctive design patterns, simply to achieve what's been asked for, and no more.

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

Not really looking for help or feedback on this one, but will definitely be browsing solutions to see how others have structured and named thing. Picking a good naming scheme is obviously the second hardest thing to do, after centering a div. 😋