Perfil con enlaces sociales responsive usando HTML y CSS Flexbox

Solution retrospective
Estoy orgulloso de haber completado todo el reto utilizando buenas prácticas de HTML y CSS, manteniendo un diseño limpio, responsivo y accesible para diferentes dispositivos. También aprendí a organizar mejor los archivos del proyecto y publicar por primera vez en GitHub Pages, lo cual fue un gran logro personal.
La próxima vez, me gustaría mejorar el uso de animaciones y aplicar técnicas más avanzadas de diseño responsivo, como CSS Grid, para tener mayor control del layout. También planeo estructurar mejor el código CSS utilizando metodologías como BEM o separar el CSS en archivos más modulares.
What challenges did you encounter, and how did you overcome them?Uno de los principales desafíos fue configurar correctamente GitHub Pages, ya que al principio mi sitio mostraba un error 404. Me di cuenta de que los archivos estaban dentro de una subcarpeta (social-links-profile-main) y no en la raíz del repositorio. Lo solucioné moviendo el contenido directamente al nivel raíz y seleccionando correctamente la rama y carpeta en la configuración de GitHub Pages.
También enfrenté dificultades al aplicar estilos responsivos. No estaba familiarizado con media queries, pero después de investigar y probar diferentes soluciones, logré que el diseño se adapte a pantallas móviles. Fue una gran oportunidad para reforzar mis conocimientos en responsive design y manejo de archivos en Git.
What specific areas of your project would you like help with?Me gustaría recibir retroalimentación sobre cómo mejorar la estructura del HTML y la organización del CSS, especialmente en lo relacionado a buenas prácticas de accesibilidad (como el uso adecuado de etiquetas aria, encabezados y roles). También agradecería sugerencias para optimizar el diseño responsivo y hacerlo aún más fluido en distintos tamaños de pantalla, así como recomendaciones para escribir CSS más limpio y reutilizable. Finalmente, si hay formas más eficientes de publicar en GitHub Pages, agradecería consejos para automatizar ese proceso o evitar errores comunes.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarziaJalili
¡Lo tienes! 🔥
No IDK Spanish just wanted to give it a shot. 😅
🌟 Here's my suggesteenoo on semantics:
✅ If the text contains a physical address and contact information, we should use the <address> element to help machines better understand the content.
Olà! 😎
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