Una de las muchas cosas frustrantes sobre el desarrollo web es no tener una manera fácil de compartir sus proyectos con otros. En muchos casos, tendrá que alojar su proyecto en un servidor web o enviar todos los archivos correspondientes a alguien que quiera ver lo que ha creado. Pero gracias a una herramienta en línea ordenada llamada CodePen, ya no tiene que preocuparse por nada de eso.
CodePen.io
CodePen es una herramienta gratuita que le permitirá alojar sus proyectos en línea sin tener que pagar un centavo. Para comenzar, dirígete a CodePen.io y crea una cuenta gratuita.
Una vez que haya hecho eso, puede crear un "Lápiz" haciendo clic en el botón "Nuevo Lápiz" en la esquina superior derecha de la pantalla.
Después de eso, podrá agregar cualquier HTML, CSS y JavaScript a sus cuadros correspondientes. Una vez que comience a agregar algún código, podrá ver una vista previa en vivo de lo que está creando. Puede titular su primer Bolígrafo en la esquina superior izquierda. Después de hacer clic en su primer "Guardar", simplemente podrá compartir la URL de la página con amigos, familiares y compañeros de trabajo para que puedan ver en qué está trabajando.
Así es como se verá su Pen con algún código (cortesía de un proyecto de Free Code Camp llamado Tribute Page):
Al crear su propio Pen, querrá pasar por la Configuración antes de comenzar. Cuando hace clic en el botón "Nuevo bolígrafo", debería ver una plantilla de bolígrafo lista para que pueda comenzar a ingresar algún código. En la esquina superior derecha habrá un botón de "Configuración". Haga clic en eso (debería ver la pantalla a continuación).
Aquí podrá pasar por las pestañas HTML, CSS y JavaScript para agregar cierta información. En la pestaña HTML, podrá agregar metainformación, cosas que deberían ir en el
pestaña, y así sucesivamente. En CSS, podrá agregar preprocesadores CSS como LESS y Sass. No solo eso, sino que puede agregar CSS externo como Bootstrap y Foundation. En la pestaña JavaScript, puede agregar un preprocesador JavaScript como Babel o CoffeeScript. Además, puede agregar marcos de JavaScript externos como Angular, React, Lodash, D3, etc.
Finalmente, CodePen le permitirá cambiar la "Vista" que está viendo. La vista predeterminada es Vista del editor, que le permite ingresar su código y obtener una pequeña vista previa en la consola a continuación. Pero también hay otras opciones, una particularmente útil es la vista de "Página completa", donde podrá ver un proyecto como si estuviera en vivo en un sitio web. Hay un puñado de otras Vistas disponibles para cambiar, ¡vale la pena jugar con ellas!
CodePen realmente es una herramienta ordenada, y solo hemos tocado la superficie de su utilidad. Vale la pena dirigirse a CodePen.io y usarlo para trabajar en algunos proyectos, y luego, si lo desea, compartirlo con sus amigos o compañeros de trabajo.
¿Qué opinas de CodePen? ¿Has usado una herramienta similar? ¡Háganos saber en la sección de comentarios!
