Frontend Mentor | REST Countries API coding challenge solution

Grace• 27,950

@grace-snow

Posted over 3 years ago

Hi,

I'm not very experienced with React (really don't enjoy using it, like @demahom18 I'm a Vue.js girl when it comes to frameworks!)

But I've had a look in browser and have some ideas for you :)

Firstly, really nice effect on your search input label! I like that a lot.

Overall, this looks nice on mobile and desktop, but you do have quite a problem with images being misshapen. This becomes really obvious at some screen sizes with images being stretched or squished.

There is a brand new aspect ratio property in css that would be good to learn about, but it would be important to wrap that inside an @supports media query if you chose to use it, as not all browsers have it yet (they will in the next few months).

Even if you did use that, you'd need to include a fallback for all other browsers. This article may help, but there are lots of others explaining the same approach: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp. To maintain the aspect ratio you may find it easier if you used background images instead of placing the image as an element in html. We do this a lot where I work and add these style="background-image: url('path-to-image')" role="img" alt="flag of USA" to the element so it is still announced to assistive technology.

The overall layout on this is OK, but I think you'd find it more fluid if you used CSS grid. It's the perfect use case for it!

Be careful to make focus states obvious, especially when keyboard tabbing. You could use the :focus-visible css property to give buttons and cards a bolder focus outline, for example. Color change only on focus really isn't enough to meet accessibility requirements as some with sight impairments like types of colorblindness will not be able to see what has focus.

Last thing - you're using some incorrect html elements in this. The information inside the cards can't be h4s. There's a few reasons here - 1) You should never jump heading levels as they give meaningful structure for search engines and assistive tech users; 2) Headings need to have content under them, they can't be the only content to read.

Instead of h4s, I recommend switching to the description list element which is designed specifically for this type of content.

i hope that's all helpful feedback. It's not a list of criticisms or anything, just learning suggestions really 🙂

Grace• 27,950

@grace-snow

Posted over 3 years ago

Oh and in your report, a lot of those html validation errors are because it doesn't understand the custom attributes React is adding. Don't worry about those ones.

Some are real though, like ones talking about the order of -ms- prefixes in css. If you use any prefixed properties or need to include fallbacks for new/less-supported properties, make sure these always come before the modern properties in css. (With most, I'd argue you don't even need to be including them at all, to be honest. Build tools can add them for you automatically if/when needed, so you don't need to include them yourself)

For example:

display: -ms-grid;
display: grid;

This is all to do with the cascade in CSS. If a browser supports a property like grid, it'll use that. If it doesn't, it will look higher to see if an alternative is available

Sook-Yan Hue• 40

@syhue

Posted over 3 years ago

@grace-snow

Thanks for the detailed review of my code. Thank you so much. I will read line by line and take notes of it. Thanks again.

REST Countries API

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community