All solutions

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

I think it could be very easy to overcomplicate this flexbox or grid. I stuck with default block layouts and accomplished things pretty simply. The downside to this choice is that I had to deal with margins which has left me with a lot of somewhat ugly selectors to handle margins correctly. I should probably being using many more classes to help me get rid of those ugly selectors.

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

I struggled a lot with the image. I deduced early that the max width of the banner image was exactly 50% of the size of the image that was given. This led to me trying to figure out some way to set the image's initial size to 50% of itself without using javascript or modifying the original image. This was a complete overcomplication of an otherwise simple problem.

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

One annoying part of a standard block layout is that you have to be awfully particular about margins, most often top margins on :first-child elements and bottom-margins on :last-child elements. I'm curious if there's a good way to simplify this without resorting to classes. While classes are great, I would take the trade of some uglier css selectors if I can add and remove content from my markdown without having to both with making sure the correct css classes are set.

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

The only thing I had to look up for this was how to adjust the width of anchor tag elements. That does highlight that I am lacking some fundamental information such as the default display property for various common element types, but that's information that easily comes with time.

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

I initially opted for a mixing of flexbox and grid layouts to layout the elements and in doing so I was surprised that elements weren't centering like I expected them to. I did end up getting this working, but I ultimately decided to just use margins to space out elements.

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

I'm still not sure how of the best way to approach defining the widths for these kinds of cards. A view like this should be highly reactive as much of its base width is just padded out space for the sake of it. However, I am statically setting the width of the component and using min-width in child elements which prevents reactivity.

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

Outside of the drop shadow, there wasn't anything I wasn't remotely sure how to do. I was more focused on intelligent ways to approach the layout problems.

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

I'm not sure how to achieve a responsive design on this without media queries. The card's width is set to 'min-content' so it is bound to the size of the image; however, I'm not sure how to build things so that the image will resize at a certain point (and thus allow the card to shrink with it).

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

Feedback on two points: First, is using flexbox/grid to layout the content within the card overkill? It's incredibly easy to do, but it could definitely be achieved without it. Is it unnecessary to use these layout algorithms when the content's layout is static?

Second, how would I make this layout responsive on small screens ( < 475 pixels)? Is it possible to achieve this without media queries?

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

I was actually able to accomplish more than I expected without having to consult tutorials to review layout. As far as I can tell, the CSS is pretty minimal and I imagine it would be hard to argue that this is being accomplished in any sort of a hacky way.

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

Center elements vertically because I couldn't remember how flex-box worked. Additionally, I struggled with making the layout respond to screen-sizes properly because I was initially using a max-width property to constrain the size of the image.

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

There are a lot of pixel units declared in the CSS and I'm not sure that's the proper way to do things. I stuck with pixels because it was the easiest way to match the presented design as closely as possible, but I'm curious if others are able to accomplish the same with less rigid measurement units.