Skip to content
Submitted over 2 years ago

Responsive, "mobile first", grid display project

Ric•210
@Ripra87
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Many days passed till my last challenge, hope this will be good )

I started using grid display, is the first project for me using it, i hope i did it in the correct way, but i always look forward to receive advices from anybody who would check my code and help :)

This is also the first time i use the mobile first approach, for this project i admit is much easier than start from the desktop version, but let's see the next! )

Everybody happy coding! ;)

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deleted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • For the testimonials, it is best ✅ to 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:📚

    MDN Figure Element

    • For the profile images alt tag description, it should never* ❌ include the following keywords; “image”, “photo”., “picture” and any variation of them. They also need to be readable; they are not code.
    • 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 web development process can be made easier and expedite the process 🚀 by implementing a CSS Reset. Here are some examples that you can freely use 😁: Josh Comeau Reset, Eric Meyer Reset
    • For improved accessibility 📈 for your content, it is best practice ✅ to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🎆🎊🪅

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