/100_days_of_projects_day11

PROY09: Order Summary Component, build with HTML, CSS para mejorar nuestras habilidades de codificación. Este proyecto es el noveno de los desafios #100daysofprojects promovido por Frontend Club.

Primary LanguageCSSMIT LicenseMIT

PROY09: Order Summary Component

[PROY09: Order Summary Component] construido con HTML, CSS para mejorar nuestras habilidades de codificación. Este proyecto es el noveno de los desafios #100daysofprojects promovido por Frontend Club.

Screenshot

Tabla de contenidos

Descripcion

El desafio

Crear un componente orden de pedido, 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), medianas(768px) y pequeñas(375px).
  2. Ver un color diferente(hover) al pasar el mouse sobre el botón principal.
  3. Bonus: Visualizar una ventana modal después de presionar el botón principal.

Importante:

  1. Agrega icono favicon al proyecto.
  2. Agrega una URL fácil de recordar (ej. 09-order-summary-component).
  3. Agrega un título al proyecto (ej. Order Summary 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
├── 📂fonts/
│ └── RedHatDisplay-VariableFont_wght.ttf
├── 📂images/
│   └── favicon-32x32.png
│   └── icon-music.svg
│   └── illustration-hero.svg
│   └── logo.webp
│   └── mockup.webp
│   └── pattern-background-desktop.svg
│   └── pattern-background-mobile.svg
│   └── 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="PROY09: Order Summary Component - Larry Villegas Costas - Frontend Club"
/>
<meta
  name="description"
  content="PROY09: Order Summary Component - Larry Villegas Costas - Frontend Club"
/>
<link
  rel="icon"
  type="image/png"
  href="./images/favicon-32x32.png"
  sizes="32x32"
/>
<title>Order Summary 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

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.