Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Beautiful Results Summary

@LiarleyCodie

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This project was the first time I used the fetch method to fetch data from a local JSON, and also the first time I happened to need to use methods like async and await (this time I saw the md file that contained the fonts and the colors) :)

Community feedback

@SameerJS6

Posted

Congratulations on completing this fun, beautiful Project.

  • You've done a phenomenal job on styling but there's a slight mistake that you've done, they are:-
  • On mobile, the result i.e the purple gradient container should take the full width, but you have given alot of padding or margin.
  • Also on the Accessibility report, don't use the same name for I'd on span.
  • Try to add a alt=Whatever the image is about on img tag is necessary because, In case if the user doesn't have a good internet connectivity, then it show this text instead of the image. So describe it short and simple.
1

@LiarleyCodie

Posted

@SameerJS6 Hi, as for the width on mobile, I literally set the width of the container to occupy only 98% of the screen width, not 100% looking through the browser looked good, but looking at it now, I should have set it to 100% lol. Regarding the img alternatives, I was already a little exhausted from two other projects, so I just wanted to finish this one, so I didn't have the patience to put the alternatives. As for the ids, I only realized at the end that they all had the same ID lmao. But thanks, next time I'll try to make it more responsive in all aspects :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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