Skip to content
Submitted about 2 years ago

Social Proof Selection

Samuel Mantey Asare-Adjeiβ€’40
@sam-mantey
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

I have completed my second challenge and I am looking forward to completing more. Please let me know what I can do to make my code more effective.

Community feedback

  • Lucas πŸ‘Ύβ€’104,400
    @correlucasPosted about 2 years ago

    πŸ‘ΎHello @sam-mantey, Congratulations on completing this challenge!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

    This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
  • Adrianoβ€’38,120
    @AdrianoEscarabotePosted about 2 years ago

    Hi Samuel Mantey Asare-Adjei, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements or ARIA reference regions.

    Example:

    native HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    ARIA best practices call for using native HTML5 reference elements instead of ARIA functions whenever possible, but the markup in the following example works:

    <body>
     <div role="banner">This is the header</div>
     <div role="navigation">This is the nav</div>
     <div role="main">This is the main</div>
     <div role="contentinfo">This is the footer</div>
</body>

    It is a best practice to contain all content, except skip links, in distinct regions such as header, navigation, main, and footer.

    Link to read more about: click here

    The rest is great! i really like the details that you put in the button!

    I hope it helps... πŸ‘

    Marked as helpful
    1
  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesPosted about 2 years ago

    Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

    • Add a max-width to the components container to prevent is from warping on large screens.

    • The .container should be a Main Element to help identify the main content of you page.

    • The stars serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=β€œtrue” to hides it from assistive technology.

    • To enhance the semantics of your component, you want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

    Code:

    <figure>
   <figcaption></figcaption>
   <blockquote></blockquote>
</figure>

    More Info:

    ARTICLE

    If you have any questions or need further clarification, let me know.

    Happy Coding! πŸ‘»πŸŽƒ

    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