20 projetos de desenvolvimento web para iniciantes em HTML, CSS, JavaScript e React, cada um com o que ensina e um trecho de código inicial para colar e expandir.
Comece com projetos que ensinam uma ideia nova cada: uma página pessoal para HTML e CSS, um contador e uma lista de tarefas para eventos e estado em JavaScript, depois um app de clima ou de quiz para fetch e JSON. Passe para o React quando o JavaScript puro parecer fácil. Cada projeto abaixo vem com um trecho de código inicial que você pode colar e ampliar.
Uma ordem sensata
Listas de projetos para iniciantes costumam parar no título. Cada projeto aqui diz qual habilidade ele treina, quanto tempo leva mais ou menos e traz algumas linhas de código funcionando para você começar, assim você passa a primeira hora construindo em vez de olhar para um arquivo vazio. Filtre por nível ou pela linguagem que você quer praticar.
Uma página de perfil sobre você em HTML e CSS puros. Não precisa de nenhuma configuração além de um editor de texto e um navegador, e cobre títulos, parágrafos, links, imagens e estilos básicos.
Sozinho, sim, porque quase todo mundo que está aprendendo faz um. Deixe-o com a sua cara: adicione datas de entrega, filtros, arrastar para reordenar ou salvar no localStorage, e escreva uma nota curta sobre o que você melhoraria.
Quando você conseguir construir o contador, a lista de tarefas e um app com fetch em JavaScript puro sem tutorial. O React faz muito mais sentido depois que você sentiu a dor de atualizar o DOM na mão.
Não. Os vinte rodam no navegador. Os projetos de dados chamam APIs públicas gratuitas ou um arquivo JSON local, e os que salvam dados usam o localStorage, que guarda strings no navegador sem prazo de expiração.
Não existe um número fixo. Três ou quatro projetos terminados e bem acabados, que mostram habilidades diferentes, geralmente dizem mais que vinte pela metade.
Salve isto como index.html, abra no navegador e cole qualquer projeto HTML dentro do body.
Inclui a tag viewport para que celulares mostrem a página no tamanho certo, e uma tag script para os projetos em JavaScript.
Iniciante
HTML/CSS
1 a 2 horas
Estrutura da página, títulos, imagens, links
Adicione um tema escuro com prefers-color-scheme.
Iniciante
HTML/CSS
1 hora
Listas ordenadas e não ordenadas, seções semânticas
Adicione uma folha de estilo de impressão que esconda a foto.
Iniciante
HTML/CSS
3 horas
Flexbox, espaçamento, botões, texto responsivo
Faça a linha de recursos empilhar abaixo de 600px.
Iniciante
HTML/CSS
1 hora
CSS grid, auto-fit, object-fit
Abra uma visualização maior quando uma foto for clicada.
Iniciante
HTML/CSS
2 horas
Rótulos, tipos de input, validação nativa
Mostre uma mensagem de erro personalizada abaixo de cada campo.
Iniciante
JavaScript
30 minutos
Selecionar elementos, eventos de clique, atualizar texto
Adicione um botão de zerar e pare no zero.
Iniciante
JavaScript
2 horas
Envio de formulário, arrays, renderizar uma lista
Salve as tarefas para que sobrevivam a um recarregamento.
Iniciante
JavaScript
1 hora
Eventos de input, números, formatar valores em dinheiro
Divida a conta entre várias pessoas.
Iniciante
JavaScript
45 minutos
Alternar classes, salvar uma preferência
Use a configuração do sistema como padrão na primeira visita.
Intermediário
JavaScript
1 hora
setInterval, datas, limpar timers
Deixe o usuário escolher a data final.
Intermediário
JavaScript
3 horas
Dados em arrays de objetos, pontuação, estado
Embaralhe as perguntas e mostre uma barra de progresso.
Intermediário
JavaScript
2 horas
localStorage, JSON.stringify e JSON.parse
Adicione busca e um botão de excluir em cada nota.
Intermediário
APIs
3 horas
fetch, async/await, estados de erro
Mostre uma mensagem de carregamento e um erro amigável.
Intermediário
APIs
2 horas
Ler campos de JSON, montar cartões a partir de dados
Liste os cinco repositórios mais recentes do usuário.
Intermediário
JavaScript
1 hora
Filtrar arrays, eventos de input, estados vazios
Destaque as letras correspondentes.
Próximo passo
React
30 minutos
Componentes, useState, manipuladores de eventos
Adicione um campo para o tamanho do passo.
Próximo passo
React
3 horas
Listas com keys, inputs controlados, atualizações imutáveis
Adicione os filtros Todas, Ativas e Concluídas.
Próximo passo
React
2 horas
useEffect, estados de carregamento e de erro
Adicione uma caixa de busca que filtra por nome.
Próximo passo
React
4 horas
Elevar o estado, mover itens entre listas
Adicione arrastar e soltar entre colunas.
Próximo passo
React
4 horas
Valores derivados, reduce, formulários com vários campos
Mostre um gráfico dos gastos por categoria.
Filtre por nível ou habilidade e depois abra um projeto para ver o código inicial.
Filtrar por nível
Filtrar por habilidade
{n} de {total} projetos exibidos
Copiar
{level} · {skill} · {time}. Ensina: {teaches}. Desafio extra: {stretch}
Comece grátis · Sem cartão de crédito