All solutions

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

• tables are tricky to style - I couldn't reproduce all the spacings as in the design. Could it be semantically correct to implement the Nutrition section in flex or grid

• in one of the reviews of this exercise it was mentioned that it can be done without media queries. But how to tackle the transition from padded rounded view on tablets to a fully snapped one on mobile?

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

After 3 or 4 previous attempts with similar exercises, laying out the components becomes more intuitive:

• avoid explicit widths on blocks, only set the maximums for the containing blocks (in rem)
• except for images and pictures - fixed width is ok
• the rest of the content should grow & shrink as they please
• centering is simpler to do with flex, rather than with grid's place-content. Flex will allow contents to grow if needed
• don't overuse the semantic blocks within components, as those are mostly for higher level layouts

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

In this exercise, I used fluid fonts and margins, instead of media queries. For example, to accommodate very small viewports, I want the margins to gradually disappear and the font size to shrink:

const Wrapper = styled.article`
  // From 0 to 24px on screens below 375px
  margin-inline: clamp(0rem, -7.5rem + 37.5vw, 1.5rem);
`;

const Title = styled.h1`
  // Grow from 20 to 24px on vewports between 375 to 450px */
  font-size: clamp(1.25rem, 0rem + 5.333vw, 1.5rem);
`;

Another new thing was the animation. I didn't want the shadow to disappear instantly in the active state but to subtly move under the card. It was pretty simple to achieve with the transition of the filter property.

const Wrapper = styled.article`
  --shadow-offset: 8px;
  filter: drop-shadow(
    var(--shadow-offset) var(--shadow-offset) 0 var(--color-black)
  );
  transition: filter 200ms;
  
  &:hover {
    --shadow-offset: 0;
  }
`;

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

In this exercise, I wanted to avoid using the fixed-sized Hero image and prevent the containing block from grow uncontrollably.

const Wrapper = styled.div`
  width: fit-content;
  max-width: 327px;
  ...
  @media ${QUERIES.tabletAndUp} {
    max-width: 450px;
  }
`;
const Hero = styled.img`
  width: 100%;
  aspect-ratio: 45 / 22;
  object-fit: contain;
`;

The card can still shrink on small viewports (375px and less), and the image will not distort.

As a result, the Hero section can reserve enough space until the entire image is loaded, which prevents the Layout Shift (CLS)

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

Find a practical and lean approach for efficient resource preloading

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

It was tricky to figure out how to prevent vertical and horizontal content loss on smaller viewports, e.g. less than 320px (see the screen recording). Here's the snippet that worked for me (and resulting recording):

const Main = styled.main`
    ...
    min-width: fit-content;
    min-height: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
`;

const CardWrapper = styled.div`
    // Don't grow horizontally more than minimally possible to contain the card
    // I guess it works because nested image has fixed dimensions 
    max-width: min-content;
    ...
    img {
        display: block;
        width: 288px;
        height: 288px;
    }
`;

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

After I've centered the parent container using Grid's place-content: center, I noticed the broken vertical scroll behavior on low-height viewports - content was spilling beyond viewport without possibility to scroll. The fixed min-height feels too hacky. Is there a better way?

const Main = styled.main`
...
  min-height: 780px;
  @media ${QUERIES.laptopAndUp} {
    min-height: 446px;
  }`

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

I couldn't precisely reproduce the violet tint on the image, so what color blend recipe was used in the design files?

With only two given breakpoints (mobile and desktop) - what would be the proper strategy for viewports in between, like tablets?