PopularJornada
Aprenda HTML
Um curso de HTML online, gratuito e interativo. Você escreve HTML em cada lição, com pré-visualização ao vivo enquanto digita e um certificado gratuito ao concluir.
269,396+ codders inscritos
- Ideal para iniciantes
Ajuda de codificação com IA
Lições interativas e práticas
Narração em áudio em todas as lições
Questionários para testar seu conhecimento
Certificado grátis de conclusão
Programa
Seção 1
Fundamentals
Começar seçãoIniciarExpandirRecolherLearn the core structure and syntax to create web pages from scratchFundamentos do HTML
5 lições531- 01O que é HTML?Desafio
- 02Estrutura Básica do HTMLDesafioQuiz
- 03Tags e ElementosDesafioQuiz
- 04Aninhamento e Fechamento de TagsDesafioQuiz
- 05Comentários em HTMLDesafioQuiz
Texto e Formatação
6 lições1135- 01TítulosDesafioMaestriaQuiz
- 02ParágrafosDesafioMaestriaQuiz
- 03Quebras de LinhaDesafioMaestriaQuiz
- 04Texto em Negrito e ItálicoDesafioMaestriaQuiz
- 05Negrito e Itálico NovamenteDesafioMaestriaQuiz
- 06Recapitulação - FormataçãoDesafio
Trabalhando com Listas
4 lições721- 01Lista não ordenadaDesafioMaestriaQuiz
- 02Lista ordenadaDesafioMaestriaQuiz
- 03Listas aninhadasDesafioMaestriaQuiz
- 04Recapitulação - ListasDesafio
Cartão de Receita
Projeto4 lições1- 01Visão Geral do ProjetoDesafio
- 02Título e Descrição da ReceitaProjeto
- 03IngredientesProjeto
- 04PassosProjeto
Adicionando Conteúdo
5 lições837- 01Atributos HTMLQuiz
- 02LinksDesafioMaestriaQuiz
- 03Links para Novas PáginasDesafioMaestriaQuiz
- 04ImagensDesafioMaestriaQuiz
- 05Atributos de ImagemDesafioMaestriaQuiz
Layout da Página
5 lições930- 01DivisõesDesafioMaestriaQuiz
- 02Spans InlineDesafioMaestriaQuiz
- 03Tags SemânticasDesafioMaestriaQuiz
- 04Seções e ArtigosDesafioMaestriaQuiz
- 05Recapitulação - LayoutDesafio
Página de Perfil Pessoal
Projeto5 lições1- 01Visão Geral do ProjetoDesafio
- 02Seção de CabeçalhoProjeto
- 03Foto de PerfilProjeto
- 04Seção Sobre MimProjeto
- 05Links SociaisProjeto
Formulários e Inputs Parte 1
6 lições936- 01Fundamentos de FormuláriosQuiz
- 02Inputs de TextoDesafioMaestriaQuiz
- 03Atributos de InputDesafioMaestriaQuiz
- 04Campo de SenhaDesafioMaestriaQuiz
- 05Labels para InputsDesafioMaestriaQuiz
- 06Recapitulação - Formulário BásicoDesafio
Formulários e Inputs Parte 2
7 lições1239- 01Radio ButtonsDesafioMaestriaQuiz
- 02CheckboxesDesafioMaestriaQuiz
- 03DropdownsDesafioMaestriaQuiz
- 04BotõesDesafioMaestriaQuiz
- 05Botões em FormuláriosDesafioMaestriaQuiz
- 06Recapitulação - Formulários #1Desafio
- 07Recapitulação - Formulários #2Desafio
Tabelas
4 lições723- 01Fundamentos de TabelasDesafioMaestriaQuiz
- 02Adicionando LegendasDesafioMaestriaQuiz
- 03Mesclando Linhas e ColunasDesafioMaestriaQuiz
- 04Recapitulação - TabelasDesafio
Página de Inscrição de Evento
Projeto5 lições1- 01Visão Geral do ProjetoDesafio
- 02Seção de CabeçalhoProjeto
- 03Seção de Detalhes do EventoProjeto
- 04Formulário de InscriçãoProjeto
- 05Seção de RodapéProjeto
Desafios Finais
4 lições4- 01Cartão de Perfil SimplesDesafio
- 02Cartão de Convite de EventoDesafio
- 03Página de Artigo SimplesDesafio
- 04Lista de Livros FavoritosDesafio
Seção 2
Styling with CSSPágina própria
Começar seçãoIniciarExpandirRecolherBring your web pages to life with colors, layouts, and stylesIntrodução
5 lições540- 01O que é CSS?DesafioQuiz
- 02Sintaxe CSSDesafioQuiz
- 03Comentários CSSQuiz
- 04A Tag HeadDesafioQuiz
- 05A Tag TitleDesafioMaestriaQuiz
Adicionando CSS
4 lições725- 01CSS InlineDesafioMaestriaQuiz
- 02CSS InternoDesafioMaestriaQuiz
- 03CSS ExternoDesafioMaestriaQuiz
- 04Desafio de Estilização BásicaDesafio
Seletores Básicos
7 lições1247- 01Introdução aos SeletoresDesafioQuiz
- 02Seletor de TipoDesafioMaestriaQuiz
- 03Seletor de ClasseDesafioMaestriaQuiz
- 04Seletor de IDDesafioMaestriaQuiz
- 05Seletores de GrupoDesafioMaestriaQuiz
- 06Seletor UniversalDesafioMaestriaQuiz
- 07Desafio de SeleçãoDesafio
Fundamentos de Texto
8 lições1450- 01Cor do TextoDesafioMaestriaQuiz
- 02Família da FonteDesafioMaestriaQuiz
- 03Tamanho da FonteDesafioMaestriaQuiz
- 04Peso da FonteDesafioMaestriaQuiz
- 05Alinhamento de TextoDesafioMaestriaQuiz
- 06Decoração de TextoDesafioMaestriaQuiz
- 07Desafio de Recapitulação nº 1Desafio
- 08Desafio de Recapitulação nº 2Desafio
Cores e Planos de Fundo
5 lições834- 01Cor de FundoDesafioMaestriaQuiz
- 02Cores HEXDesafioMaestriaQuiz
- 03Cores RGBDesafioMaestriaQuiz
- 04Transparência com RGBADesafioQuiz
- 05Desafio de Revisão nº 1Desafio
Cardápio de Café
Projeto3 lições1- 01Fundamentos de TipografiaDesafio
- 02Estilização de TextoProjeto
- 03Cores e Planos de FundoProjeto
Modelo de Caixa Parte 1
6 lições943- 01O que é o Modelo de Caixa?Quiz
- 02PaddingDesafioMaestriaQuiz
- 03MargensDesafioMaestriaQuiz
- 04BordasDesafioMaestriaQuiz
- 05Largura e AlturaDesafioMaestriaQuiz
- 06Desafio de RevisãoDesafio
Modelo de Caixa Parte 2
5 lições834- 01Box SizingDesafioQuiz
- 02Border RadiusDesafioMaestriaQuiz
- 03OverflowDesafioMaestriaQuiz
- 04Box ShadowDesafioMaestriaQuiz
- 05Desafio de RevisãoDesafio
Flex Box
6 lições943- 01O que é Flex Box?DesafioQuiz
- 02Flex DirectionDesafioMaestriaQuiz
- 03Justify ContentDesafioMaestriaQuiz
- 04Align ItemsDesafioMaestriaQuiz
- 05O Centro PerfeitoDesafioQuiz
- 06Desafio de Flex BoxDesafio
Formulário de Login
Projeto4 lições1- 01CorpoDesafio
- 02Container do FormulárioProjeto
- 03InputProjeto
- 04BotãoProjeto
Técnicas de Layout
7 lições1152- 01Elementos Block vs InlineDesafioQuiz
- 02Fundamentos de PosicionamentoDesafioMaestriaQuiz
- 03Posicionamento RelativoDesafioMaestriaQuiz
- 04Posicionamento AbsolutoDesafioMaestriaQuiz
- 05Posicionamento FixoDesafioMaestriaQuiz
- 06Fundamentos de Z-IndexDesafioQuiz
- 07Desafio de RecapitulaçãoDesafio
Fundamentos do Design Responsivo
6 lições1052- 01O que é Design Responsivo?DesafioQuiz
- 02Meta Tag ViewportDesafioQuiz
- 03Layouts FluidosDesafioMaestriaQuiz
- 04Unidades de ViewportDesafioMaestriaQuiz
- 05Fundamentos de Media QueriesDesafioMaestriaQuiz
- 06Imagens FlexíveisDesafioMaestriaQuiz
Página Web de Tonga
Projeto6 lições1- 01Menu de NavegaçãoDesafio
- 02Cabeçalho de Boas-vindasProjeto
- 03Seção SobreProjeto
- 04Seção de ContatoProjeto
- 05Tag ViewportProjeto
- 06Media QueryProjeto
Desafios Finais
4 lições4- 01Organizar ItensDesafio
- 02Lista de FilmesDesafio
- 03Convite de CasamentoDesafio
- 04Notificação FlutuanteDesafio
Seção 3
CSS MasteryPágina própria
Começar seçãoIniciarExpandirRecolherTake you css skills to the next level!Domínio de Seletores – Combinação
6 lições539- 01IntroduçãoQuiz
- 02Seletor de DescendenteDesafioQuiz
- 03Seletor de FilhoDesafioQuiz
- 04Seletor de Irmão AdjacenteDesafioQuiz
- 05Seletor de Irmão GeralDesafioQuiz
- 06Desafio de RecapitulaçãoDesafio
Pseudo-classes Interativas
5 lições431- 01Pseudo-classesQuiz
- 02Efeitos de HoverDesafioQuiz
- 03Efeitos de FocoDesafioQuiz
- 04Estilos AtivosDesafioQuiz
- 05Desafio de RecapitulaçãoDesafio
Pseudo-classes estruturais
5 lições432- 01Pseudo-classes estruturaisQuiz
- 02Selecionando o primeiro filhoDesafioQuiz
- 03Selecionando o último filhoDesafioQuiz
- 04O poder dos padrões: Usando nth-childDesafioQuiz
- 05Desafio de recapitulaçãoDesafio
Projeto de Menu Dropdown
4 lições4- 01Adicionar o submenuDesafio
- 02Exibir o submenuDesafio
- 03Mais estilizaçãoDesafio
- 04Input e botãoDesafio
Efeitos visuais
5 lições536- 01GradientesDesafioQuiz
- 02Filtros CSSDesafioQuiz
- 03TransformaçõesDesafioQuiz
- 04Transições e Efeitos de HoverDesafioQuiz
- 05Desafio de RevisãoDesafio
Landing Page
5 lições5- 01Estilizar a seção do cabeçalhoDesafio
- 02Estilizar o botãoDesafio
- 03Layout da seçãoDesafio
- 04Layout de cardDesafio
- 05Adicionar toques finaisDesafio
Construa com CSS Grid
4 lições426- 01Fundamentos do GridDesafioQuiz
- 02Posicionamento de Itens com Grid-rowDesafioQuiz
- 03Áreas NomeadasDesafioQuiz
- 04Desafio de RevisãoDesafio
Site Flavor Fiesta
4 lições4- 01Configurando o gridDesafio
- 02CabeçalhoDesafio
- 03A parte principalDesafio
- 04RodapéDesafio
Desafios Finais
5 lições5- 01Destacar Menu AtivoDesafio
- 02Linhas de Tabela ZebradasDesafio
- 03Efeito Hover em BotõesDesafio
- 04Layout de Cards em GridDesafio
- 05Imagem Hero DesfocadaDesafio
Seção 4
Practical Frontend
Começar seçãoIniciarExpandirRecolherCombine structure and style to design complete, responsive web pagesVariáveis
5 lições432- 01VariáveisQuiz
- 02Usando Variáveis CSSDesafioQuiz
- 03Variáveis para Design TokensDesafioQuiz
- 04Variáveis LocaisDesafioQuiz
- 05Desafio de RevisãoDesafio
Estratégia Mobile-First
6 lições643- 01O que significa “mobile-first”DesafioQuiz
- 02Tipografia Mobile-FirstDesafioQuiz
- 03Navegação Mobile-FirstDesafioQuiz
- 04Imagens Mobile-FirstDesafioQuiz
- 05Formulários Mobile-FirstDesafioQuiz
- 06Desafio de RecapitulaçãoDesafio
Temas e Estilos Visuais
5 lições535- 01Temas em CSSDesafioQuiz
- 02Fundamentos do Modo Escuro/ClaroDesafioQuiz
- 03Cores de Destaque e RealceDesafioQuiz
- 04Temas de TipografiaDesafioQuiz
- 05Desafio de RecapitulaçãoDesafio
Esportes Radicais
3 lições3- 01VariáveisDesafio
- 02Mobile-FirstDesafio
- 03TematizaçãoDesafio
Componentes de UI
6 lições642- 01Menu dropdownDesafioQuiz
- 02AbasDesafioQuiz
- 03BadgesDesafioQuiz
- 04TooltipsDesafioQuiz
- 05Banners de notificaçãoDesafioQuiz
- 06Desafio de recapitulaçãoDesafio
Padrões Responsivos
6 lições645- 01Layout Holy GrailDesafioQuiz
- 02Layout de Grid de CardsDesafioQuiz
- 03Layout Sidebar + ConteúdoDesafioQuiz
- 04Layout de Tela DivididaDesafioQuiz
- 05Header / Footer StickyDesafioQuiz
- 06Desafio de RevisãoDesafio
Desafios Finais
4 lições4- 01Cartão de PerfilDesafio
- 02Grade de Galeria de ChocolatesDesafio
- 03Sete MaravilhasDesafio
- 04Novas Sete MaravilhasDesafio
Seção 5
JavaScript in Action
Começar seçãoIniciarExpandirRecolherExplore how javascript is used with html and cssInteratividade/Componentes de UI
4 lições433- 01AbasDesafioQuiz
- 02Accordion (expandir/recolher)DesafioQuiz
- 03Modal (abrir/fechar)DesafioQuiz
- 04DropdownDesafioQuiz
Formulários e Validação
3 lições324- 01Validação de entradaDesafioQuiz
- 02Mensagens de erro personalizadasDesafioQuiz
- 03Botões de envioDesafioQuiz
Notificações e Feedback
3 lições327- 01Mensagem toastDesafioQuiz
- 02Banners dispensáveisDesafioQuiz
- 03Indicadores de carregamentoDesafioQuiz
Formulário com Notificação Toast
2 lições2- 01Exibir a Mensagem ToastDesafio
- 02Ocultar a Mensagem ToastDesafio
Navegação
3 lições329- 01Alternância do menu hambúrguer mobileDesafioQuiz
- 02Navegação lateral retrátilDesafioQuiz
- 03Menus dropdownDesafioQuiz
Temas e Personalização
2 lições217- 01Temas claro/escuroDesafioQuiz
- 02Salvar escolha do temaDesafioQuiz
Animações e Efeitos
3 lições327- 01Transições CSSDesafioQuiz
- 02Animar elementos ao rolarDesafioQuiz
- 03Animações de clique em botõesDesafioQuiz
Navegação Animada
3 lições36- 01VariáveisDesafioQuiz
- 02Event listenersDesafio
- 03CSS transitionDesafio
Desafios Finais
4 lições4- 01Accordion de FAQ interativoDesafio
- 02Formulário de LoginDesafio
- 03Navbar ResponsivaDesafio
- 04Página de Blog com TemaDesafio
Cursos de HTML
Cursos práticos de HTML, grátis para começar no navegador.
Animação de Eclipse Solar | Projeto HTML/CSS
PopularNeste curso, você criará uma incrível animação de "Eclipse Solar", demonstrando como criar interfaces de usuário envolventes e funcionais usando animações.
- 10
- 2
Desafios de HTML/CSS - Pacote I
PopularEste curso desafiará seus conhecimentos de HTML e CSS de uma forma divertida e eficaz!
- 11
Player de Vídeo do YouTube - Projeto HTML
Neste projeto, você criará um player de vídeo do YouTube usando HTML e explorará diversos atributos ao longo do caminho.
- 7
- 1
Projeto DOM - Calculadora
Neste curso, você construirá uma calculadora simples e interativa usando HTML, CSS e JS.
- 14
- 3
Clone da Página do Instagram | Projeto Front-End
Neste curso, você praticará abordagens padrão e simples de HTML & CSS e criará um projeto de clone da página do Instagram.
- 16
- 5
3D Card | Front-end Project
In this project, you will build a 3D card design by yourself!
- 31
- 4
Por que aprender HTML com a Coddy
- Escreva HTML no navegador e veja a página renderizada ao lado. Sem instalar editor, sem setup. Toda alteração no código HTML aparece na hora, então o ciclo de feedback é curto.
- HTML moderno e semântico: títulos, listas, links, imagens, tabelas, formulários e tags semânticas como
<header>,<nav>,<main>,<section>,<footer>. O HTML que você usaria de verdade para construir um site. - As dicas de IA te ajudam a corrigir erros de HTML - tags não fechadas, sintaxe de atributo quebrada, deslizes de acessibilidade - sem entregar a resposta, assim os hábitos de escrever HTML ficam.
- Certificado grátis de HTML quando você termina. Um primeiro passo confiável para desenvolvimento web, que combina naturalmente com os cursos de CSS e JavaScript.
Perguntas frequentes sobre aprender HTML
HTML é fácil de aprender?
HTML é uma das coisas mais fáceis de aprender em tecnologia. É uma linguagem de marcação, não uma linguagem de programação - você está rotulando pedaços de conteúdo (títulos, parágrafos, links, imagens) em vez de escrever lógica. A maioria dos iniciantes monta sua primeira página web de verdade na primeira hora.
Quanto tempo leva para aprender HTML?
Os fundamentos de HTML geralmente podem ser aprendidos em uma ou duas semanas de prática diária. Para criar projetos reais com segurança, reserve de um a três meses, dependendo do seu ritmo.
Devo aprender HTML antes de CSS e JavaScript?
Sim. O HTML define a estrutura da página; o CSS controla a aparência; o JavaScript a torna interativa. Aprender HTML primeiro significa que você tem algo concreto para estilizar e animar depois. O curso de HTML é curto de propósito para você partir logo para CSS e JS.
HTML é uma linguagem de programação?
Tecnicamente, não. HTML é uma linguagem de marcação usada para descrever a estrutura do conteúdo da web. Ela não tem variáveis, condicionais nem laços por si só. A programação de verdade em uma página web vem do JavaScript, que tem um curso separado.
Posso aprender HTML online de graça?
Sim. O curso interativo de HTML é gratuito - aulas, exercícios de código, preview ao vivo do HTML e um certificado. Tudo roda no navegador, então você não precisa instalar nenhum editor nem ferramenta para começar.
Recebo um certificado depois do curso de HTML?
Sim. Ao concluir o curso de HTML você recebe um certificado de conclusão gratuito. Uma prova verificável que dá para incluir no currículo ou compartilhar no LinkedIn - geralmente como um passo rumo a um portfólio mais completo de HTML, CSS e JavaScript.
