Design comparison
Solution retrospective
This is the first time I complete a Frontend Mentor's challenge using a framework rather than plain HTML, CSS & JavaScript. It may seem enormous at first, but I tried to decompose the app into smaller components, completed them one by one and then finished the additional features. The final result really makes me satisfied.
However, I was unable to implement sorting country by continent feature. I use the REST Country API Endpoint v2 for the whole project but the link Continent seemed not working. If anyone has encountered this problem and successfully fixed it, please let me know your solution!
Finally, I'm open to all feedbacks on the project UI ;)
Community feedback
- @shashreesamuelPosted over 2 years ago
Good job
Keep up the good work
Your solution looks great however I think that the title in the navigation bar should have a smaller font size. Secondly the name of the country in the card should be in a heavier font weight.
In terms of your accessibility issues
-
Select element must have an accessible name, this means that it's name must not be
select
. -
Heading levels should increase by one level means that if you have a
h1
the preceding tag should be ah2
. -
Document should have one main landmark, this is caused by the inability to detect the main content of the page and can be fixed by wrapping all the tags between the body tag within the semantic main tag since it establishes that any enclosed tags form the main content of the page.
Once this issue is resolved the rest of accessibility issues should be resolved
In terms of validation issues
Bad value /countries/Åland Islands for attribute href on element a: Illegal character in path segment: space is not allowed.
This means that you can't have a space in a path and is the cause of the rest of validation errors which once resolved will get rid of all the validation errors
Hope this helps
Cheers
0@pqhung3007Posted over 2 years ago@TheCoderGuru Hi Shashree! First of all thanks for the feedbacks on texting and accessibility issues. Regarding validation issue, to prevent letter spacing in query can I search countries by another property such as alphaCode? If having done this challenge, what was your approach to this problem?
0 -
Please log in to post a comment
Log in with GitHubJoin 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