Para iniciantes que desejam aprender e para profissionais experientes, existem alguns sites que permitem experimentar linhas de código e ver o resultado na visualização e quase em tempo real. Estas são aplicações reais com a tela dividida em duas, onde por um lado você escreve o código que pode ser HTML, CSS, PHP, Javascript ou outro, enquanto, por outro lado, depois de pressionar uma tecla para executar, você realmente vê como é esse código dentro de um site.
Estes não são editores de código simples, mas locais onde você pode testar sua programação sem se preocupar em cometer erros e descobrir rapidamente onde estão os erros. Codepen e JSFiddle são os dois sites mais populares dessa categoria, mas também existem muitas alternativas.
Leia também: Principais linguagens de programação usadas para aplicativos e sites
1) CodePen
O CodePen é o site mais popular e usado pelos programadores, pois é gratuito, intuitivo e fácil de usar. Tendo se tornado um padrão no mundo dos programadores, basta pesquisar no Google para encontrar páginas já compiladas pelo Codepen e ver imediatamente se é isso que você estava procurando. As janelas de visualização flexíveis e a execução imediata do código escrito o tornam perfeito o suficiente para experimentar animações javascript e CSS; além disso, ele pode se conectar facilmente a scripts externos (React, Vue e qualquer outra coisa disponível via CDN).
O CodePen merece o primeiro lugar nesta categoria, no entanto, alguns recursos são pagos, como codificação colaborativa e visualizações ao vivo em página inteira (as visualizações ao vivo parciais são gratuitas).
2) JSFiddle
Em segundo lugar (embora cronologicamente seja um dos mais antigos) no mundo dos sites para escrever e tentar código de programação, é o JSFiddle, orientado acima de tudo para a criação e teste de JavaScript. Também pode ser usado para HTML e CSS e, já que suporta dicas de conclusão de código, também pode ser preferível ao CodePen para os menos experientes.
Um grande ponto a favor do JSFiddle é que ele oferece o modo de colaboração gratuito (incluindo bate-papo por voz e texto), para que você possa trabalhar no código simultaneamente com outras pessoas.
3) Falha
Muitos sites de códigos permitem codificar HTML / CSS / JS e gerar páginas estáticas da Web, enquanto o Glitch oferece um pequeno espaço de armazenamento gratuito para salvar projetos e facilita bastante a execução do código do servidor Node.js. Você pode programar em colaboração no Glitch,
Ele também vem com vários outros recursos fantásticos: codificação colaborativa, controle de versão, muitos recursos de aprendizado, boa integração com o GitHub, fácil incorporação, uma comunidade para solicitar conselhos, projetos já feitos que você pode modificar ou usar livremente e o Integração do Visual Studio. É uma maneira excelente, rápida e fácil de iniciar um aplicativo Web (ou aprender como fazê-lo).
4) CodeSandbox
O CodeSandbox é semelhante ao Glitch, mas um pouco mais complexo e completo. O CodeSandbox possui uma interface mais flexível e personalizável, permite distribuir aplicativos da Web completos, possui espaço para salvar arquivos e realiza a maior parte do trabalho básico, deixando ao programador apenas a tarefa de escrever.
5) Repl.it
Repl.it é um ambiente de desenvolvimento para testar diferentes tipos de linguagens de programação, como Python, com o suporte de código front-end e back-end, permite distribuir sites e aplicativos, tem integração com o GitHub e uma interface intuitiva. Pode ser um pouco difícil para quem está apenas tentando criar páginas da Web, mas para programadores já experientes é um recurso a considerar. se você está planejando apenas o front-end ou se é novo no código, mas se planeja tudo regularmente, vale a pena explorar.
6) O Liveweave é um editor da Web muito semelhante ao JSFiddle, com o qual escrever e testar código para uso em sites, com funcionalidade de visualização ao vivo, dicas de código para HTML5, CSS3, JavaScript e jQuery e que permite baixar o projeto como um arquivo zip. Você também pode adicionar bibliotecas externas como jQuery, AndgularJS, Bootstrap com bastante facilidade.
7) O CodeSandbox é um espaço on-line gratuito, onde você pode iniciar projetos de aplicativos da web usando estruturas diferentes, como React, Vue, Angular e muito mais.
8) O StackBlitz é um excelente editor de aplicativos javascript, que suporta várias estruturas, como Vue e React.
9) Flems, site minimalista, perfeito para fazer testes rápidos.
10) JSBin, uma versão mais minimalista do JSFiddle, para escrever o código da página da web e ver como ela se parece.
11) CSSDeck é um site simples para testar algumas idéias básicas de HTML / CSS e JS.
12) ICECoder, outro ambiente online para teste de código, que requer o download de um programa que é executado no navegador e também pode ser usado offline.
13) Plunker, uma ferramenta de front-end que permite escrever código, arquivos e páginas da Web e salvá-los no Github.
14) Scrimba é uma combinação inovadora de editor de vídeo e código, que é um ambiente de aprendizado perfeito para estudantes e aqueles que querem aprender.
15) WebMaker, criador de aplicativos da web com funcionalidade offline e integração com o CodePen.
16) Dabblet, para tentar escrever código HTML / CSS / JS com bons gráficos e corretor automático para código CSS.
17) O PlayCode também é um ambiente para teste em tempo real do código HTML / CSS / JS básico.
19) O JSItor é outra alternativa ao Codepen e JSFiddle, onde você pode escrever código combinando HTML, CSS e Javascript e ver imediatamente o resultado.
Leia também: Sites para aprender programação, jogando com cursos e desafios interativos
Estes não são editores de código simples, mas locais onde você pode testar sua programação sem se preocupar em cometer erros e descobrir rapidamente onde estão os erros. Codepen e JSFiddle são os dois sites mais populares dessa categoria, mas também existem muitas alternativas.
Leia também: Principais linguagens de programação usadas para aplicativos e sites
Sites para testar código online
1) CodePen
O CodePen é o site mais popular e usado pelos programadores, pois é gratuito, intuitivo e fácil de usar. Tendo se tornado um padrão no mundo dos programadores, basta pesquisar no Google para encontrar páginas já compiladas pelo Codepen e ver imediatamente se é isso que você estava procurando. As janelas de visualização flexíveis e a execução imediata do código escrito o tornam perfeito o suficiente para experimentar animações javascript e CSS; além disso, ele pode se conectar facilmente a scripts externos (React, Vue e qualquer outra coisa disponível via CDN).
O CodePen merece o primeiro lugar nesta categoria, no entanto, alguns recursos são pagos, como codificação colaborativa e visualizações ao vivo em página inteira (as visualizações ao vivo parciais são gratuitas).
2) JSFiddle
Em segundo lugar (embora cronologicamente seja um dos mais antigos) no mundo dos sites para escrever e tentar código de programação, é o JSFiddle, orientado acima de tudo para a criação e teste de JavaScript. Também pode ser usado para HTML e CSS e, já que suporta dicas de conclusão de código, também pode ser preferível ao CodePen para os menos experientes.
Um grande ponto a favor do JSFiddle é que ele oferece o modo de colaboração gratuito (incluindo bate-papo por voz e texto), para que você possa trabalhar no código simultaneamente com outras pessoas.
3) Falha
Muitos sites de códigos permitem codificar HTML / CSS / JS e gerar páginas estáticas da Web, enquanto o Glitch oferece um pequeno espaço de armazenamento gratuito para salvar projetos e facilita bastante a execução do código do servidor Node.js. Você pode programar em colaboração no Glitch,
Ele também vem com vários outros recursos fantásticos: codificação colaborativa, controle de versão, muitos recursos de aprendizado, boa integração com o GitHub, fácil incorporação, uma comunidade para solicitar conselhos, projetos já feitos que você pode modificar ou usar livremente e o Integração do Visual Studio. É uma maneira excelente, rápida e fácil de iniciar um aplicativo Web (ou aprender como fazê-lo).
4) CodeSandbox
O CodeSandbox é semelhante ao Glitch, mas um pouco mais complexo e completo. O CodeSandbox possui uma interface mais flexível e personalizável, permite distribuir aplicativos da Web completos, possui espaço para salvar arquivos e realiza a maior parte do trabalho básico, deixando ao programador apenas a tarefa de escrever.
5) Repl.it
Repl.it é um ambiente de desenvolvimento para testar diferentes tipos de linguagens de programação, como Python, com o suporte de código front-end e back-end, permite distribuir sites e aplicativos, tem integração com o GitHub e uma interface intuitiva. Pode ser um pouco difícil para quem está apenas tentando criar páginas da Web, mas para programadores já experientes é um recurso a considerar. se você está planejando apenas o front-end ou se é novo no código, mas se planeja tudo regularmente, vale a pena explorar.
6) O Liveweave é um editor da Web muito semelhante ao JSFiddle, com o qual escrever e testar código para uso em sites, com funcionalidade de visualização ao vivo, dicas de código para HTML5, CSS3, JavaScript e jQuery e que permite baixar o projeto como um arquivo zip. Você também pode adicionar bibliotecas externas como jQuery, AndgularJS, Bootstrap com bastante facilidade.
7) O CodeSandbox é um espaço on-line gratuito, onde você pode iniciar projetos de aplicativos da web usando estruturas diferentes, como React, Vue, Angular e muito mais.
8) O StackBlitz é um excelente editor de aplicativos javascript, que suporta várias estruturas, como Vue e React.
9) Flems, site minimalista, perfeito para fazer testes rápidos.
10) JSBin, uma versão mais minimalista do JSFiddle, para escrever o código da página da web e ver como ela se parece.
11) CSSDeck é um site simples para testar algumas idéias básicas de HTML / CSS e JS.
12) ICECoder, outro ambiente online para teste de código, que requer o download de um programa que é executado no navegador e também pode ser usado offline.
13) Plunker, uma ferramenta de front-end que permite escrever código, arquivos e páginas da Web e salvá-los no Github.
14) Scrimba é uma combinação inovadora de editor de vídeo e código, que é um ambiente de aprendizado perfeito para estudantes e aqueles que querem aprender.
15) WebMaker, criador de aplicativos da web com funcionalidade offline e integração com o CodePen.
16) Dabblet, para tentar escrever código HTML / CSS / JS com bons gráficos e corretor automático para código CSS.
17) O PlayCode também é um ambiente para teste em tempo real do código HTML / CSS / JS básico.
19) O JSItor é outra alternativa ao Codepen e JSFiddle, onde você pode escrever código combinando HTML, CSS e Javascript e ver imediatamente o resultado.
Leia também: Sites para aprender programação, jogando com cursos e desafios interativos
