Aprender Desenvolvimento Web
Aprender Desenvolvimento Web — Desenvolvimento frontend do HTML ao React, com visualização ao vivo
Aprender Desenvolvimento Web é um app gratuito para iOS e Android voltado para iniciantes, designers e profissionais em transição de carreira que querem se tornar desenvolvedores web. HTML, CSS e JavaScript ficam lado a lado em um editor ao vivo, e a página abaixo é atualizada conforme você digita. 41 cursos e 163 lições curtas levam você da primeira tag até layouts responsivos, TypeScript, React e Vue, com 20 projetos guiados, missões de depuração e um mentor de IA para aquele bug que você não consegue encontrar.
- Preço
- Gratuito, upgrade para Pro
- Plataformas
- iOS e Android
- Idiomas
- 22
- Classificação etária
- 4+
- Requisitos
- iOS 15.1 ou posterior
Mude uma linha e veja a página mudar.
O editor exibe painéis de HTML, CSS e JavaScript lado a lado, com uma visualização ao vivo abaixo, para que a marcação, o estilo e o comportamento sejam aprendidos como uma única página, e não como três assuntos separados.
O que é
Aprender Desenvolvimento Web é um app gratuito para iOS e Android que ensina desenvolvimento frontend — a parte de um site que as pessoas veem e tocam — usando um editor de HTML, CSS e JavaScript ao vivo no celular. O app oferece 41 cursos e 163 lições classificadas do nível iniciante ao avançado, abordando os fundamentos da web, layouts responsivos, JavaScript e o DOM, TypeScript, React, Vue, testes, acessibilidade e desempenho, além de projetos guiados, missões de depuração, perguntas de entrevista e um mentor de IA.
Dentro do app
Como ele é
O curso
O que o curso de frontend aborda
41 cursos e 163 lições, extraídos da própria lista de cursos do app: desde a primeira tag HTML até arquitetura frontend e engenharia em nível sênior.
A Web e os Três Fundamentos
Boas-vindas ao Desenvolvimento Frontend, Como a Web Funciona, Fundamentos de HTML, Fundamentos de CSS e Fundamentos de JavaScript.
Layout e Design Responsivo
Fundamentos de Design Responsivo, Formulários HTML e Marcação Semântica, Domínio de Layout com CSS e Variáveis, Transições e Animações em CSS.
JavaScript no Navegador
O DOM e as APIs do Navegador, Arrays, Objetos e ES6+, Programação Assíncrona e Módulos JavaScript e Ferramentas de Build.
Fluxo de Trabalho e Ferramentas
Ferramentas e Fluxo de Trabalho para Desenvolvedores, Git e Fluxo de Colaboração e Ferramentas Modernas de Frontend.
TypeScript
Introdução ao TypeScript, Aprofundamento em Tipos e Interfaces e TypeScript Avançado para Frontend.
React e Vue
Fundamentos de React, useEffect e Busca de Dados, Hooks e Padrões Avançados, depois Fundamentos de Vue 3, a Composition API e Padrões Avançados de Vue.
Dados, Renderização e Tempo Real
Gerenciamento de Estado, Integração com APIs e REST, Renderização no Lado do Servidor com Next.js e Nuxt 3, Progressive Web Apps e WebSockets e Frontend em Tempo Real.
Qualidade e Arquitetura
Acessibilidade, Testes de Frontend, Otimização de Performance Web, Segurança de Frontend, Arquitetura de CSS, Sistemas de Design, CI/CD de Frontend e Engenharia de Frontend em Nível Sênior.
Como funciona
Como você aprende com o app
A ordem do app acompanha a ordem do trabalho: primeiro crie uma página, depois faça com que ela se comporte como esperado e, então, aprenda as ferramentas que permitem ampliá-la.
Comece pelo primeiro curso gratuito
Welcome to Frontend Development abre o caminho, e o editor ao vivo é gratuito desde o início. Cada lição traz alguns minutos de explicação, seguidos de algo para alterar e executar.
Edite um painel e leia a visualização
Altere o HTML, o CSS ou o JavaScript, e a visualização abaixo acompanha as mudanças. Novos projetos podem começar com um template de HTML, React, Vue, Angular, Node ou TypeScript.
Crie projetos e corrija bugs reais
Vinte projetos guiados ensinam, passo a passo, a criar uma página de receitas, um formulário de contato, uma grade de cards, uma navbar e uma tabela de dados, enquanto 15 missões de depuração entregam páginas quebradas para você consertar.
O que está incluído
O que vem com o app
41
Cursos, do iniciante ao avançado
163 lições classificadas de A1 a C2, desde como a web funciona e os fundamentos de HTML até TypeScript, React, Vue 3, gerenciamento de estado, renderização no servidor com Next.js e Nuxt 3 e progressive web apps.
Ao vivo
Editor com visualização instantânea
Painéis de HTML, CSS e JavaScript com uma visualização abaixo, para que uma alteração apareça imediatamente. Comece novos projetos com vários templates de frameworks.
15
Missões de depuração
Missões baseadas em problemas reais de frontend: um layout que quebra em 375 pixels, uma imagem que deixa a página lenta, um formulário que ninguém consegue acessar pelo teclado, um vazamento de memória em um componente e um teste que passa localmente, mas falha na CI.
20
Projetos guiados
Pequenas construções explicadas passo a passo, como uma página de receitas, um formulário de contato, uma grade de cards, uma navbar e uma tabela de dados.
IA
Mentor de IA e playground
Pergunte sobre um erro, uma lição ou seu próprio código, ou descreva uma página no playground de IA e veja o código ser escrito. Usuários gratuitos têm três perguntas de IA por dia.
50
Perguntas de entrevista com respostas
Cinquenta perguntas de entrevista para desenvolvedores frontend e web, com respostas, além de um guia rápido com 83 entradas sobre sintaxe e padrões e uma biblioteca de exemplos curtos que você pode abrir e editar.
Contexto
O que um desenvolvedor frontend realmente aprende — e em que ordem?
Um desenvolvedor frontend cria o que é executado no navegador: a estrutura de uma página, sua aparência em todos os tamanhos de tela e sua resposta quando alguém clica, digita ou rola a página. A ordem mais lógica é começar pela estrutura (HTML), depois pela apresentação (CSS), em seguida pelo comportamento (JavaScript) e só então pelas ferramentas que organizam projetos maiores: TypeScript, um framework como React ou Vue, testes e uma etapa de build. Pular para um framework antes dos três fundamentos é o motivo mais comum de iniciantes travarem, porque um framework geralmente esconde o JavaScript puro e o DOM por trás de sua própria sintaxe.
HTML semânticosignificado antes da aparência
Escolher um título, uma lista, um rótulo de formulário ou um botão pelo que o conteúdo é, e não pela aparência que deve ter, oferece aos leitores de tela, mecanismos de busca e teclados algo com que trabalhar. Também é o ganho de acessibilidade mais fácil e barato em qualquer página.
Layout responsivouma página, toda tela
Flexbox, grid e media queries permitem que um único layout se reorganize de um celular estreito para um monitor amplo. Testar desde cedo em uma largura pequena, como 375 pixels, identifica os bugs de layout que são difíceis de corrigir mais tarde.
O DOMa página como um objeto vivo
O navegador transforma o HTML em uma árvore de objetos que JavaScript pode ler e alterar. No fim das contas, todo framework é uma maneira conveniente de atualizar essa árvore, então entendê-la torna React e Vue muito mais fáceis de compreender.
Core Web Vitals e desempenhovelocidade que as pessoas sentem
Uma página que carrega tarde uma imagem grande e não otimizada, ou que muda de posição durante o carregamento, parece lenta mesmo quando o código está correto. Desempenho é uma habilidade que só aparece quando páginas e imagens reais entram em cena.
Para quem é
Para quem é — e para quem não é
É uma boa opção se você
- Quer se tornar um desenvolvedor web e está começando do zero
- É designer e quer desenvolver as páginas que cria
- Sabe um pouco de HTML e CSS e quer aprender JavaScript, TypeScript, React ou Vue
- Está se preparando para sua primeira entrevista de frontend e quer perguntas com respostas
- Prefere ver uma página mudar enquanto digita a ler explicações longas
Não é a ferramenta certa se você
- Precisa criar e publicar um site grande com vários arquivos, algo que ainda exige um laptop e um editor completo
- Espera que tudo seja gratuito: o primeiro curso, o primeiro projeto, duas missões de debugging e o editor são gratuitos, e o Pro desbloqueia o restante
- Quer um curso de backend ou banco de dados, porque esta trilha é sobre o que é executado no navegador
- Já trabalha como engenheiro de frontend sênior e quer uma referência em vez de lições
Dúvidas
Perguntas frequentes
O que é desenvolvimento frontend?
Desenvolvimento frontend é criar a parte de um site ou app web que é executada no navegador: sua estrutura com HTML, sua aparência com CSS e seu comportamento com JavaScript, além dos frameworks e das ferramentas desenvolvidos sobre essa base. Aprender Desenvolvimento Web ensina essa stack nessa ordem, com uma prévia ao vivo para que cada alteração fique visível imediatamente.
Posso aprender desenvolvimento frontend pelo celular?
Os conceitos e as primeiras páginas podem ser aprendidos tranquilamente pelo celular, porque HTML, CSS e JavaScript são pequenos o suficiente para serem editados em sessões curtas, e a prévia mostra o resultado imediatamente. O app coloca os três painéis e uma prévia ao vivo na tela. Um laptop se torna mais confortável quando você passa a manter um projeto maior com muitos arquivos, mas não é necessário para começar.
Para quem é indicado e por onde um iniciante completo deve começar?
Ele é indicado para iniciantes completos, designers que querem desenvolver o que criam, desenvolvedores que já conhecem um pouco de HTML e CSS e pessoas em transição de carreira que estão se preparando para o primeiro emprego em frontend. Comece entendendo como a web funciona e aprendendo HTML básico, depois CSS e, então, JavaScript. Aprender Desenvolvimento Web segue essa ordem, começando pelo curso gratuito Welcome to Frontend Development.
O app ensina React e Vue?
Sim. Depois de HTML, CSS, JavaScript e TypeScript, o app oferece cursos de React sobre fundamentos, useEffect e busca de dados, hooks e padrões avançados, além de cursos de Vue 3 sobre fundamentos, a Composition API e padrões avançados. Ele também aborda gerenciamento de estado e renderização no lado do servidor com Next.js e Nuxt 3.
Preciso aprender TypeScript?
Não é necessário para criar a primeira página, mas a maioria dos codebases profissionais de React e Vue usa TypeScript, então vale a pena aprendê-lo depois dos fundamentos de JavaScript. O app apresenta TypeScript com um primeiro curso sobre tipos, um curso mais aprofundado sobre tipos e interfaces e um curso avançado para padrões de frontend.
Como funcionam as missões de debugging?
Cada uma das 15 missões de debugging apresenta uma página ou um componente com problemas que reproduz uma situação real de frontend, como um layout que quebra em 375 pixels, um formulário que não pode ser usado com o teclado, um vazamento de memória em um componente ou um teste que falha apenas no CI, e você precisa corrigir o problema. Duas missões são gratuitas.
Isso pode me ajudar a me preparar para uma entrevista de desenvolvedor frontend?
Pode ajudar na parte relacionada ao conhecimento. Aprender Desenvolvimento Web tem 50 perguntas de entrevista com respostas, uma cheat sheet com 83 entradas de sintaxe e padrões e cursos sobre testes, performance, acessibilidade e arquitetura — tópicos para os quais as entrevistas costumam avançar depois dos fundamentos. Ele não substitui a criação de um portfólio com seus próprios projetos.
Quanto tempo leva para aprender desenvolvimento frontend?
Um iniciante que pratica um pouco todos os dias geralmente consegue criar páginas responsivas simples em algumas semanas, enquanto dominar JavaScript e um framework leva meses. O app divide a trilha em lições de poucos minutos, com sequências e lembretes, para que o progresso venha de sessões curtas e regulares, em vez de um único bloco longo.
Aprender Desenvolvimento Web é gratuito?
Ele pode ser baixado gratuitamente na App Store e no Google Play. O primeiro curso, o primeiro projeto guiado, duas missões de debugging e o editor de código são gratuitos, com três perguntas ao mentor de IA por dia, e a versão gratuita exibe anúncios. O Pro desbloqueia todos os cursos, todos os projetos e missões, o exame de certificado e IA ilimitada, além de remover os anúncios.
Quais plataformas e linguagens são compatíveis, e o app da App Store é o mesmo?
Aprender Desenvolvimento Web funciona no iOS pela App Store e no Android pelo Google Play, em 22 idiomas, com classificação indicativa 4+. O anúncio na App Store tem o título Learn Frontend Development, e o anúncio no Google Play, Aprender Desenvolvimento Web, mas é o mesmo app. A aprovação no exame final concede um certificado de conclusão.
Comece agora
Crie sua primeira página web hoje
Grátis para começar no iOS e Android, em 22 idiomas.
Mais da CoddyKit
Disponível em iOS.