REST API Countries

Ans General question: study the design then start with the html and emphasizing on semantic html as possible then logic.

Ans problems: naming classes in css try to avoid naming each and every class instead use custom classes for example

if you want to style the h1 tag instead of naming the h1 you should simply make class for the color size and weight

something like this:

html

<div>
<h1 className='text-cool-gray fs-250'>
You have the option of monthly or yearly billing.
</h1>
</div>

css

.text-cool-gray { color: hsl(231 11% 63%;)}
.fs-250 { font-size: var(--fs-250); }

this will save you the hassle of not naming each and every tag you want to style learn more about this through cube css and BEM

Hi, you did it well. About the naming problem in the CSS classes, I suggest you to use the BEM methodology, it allows you organize your classes based on Blocks, Elements and Modifiers, for instance, in your .dropdown component, you could have classes like .dropdown__option, .dropdown--hide, .dropdown--show, etc.

To optimize the search component and provide a "better" user experience you could update the results in real time and use a "Debouncer" to prevent unnecessary re-renders of the countries cards by adding a timeout between each UI update or API call.