Skip to content
Submitted about 3 years ago

Social Proof Section Using HTML, CSS and Bootstrap 5.0

Khalil Ahmad•20
@meer-khalil
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

it is my first challenge at a front-end mentor. please review my solution and tell me that whether I need to improve it or it is good as it is.

Community feedback

  • Sohail Jafri•350
    @thesohailjafriPosted about 3 years ago

    Well, Great Work on your first project

    You just need to adjust the color of the rating div. it too saturated compared to the og design.

    Else everything is Great :]

    Marked as helpful
    1
    Khalil Ahmad•20
    @meer-khalilPosted about 3 years ago

    @thesohailjafri Thank you very much! for your feedback.

    0
  • Raymart Pamplona•16,100
    @pikapikamartPosted about 3 years ago

    Hey, great work on this one. The layout seems different but its fine for now, also congrats for your first challenge!!

    For some suggestions:

    • wrap the whole layout inside a main element. This will make your layout more accessible and more structured, it also removes the issue on your report.
      <body>
    <main>
      { everything is wrapped by main}
    </main>
  </body>

    But do not use the above stated layout for every challenges okay, if there are a header section that you can see on a challenge, do not wrap the header in a main. Have it separeted.

    • It would be better if you don't use heading tags on the stars. Those stars are just decorations, you don't really need to use any semantic element on them. You can declare them in the background property of an element.
    • when using headings, do not jump from h1 to h5 or h6 or just higher. Use them incrementally by one. An h2 or h3 like those. The names of the people who are in the testimonial could have h2
    • on the img for the people, on their alt text, you can just remove the image word, you can just leave it like alt="colton. Since screen readers will handle to describe what is the element, and in here, the element is img hence it is graphic.
    • on your .card selector, you don't really need to add a width: 375px since you already declared a width: 33.3333 on its parent, the child will already occupy the parent size, since it is a block element. Removing the width also makes it more responsive since the size will scale.

    Other than those, good work on this one. Also if you have any question, just drop it here okay.

    1

Please log in to post a comment

Log in with GitHub

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