Listado y formulario de productos en Tailwind CSS

Proyecto
Avanzado
TailwindCSS
TailwindCSS
30 min
500 XP
Actualizado: 13/09/2024

¡Practica y certifícate!

Retroalimentación
Soluciones
Certificado
Comenzar

Descripción

Desarrolla un proyecto con Tailwind CSS que incluya un grid para visualizar productos y un formulario para añadir nuevos 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:

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

  • 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.html en un navegador web para asegurarte de que todo funciona correctamente.
  • Realiza ajustes si es necesario para cumplir con los requisitos del proyecto.

Solución al ejercicio

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js
JavaScript
1 function solveChallenge ( input ) {
2 // Algoritmo optimizado O(n log n)
3 const data = parseInput ( input );
4 const sorted = data . sort (( a , b ) => a - b );
5
6 // Aplicar técnica de dos punteros
7 let left = 0 , right = sorted . length - 1 ;
8 const result = [];
9
10 while ( left < right ) {
11 const sum = sorted [ left ] + sorted [ right ];
12 if ( sum === target ) {
13 result . push ([ sorted [ left ], sorted [ right ]]);
14 left ++; right --;
15 } else if ( sum < target ) {
16 left ++;
17 } else {
18 right --;
19 }
20 }
21
22 return result ;
23 }
Código completo
Explicaciones
Mejores prácticas
+1.200 developers han resuelto este ejercicio de programación

Practica con exámenes de TailwindCSS

Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Retroalimentación

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Únete a miles de desarrolladores mejorando sus habilidades

⭐⭐⭐⭐⭐
4.9/5 valoración