Tutorial CodePen

Este tutorial de CodePen es una guía paso a paso diseñada para ayudar a los usuarios a familiarizarse con la plataforma y aprender a utilizar sus funciones principales.

Contenidos del artículo

Con CodePen, los usuarios pueden escribir y visualizar código en tiempo real, lo que facilita la creación y prueba de diferentes diseños y funcionalidades. Además, la plataforma proporciona un entorno de desarrollo amigable con características como autocompletado, previsualización en vivo, compartición de proyectos y colaboración en tiempo real.

Además, es una herramienta muy interesante para aprender, enseñar y colaborar con otros desarrolladores, ya que permite compartir fácilmente los proyectos a través de enlaces, incrustarlos en sitios web o colaborar con otros miembros de la comunidad de CodePen.

Ya seas un principiante que está aprendiendo a programar o un profesional experimentado en diseño y desarrollo web, CodePen ofrece un espacio creativo y colaborativo para dar vida a tus ideas y proyectos web.

Este tutorial forma parte de una serie de tutoriales de diseño y desarrollo web con los que aprenderás sobre herramientas y tecnologías fundamentales para crear sitios web modernos y atractivos. Desde CodePen para compartir y explorar código en tiempo real hasta un tutorial de Bootstrap para crear diseños responsivos.

1. Tutorial CodePen: Introducción

CodePen es una plataforma en la nube que permite a los desarrolladores y diseñadores crear y compartir código HTML, CSS y JavaScript de forma rápida y sencilla. La historia de CodePen se remonta a 2012, cuando fue fundada por tres desarrolladores web: Chris Coyier, Alex Vazquez y Tim Sabat. Su visión era crear una plataforma donde los desarrolladores pudieran compartir, colaborar y experimentar con código HTML, CSS y JavaScript en tiempo real.

CodePen rápidamente ganó popularidad entre la comunidad de desarrolladores front-end. Su interfaz sencilla y amigable, junto con la posibilidad de ver los resultados en tiempo real, lo convirtieron en una herramienta invaluable para probar y depurar código.

Con el tiempo, CodePen ha seguido evolucionando y agregando nuevas funcionalidades, como la capacidad de crear proyectos más complejos, compartir colecciones de código y participar en desafíos creativos. También ha crecido como una comunidad activa donde los desarrolladores pueden inspirarse y aprender de los demás.

Hoy en día, CodePen es ampliamente utilizado por diseñadores y desarrolladores web de todo el mundo como una herramienta esencial para crear prototipos, experimentar con código y compartir sus creaciones con la comunidad. Su impacto en la industria del desarrollo web es innegable, y continúa siendo una fuente de inspiración y aprendizaje para profesionales y entusiastas del diseño y la programación.

2. Cómo funciona CodePen

CodePen es una plataforma en línea que proporciona un entorno de desarrollo para escribir, probar y compartir código front-end (HTML, CSS y JavaScript). Su funcionamiento se basa en los siguientes aspectos:

Editor en vivo: CodePen ofrece un editor en vivo que permite a los usuarios escribir su código y ver los resultados en tiempo real. A medida que se escribe o modifica el código, los cambios se reflejan instantáneamente en la vista de previsualización.
Visualización de resultados: Los usuarios pueden ver el resultado de su código en una ventana de previsualización integrada. Esto facilita la visualización y la depuración del diseño y las interacciones.
Paneles separados: CodePen organiza el código en tres paneles separados: uno para HTML, otro para CSS y otro para JavaScript. Esto permite una edición y organización más clara y efectiva del código.
Compartir y colaborar: Los usuarios pueden compartir sus pens (fragmentos de código) públicamente para que otros puedan ver y utilizar el código. También pueden seguir a otros miembros, dar «me gusta» y comentar en pens compartidos, lo que fomenta la colaboración y la retroalimentación.
Integración con librerías y frameworks: CodePen ofrece la posibilidad de importar librerías y frameworks populares directamente en el código, lo que facilita la experimentación con nuevas tecnologías y herramientas.
Colecciones y proyectos: Los usuarios pueden organizar sus pens en colecciones y proyectos para mantener un orden en sus trabajos y mostrarlos de manera más cohesiva.
Preprocesadores y postprocesadores: CodePen admite el uso de preprocesadores y postprocesadores como Sass, Less, Babel, entre otros, lo que permite a los usuarios trabajar con código más avanzado y eficiente.

3. Proceso de registro en CodePen

El proceso de registro en CodePen es bastante sencillo. Sigue los siguientes pasos para crear una cuenta:

Visita el sitio web de CodePen en codepen.io.
Haz clic en el botón «Sign Up» o «Registrarse» que se encuentra en la esquina superior derecha de la página.
Se abrirá un formulario de registro. Puedes registrarte utilizando tu cuenta de Google, GitHub o proporcionando una dirección de correo electrónico y una contraseña.
Si eliges registrarte con una dirección de correo electrónico, ingresa tus datos en el formulario y haz clic en «Sign Up» o «Registrarse».
Si registrarte con una cuenta de Google o GitHub, serás redirigido a la página correspondiente para autorizar el acceso de CodePen a tu cuenta.
Una vez que hayas completado el proceso de registro, recibirás un correo electrónico de confirmación para verificar tu cuenta.
Haz clic en el enlace de confirmación en el correo electrónico y tu cuenta en CodePen estará lista para usar.

4. Interfaz de CodePen

La interfaz de CodePen está diseñada para proporcionar un entorno de desarrollo front-end intuitivo y eficiente. Nada más acceder a la plataforma se puede apreciar un menú lateral a la izquierda con las opciones más destacacadas: un menú con las opciones de creación de pens, colecciones y proyectos, y otro menú con las opciones de «Your work«, «Assets«, «Pinned items«, «Following» y «Trending«, entre otras.

Interfaz CodePen — **Figura 1**. Interfaz de CodePen

En la parte superior de la interfaz se encuentra el buscador que nos permite encontrar pens específicos, personas, proyectos o colecciones. También puedes revisar las sugerencias de CodePen (es una excelente opción para ver el código de otras personas y aprender algunos trucos).

La interfaz de creación de un pen tiene un diseño limpio y organizado, dividido en tres paneles principales: HTML, CSS y JavaScript, que permiten escribir y editar el código de cada lenguaje de manera independiente.

Crear un pen Codepen — **Figura 2**. Paneles principales: HTML, CSS y JavaScript, y previsualización del código.

A continuación, se explica la navegación y diseño de cada uno de estos paneles:

Panel HTML: En este panel, puedes escribir y editar el código HTML de tu proyecto. Es el lugar donde se define la estructura del contenido de tu página web, como encabezados, párrafos, enlaces, imágenes, etc.
Panel CSS: Aquí puedes escribir y modificar el código CSS para dar estilo y diseño a tu página web. Puedes definir colores, tamaños, márgenes, fuentes y otros estilos visuales para los elementos HTML.
Panel JavaScript: En este panel, puedes escribir y editar el código JavaScript para agregar interactividad y funcionalidad a tu página web. Puedes crear eventos, manipular elementos HTML, realizar operaciones matemáticas, entre otras cosas.
Área de previsualización: Justo debajo de los paneles de código, se encuentra el área de previsualización en vivo. Aquí puedes ver cómo se ve tu página web a medida que escribes o modificas el código en los paneles HTML, CSS y JavaScript. Esta previsualización te permite ver los cambios en tiempo real y facilita la depuración y ajuste del diseño.
Barra de herramientas: En la parte superior de la interfaz, encontrarás una barra de herramientas que proporciona acceso rápido a diversas funciones de CodePen. Desde aquí, puedes guardar tus pens, crear proyectos, cambiar la configuración del editor, compartir tu trabajo y acceder a otras características adicionales.

Veamos las funcionalidades más destacadas de CodePen de forma detallada.

5. Pen (fragmento de código)

Pen (Pluma, Fragmento de código): Un pen es un término utilizado para referirse a un proyecto individual dentro de CodePen. Es un espacio donde puedes crear y experimentar con código HTML, CSS y JavaScript en tiempo real. Un pen se puede ver como una especie de lienzo en el que puedes crear fragmentos de código HTML, CSS y JavaScript.

Cuando creas un pen en CodePen, el área de código HTML que escribas se coloca automáticamente dentro del elemento <body> del archivo HTML. Además, CodePen proporciona un área separada para escribir código CSS y código JavaScript que se vinculan automáticamente al documento HTML. De esta manera, puedes crear rápidamente prototipos o pequeñas páginas web sin necesidad de configurar un archivo HTML y CSS por separado.

Es importante tener en cuenta que CodePen está diseñado para facilitar el proceso de desarrollo y prototipado rápido. Para proyectos más grandes y complejos, es recomendable trabajar con archivos HTML y CSS independientes fuera de CodePen. Sin embargo, para experimentar con ideas rápidamente o compartir snippets de código con la comunidad, CodePen es una herramienta muy útil y práctica.

5.1. Crear un pen

En la página principal, haz clic en el botón «+ New Pen» en la esquina superior derecha.
Se abrirá un nuevo editor en el que puedes escribir y editar tu código HTML, CSS y JavaScript.
Una vez que hayas terminado de escribir tu código, dale un nombre a tu pen y, opcionalmente, añade una descripción.
Haz clic en el botón «Save» para guardar tu pen.

5.2. Funcionalidades básicas

Al crear un pen en CodePen, tienes acceso a una variedad de funcionalidades que te permiten desarrollar y compartir tus proyectos de manera efectiva. Algunas de las principales funcionalidades incluyen:

Compartir: Puedes compartir el pen con otros usuarios o incluso con el público en general a través de un enlace único.
Agregar CSS externo: Puedes incluir CSS externo en el pen utilizando la opción «Settings» y luego agregando la URL del archivo CSS en la sección «CSS».
Fork: La función «Fork» te permite crear una copia de otro pen para que puedas editar y modificar el proyecto original sin afectar el trabajo del autor original. Es una forma de colaborar y construir sobre proyectos existentes.
Collab Mode: Con esta funcionalidad, varios usuarios pueden editar y colaborar en el mismo pen en tiempo real, lo que facilita la colaboración en equipo.
Auto-Updating Preview: El editor de CodePen ofrece una vista previa en tiempo real de los cambios que haces en tu código, lo que te permite ver los resultados al instante.
Exportar y compartir: Puedes exportar tu pen como una página web independiente o incluso incrustarla en otro sitio web.
Etiquetas: Puedes agregar etiquetas a tu pen para categorizarlo y facilitar su búsqueda por otros usuarios.
Comentarios: Los usuarios pueden dejar comentarios en tus pens, lo que te permite recibir retroalimentación y comentarios sobre tu trabajo.
Configuración personalizada: Puedes personalizar diferentes aspectos de tu pen, como la vista previa, el tema, las fuentes y más, a través de la configuración.

5.3. Cómo compartir un pen con otros usuarios

Para compartir un pen con otros usuarios en CodePen, sigue estos pasos:

Abre el pen que deseas compartir en tu cuenta de CodePen.
En la parte superior derecha del pen, verás un botón llamado «Share». Haz clic en este botón.
Se abrirá un cuadro de diálogo con diferentes opciones para compartir el pen. Puedes copiar el enlace directo para compartirlo con otros o usar los botones de redes sociales para compartirlo en plataformas como Twitter, Facebook o LinkedIn.
Si deseas invitar a otros usuarios específicos a colaborar en el pen, puedes usar la opción «Collab» para agregar sus nombres de usuario y permitirles editar el pen en tiempo real.
Además, en la configuración de privacidad del pen, puedes ajustar quién puede ver y comentar en tu pen. Puedes elegir entre opciones como «Solo yo», «Colecciones públicas» o «Público en general».

Una vez que hayas seleccionado las opciones de compartición y privacidad deseadas, simplemente haz clic en «Save & Close» para guardar los cambios y compartir el pen con otros usuarios.

5.4. Incrustar el pen de CodePen en tu sitio web

También puedes obtener el código para incrustar el pen en tu propio sitio web si lo deseas. Esto se hace desde la opción «Embed» situada en el menú inferior.

embed pen — **Figura 4.** Incrustar el *pen* de CodePen en tu sitio web

Para incrustar un Pen de CodePen en tu sitio web, puedes seguir estos pasos:

Abre el Pen que deseas incrustar en CodePen.
Haz clic en el botón «Embed» en la esquina inferior derecha de la página.
Se abrirá una ventana emergente con opciones para personalizar el tamaño y la apariencia del Pen incrustado. El tipo de código: HTML, WordPress Shortcode, Iframe o Prefill embed. Una vez que hayas seleccionado las opciones deseadas, copia el código de inserción que se muestra en la parte inferior de la ventana.
Pega el código de inserción en el código HTML de tu sitio web donde deseas que aparezca el Pen.

Ahora, cuando visites tu sitio web, deberías ver el Pen incrustado en la página. A continuación se muestran distintos ejemplos:

HTML

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwNVbMp" data-user="Eniun" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Eniun/pen/RwNVbMp">
  Javascript eventos y efectos</a> by Eniun (<a href="https://codepen.io/Eniun">@Eniun</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

WordPress shortcode


See the Pen 
  Javascript eventos y efectos by Eniun (@Eniun)
  on CodePen.0

Prefill embed

<div class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwNVbMp" data-user="Eniun"  data-prefill='{"title":"Javascript eventos y efectos","tags":[],"scripts":[],"stylesheets":[]}'>
  <pre data-lang="html">&lt;div class="container">
  &lt;div class="caja caja1" id="caja1">click&lt;/div>
  &lt;div class="caja caja2">dblclick&lt;/div>
  &lt;div class="caja caja3">mouseenter&lt;/div>
  &lt;div class="caja caja4">mouseleave&lt;/div>
  &lt;div class="caja caja5">hover&lt;/div>
  &lt;div class="caja caja6">mousedown&lt;/div>
  &lt;div class="caja caja7">mouseup&lt;/div>
&lt;/div></pre>
  <pre data-lang="css">.container{
  position: relative;
}
.caja{
  width: 180px;
  height: 180px;
  color: #FFF;
  text-align: center;
  line-height: 180px;
  margin: 15px;
  float: left;
  font-size: 18px;
  font-family: Arial;
}
.caja1{
  background-color: #C0392B;
}
.caja2{
  background-color: #9B59B6;
}
.caja3{
  background-color: #2980B9;
}
.caja4{
  background-color: #3498DB;
}
.caja5{
  background-color: #17A589;
}
.caja6{
  background-color: #F1C40F;
}
.caja7{
  background-color: #E67E22;
}
.caja8{
  background-color: #95A5A6;
}
.caja9{
  background-color: #2C3E50;
}
.caja10{
  background-color: grey;
}
.caja11{
  background-color: black;
}</pre>
  <pre data-lang="js"> window.addEventListener("load", function load(){
  var caja1 = document.getElementsByClassName("caja1");
	 caja1[0].addEventListener("click", function(){
    alert(caja1[0].innerText);
  });
    var caja2 = document.getElementsByClassName("caja2");
	  caja2[0].addEventListener("dblclick", function(){
    caja2[0].style.display ="none";
  });
   var caja3 = document.getElementsByClassName("caja3");
	  caja3[0].addEventListener("mouseenter", function(){
    var fadeEffect = setInterval(function () {
        if (!caja3[0].style.opacity) {
            caja3[0].style.opacity = 1;
        }
        if (caja3[0].style.opacity > 0) {
            caja3[0].style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    }, 100);
  });
    var caja4 = document.getElementsByClassName("caja4");
	  caja4[0].addEventListener("mouseleave", function(){
    caja4[0].style.backgroundColor ="brown";
  });
   var caja5 = document.getElementsByClassName("caja5");
	  caja5[0].addEventListener("mouseover", function(){
    caja5[0].style.color ="yellow";
  });
   caja5[0].addEventListener("mouseout", function(){
    caja5[0].style.color ="orange";
  });
    var caja6 = document.getElementsByClassName("caja6");
	  caja6[0].addEventListener("mousedown", function(){
      caja6[0].innerText = "pulsado";
  });
   var caja7 = document.getElementsByClassName("caja7");
	  caja7[0].addEventListener("mouseup", function(){
      caja7[0].innerText = "soltado";
  });
});</pre></div>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Iframe:

<iframe height="300" style="width: 100%;" scrolling="no" title="Javascript eventos y efectos" src="https://codepen.io/Eniun/embed/RwNVbMp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Eniun/pen/RwNVbMp">
  Javascript eventos y efectos</a> by Eniun (<a href="https://codepen.io/Eniun">@Eniun</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Ejemplo con código HTML y resultado visual:

Ejemplo con resultado visual:

Ejemplo con código HTML y CSS:

6. Project (proyecto)

Project (Proyecto): Un proyecto es una agrupación de varios pens relacionados entre sí. Puedes utilizar un proyecto para organizar y mantener todos los pen que forman parte de un proyecto más grande o relacionado temáticamente. Es una forma útil de mantener tus trabajos ordenados y fáciles de acceder.

Crear un Proyecto:

En la página principal, haz clic en el botón «+ New Project» en la esquina superior derecha.
A continuación, añade los pens que deseas incluir en el proyecto. Puedes crear nuevos pens o utilizar los existentes en tu cuenta.
Asigna un nombre y, opcionalmente, una descripción al proyecto.
Haz clic en el botón «Save» para guardar tu proyecto. Ahora tendrás un conjunto de pens relacionados agrupados en un proyecto en CodePen.

7. Collection (colección)

Collection (Colección): Una colección es una recopilación de pens y/o proyectos creados por un usuario o varias personas. Puedes agrupar tus trabajos favoritos, proyectos relacionados o cualquier otro conjunto de pens en una colección para mostrarlos o compartirlos de manera conjunta. Las colecciones también pueden ser útiles para presentar tus proyectos en un portfolio o compartir tus conocimientos con otros usuarios.

Crear una Colección:

En la página principal, haz clic en tu avatar en la esquina superior derecha y selecciona «Collections» en el menú desplegable.
En la página de colecciones, haz clic en el botón «+ New Collection» en la esquina superior derecha.
Asigna un nombre y, opcionalmente, una descripción a tu colección.
Añade los pens y/o proyectos que desees incluir en la colección.
Haz clic en el botón «Save» para guardar tu colección. Ahora tendrás un grupo de pens y/o proyectos organizados y accesibles en una colección en tu perfil de CodePen.

Ten en cuenta que todos tus pens, proyectos y colecciones en CodePen son visibles para otros usuarios de la plataforma, por lo que puedes compartir y mostrar tu trabajo con facilidad.

8. Buscar pens, proyectos y colecciones

En CodePen, puedes buscar pens, proyectos y colecciones de otros usuarios utilizando la función de búsqueda que se encuentra en la parte superior del sitio web. Puedes hacerlo de la siguiente forma:

Abre el sitio web de CodePen en tu navegador.
En la barra de navegación, verás un campo de búsqueda con un icono de lupa. Haz clic en el campo de búsqueda para activarlo.
Escribe una palabra clave o término relacionado con el tipo de lo que estás buscando. Por ejemplo, escribe «CSS buttons» en el campo de búsqueda.
Presiona la tecla «Enter» o haz clic en el icono de la lupa para realizar la búsqueda.
Aparecerán los resultados de búsqueda relacionados con tu término.

Además de utilizar la función de búsqueda, CodePen también ofrece una variedad de categorías y etiquetas para ayudarte a encontrar pens relacionados con temas específicos, como diseño, animaciones, efectos, interacciones y más. Puedes explorar estas categorías y etiquetas en la página principal de CodePen para descubrir proyectos interesantes.

9. Your work (tu trabajo)

En CodePen, el apartado «Your Work» (Tu Trabajo) es una sección personalizada que muestra todos los pens y proyectos que has creado y guardado en tu cuenta. Aquí podrás ver una lista de todas tus creaciones, incluyendo pens individuales y proyectos que hayas creado en el pasado. También puedes organizar tus pens y proyectos en carpetas o colecciones para tener una mejor organización de tu trabajo.

10. Assets (recursos)

El apartado «Assets» (Recursos) de CodePen es un espacio donde puedes cargar y gestionar los recursos que necesitas para tus proyectos. Estos recursos pueden incluir archivos de imágenes, archivos CSS externos, archivos JavaScript, fuentes de texto y otros elementos necesarios para dar vida a tus creaciones. Al tener estos recursos disponibles en «Assets«, puedes acceder a ellos fácilmente y utilizarlos en cualquiera de tus pens o proyectos sin tener que cargarlos nuevamente cada vez.

11. Pinned items (elementos fijados)

«Pinned Items» (Elementos Fijados) es una característica de CodePen que te permite destacar y mostrar ciertos pens o proyectos en tu perfil. Puedes elegir fijar ciertos pens o proyectos que consideres importantes o representativos de tu trabajo para que aparezcan en la parte superior de tu perfil. De esta manera, los visitantes de tu perfil podrán ver rápidamente tus creaciones destacadas y obtener una mejor impresión de tus habilidades y estilo de diseño.

12. «Following», «Trending» y «Challenges»

En CodePen, los apartados «Following«, «Trending» y «Challenges» son secciones que te permiten explorar y descubrir contenido nuevo y emocionante creado por la comunidad de desarrolladores y diseñadores.

«Following» (Siguiendo):
En la sección «Following«, encontrarás el contenido creado por los usuarios a quienes sigues en CodePen. Cuando sigues a otros usuarios, sus pens y proyectos aparecerán en esta sección, lo que te permite estar al tanto de las últimas actualizaciones y creaciones de las personas que sigues. Es una excelente manera de mantenerse inspirado y conectado con la comunidad de CodePen.
«Trending» (Tendencias):
En la sección «Trending«, podrás ver los pens y proyectos que están siendo populares y están siendo ampliamente vistos y apreciados por la comunidad en ese momento. Estos proyectos se destacan por recibir una gran cantidad de vistas, likes o comentarios, lo que los convierte en lo más popular y relevante en ese momento en CodePen. Es una excelente manera de descubrir contenido nuevo y creativo que está en tendencia.
«Challenges» (Desafíos):
La sección «Challenges» contiene desafíos temáticos y creativos lanzados por la comunidad o por el equipo de CodePen. Estos desafíos invitan a los usuarios a crear proyectos relacionados con un tema o concepto específico. Participar en estos desafíos puede ser una oportunidad para poner a prueba tus habilidades, aprender cosas nuevas y ser parte de una comunidad creativa. Los proyectos que se presentan para los desafíos suelen ser destacados y pueden recibir reconocimiento por su creatividad y originalidad.

13. Agregar archivos CSS y JS a un pen en CodePen

Para agregar archivos CSS y JS a un pen en CodePen, sigue estos pasos:

En el editor de CodePen, haz clic en el botón «Settings» (Configuración) en la parte superior derecha de la pantalla.
En la sección «Add External Resources» (Agregar Recursos Externos), puedes agregar enlaces a tus archivos CSS y JS. Puedes enlazar archivos alojados en la web o utilizar enlaces CDN (Content Delivery Network) para librerías populares.
Para agregar un archivo CSS, copia y pega el enlace del archivo CSS en el campo «CSS» de la sección «Add External Resources«.
Para agregar un archivo JS, copia y pega el enlace del archivo JS en el campo «JavaScript» de la sección «Add External Resources«.
Una vez que hayas agregado los enlaces, haz clic en el botón «Save & Close» (Guardar y Cerrar) para aplicar los cambios.

Ahora, tu pen utilizará los archivos CSS y JS que has enlazado, lo que te permitirá tener un mayor control sobre el estilo y la funcionalidad de tu proyecto.

14. Usar Bootstrap en CodePen

Para usar Bootstrap en CodePen, puedes agregar los enlaces a los archivos CSS y JS de Bootstrap en la configuración de tu pen. A continuación te explico cómo hacerlo:

Haz clic en el botón «Settings» en la esquina superior derecha de la página de tu pen.
Selecciona la pestaña «CSS» y luego haz clic en el botón «+» en la sección «Add External Stylesheets/Pens«. En el campo de texto que aparece, pega el enlace al archivo CSS de Bootstrap (por ejemplo, https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css).
Selecciona la pestaña «JS» y luego haz clic en el botón «+» en la sección «Add External Scripts/Pens«. En el campo de texto que aparece, pega el enlace al archivo JS de Bootstrap (por ejemplo, https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js).
Haz clic en el botón «Save & Close» para guardar los cambios y cerrar la ventana de configuración.

¡Felicidades! Has completado el tutorial de CodePen. Ahora tienes las habilidades necesarias para empezar a aprovechar esta herramienta de desarrollo web.

Si tienes alguna pregunta o necesitas ayuda adicional, no dudes en consultar la documentación y recursos disponibles en el sitio web de CodePen. Además, si te interesa seguir aprendiendo sobre diseño y desarrollo web no te pierdas nuestra sección de tutoriales.