/100_days_of_projects_day5

Product preview card component, is a single componente

Primary LanguageCSSMIT LicenseMIT

PROY05: Product Preview Card Component - 100daysofprojects

[PROY05: Product Preview Card Component] construido con HTML, CSS, para mejorar nuestras habilidades de codificación. Este proyecto es el quinto de los desafios #100daysofprojects promovido por Frontend Club.

Screenshot

Tabla de contenidos

Descripcion

El desafio

Crear una tarjeta de información de producto, usando HTML y CSS, y lograr que se parezca lo más posible al diseño.

Los usuarios deberían poder:

  1. Ver el diseño óptimo en pantallas grandes(1200px) y pequeñas(375px).
  2. Ver un color diferente (hover) al pasar el mouse sobre el botón.

Importante:

  1. Agrega icono favicon al proyecto.
  2. Agrega una URL fácil de recordar (ej. 05-product-preview-card-component).
  3. Agrega un título al proyecto (ej. Product Preview Card Component - Frontend Club).
  4. Bonus: Agrega un archivo README.md al proyecto.

Capturas

Captura

Enlaces

Flujo de trabajo

Desarrollo

Estructura del proyecto

/
📂
├── 📂css/│ 
│ └── styles.css
├── 📂images/
│ └── favicon-32x32.png
│ └── icon-cart.svg
│ └── image-product-desktop.jpg
│ └── image-product-mobile.jpg
│ └── logo.webp
│ └── mockup.webp
│ └── scrrenshoot.webp
└── index.html
└── LICENSE
└── README.md

Tecnologías

  1. HTML Semántico
  2. Estilos CSS
  3. Git y GitHub
  4. Netlify

Flujo de desarrollo

  1. Análisis del diseño
  2. Configuración inicial
    • Vincular archivos y librerías
    • Iniciar proyecto con Git
  3. Marcado HTML
    • Estructura semántica
    • Atributos accesibles
    • Enlaces y rutas
  4. Estilos CSS
    • De arriba hacia abajo
    • Estilos reutilizables
    • Estilos personalizados
  5. Flujo de trabajo mobile-first

Fragmentos de codigo

Etiquetas meta para el SEO.

<meta name="author" content="Larry Villegas Costas" />
<meta
  name="title"
  content="PROY05: Product Preview Card Component - Larry Villegas Costas - Frontend Club"
/>
<meta
  name="description"
  content="PROY05: Product Preview Card Component - Larry Villegas Costas - Frontend Club"
/>
<link rel="stylesheet" href="css/styles.css" />
<link
  rel="icon"
  type="image/png"
  href="./images/favicon-32x32.png"
  sizes="32x32"
/>
<title>PROY05: Product Preview Card Component - Frontend Club</title>

Animaciones CSS.

button:hover {
  background: #1a4031;
}

Recursos

Comparte los recursos que hayas utilizado para completar este proyecto.

  1. Frontend Club - Comunidad de desarrollo web
  2. Netlify - Plataforma de alojamiento web
  3. Multi Device Website Mockup Generator - Generador de maquetas
  4. SVGOMG - Optimizador de SVG
  5. Squoosh - Optimizador de imágenes
  6. Shots - Capturas de pantalla
  7. Google Fonts - Fuentes gratuitas

Agradecimientos

  • Mi familia que siempre me apoya en mis proyectos
  • Mi streeamer favorito que me inspira a seguir adelante @midudev

Contacto

Licencia

Este proyecto está bajo la Licencia (MIT) - mira el archivo LICENSE para detalles

No dudes en contactarme si crees que te puedo ayudar en algún proyecto o tienes un trabajo para mi.