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

REST Countres API with NuxtJS SPA & Vuetensils

Joshua Brileyā€¢ 415

@somecallmejosh

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


Using CSS Grid, CSS Custom Properties, NuxtJS, Axios, and the Vuetensils library. My main goal is to use these frontendmentor.io projects to get some reps in with Nuxt.js. We have adopted it at work, and the more opportunities I have to build things, the better.

I am aware that Nuxt is triggering some HTML validation errors. Since they are non-breaking issues, I'm ok with them. I am happy to receive any constructive feedback regarding performance and accessibility. Would love to keep the conversation positive and useful for people who read the comments thread.

Community feedback

P
Matt Studdertā€¢ 13,611

@mattstuddert

Posted

Hey Joshua, awesome work on this challenge. Your solution looks really good! I can't see any issues with the accessibility or performance side. The only slight issue is that some of the flags don't change if you play around with the search and filter. Also, on a purely UI side, you could set a height on the flags and use object-fit: cover so that they're not varying sizes.

I hope you enjoyed the challenge. Keep up the great work!

1

Joshua Brileyā€¢ 415

@somecallmejosh

Posted

Hey Matt! Thanks for your feedback. I've updated based on your suggestions. I believe the wonkiness with the filtered flags had something to do with the lazy loading of the images. I set them back to regular images and things work fine. I'll have to do some research into why that was happening. BTW, I found this site in your No CS Degree interview from September. Been wanting to tinker on one of these projects for a while. I'm very excited by the work you're doing here.

0
P
Matt Studdertā€¢ 13,611

@mattstuddert

Posted

@somecallmejosh nice work resolving that issue! Odd that the lazy loading was interfering.

That's great that you read the No CS Degree interview and that you like the idea behind the site. If you ever have any feedback or ideas please feel free to message me. Also, if you ever fancy giving people feedback then feel free to just dive in. The more people providing useful feedback to each other the better! šŸ™‚

1
Joshua Brileyā€¢ 415

@somecallmejosh

Posted

@mattstuddert I will do my best to provide constructive feedback on other projects. Giving good feedback is a good skill to have. Need all the practice I can get. :-)

See you on the next project.

1

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