Aprender HTML: Curso Code
Aprender HTML: Curso Code — Um curso de HTML com editor de visualização ao vivo no seu bolso
Aprender HTML: Curso Code é um curso de HTML para iPhone e Android que deixa um editor de HTML com visualização ao vivo a um toque de distância em todas as lições. Digite uma tag, veja a página ser renderizada e avance do primeiro título a formulários, tabelas, HTML5 semântico, acessibilidade e componentes web ao longo de 40 cursos curtos.
- Preço
- Grátis, upgrade para Pro
- Plataformas
- iOS e Android
- Idiomas
- 22
- Classificação etária
- 4+
- Requisitos
- iOS 15.1 ou posterior
- App Store
- 3.0 ★ (1)
Uma tag ganha outro significado depois que você a vê desenhar alguma coisa.
HTML é uma linguagem de marcação, então a maneira mais rápida de entender um novo elemento é digitá-lo e observar o resultado. Cada lição deste app termina com o editor já aberto, com a visualização ao lado da sua marcação, e você só adiciona arquivos CSS ou JavaScript quando estiver pronto para usá-los.
O que é
Aprender HTML: Curso Code é um curso de HTML para iOS e Android, gratuito para começar, que ensina marcação de páginas web por meio de 40 cursos e 159 lições curtas, organizadas do nível iniciante (A1) ao avançado (C1). Cada tema vem acompanhado de um editor de código HTML integrado e visualização instantânea, 20 projetos guiados, como um formulário de contato e uma tabela de preços acessível, 20 missões de depuração e um mentor de IA, para que uma pessoa completamente iniciante possa sair de um documento vazio e criar páginas semânticas, acessíveis e bem estruturadas.
Dentro do app
Como ele é
O curso
O que o curso de HTML aborda
40 cursos e 159 lições da própria lista de cursos do app, na ordem em que a trilha os ensina.
Estrutura do documento, texto, links, imagens e listas
O esqueleto de toda página: a estrutura do documento, títulos e parágrafos, links e navegação, imagens e figuras, além de listas ordenadas e não ordenadas.
Tabelas, atributos e atributos globais
Organização de dados em tabelas e, depois, os atributos que ajustam um elemento, incluindo os globais, que funcionam em todas as tags.
Formulários: controles básicos, avançados e validação
Primeiro, os campos básicos; depois, os controles mais avançados; por fim, os atributos de validação que permitem ao navegador verificar um campo antes do envio.
HTML5 semântico, head e metadados, áudio e vídeo
Elementos semânticos, o head do documento e seus metadados, além dos elementos de áudio e vídeo.
Acessibilidade, funções ARIA e padrões avançados de ARIA
Noções básicas de acessibilidade, funções e atributos ARIA e os padrões avançados usados em widgets personalizados.
Atributos de dados, templates, Canvas, SVG e iframes
Atributos de dados personalizados, templates HTML, o elemento canvas, SVG dentro do HTML e conteúdo incorporado em iframes.
Web Storage, arrastar e soltar, SEO e templates de e-mail
Web Storage e a API de arrastar e soltar, SEO e meta tags para redes sociais, além das regras específicas dos templates de e-mail em HTML.
Web Components, desempenho e HTML em grande escala
Elementos personalizados, shadow DOM, import maps e progressive enhancement, além de desempenho, segurança, PWAs e testes, terminando com HTML em grande escala.
Como funciona
Como você aprende uma tag, da leitura à renderização
A lição é curta e o editor fica ao lado dela, então ler um conceito e experimentá-lo acontecem na mesma sessão.
Leia uma lição curta
Retome o caminho de aprendizagem de onde parou. Cada lição aborda uma única ideia, como uma lista não ordenada ou uma imagem com texto alternativo, e leva alguns minutos.
Digite no editor e observe a visualização
Abra o editor e escreva a marcação. A visualização redesenha sua página, e as abas de CSS e JavaScript estão disponíveis quando você quiser estilizar a página ou fazê-la responder.
Confira, corrija e crie com isso
Um quiz e um desafio de programação encerram cada tema. Quando uma tag ou um erro não está claro, o mentor de IA explica, uma missão de depuração entrega uma página com problemas para você consertar e um projeto guiado ajuda a criar algo que você pode mostrar.
O que está incluído
O que há no Learn HTML
40
Cursos de A1 a C1
As 159 lições vão da estrutura do documento, textos, links, imagens e listas a tabelas, formulários e HTML5 semântico, passando por acessibilidade, componentes web, segurança e a History and Navigation API.
Ao vivo
Editor de HTML com visualização
Escreva a marcação e veja a página renderizada ser atualizada. Você pode adicionar arquivos CSS e JavaScript ao mesmo projeto, transformando um documento simples em um pequeno site funcional.
20
Projetos guiados
Criações passo a passo, incluindo uma página de receitas, um formulário de contato, uma galeria de fotos, uma barra de navegação e uma tabela de preços acessível.
20
Missões de depuração
Problemas reais para investigar: um formulário de cadastro que não envia nada, um rótulo que ninguém consegue tocar, uma página que carrega reduzida no celular.
80
Guia rápido de tags
Uma lista de consulta com 80 tags, elementos e atributos HTML para quando você sabe o que quer, mas não sabe como se chama.
50
Perguntas de entrevista
Cinquenta perguntas de entrevista para desenvolvedores web, com respostas claras, além de uma biblioteca de código com exemplos curtos que você pode abrir e editar e um espaço para salvar seu próprio código e suas anotações.
Contexto
O que é HTML e dá para aprendê-lo digitando no celular?
HTML (HyperText Markup Language) é a linguagem que descreve a estrutura de uma página web: qual texto é um título, qual é um parágrafo, para onde um link aponta e o que um formulário solicita. Não é uma linguagem de programação, então não há loops ou variáveis para enfrentar, e é por isso que costuma ser o primeiro passo no desenvolvimento web. Como o resultado fica visível no momento em que você escreve, HTML combina bem com sessões curtas no celular: uma tag é pequena o bastante para ser digitada com o polegar, e a visualização mostra imediatamente se deu certo.
Elementos, tags e atributosas três palavras usadas em todas as lições
Um elemento é um trecho de conteúdo com um significado, escrito entre uma tag de abertura e uma de fechamento, como um parágrafo ou um item de lista. Os atributos ficam dentro da tag de abertura e a ajustam, como o endereço para o qual um link aponta ou o texto que descreve uma imagem. Quase todo erro de iniciante é uma tag de fechamento ausente ou um atributo colocado no lugar errado.
HTML semânticotítulos, navegação, conteúdo principal e rodapé
Elementos semânticos indicam o que é um bloco da página, em vez de dizer como ele se parece. Uma barra de navegação, um artigo e um rodapé têm, cada um, seu próprio elemento, o que ajuda leitores de tela, mecanismos de busca e qualquer pessoa que precise editar a página mais tarde. É o hábito que diferencia uma página organizada de uma pilha de contêineres genéricos.
HTML, CSS e JavaScriptquem faz o quê
HTML contém a estrutura e o conteúdo, CSS controla a aparência desse conteúdo e JavaScript adiciona comportamentos, como reagir a um clique. Aprender HTML primeiro dá aos outros dois algo ao qual se conectar. O editor do app oferece abas separadas para HTML, CSS e JavaScript, para que você mantenha as três funções separadas desde o início.
Formulários e acessibilidadeonde páginas simples ficam sérias
Formulários são a maneira como uma página solicita qualquer coisa ao visitante e também são onde começam a maioria dos problemas de acessibilidade: um rótulo que ninguém consegue tocar, um campo que um leitor de tela não consegue identificar. Rótulos, atributos de validação e funções ARIA são pequenos trechos de marcação que determinam se uma página funciona para todos.
Para quem é
Para quem é — e para quem não é
É uma boa opção se você
- Está escrevendo sua primeira página da web e quer cada tag explicada antes de usá-la
- Aprende melhor quando pode ver imediatamente o resultado de cada linha
- Mantém um blog, uma página de loja ou um portfólio e quer editar a marcação por trás dele
- Planeja avançar para CSS, JavaScript ou desenvolvimento front-end e quer construir uma base sólida primeiro
- Está se preparando para uma entrevista de desenvolvedor web e quer perguntas para treinar
Não é a ferramenta certa se você
- Precisa de um fluxo de trabalho completo no desktop, com arquivos, pastas e um servidor local
- Espera que todos os cursos sejam gratuitos; o primeiro curso, o primeiro projeto guiado e duas missões são gratuitos, e o Pro desbloqueia o restante
- Já escreve HTML de produção diariamente e quer uma referência em vez de um curso
- Quer aprender uma ferramenta de design; aqui, o foco é a marcação e o código por trás das páginas
Dúvidas
Perguntas frequentes
O que é Aprender HTML: Curso Code?
Aprender HTML: Curso Code é um app para iPhone e Android que ensina HTML desde a primeira tag até tópicos avançados. Ele combina 40 cursos curtos com um editor HTML integrado e visualização ao vivo, 20 projetos guiados, 20 missões de depuração e um mentor de IA. É gratuito para começar e está disponível em 22 idiomas.
Posso realmente escrever e visualizar HTML em um celular?
Sim. O editor do Aprender HTML: Curso Code tem abas de HTML, CSS e JavaScript, e a visualização mostra a página produzida pela sua marcação. Um celular é confortável para a prática focada que HTML exige, já que as tags são curtas. Uma tela maior só se torna útil quando você está trabalhando com muitos arquivos ao mesmo tempo.
Preciso ter experiência com programação antes de começar?
Não. A trilha começa explicando como um documento HTML é estruturado e apresenta cada termo em linguagem simples antes de usá-lo. HTML não tem loops nem variáveis para aprender primeiro, então Aprender HTML: Curso Code trata quem está começando do zero como o caso normal, não como uma exceção.
Qual é a diferença entre HTML e CSS?
HTML define o que está na página e o significado de cada parte, como um título, um link ou um campo de formulário. CSS define a aparência, incluindo cores, espaçamento e layout. O app ensina HTML primeiro e permite adicionar arquivos CSS no editor, para que você veja os dois trabalhando juntos sem misturar suas funções.
Quanto tempo leva para aprender o básico de HTML?
A maioria das pessoas consegue escrever uma página simples e correta depois de algumas sessões curtas, porque os elementos principais são poucos: títulos, parágrafos, links, imagens, listas e formulários básicos. Conteúdos mais aprofundados, como acessibilidade, estrutura semântica e Web Components, levam mais tempo. As lições daqui foram criadas para serem concluídas em minutos, então manter um hábito diário é algo realista.
Que tipos de projetos posso criar no app?
Os 20 projetos guiados incluem uma página de receitas, um formulário de contato, uma galeria de fotos, uma barra de navegação e uma tabela de preços acessível. Cada um é criado passo a passo. Eles são pequenos de propósito, para que você os conclua e mantenha o código nos seus snippets salvos.
O Learn HTML aborda acessibilidade e formulários?
Sim, e com bastante profundidade. Os formulários têm três cursos, que abrangem controles básicos, avançados e atributos de validação. A acessibilidade tem cursos próprios sobre os conceitos básicos, funções ARIA e padrões avançados de ARIA. As missões de depuração também incluem problemas como um rótulo que ninguém consegue tocar, tornando esses tópicos práticos em vez de abstratos.
O app é gratuito e o que o Pro acrescenta?
Você pode baixá-lo gratuitamente e começar na hora: o primeiro curso, o primeiro projeto guiado, duas missões e o editor ao vivo estão incluídos, junto com uma cota diária do mentor de IA. O Pro desbloqueia todos os cursos, projetos e missões, a prova para obter o certificado e perguntas ilimitadas ao mentor de IA, além de remover os anúncios.
Comece agora
Digite sua primeira tag e veja-a ser renderizada
Gratuito para começar no iOS e Android, em 22 idiomas.
Mais da CoddyKit
Disponível em iOS e Android.