Como usar o CodePen: E se houvesse uma plataforma onde você pudesse editar código, testar uma biblioteca, framework ou componente e ver as mudanças acontecerem bem na frente dos seus olhos? E se você pudesse compartilhar seus experimentos com outros desenvolvedores ou copiar o trabalho deles para melhorar suas habilidades de codificação, encontrar inspiração e corrigir bugs em seu trabalho rapidamente?
CodePen é uma plataforma de desenvolvimento onde qualquer um pode editar front-linguagens finais como HTML, CSS e JavaScript de seu navegador sem precisar baixar nenhum software. A melhor parte é que você pode ver os resultados em tempo real, o que facilita a correção de bugs. Os desenvolvedores e designers também podem criar trechos de código, chamados de “canetas”, e compartilhá-los com o resto do mundo.
Como usar o CodePen
Abra o CodePen.io Digite qualquer coisa na caixa de pesquisa: Você pode digitar o que quiser ao adicionar à sua página da web. Pode ser um controle deslizante responsivo, um cartão de equipe, sobre a seção, animações etc. Neste artigo, adicionarei um belo controle deslizante. Então vá em frente e pesquise um belo controle deslizante na caixa de pesquisa. Extração de código: Agora, como você pode ver, o editor Codepen nos mostra o código incrível que fez este slider. Mas você acha que funcionaria apenas copiar o código deste editor e colá-lo no seu? NÃO é a resposta. A maioria das “canetas” que você vê usa bibliotecas fora do CodePen que o editor não mostra. O zip contém duas pastas dist e src junto com um leia-me e um arquivo de texto de licença. Você pode explorá-los/lê-los de acordo com seu interesse. Agora selecione a pasta “dist” e lá você verá index.html, style.css, e script.js arquivos. Abra tudo isso em um editor de texto (Sublime, Atom, Brackets, etc). Abra o arquivo index.html
O que o CodePen é usado
Compartilhando ou coletando ideias
Como o CodePen construiu uma grande comunidade, milhares de usuários estão criando e compartilhando ideias para a frente-end componentes, animações e até mesmo layouts de página da web quase finalizados. Este é o lugar perfeito para compartilhar suas próprias ideias que podem ser úteis para outros profissionais front-end. Tudo o que você precisa fazer é garantir que seu código não tenha nenhum problema de direitos autorais.
Guie o estilo de seu projeto
Se você não quiser usar o código de outras pessoas, você sempre pode usar o editor de código online do CodePen para dar às partes do seu projeto seu próprio estilo. Dessa forma, você pode garantir que o código destinado a estilizar outros componentes não altere o seu. É como uma tela em branco.
Descubra uma nova estrutura ou biblioteca
O editor baseado em navegador no CodePen é uma ótima maneira de testar e executar uma nova biblioteca ou estrutura. Você não precisa configurar um novo ambiente toda vez que quiser ver se suas alterações funcionam. A visualização do editor mostra as três áreas de edição e a visualização ao mesmo tempo. Sempre que algo muda, os resultados finais são atualizados.