All solutions

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

The fact that I was more sceptical about the Grid implementation. I finally did it using grid-auto-flow: dense;.

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

On the desktop version: I had to properly set the properties to the Grid children so as combined with the grid-auto-flow: dense; on the parent give the desired outcome.

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

Is the use of the q element correct? Or is it more appropriate to use blockquote? I believe that the text inside the quotation marks is considered a short quotation that doesn't require paragraph breaks.

Any advice is welcome!

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

Even though I started working the CSS layout using Flexbox for the .ratings-container and the .cards-container, I quickly realized that this approach is not that simple and robust. So I changed course and used Grid instead.

Next time I need to think of the design more and try to choose right from the start the most appropriate tool.

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

I had to do some research so as to produce the repeating icon-star.svg image. Reading through the related MDN documentation helped me overcome this challenge.

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

I did not get the correct spacing as it is given in the design for the desktop version. When I try to emulate the cards width, the position of the title on the background-image breaks and vice versa. I need some advice that has to do with the spacing between the elements.

I understand the difference between margin and padding but I would like some general advice:

• How much padding is too much padding?
• How much grid gap is too much?

When the spacing between elements is big, how should I approach the layout design?

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

I kept my code clean and managed to implement this more complex grid layout.

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

I had to do some research in order to correctly use the grid-template-areas property for the grid, along with the grid-area property for the grid elements.

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

In my solution the border-top-color on each of the four cards looks a bit curvier compared to the design files. Do I miss something here?

Thank you!

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

I tried to keep my code clean with a good HTML and CSS structure.

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

I did not use Flexbox for the text box of the card (with its gap property) and I had to use utility classes in order to apply the margins needed. In this way, I managed to avoid repeating the same CSS declarations.

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

• Accessibility: Is the way I deal with the `` tag correct? I use it for the deleted price part:

$169.99
The old price of the perfume in strikethrough

• The CSS Reset (by Andy Bell) that I am using, removes only the margin-block-end part of the margins for elements like: body, h1, h2 etc. This results in elements that keep their user agent stylesheet. For example body keeps a small margin on three sides (top, right, left) of 8px. I had to repeatedly set the margin-bottom or margin-top using some utility class. Is there a better way to deal with this issue?

• I had to set to the element the `display:inline` in order for the `object-fit: cover;` on the element to work. Is this approach correct?

Any help is valuable!

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

I believe the styling of all the active states looks pretty neat! 🎉

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

I had some minor issues styling the call to action button links and especially the active states but all the problems were solved.

For the :focus state an inset box-shadow trick was used to have a "non-moving" border.

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

I believe the structure of my HTML, CSS files is more than acceptable.

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

I need to further investigate the CSS reset (by Andy Bell) that I used.

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

Are there any comments related to the way I dealt with the active states of the interactive title element?

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

Familiariazing more with structuring the HTML and organizing the CSS styles.

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

I cannot figure out why the social icons :focus state is not getting the same styles as :active and :hover.

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

How can I fix the :focus state of the social icons?

It doesn' t get the same styles (even though they are in the same declaration set) with :active and :hover. In Firefox, focusing on the social icons looks ugly and focuses on the bottom half of the icons.

I used custom properties to handle two different margin-bottom values:

  --marg-bott-l: 1.5rem;

I used these two values for many CSS declarations.

Is there any other more efficient way to declare the same margin-bottom value to multiple elements?

In terms of accessibility, are there any important missing bits?

There is a breakpoint at 60rem (960px) switching from mobile to desktop version.

From 960px and up to 988px the image does not fit well in its parent .image-box and a white space (with the violet background color of the parent box on top) below the image shows up.

How can I fix that?

Any help will be appreciated!

🙏 Please enlighten me! The Sign-up <a> element breaks to a two-line text at 360px. And as the width becomes smaller the whole button breaks because of its padding settings.

• What is the smallest width that we need to ensure the design is ok and does not break? Is it 320px?
• Does it make sense to create more media queries for widths smaller than 320px?

My query is general and not only for these FrontEnd Mentor challenges.

Thank you!

The main concern was to avoid using unnecessary declarations and keep the css simple and clean. Are there any unnecessary declarations? Any feedback will be appreciated!

I used <a> for the buttons. Should i use the <button> element?

What is the difference between <a> and <button> elements for use as a button link?

The colors part of the style-guide.md was a bit misleading so some colors were picked using a color picker on the preview images given in the design folder.

This is my first challenge submission.

I would appreciate some feedback for the following issues:

• Is the use of semantic elements correct? Should i keep footer outside of main?

• I used width: 25% for the .card-component and gradually increased its value for smaller screens with media queries. Is the percentage value right? Is this overall approach correct?