Hace un par de años me encontré con una herramienta online muy buena para los amantes de código y diseñadores web: CodePen. CodePen es una plataforma front-end para practicar y compartir proyectos pequeños web basados en HTML, CSS o JavaScript llamados “pens”. Los pens que más te interesen se pueden modificar, compartir y guardar.

Además puedes crear tu propia cuenta y unirte a una gran comunidad de miles de desarrolladores web alrededor del mundo que comparten sus propias publicaciones.

CodePen

Tanto si eres un principiante o un completo profesional, estoy segura de que CodePen será una de tus herramientas favoritas a lo largo del tiempo. Aquí son algunas de las razones por las que me encanta trabajar con esta plataforma…

Ofrece una experiencia de usuario muy agradable

CodePen

Me encantan los tipos de opciones para personalizar tu espacio de trabajo como ocultar pestañas y cambiar a diferentes modos de visualización.

Por ejemplo, como yo normalmente trabajo sólo con HTML y CSS (ya que se me dan mejor), oculto la pestaña de JavaScript minimizándola. Como podéis ver en la captura de pantalla superior, se puede apreciar mi situación. Si os fijáis, la pestaña de JavaScript sólo muestra el título y no el editor.

Visualización del resultado en vivo

CodePen

Un par de años atrás, me hubiera gustado poder visualizar los cambios de mis proyectos web en vivo. Ahora es posible incluso en muchas otras aplicaciones y webs como Brackets y W3Schools. Por cierto, si te leíste mi artículo sobre cómo crear un botón con HTML y CSS, te animo a poner en práctica tus conocimientos en CodePen.

Posibilidad de mejorar y compartir otros “pens”

CodePen

Si te ha gustado un pen de otro usuario pero te gustaría darle tu toque personalizado, adelante. Puedes compartir cualquier pen y guardarlo en tu perfil con tus propias modificaciones con la opción “fork”. Para cambiar un pen primero tienes que registrarte o iniciar sesión con tu cuenta.

Si te fijas en la parte superior izquierda donde pone “a pen by” aparece mi nombre en vez del autor y en mi perfil se pueden apreciar todos los pens de otros usuarios que he guardado en Pens > Forked.

Descubrir y aprender cosas nuevas

CodePen

En el apartado de “Explore pens” encontraras cientos de increíbles pens creados por parte de la comunidad clasificados en 3 categorías: popular, selección y recientes. Cada día se van actualizando  así que tienes la posibilidad de que otros usuarios se fijen en tus pens.

Compartir “pen” como widget en tu web

CodePen

Si tienes un blog de diseño web y escribes tutoriales, te vendrá bien la opción de insertar un pen a través de un widget de código HTML. Puedes personalizar el widget con varias opciones (los usuarios Pro acceden a más características premium). El proceso es rápido y fácil de hacer, aquí un ejemplo de un pen:

See the Pen WwXbQV by Samantha Black (@samanthablackes) on CodePen.

En fin, CodePen es una herramienta tremenda y puedes crear maravillas; es una plataforma con muchas posibilidades a la hora de manejar código front-end para tus creaciones web. Si eres novato o no se te da muy bien HTML, CSS o JavaScript, siempre puedes echar un ojo al trabajo de otros y aprender de ellos o mejor, inspirarte / motivarte a crear tus propios.

Si por el otro lado eres todo un profesional en este campo, es posible que incluso te escriban para futuras colaboraciones. Desde el primer día que creé mi cuenta en CodePen he visto pens muy muy chulos que van más allá de código básico.

¿Te animas a probarlo? ¡Crea tu cuenta hoy mismo aquí!

Summary
CodePen: un parque de juegos para los diseñadores web
Article Name
CodePen: un parque de juegos para los diseñadores web
Description
Si llevas poco tiempo en el mundo web, esta herramienta te servirá para mejorar tus habilidades y como fuente de inspiración.
Author
Desfaziendo Entuertos