rest countries api challenge with react.js

Hello Adepoju Adeyemi Joshua. Congratulations on completing this challenge 🎉. It is really well made so good job overall!

I have some small suggestions for you regarding minor problems:

• You should probably try to rethink you layout using grid. It is the perfect opportunity to use this awesome CSS property. The design is a lot of very similar cards in a repetitive order which is a perfect match for grid. This awesome article will help you get started.

• You forgot to update some styles on dark mode like the icons & color of the font in your input-div

• I would use a <header></header> element instead of a <div class="header"></div> for your header which would add more semantic value to you HTML and fix a lot of warnings in the report of your solution.

• I would add a link on the Where in the world? text which redirects to the homepage. This is a feature everyone expects on a website nowadays and really quick to implement.

• I see that you used h4 tags for all your titles. I guess you did it for a styling purpose (in this case the font-size) but this is not a good practice. heading tags should have a logical order in the page. First a single h1 then one/multiple h2 etc... Then you would style them using CSS according to your needs. This is especially important for accessibility.

• Lastly regarding the images of the cards on the home page; I would add a min-height to make them look closer to the design and also add the property object-fit: cover to prevent any distortion.

Fell free to ask any question if you have some trouble fixing some of these issues.

Again good job with your solution and happy coding.

Peace 😊

ridi

Hello Boss, nice job 👍 especially on that dark mode to light toggling feature I am going to try something out relating to that soon. However, I noticed that on the app when I select a region I can't search for countries in that region the results page goes blank I think you didn't notice this. Nevertheless, that was a very nice job boss 👍.