All solutions

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

I was able to style the custom markers for the two unordered lists for and the counters for the ordered list.

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

For the ordered list, I styled the counters using the ::marker pseudo-element.

Styling the list markers for the unordered lists was a bit more challenging. In the JPEG design file for the mobile layout, the markers do not sit next to the first line of text but are centered vertically if the text content of the list item wraps over two lines. I used custom markers with the ::before pseudo-element to position the markers with flexbox.

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

I'm looking simpler CSS selectors to add the horizontal lines to the nutrition table. This is what I have now:

tr:not(:first-child) td,
tr:not(:first-child) th {
  border-top: 1px solid var(--stone-100);
}

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

If you compare the desktop layout with the mobile layout, you can see that on desktop the social links are slightly wider than the paragraph directly above them. On mobile, the width of the links is closer to the width of the paragraph. That is, going from desktop to mobile, the width of the card shrinks to fit the smaller viewport width. I knew I could achieve this shrinking behavior with flexbox, but it took me a whole day to figure out how.

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

What I had been missing was that the main element had to span the whole viewport width. With main as a flexbox container with the default flex-direction: row, I used justify-content: center and align-items: center to center the card horizontally and vertically. flex-basis: 24rem and the default flex-shrink: 1 gave me the desired width of the card component in the desktop layout and the shrinking behavior for small viewport widths.

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

I would appreciate feedback on how I can improve my code. More specifically, I would like to know whether there are any issues with accessibility. Thanks for your help!

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

For my solution to the QR code component challenge, I had explored web sustainability best practice for web fonts. For this challenge, I was able to build on that and extend it from static to variable fonts.

I was able to convert the TTF font file to WOFF2. I may have to look into tools like glyphhanger by Zach Leatherman to subset variable fonts (and keep them variable).

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

This project has slightly smaller fonts sizes in the mobile layout than in the desktop layout. Fluid typography uses the CSS clamp function to reduce font sizes for smaller screens without using media queries.

Working out the clamp functions gets quite mathematical, especially when using relative units like rem for better accessibility. I'm glad I found online tools like Fluid Typography Tool and did not have to do the math myself.

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

There are three things in this project that were new to me:

• Variable web fonts,
• Styling links in different states,
• Fluid typography.

I would appreciate feedback on any of these.

Thanks for your help!

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

For this challenge, I took a deep dive into web sustainability best practices for web fonts:

• Choosing between static and variable fonts
• Subsetting fonts to only include needed characters
• Converting font files to the most efficient formats
• Using the correct font-face declarations
• Preloading font files to improve page load performance

In future projects, I want to continue using what I learnt in this challenge and explore other web sustainability best practices.

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

I dove deep into topics like font subsetting, converting font files, font-face declarations, and pre-loading font files. You can read about the choices I made and find links to the main resources I used in the README for this project.

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

I would appreciate feedback on the way I used web fonts, as this was my main focus for this project.

This is also my first challenge on Frontend Mentor. I want to make sure I got all the basics right and have a good foundation going forward.

Thanks for your help!