Esta es una solución del proyecto Nombre proyecto como parte del reto de codificación #100DaysOfProjects. La mejor manera de escribir un buen código es programando todos los días🔥.
Se requiere desarrollar una tarjeta de producto con los datos que se visualizan en el diseño, usando HTML y CSS.
Los usuarios deberían poder:
- Ver el diseño óptimo según el tamaño de pantalla de su dispositivo.
- Ver estados
hoverpara los elementos interactivos en la página.
Diseño adaptado para cualquier tipo de pantalla del dispositivo:
El proyecto se encuentra alojado en un hosting gratuito(Netlify):
- Marcado HTML
- Propiedades CSS
- Propiedad
grid - Media query
Nuevamente procuramos usar la metodologia BEM para ser más administrable el marcado HTML.
<main class="container">
<article class="card">
<div class="card__header">
<div class="card--img"></div>
</div>
<div class="card__body"></div>
<div class="card__footer"></div>
</article>
</main>Usamos media query para adaptar el diseño a pantallas pequeñas:
/* ----- Media queries ----- */
@media screen and (max-width: 1080px) {
.card {
width: 90%;
grid-template-columns: 1fr;
}
}Aprenderemos más sobre el concepto mobile-first para usar correctamente las propiedades CSS.
Hemos recopilado una lista de recursos e información valiosa que puede ayudarte a comprender mejor la realización de este hermoso proyecto:
- UI Design Daily - contiene diseños UI de excelente calidad para codificar.
- Google Fonts - contiene fuentes que podemos descargar y usar para nuestros proyectos.
- BEM Methodology In CSS: A Quick Start Guide - una guía corta pero precisa para comprender la metología BEM. Puedes descargar la guía en PDF.
A menudo creo artículos y publico contenido sobre desarrollo, puedes seguirme estar al tanto de las publicaciones.
Agradecemos a los miembros de la comunidad Frontend Club, que nos inspiran a seguir creando contenido y compartiendo iniciativas para ayudar a mejorar sus habilidades en HTML, CSS, JavaScript y Git.
2024, nuestro año.🔥
“Yo puedo hacer cosas que tú no puedes, tú puedes hacer cosas que yo no puedo; juntos podemos hacer grandes cosas”. — Madre Teresa de Calcuta.