Skip to content
Submitted over 1 year ago

Results Summary Component using HTML and CSS with flexbox techniques.

Eric Aguayo•945
@EAguayodev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey frontend mentor community!! It's been a long time since doing a challenge here on the platform, however, I do have some questions to leave here and for feedback on the challenge itself.

  1. Does the code do well with meeting accessibility guidelines?
  2. Does my solution come across as consistent on multiple browsers with regards to my design meeting the details needed to be achieved?
  3. I skipped doing the bonus challenge, but am also open to knowing if there's a certain level of javascript to understand before being able to understand JSON?

Community feedback

  • Andre Ferreira•450
    @Namonaki0Posted over 1 year ago

    Hi Eric, well done for completing the challenge.

    1 - I did a Lighthouse audit and you scored 96. That's mainly because your heading is not in sequentially-descending order, meaning, you started with a h3 heading and since there is no h1 and h2 present in the page you were marked for that. Also, the main div that wraps the whole component would probably be best if it was a <main> tag for semantic reasons.

    2 - I used LT Browser to check your solution in different devices and browsers. It seems to work fine. Just one detail, at least for desktop view you could center the component in the middle of the page. You can achieve this by doing:

    body {
   display: grid;
   height: 100vh;
   place-content: center;
}

    3 - JSON is just an object that contains some data. You can use the fetch method to get access to what's inside that object in form of a promise.

    This might help in the future:

    I hope this answers your questions a little bit at least.

    Marked as helpful
    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