Skip to content
Submitted 29 days ago

Tarjeta Blog

Bryan Chiang•60
@ChiangArt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Que lo hice practicamente solo

What challenges did you encounter, and how did you overcome them?

Casi ninguno

What specific areas of your project would you like help with?

En Markdown

Community feedback

  • Ibrahim Mohammed•640
    @MohammedOnGitPosted 28 days ago

    Hola Bryan Chiang!!!

    ¡Felicidades por completar el desafío! Tu código HTML está bien estructurado; sin embargo, aquí tienes algunas recomendaciones para mejorar la accesibilidad, el SEO y el cumplimiento de WCAG en tu código:

    Accesibilidad

    Texto alternativo para imágenes:

    Proporciona un texto alternativo significativo para las imágenes para mejorar la accesibilidad. Por ejemplo:

    <img class="card__image" src="assets/images/illustration-article.svg" alt="Ilustración relacionada con el tema del artículo">
<img class="author__image" src="assets/images/image-avatar.webp" alt="Foto del autor Greg Hooper">
    • HTML semántico:

    Usa elementos HTML5 semánticos (como <article>, <header>, <footer>, etc.) para mejorar la legibilidad para tecnologías de asistencia y mejorar el SEO. Por ejemplo:

    <article class="card">
  <header>
    <span class="status">Aprendizaje</span>
    <time datetime="2023-12-21" class="publish__date">Publicado el 21 de diciembre de 2023</time>
  </header>
  <!-- Contenido aquí -->
</article>
    • Etiquetas accesibles para fechas:

    Envuelve las fechas o tiempos en etiquetas <time> para mayor claridad, como ya lo has hecho. Asegúrate de que los atributos datetime sean precisos para los lectores de pantalla.

    • SEO

    Jerarquía de encabezados:

    Considera ajustar los niveles de encabezado para seguir una estructura lógica para SEO. Por ejemplo, si esta tarjeta es un componente independiente en una página, un <h1> podría ser adecuado para el encabezado principal si es el contenido principal. De lo contrario, asegúrate de que siga una jerarquía lógica en la página.

    • Meta descripción:

    Incluye una etiqueta <meta name="description" content="Breve descripción de la página"> en la sección <head> para mejorar la comprensión de los motores de búsqueda y fomentar los clics.

    • Título descriptivo:

    Asegúrate de que la etiqueta <title> describa bien el contenido de la página para SEO, por ejemplo, “Tarjeta de vista previa de blog | Fundamentos de HTML y CSS.”

    Usa font-display: swap; en tu enlace de Google Fonts para evitar retrasos en la carga de fuentes y asegurar que el texto sea legible mientras se cargan las fuentes.

    • Landmarks ARIA:

    Agregar landmarks ARIA (como role="main" en el contenedor de contenido principal) puede ayudar a los lectores de pantalla a entender mejor la estructura de la página.

    Esta estructura revisada debería mejorar el SEO, la accesibilidad y el cumplimiento de WCAG.

    ¡Hiciste un gran trabajo, sigue así!

    0

Please log in to post a comment

Log in with GitHub

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