Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonial grid

Alexander 170

@Perr0fe0

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hola a todos!.

Aquí esta mi solución a esta actividad! .

Todo tipo de feedback se agradece.

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

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 helpful

1

Alexander 170

@Perr0fe0

Posted

@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
Angel M 370

@csmurillo

Posted

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 helpful

1

Alexander 170

@Perr0fe0

Posted

@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 GitHub
Discord logo

Join 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