Design comparison
Community feedback
- @VCaramesPosted 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 helpful0 - @correlucasPosted 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!
0
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