Cómo usar CodePen: ¿Qué pasaría si hubiera una plataforma en la que pudieras editar código, probar una biblioteca, un marco o un componente y ver cómo se producen los cambios frente a tus ojos? ¿Y si pudiera compartir sus experimentos con otros desarrolladores o copiar su trabajo para mejorar sus habilidades de codificación, encontrar inspiración y corregir errores en su trabajo rápidamente?
CodePen es una plataforma de desarrollo en la que cualquiera puede editar de forma frontal. finalice lenguajes como HTML, CSS y JavaScript desde su navegador sin tener que descargar ningún software. La mejor parte es que puede ver los resultados en tiempo real, lo que facilita la corrección de errores. Los desarrolladores y diseñadores también pueden crear fragmentos de código, que se denominan”bolígrafos”, y compartirlos con el resto del mundo.
Cómo usar CodePen
Abra CodePen.io Escriba cualquier cosa en el cuadro de búsqueda: puede escribir lo que desee al agregar a su página web. Puede ser un control deslizante receptivo, una tarjeta de equipo, una sección, animaciones, etc. En este artículo, agregaré un hermoso control deslizante. Así que continúe y busque un hermoso control deslizante en el cuadro de búsqueda. Extracción de código: Ahora, como puede ver, el editor Codepen nos muestra el increíble código que hizo este control deslizante. Pero, ¿crees que funcionaría simplemente copiar el código de este editor y pegarlo en el tuyo? NO es la respuesta. La mayoría de los”bolígrafos”que ve usan bibliotecas fuera de CodePen que el editor no muestra. El zip contiene dos carpetas dist y src junto con un archivo de texto Léame y licencia. Puede explorarlos/leerlos según su interés. Ahora seleccione la carpeta”dist“y allí verá index.html, style.css, y script.js archivos. Abra todos estos en un editor de texto (Sublime, Atom, Brackets, etc.). Abra el archivo index.html
¿Qué se usa CodePen?
Compartir o recopilar ideas
Debido a que CodePen ha creado una gran comunidad, miles de usuarios están creando y compartiendo ideas para el frente.-componentes finales, animaciones e incluso diseños de páginas web casi terminados. Este es el lugar perfecto para compartir sus propias ideas que podrían ser útiles para otros profesionales de front-end. Todo lo que tienes que hacer es asegurarte de que tu código no tenga problemas de derechos de autor.
Guía de estilo de tu proyecto
Si no quieres usar el código de otras personas, siempre puede usar el editor de código en línea de CodePen para darle a las partes de su proyecto su propio estilo. De esta manera, puede asegurarse de que el código destinado a diseñar otros componentes no cambie el suyo. Es como un lienzo en blanco.
Obtenga información sobre un nuevo marco o biblioteca
El editor basado en navegador en CodePen es una excelente manera de probar y ejecutar una nueva biblioteca o marco. No tiene que configurar un entorno nuevo cada vez que quiera ver si los cambios funcionan. La vista del editor muestra las tres áreas de edición y la vista previa al mismo tiempo. Cada vez que algo cambia, los resultados finales se actualizan.