ChatGPT: Generando un componente HTML y estilos CSS

Hoy pongo a prueba el tan de moda ChatGPT, para ver cómo funciona generando un componente HTML para una página web, con sus estilos CSS. ¿Te sorprenderá? Vamos a verlo.

Me apetecía probar un rato ChatGPT y generar algo de HTML para ver qué tal funciona. La idea es generar alguna parte de una página web para ver si puede servirnos de ayuda.

En este caso, quiero generar un banner de cookies, así que vamos a probar con un prompt simple:

Genera un componente HTML con estilos CSS, que esté fijo en la parte inferior de la pantalla, y contenga un texto informando sobre la política de privacidad y dos botones de acción para aceptar y rechazar.

En este caso el resultado (que puedes ver a continuación) me ha sorprendido, ya que ha generado un componente HTML sencillo con unos buenos estilos y que cumple su función. Además si lo pruebas en un navegador es totalmente funcional.

Creo que ChatGPT puede ser útil para facilitarnos la generación de código de relleno, aunque como comentaba en otro post, tanto la creatividad como el diseño siempre deberá estar guiado por un buen ingeniero, que además sepa definir con claridad los requisitos y traducirlos a un buen prompt.

¿Qué tal afrontará ejercicios más complejos? Lo iremos viendo 😉

HTML y CSS generado por ChatGPT

<div class="cookie-banner">
  <p>Usamos cookies para mejorar tu experiencia en nuestro sitio. Al continuar navegando, aceptas nuestra política de privacidad.</p>
  <div class="cookie-buttons">
    <button id="accept-cookies">Aceptar</button>
    <button id="reject-cookies">Rechazar</button>
  </div>
</div>

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  z-index: 999;
}

.cookie-buttons {
  margin-top: 10px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

#reject-cookies {
  background-color: #f44336;
}