003-social-links-profile - HTML, CSS custom properties, CSS Flexbox

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

CSS variables can be globally scoped by declaring them in the pseudo-element :root.

Do not forget to do a CSS reset for border-box, padding and margin.

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

Declare CSS properties that are identical for all elements in the body element. E.g. font-family, font-size, etc. This is the principle of Cascaded Style Sheets, where properties are declared as generally as possible, and are tweaked/overridden for more specific elements if needed.

Content of a div element can be vertically aligned using either CSS Flexbox or CSS Grid. Using CSS Flexbox, the centering can be declared either in the parent container or in the child items.

/* CSS Flexbox, centering declared in the child items. */
.container {
  display: flex;
}
.child {
  margin: auto;
}

/* CSS Flexbox, centering declared in the parent container  */
.container {
  display: flex;
  
  justify-content: center;
  align-items: center;
}

We use the Figma design file to specify the absolute width and height of elements, margins and paddings. Vertical spacing between elements can be specified ad hoc using e.g. margin-bottom on specific items, or by using e.g. row-gap on a flex container.

Media queries are used to change the absolute width and height, as well as the padding, of the card for mobile screens. The media query's breakpoint is chosen arbitrarily.

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

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

I did not use any new CSS properties as compared to the challenges 'QR Code Component' and 'Blog Preview Card', apart from one:

when vertically aligning content within a div container, I typically used a flex container, with a margin: auto on the child elements within the container. However, when the child element is not explicitly available, it is also possible to use the properties justify-content: center and align-items: center in the flex container.