PROY11: 3 Column Preview Card Component

[PROY11: 3 Column Preview Card Component] construido con HTML, CSS y JavaScript para mejorar nuestras habilidades de codificación. Este proyecto es el decimo primero de los desafios #100daysofprojects promovido por Frontend Club.

Tabla de contenidos

• Descripcion
  • El desafio
  • Capturas
  • Enlaces
• Flujo de trabajo
  • Desarrollo
  • Recursos
• Agradecimientos
• Contacto
• Licencia

Descripcion

El desafio

Crear una tarjeta vista previa de estadísticas, usando HTML y CSS; y lograr que se parezca lo más posible al diseño.

Los usuarios deberían poder:

1. Ver un diseño óptimo en pantallas grandes(1200px) y pequeñas(375px).
2. Ver un color de fondo(hover) transparente al pasar el mouse sobre los botones.

Importante:

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

Capturas

Enlaces

• Proyecto
• Repositorio

Flujo de trabajo

Desarrollo

Estructura del proyecto

/
📂
├── 📂css/
│ └── styles.css
├── 📂fonts/
│ └── BigShouldersDisplay-VariableFont_wght.ttf
│ └── LexendDeca-VariableFont_wght.ttf
├── 📂images/
│   └── favicon-32x32.png
│   └── icon-luxury.svg
│   └── icon-sedans.svg
│   └── icon-suvs.svg
│   └── logo.webp
│   └── mockup.webp
│   └── scrrenshoot.webp
├── 📂js/
│   └── index.js
└── .gitignore
└── index.html
└── LICENSE
└── README.md

Tecnologías

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

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="10-stats-preview-card-component - Larry Villegas Costas - Frontend Club"
/>
<meta
  name="description"
  content="10-stats-preview-card-component - Larry Villegas Costas - Frontend Club"
/>
<title>3 Column Preview Card Component - Frontend Club</title>

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

• LinkedIn
• Facebook
• GitHub
• Correo
• Twitter
• Portfolio

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.