Copy of Responsiv Social Proof Website

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one. On desktop or in general, those background-images and some background-colors are missing as well like on the ratings where the grey is not present. On mobile view, it is odd that the text after the h1 turns to red, it would be great to just stick on the provided stylings on the design.

  Some other suggestions would be:

  • Avoid using height: 100vh on a large container like the .root as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Always have a main element to wrap the main content of the site. For this use main tag on the .root selector.
  • Adding those background-color for each of the rating would be really great so that there will be visual border for each of the ratings.
  • For those stars-icon, another approach instead of creating div tags is to use those images in the background property of an element. You can use multiple images in the background property:>. This way your markup won't be cluttered by extra html tags.
  • On each of the testimonial cards, you could use this markup for better navigation of users:

  <figure>
    <img src="" alt={person name}>
    <blockquote>
      <p>{qoute in here} </p>
    </blockquote>
    <figcaption>
      person name
      <p>
        person role
      </p>
    </figcaption>
  </figure>
  

  Though you would need to use display: grid on the figure so that you could place each item properly like on the design.

  • Also when you tackle components like this where there is a person involve like a testimonial, always include their image as the img and with a proper alt that is using their name. Since they are the focal point of such component, it would make sense to make them visible.
  • Lastly, just the color of the text I mentioned where it turns to red.

  Aside from those, great job again on this one.

  Marked as helpful

  0
• 

  Stefan•180

  @st3wnPosted about 3 years ago

  Big thanks for your time.

  Reading something like this and trying to understand it is really the best thing that can happen to a beginner frontend developer.

  I think I just lack practice.

  <3

  1
• 

  Stefan•180

  @st3wnPosted about 3 years ago

  Please visit the live page https://st3wn.github.io/FrontendMentorRatingPage/

  This compare box here is just for 1440px.

  0