002-blog-preview-card - HTML, CSS custom properties, CSS Flexbox

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

Some general remarks:

• CSS variables can be defined in a pseudo-element :root for global scope.
• Variable font weights can be included from a file, instead of from Google's CDN.
• CSS resetting is important, e.g. for padding, margin and box-sizing.

I tried to keep in mind the principle of Cascaded Style Sheets, i.e. defining common properties as generally as possible. For instance, the font-family can be defined in the `` element, and can be tweaked further in the individual paragraphs if needed.

It is easy to center a block element both horizontally and vertically in a container using CSS Flexbox. Define the container as a flex container and set margin: auto on the child block element.

However, there is no need to 'flexbox' everything. You can also use ad hoc margin-bottom to space individual items.

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

I used media queries to define the layout for smaller screens:

@media all and (max-width: 500px) {
    .card {
        width: 327px;
    }
}

I also needed to define a CSS width and height for an image, and the aspect ratio of this height and width did not correspond to the image's aspect ratio. Using object-fit: cover scaled the image such that it covers the full area.

Note that the final result is not pixel-perfect with the frontendmentor.io solution. It is especially hard to get the vertical spacing between the elements right. We used the PixelParallel Chrome extension to do the comparison.