Social proof section | grid, scss

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋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

  2

  ---

  

  Gutka•65

  @karbowskamPosted about 3 years ago

  @vanzasetia thank you very much for your detailed advices. It will help me in my further learning. I love writing code in SCSS format so there is no CSS file in my repo 🙈

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @karbowskam I also really ❤️ Sass with SCSS syntax, but usually the Sass files will get compile into CSS file. So how it can be possible without any CSS? Even though your HTML linking to css/style.css which is doesn't exist on your repo 😅.

  0
• 

  P

  tediko•6,680

  @tedikoPosted about 3 years ago

  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

  2

  ---

  

  Gutka•65

  @karbowskamPosted about 3 years ago

  @tediko thank you very much for your helpful feedback. Your tips are valuable to me 🙂

  0