Design comparison
Solution retrospective
Hola a todos!.
Aquí esta mi solución a esta actividad! .
Todo tipo de feedback se agradece.
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hi Alexander, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:
You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.
h1, h2, p, span { font-size: 13px; }
avoid using
px
, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: [px to rem](https://marketplace.visualstudio.com/items?itemName=sainoba.px-to -rem)The rest is great!
I hope it helps... 👍
Marked as helpful1@Perr0fe0Posted almost 2 years ago@AdrianoEscarabote Hi there!.
I didn't know that the <br> tag could cause these problems, I'll keep it in mind..
I also know that it's better to use rem unit, I just wanted to see how it would look with px hahahaha.
I use the px to rem converter a lot in my projects.
thanks so much for you feedback!.
1 - @csmurilloPosted almost 2 years ago
Hola Alexander, Primer de todo muy buen trabajo modificando el css grid para hacer este projecto. Pero algunas cosas que vi en tu HTML me parece que puedes modificar para que este project quede al 100%.
1. Puedes rodear todo el contenido de cada tarjeta testimonial en un tag <article>, este tag es muy usado para contener contenido de tarjetas. (Article Tag MDN)
2. Otra cosa que me parece que puedes modificar es el <h1>(usando tu ejemplo):(Hgroup Tag MDN)
<h1 class=" modo-oscuro"> Daniel Clifford <br> <span class=" modo-oscuro">Verified Graduate</span> </h1>
un formato mas adecuado es:
<hgroup> <h1>Daniel Clifford</h1> <p>Verified Graduate</p> </hgroup>
La manera que lo implementaste esta bien y es muy usado en el web, pero usando el html5 tag <hgroup> es mas appropiado.
PS: No tienes link de github para ver to codigo, si alguien mas quiere ver tu codigo y darte mas recomendaciones no va a poder ayudarte. Yo use el google dev tools.
Marked as helpful1@Perr0fe0Posted almost 2 years ago@csmurillo hola buenas!.
Así que el tag <article> sirve también para contenedores de tarjetas, siempre ocupaba <div>, pero veo que si quiero que mi código se entienda mejor, tendré que ocupar <article>.
No tenia idea que estala el tag <hgroup>, nunca lo había visto sinceramente, tendré que echarle un ojo a eso para aplicarlo en próximos proyectos!.
Y viendo lo de Github, me extraña que no puedas acceder, si esta puesto el link para que puedan entrar a ver mi código, capaz y se subió en privado, también lo veré..
En serio muchas gracias por el feedback!.
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