Submitted about 4 years ago

Mobile-First, Lazy-Loading with Vue.js, Sass

Ilan•675

@iKnowMagic

Preview site View code

This is a solution for...REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

Design comparison

SolutionDesign

Solution retrospective

Feedback is highly appreciated. This version uses lazy-loading with the Intersection Observer.

Interesting fact: Bouvet Island has a population of zero. It is the most remote island in the world 😃

Community feedback

ApplePieGiraffe•30,545
@ApplePieGiraffePosted about 4 years ago
Great job, as always, Ilan! 😍

I noticed that at 90em, your solution immediately breaks from a four-column grid layout into a one-column layout while there's still space for at least one or two more columns. Just a suggestion, but I think transitioning from a four to three to two to one-column layout will look a little smoother and leave less empty space around the country cards on tablets and smaller desktop screens (such as mine). 😃

Happy coding! 😁
1
Ilan•675
@iKnowMagicPosted about 4 years ago
Thank you for the feedback!

The solution has been updated to cover multiple resolutions. :)
1
ApplePieGiraffe•30,545
@ApplePieGiraffePosted about 4 years ago
@iKnowMagic

Sweet! Looks great!
1
Ilan•675
@iKnowMagicPosted about 4 years ago
@ApplePieGiraffe Many thanks!
0

Please log in to post a comment

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