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

React - Rest Countries

Zuzki 180

@LuisDGracia

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


I made this challenge with React, Styled components and react router, there are ton of optimization problems that idk how to solve

for example, all the countries load at the same time making the page take some time to load in special for the images

I would very appreciate any feedback you could make to improve

Community feedback

Frank 30

@h4ckz3r

Posted

On that issue that you mentioned about all the images loading at the same time, keep in mind that the attribute "loading" only applies to the <img> tag and also on <iframe> but not on div's.

And by the look of the design, the only images that should be lazy loaded are the ones from the 3rd row downwards. You can increase the spacing between the cards and also between the text to achieve that effect.

If you want to learn more about that attribute check out this link https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

All in all, great work on this solution!

2

Zuzki 180

@LuisDGracia

Posted

@h4ckz3r thanks for the comment and the link, I'll try your suggestion on the future for this solution! 😄

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