HTML Code Play: Learn HTML

Aprenda desenvolvimento web alterando o código e vendo o que ele faz. O HTML Code Play combina lições de HTML, CSS e JavaScript com um editor de código móvel, exemplos executáveis, quizzes e jogos de programação. Use-o para estudar um conceito, experimente você mesmo e acompanhe seu aprendizado no mesmo dispositivo.
LEIA, EDITE E EXECUTE
Explore o catálogo de aprendizado, abra um tutorial e leia sua explicação junto com um exemplo de código completo. Envie o exemplo para o editor, execute o original e, em seguida, altere uma tag, estilo ou expressão e compare a saída. Esse fluxo de trabalho prático conecta a sintaxe que você lê com a página ou o comportamento que ela cria.
O espaço de trabalho oferece suporte à edição de HTML, CSS e JavaScript com realce de sintaxe. Use desfazer e refazer enquanto experimenta, encontre texto, pule para uma linha e ajuste o tamanho da fonte do editor. Comece uma nova página ou escolha um modelo disponível quando quiser um ponto de partida. Abra arquivos HTML, salve seu trabalho, use "Salvar como" para obter outra cópia ou compartilhe um arquivo de código por meio das opções de compartilhamento do seu dispositivo.
APRENDIZAGEM E PRÁTICA GUIADAS
O catálogo abrange 11 tópicos de tecnologia web, desde estrutura e estilo de páginas até scripts, gráficos vetoriais, layouts responsivos e exemplos interativos. Pesquise lições por título ou seção para encontrar o material que você precisa. Salve tutoriais úteis para revisão focada, adicione suas próprias anotações e navegue entre os tutoriais com os controles Anterior e Próximo.
Cada tutorial reúne explicação, sintaxe e um exemplo prático. Continue com um teste sobre o tópico ou um desafio prático. Os exercícios práticos pedem que você complete o código que falta, com dicas e feedback para ajudar você a inspecionar os detalhes que perdeu. Os resultados do teste permitem que você verifique sua compreensão antes de retornar à lição.
SEIS MANEIRAS DE PRATICAR
Escolha um jogo de programação para trabalhar em uma habilidade diferente:
- Construtor de Código: reorganize os blocos para reconstruir um código funcional.
- Detetive de Saída: preveja o que um trecho de código produz.
- Caça aos Bugs: identifique uma linha com defeito.
- Preencha a Lacuna: escolha o token de código que falta.
- Laboratório de Combinação: conecte os termos aos seus significados.
- Respostas Rápidas: responda a perguntas de verdadeiro ou falso contra o tempo.
Os níveis de atividade registram os resultados e desbloqueiam a próxima etapa. Repita os níveis disponíveis para melhorar sua pontuação ou use listas de reprodução de prática mista à medida que forem disponibilizadas.
MANTENHA SEU APRENDIZADO ORGANIZADO
A tela de progresso resume as lições, questionários e práticas revisadas por tecnologia. Confira seu mapa de habilidades e o próximo plano de estudos sugerido, continue uma lição da página inicial e participe de um desafio diário. Sequências e distintivos de desafio tornam sua atividade visível. Lembretes de aprendizado opcionais exigem permissão de notificação e podem ser desativados.
Seu progresso nas lições, anotações e resultados de jogos são armazenados no dispositivo. Os controles da tela de aprendizado incluem fontes maiores, alto contraste e movimento reduzido. Avaliações separadas de HTML, CSS e JavaScript oferecem certificados de conquista no aplicativo; esses são registros de aprendizado do aplicativo, não uma qualificação credenciada.
As postagens da comunidade online oferecem outra fonte de código para explorar quando conectado. Conteúdo e exemplos com suporte da rede que carregam recursos externos precisam de acesso à internet; o armazenamento de progresso local não fornece sincronização com a nuvem.
Para iniciantes, estudantes e aprendizes que estão revisando conceitos de front-end, comece com um exemplo, faça uma pequena alteração e construa o entendimento por meio da prática.