First try with scss. There were difficulties with the Eye image icon, I'm not sure what I did right, but it seems to work. Used tools:
Good Work, Pixel Perfect style. Keep up coding. Happy coding :)
I used pixel units, that way I could make it pixel perfect to the Figma files. Is it better to use REM/EM or other non-absolute units? then do the math to get it to match the Figma?
I think it's better to use REM units that are based on the font size of the root element.
Mainly for accessibility issues since users have different default sizes other than 16px for different reasons.
And when using REM units, the size is based on that default size of each user, which offers a better experience.
I am not an expert, but I hope you can use my suggestion for a broader search on the subject.
Greetings ✨
Good job @brunafields.
Recommendation:
Good job, I would suggest you add javascript to give it life or better learn a framework when you feel with a good base of javascript and be able to handle the requirements that they ask for faster.
I invite you to see my solution to the same challenge made with ReactJS.
Hi, I'll help you with a snippet so you can improve the centering of your design in tablet+ resolution.
@media screen and (min-width:992px){
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
What do you think about continue developing this Design? What does it need to stand out?
Seems you need to zoom fit 150% to look great, good job anyways.
Hi!, I really appreciate your advice and suggestion! :D
Hello, good job, I recommend that you review the accessibility problems and HTML validations.
At my current level of knowledge I see that the problems come from the lack of an HTML5 markup tag that wraps your main content.
Here is an official example.
Example
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</body>
</html>
I emphasize that in your case it would be the <main>card-content...</main> and regarding the HTML validations I see that you have problems with the prefixes of tailwindCSS and I recommend that you take a look at the official documentation.
I'm trying my best experiment with JS Promises combine with OOP Approach. Any feedback are so welcome!
Hello, congratulations for complete the challenge.
I have 1 suggestion that I think you can easily solve. Height does not fill the entire viewport of the desktop screen when searching for a country and displaying the results. One suggestion for the icons would be to use the heroicons ones ("https://heroicons.com/") so that they look very good to what the design requires for the rest.
I would like a feedback in my solution too if you can. ("https://www.frontendmentor.io/solutions/reactjs-reactrouterdom-tailwindcss-grid-and-flexbox-7vym2dCNk")
