Design comparison
SolutionDesign
Solution retrospective
Hello everyone 🤓💻, I'm Yaniv and this is my solution for the challenge #12
built with :
- Grid.
working with grid this project was relatively easy to accomplish, I added additional media queries to make the project look better on all devices
Thanks!💖
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some recommendations for enhancing your code.:
- The profile images are not decorative ❌. Their
alt tag
should not be blank. It should state the person’s full name.
- The only headings ⚠️ in this component are the names of each individual; “Daniel Clifford”, “Jonathan Walters”, “Jeanette Harmon”, “Patrick Abrams” and “Kira Whittle”. Everything else should be wrapped in a
paragraph
element.
- For the testimonials, it is best ✅ to to wrap each individual testimonial component in a
figure
element, the individuals information should be wrapped in afigcaption
element and lastly, the testimonial itself should be wrapped in ablockquote
element.
Code:
<figure> <figcaption></figcaption> <blockquote></blockquote> </figure>
More Info:📚
- Using CSS
grid
withgrid-template-areas
will make things way easier 💯 when building the layout and give you full control of it.
- For improved accessibility 📈 for your content, it is best practice ✅ to use
rem
for yourfont-size
andrem
/em
for other property values. Whileem
is best formedia-queries
. Using these units gives users the ability to scale elements up and down, relative to a set value.
If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.
Happy Coding! 👾
Marked as helpful0 - The profile images are not decorative ❌. Their
Please log in to post a comment
Log in with GitHubJoin 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