Submitted almost 2 years ago

Social Proof Selection

Samuel Mantey Asare-Adjei• 40

@sam-mantey

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

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,440

@correlucas

Posted almost 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

Adriano• 34,090

@AdrianoEscarabote

Posted almost 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

バレンタイン 😈• 64,190

@VCarames

Posted almost 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! 👻🎃

Please log in to post a comment

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