006-four-card-feature-section - HTML, CSS, Flexbox

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

Although the layout of the cards is 2D-ish for larger viewports, I chose to use CSS Flexbox instead of CSS Grid. I wanted to use tools that are as basic as possible. CSS Flexbox is used to horizontally center the content in the page, and to layout the four cards. The 2D card layout is mimicked using nested flex containers.

CSS variables are declared with a global scope in a :root pseudo-class.

A very basic CSS reset is done as follows

*, *::before, *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

CSS properties are declared 'as high as possible as much as possible', e.g. the body contains properties that are inherited by all elements.

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

The very limited responsive behavior is implemented using a max-width: 500px media query:

@media all and (max-width: 500px) {
    header {
        width: 311px;
    }
}

Note that this behavior is limited in the sense that the implementation mimics as good as possible both the mobile viewport design at 375px wide and the desktop viewport design at 1440px, but the page does not provide a good user experience for widths that are in between.
This implementation is what Andy Bell describes in his talk as 'pixel-pushing': it resembles as good as possible the Figma design at only two discrete viewpoints, ignoring all other viewports.

The font sizes are not fluid and do not follow a scale either. The implementation also does not follow Andy Bell's CubeCSS, where the CSS is conceptually separated into Global CSS, Compositions, Utilities, Blocks and Exceptions.

I hope this is the last 'pixel-pushing' solution I have implemented, and will provide a real responsive solution soon.