
Patrick Cuentas Mariano
@PatrickCuentasAll comments
- @Teor99@PatrickCuentas
Good Work, Pixel Perfect style. Keep up coding. Happy coding :)
- @mrfinesse47@PatrickCuentas
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 ✨
Marked as helpful - @brunafields@PatrickCuentas
Good job @brunafields.
Recommendation:
- Change the color of the text so that it contrasts more with the background of the card so as not to strain the eyes as much.
- @Ashen5558@PatrickCuentas
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.
- @rebekahshaw92@PatrickCuentas
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; } }
- @latif-essam@PatrickCuentas
Seems you need to zoom fit 150% to look great, good job anyways.
- @zulhamsy@PatrickCuentas
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.
Marked as helpful - @eklemis@PatrickCuentas
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")
Marked as helpful