Submitted about 2 years ago

Responsive landing page using grid and flex

Victor H P Sá• 130

@victorspoot

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

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted about 2 years ago

Hey @victorspoot, great job on this project!

Some suggestions to improve you code:

For the background, there's no need to create HTML code to implement it. You can apply with only CSS, using the background-image property on the <body> element.

You can look at my code and see how its implemented: https://vcarames.github.io/Social-Proof-Section/

For accessibility purposes, it’s best to use rem/em instead of px for your CSS property values.
For each individual quote, its semantically better to wrap the quotes themselves in a <blockquote> element.

More info on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

Happy Coding!

Marked as helpful

Lucas 👾• 104,440

@correlucas

Posted about 2 years ago

👾Hello @victorspoot, 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!

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