Design comparison
SolutionDesign
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The styling still needs a lot of work to look like the FEM design.
- To improve the semantics of your component, you will want 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:📚
- 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.
- The profile images are not decorative. Their
alt tag
should not be blank. It should state the following; “Headshot of -person’s full name-“
More Info:📚
- Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
1@nukettasPosted almost 2 years agoHello @vcarames 🤚 *Thank you so much for this feedback. For the next challenge I will make sure that I use headings properly.
- I will check the MDN for the figure element, I haven’t use that element before. thank you for the detailed explanation with code on that part.
- I’ve tried to make it responsive as much as possible but I think I should study that part more.
Thank you so much again.
1 - @afaiz-spacePosted almost 2 years ago
Hey @nukettas, congratulations on completing the challenge.
- instead of using the top left property use the grid property then you will get a better result.
- also make a responsive website. Must have a mobile-first approach.
1
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