Creando una card

¿Qué es Platzi Food y cómo inicia el proyecto?

Platzi Food es un innovador proyecto de comercio electrónico que te permitirá poner en práctica tus conocimientos de HTML y CSS creando un sitio web de comida. En este proyecto, diseñarás un sitio estructurado con elementos esenciales como menú, productos, footer y un formulario; integrando así la teoría aprendida en anteriores clases.

El desarrollo del sitio inicia desde cero, con un enfoque en el diseño frontend que simule la experiencia en dispositivos móviles. Esto implica configurar un entorno de trabajo limpio, incorporando un archivo index.html básico y un archivo CSS limpio. Se selecciona el título "Cardo o producto" para el proyecto, especificando estilos iniciales en CSS para asegurar que el sitio mostrará adecuadamente el contenido.

¿Cómo se estructura el diseño y los estilos iniciales?

La estructura del sitio se compone de varios elementos clave insertados en el HTML, comenzando con la creación de una tarjeta de producto que incluirá:

• Imagen del producto
• Título en un elemento <h2>
• Descripción del producto
• Precio
• Calificación y reseñas

Para la parte estética del proyecto, se aplican estilos CSS desde el principio, garantizando una visualización móvil de la página. Se emplea un enfoque "mobile-first", el cual prioriza que el sitio sea responsive y adecuado, comenzando por el diseño para dispositivos móviles.

Ejemplo de código CSS inicial:

body {
    min-height: 100vh; /* Hace que se use toda la pantalla */
    background-color: #gray400; /* Fondo inicial para resaltar */
    margin: 0; /* Eliminamos márgenes por defecto */
}

Estos estilos aseguran que la tarjeta de producto no abarque todo el ancho de la pantalla, usando márgenes horizontales y un espacio superior para un diseño más espacioso y centrado.

¿Cómo se integran las imágenes de productos?

Para ilustrar los productos de Platzi Food, las imágenes se integran cuidadosamente en la tarjeta de producto utilizando una opción probada: Unsplash. Este recurso ofrece imágenes gratuitas y de alta calidad que puedes utilizar y personalizar para tus proyectos.

Ejemplo de código HTML para imagen:

<img src="https://source.unsplash.com/random/500x500/?burger" alt="Hamburguesa deliciosa">

En este ejemplo, ajustamos la imagen a un tamaño de 500x500 píxeles para una integración visual óptima. Esta técnica permite un control eficaz del espacio y la estética del sitio.

Recomendaciones y próximas etapas

A medida que avanzas en el proyecto Platzi Food, te enfrentarás al desafío de estilizar armoniosamente cada componente. Aquí te dejamos algunos consejos para seguir adelante:

• Sigue enfocándote en el diseño mobile-first: Facilitará la adaptabilidad de tu sitio web a distintos dispositivos.
• Experimenta con CSS: Prueba diferentes combinaciones de estilos y consulta recursos visuales que complementen la estética de tu sitio.
• Continúa explorando recursos gratuitos: Unsplash y otras plataformas similares pueden ahorrarte tiempo y ofrecer alta calidad visual.

En adelante, se abordará la formateo de todos estos elementos para lograr una apariencia cohesiva y visualmente atractiva. ¡Sigue con el excelente trabajo y diviértete creando!