Skip to content
Submitted almost 4 years ago

Social proof section | grid, scss

Gutka•65
@karbowskam
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I think I did it right :) I did two break points: 375px and 1440px (previously I did one more in the middle).

However, I think I did something wrong with the background. Could someone check it out? :)

Thanks and hugs! :)

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    👋Hi Gutka! First, I can't find the CSS file on your GitHub repo 😅. I also had see the source code, but I couldn't open the CSS file.

    I have some feedback on this solution:

    • Heading order is important. You need to use h2 first, before you can use h3.
    • Rated 5 Stars... should not be a heading. Heading tags is used for titling section. If you think that is an important information, I recommend to use strong tag.
    • The alt value should not be hyphenated. It should be human readable and informative.
    • The star icons are decorative images. Remember, for any decorative images, you should leave the alt="" and add aria-hidden="true or role="presentation". Or you can just use background-image as Tediko said.
    • If you're going to use background-image, there's a gotcha. You need to change the width value on the icon-star.svg file to create a space. I recommend to increase it to 22 (based on Tediko Solution) to create a space on the right side of the icon, since you can't use margin or padding on background.
    • The feedback__name should not be a heading too.
    • For the alt value for the photo, I recommend to just fill it with their name. alt="Colton Smith".

    That's it! Hopefully this is helpful!

    Marked as helpful
  • tediko•6,700
    @tediko

    Hello, Gutka! 👋

    Congrats on finishing another challenge! 🎉 Your solution looks good. Here's my few tips:

    • Less breakpoints doesn't necessary means better. Now, your solution isn't fully responsible. It does look good on mobile and on larger desktops but everything inbetween does look like mobile and it isn't good. Here is my old solution to this challenge just to illustrate you how it can behave across screen sizes.
    • You repeat your HTML code with star images which is unnecessary. Find the way to use only one star image. You can do it easily by using background-repeat approach in your css. To do this you'll have to create empty div and remove all img's.

    Good luck with that, have fun coding! 💪

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord