Ejercicio de programación con TailwindCSS: Listado y formulario de productos en Tailwind CSS
Proyecto
Ejercicios de programación de Tailwind CSS proyecto real para crear una cuadrícula de productos y un formulario de creación de productos.
Configurar el entorno de trabajo:
- Abre Visual Studio Code y crea una nueva carpeta para tu proyecto.
- Dentro de esta carpeta, crea un archivo llamado
index.html.
Incluir Tailwind CSS:
- En el archivo
index.html, incluye el enlace a la CDN de Tailwind CSS en la sección<head>.
Crear la estructura del HTML:
- Dentro del archivo
index.html, crea el contenedor principal para la cuadrícula de productos utilizando las clases de Tailwind CSS. - Genera el grid de columnas para mostrar los productos, cada columna debe contener una imagen, un nombre y un precio.
Añadir el formulario de creación de productos:
- Debajo de la cuadrícula de productos, añade un formulario con los campos necesarios: nombre del producto, precio del producto y carga de imagen.
- Añade un botón de envío al formulario. No envía a ningún sitio ni necesita javasacript.
Asegurarse de la responsividad:
- Verifica que la cuadrícula de productos se adapta correctamente a diferentes tamaños de pantalla utilizando las clases de Tailwind CSS.
Revisar y probar:
- Guarda los cambios y abre el archivo
index.htmlen un navegador web para asegurarte de que todo funciona correctamente. - Realiza ajustes si es necesario para cumplir con los requisitos del proyecto.
Más ejercicios de programación con TailwindCSS
Evalúa tus conocimientos en TailwindCSS con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.
Flexbox en Tailwind CSS
Puzzle
Contenedores y columnas en Tailwind CSS
Código
Utilidades de espaciado y alineación en Tailwind CSS
Puzzle
Clases de bordes de Tailwind CSS
Código
Evaluación conocimiento Código Tailwind CSS
Código
Evaluación conocimiento Test Tailwind CSS
Test
Hover, focus y estado de Tailwind CSS
Código
Clases de colores y fondo de Tailwind CSS
Código
Clases de tamaño de Tailwind CSS
Puzzle
Instalación de Tailwind CSS
Código
Tipografía y fuentes en Tailwind CSS
Puzzle
Proyecto blog de artículos con Tailwind CSS
Proyecto
Transiciones y animaciones de Tailwind CSS
Código
Fundamentos del sistema Utility-First
Test
Grid en Tailwind CSS
Código
Fundamentos del diseño responsive en Tailwind CSS
Código
Introducción a Tailwind CSS
Test
Tecnologías de este ejercicio de programación
Entornos de desarrollo para este ejercicio
Visual Studio Code
GitHub