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

Solution to the advice generator app using HTM,Sass & JS

@ManuelFernandezEsteban

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Hola Manuel, estaba viendo tus proyectos y maqueteas bien pero deberías limpiar el reporte de errores para mejorar algunas cosas que te pueden ocacionar problemas con el SEO!

Vamos primero por el problema del botón en teoría esta bien pero el botón no tiene texto porque debe tener una imagen para eso existe el atributo aria-label que lo podrías usar así:

<button class="boton" onclick="newAdvice()" aria-label="Click change advice">

En este caso es un ejemplo masomenos sirve para agregar un texto auxiliar ya que cuando pase un lector de pantalla al solo ver una imagen no sabrá que decir.

Por cierto el texto que dice ADVICE es más grueso agregale grosor con el font-weight

El <div class="wrapper"> cambialo por <main class="wrapper">, el motivo es más que nada porque todo body debe tener su main que es el contenido principal de la página. Osea siempre es necesaria esa etiqueta, ya si tu pagina tiene navegación o pie de página dentro del body iría algo como:

<body>
<nav></nav>
<main></main>
<footer></footer>
</body>

El h6 que has usado para advice si o si cambialo por h1 si o si debes tener un h1 por página además solo usalos cuando desees poner titulos y subtitulos no tiene sentido usar un h6 ahí y menos si no hay titulo y subtitulos anteriores (del h1 al h5) ya que siempre debe ir en incremento.

Y bueno te doy estos consejos ahora porque veo mucho potencial pero errores en los reportes que te ha hecho frontend mentor así que si puedes corregir ahora mejor. Corregí eso y generá un nuevo reporte y ve si ya no hay errores, si hay algun puedes etiquetarme y te ayudo o comunicarte conmigo mediante Linkedin, suerte!

Good Coding!

Marked as helpful

0

@ManuelFernandezEsteban

Posted

Hola Danilo, te agradezco mucho tus comentarios y que le dedicaras tiempo a revisar mi trabajo y que además te guste. Es verdad que no tengo en cuenta el seo a la hora de maquetar los componentes, trataré de corregir las páginas y tenerlo en cuenta. También gracias por el consejo de aria-label para el botón porque es cierto que no sabía cómo resolver ese problema, debo aprender ese tipo de etiquetas. De nuevo muchas gracias por los comentarios

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