All solutions

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

I used the scripting media query to serve CSS declarations applying only when JavaScript is enabled.

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

No specific challenges.

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

No particular help requested.

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

I learnt the image-set() CSS function to serve several resolutions of a same background image. For the next time, I will try to create a mixin or a Sass function to manage the image-set() content to avoid some repetitions.

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

The Figma file does not separate the green filter from the background image on the footer. I overcame by using the image located in the starting folder and applying a background colour on a pseudo-element covering that image.

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

No particular help requested.

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

I used microdata to enhance semantics.

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

Concerning the background image on the first card, I wanted to use the background-position-x property to change the side-related value within the media query where the position of the background image changes, but Google Chrome 128 (and Blink-based browsers) does not support side-related values such as right 80px in such a property. So, I decided to use the background-position property, where Google Chrome supports it.

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

No particular help requested.

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

I used microdata to enhance semantics.

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

To stretch the image to fit the card height on desktop view, first I applied display: flex both on the image parent element and on its parent; but, the image did not stretch correctly on Safari. To fix, I forgot about flex and just added height: 100% to the image itself (and object-fit: cover to ensure the image remains well-proportioned).

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

No particular help requested.

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

I used microdata to enhance semantics.

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

I overcame the challenge of vertical-centering bullets by using the ::before pseudo-element and positioning it absolutely.

To display the nutrition data two by two, I first wanted to use flexbox with wrapping and flex-basis, but I did not manage to maintain such a display when widening the screen. Instead, I used grid layout.

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

No particular help requested.

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

I used the font variation instead of using static, separate font files.

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

No specific challenges.

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

No particular help requested.

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

I took the font size variation into account without using any media query, but using the clamp() function.

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

No specific challenges.

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

No particular help requested.

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

I used a SVG version of the QR code, exported from the Figma file. I tested it and it works (tested with an iPhone 14 and a 9th-generation iPad).

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

No specific challenges.

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

No particular help requested.

For this challenge, I downloaded the Figma file and have made my front-end development based on it.

I would like to have feedback about the way I implemented the sliders and the possible enhancements in terms of CSS (SCSS) refactoring and JSON-LD, Twitter card and OpenGraph markup (for semantic web and rich snippets). Thank you.