004-recipe-page - HTML, CSS custom properties, CSS Flexbox

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

The way how the text is structured mimics as good as possible how it is defined by the Figma file. For instance, the `` element 'Simple Omelette Recipe' is grouped together with the paragraph below ('An easy and quick dish [...]'), because it is also grouped together in the Figma file. This allows for easier translation of spacings from Figma to HTML/CSS.

The HTML5's semantic elements and were used.

Color variables described in the style guide, like e.g. --white: hsl(0, 0%, 100%), are declared in a :root element for global scoping.

Do not forget a CSS reset for e.g. box-sizing, padding and margin.

Define font properties, like font-weight, font-size, letter-spacing and line-height, as generally as possible, like e.g. in the body. These can be overwritten for specific paragraphs if needed. This is the principle of Cascaded style sheets.

If the .attribution section is positioned absolutely (position: absolute) with respect to the body, the body needs to have the property position: relative or similar.

Items in an or list can be spaced by declaring it a flex container.

Do not shy away from using ad hoc margin-bottom instead of declaring everything a flex container to control spacing.

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

The bullet point markers of an or list can be targeted as follows: ul li::marker. Note that ::marker is a pseudo-element, as compared to e.g. :hover which is a pseudo-class.

The margins defined by Figma sometimes do not correspond to the ones from the {desktop|mobile}-design.jpg. E.g. Figma specifies a top margin of 128px between the top of the body and the recipe-card, whereas I measure 122px from the design jpg.
Same goes for the spacing between the recipe image and title.

It is possible to drill down an HTML hierarchy using CSS selectors as follows: .recipe-preparation-time ul li::marker.

If a table has border-collapse: collapse, there are no gaps between cells. Borders in a table are specified by declaring borders on the containing and elements. The first and last row's cells can be selected as follows:

tr:first-child th, tr:first-child td {
    border-top: unset;
    padding-top: 0;
}

tr:last-child th, tr:last-child td {
    border-bottom: unset;
    padding-bottom: 0;
}

Use media queries to change the layout for mobile screens. For the mobile design, the recipe image can extend beyond its container by using negative margins. Note also the use of the CSS built-in calc() function:

@media all and (max-width: 500px) {
    h1 {
        font-size: 36px;
    }
    .recipe-image img {
          width: calc(100% + 2*32px);
          margin: -40px -32px 36px -32px;
      }
}