Quase todo iniciante em frontend dá de cara com essa barreira.
Os tutoriais começam a se misturar na sua cabeça. Você já sabe o que é uma div. Consegue dar aquela olhada de canto de olho na folha de estilo de outra pessoa e entender o que está acontecendo. Três vídeos de Flexbox? Assistidos. Mas quando você abre um index.html em branco e o cursor fica piscando na sua tela, seu cérebro simplesmente trava.
Mais um tutorial não é a solução. Um projeto é.
Algo pequeno o suficiente para terminar em um fim de semana, com um resultado visual que você possa mostrar para um amigo. O HTML e o CSS só entram na cabeça quando você digita o código, quebra tudo e depois volta para consertar o que estragou.
As trilhas de HTML e CSS estão entre as mais ativas na plataforma Coddy. E quem continua firme até se sentir confiante com código frontend faz o seguinte: conclui pequenos projetos regularmente. Eles não esperam até "saber o suficiente". Eles constroem, batem cabeça, pesquisam e seguem em frente.
Este guia traz 18 projetos de HTML e CSS organizados por nível de habilidade, desde um site de uma única página até um carrossel feito apenas com CSS. Você não precisa construir todos eles. Escolha um para este fim de semana e vá até o fim.
Por que projetos são melhores do que mais tutoriais
Ler código dá uma sensação de produtividade. O problema é que não é bem assim.
Passar um mês assistindo a vídeos no YouTube ainda pode te deixar sem saber como montar uma landing page básica, porque assistir e escrever usam "músculos" diferentes. O CSS, em especial, precisa ser digitado para fixar na mente, já que grande parte dele envolve pequenos ajustes minuciosos que você só aprende de verdade na base da tentativa e erro.
Os projetos também te forçam a pesquisar! O trabalho de frontend é cerca de 30% escrever código e 70% pesquisar na MDN, ler documentações e descobrir por que um elemento está desalinhado por dois pixels. Os tutoriais escondem tudo isso.
A outra vantagem dos projetos é que eles te dão algo concreto para mostrar. É difícil se sentir realizado dizendo apenas: "Estou aprendendo HTML e CSS". Mas dizer: "Eu criei esta página de restaurante, olha o link" é algo que você pode enviar para um amigo. Esse sentimento de "fui eu que fiz" é o que mantém as pessoas motivadas nas semanas mais difíceis.
As lições rápidas de HTML e CSS da Coddy rodam direto no seu navegador, sem precisar configurar nada, para você praticar o básico em sessões de cinco minutos até decorar a sintaxe.
Como configurar seu ambiente (pule se já tiver feito isso)
Não é preciso nenhuma configuração complexa para HTML e CSS. Apenas estas três coisas:
- Um editor de texto. O VS Code é o padrão para a maioria das pessoas. É gratuito e, depois que você fizer alguns projetos, vale a pena instalar algumas extensões de CSS.
- Um navegador. Qualquer um que você já use. As ferramentas de desenvolvedor (clique com o botão direito,
Inspecionar) são a forma como você resolve problemas de layout. Adquira esse hábito desde cedo. - Uma pasta para cada projeto. Apenas
index.htmlandstyle.csspara começar! Não se preocupe com ferramentas de build, frameworks ou "boas práticas" logo no seu primeiro projeto.
Se preferir pular a etapa de configuração, as lições de HTML e CSS da Coddy rodam no navegador sem precisar instalar nada. Isso é muito útil quando você quer praticar um conceito específico sem ter que criar um projeto do zero. Caso contrário, uma pasta e um editor de texto já são mais do que suficientes.
Projetos de HTML e CSS para Iniciantes
Estes cinco projetos usam o básico: títulos, parágrafos, imagens, listas, links e uma pitada de cor e espaçamento. Depois de algumas lições de HTML e CSS, qualquer um deles pode ser feito em poucas horas.
1. Página de Tributo
Escolha alguém que você admira (um músico, escritor, atleta, cientista) e crie uma página única de homenagem. Um título grande, uma imagem de destaque (hero image), uma breve biografia, uma linha do tempo da vida da pessoa e uma lista de links para saber mais. O projeto todo usa títulos, parágrafos, imagens, listas e CSS básico para tipografia e espaçamento. É o clássico primeiro projeto de HTML por um bom motivo: nada aqui é difícil.
2. Página Pessoal "Sobre Mim"
Um site pessoal de uma única página para se apresentar. Foto, uma breve biografia, uma lista de coisas de que você gosta e uma seção com formas de contato. Ponto extra se você colocá-lo no ar. O GitHub Pages é gratuito e leva apenas alguns minutos para configurar. Agora você terá um link real para compartilhar.
3. Card de Receita
Uma receita com uma imagem principal do prato, lista de ingredientes, passos numerados e o tempo de preparo exibido em uma pequena caixa de detalhes. Ensina a diferença entre listas ordenadas e não ordenadas, dimensionamento de imagens e como fazer uma página cheia de conteúdo parecer organizada em vez de poluída.
4. Página de Formulário de Contato
Uma página com um formulário: nome, e-mail, mensagem e botão de envio. O formulário não precisa enviar os dados para lugar nenhum ainda, isso é papel do JavaScript. O objetivo aqui é praticar os elementos de formulário HTML (input, textarea, label, button) e estilizá-los para que não fiquem com aquela aparência padrão e sem graça do navegador. Formulários aparecem em praticamente todo projeto frontend, então se familiarizar com eles agora vai valer muito a pena.
5. Menu de Restaurante Simples
Um cardápio de uma página para um restaurante fictício. Categorias (entradas, pratos principais, sobremesas), cada prato com um nome e uma breve descrição. Adicione um banner de destaque no topo e um rodapé simples com o horário de funcionamento. Excelente para praticar o agrupamento de conteúdos em seções, repetição de layouts e a escolha de uma paleta de cores que faça sentido.
Projetos Intermediários (Flexbox, Grid, Layouts)
Aqui você vai começar a estruturar layouts de verdade, lidando com várias seções e criando algo que se pareça com um site real que você veria na internet. A maioria desses projetos depende de Flexbox ou CSS Grid, que são exatamente as habilidades que você precisa desenvolver.
6. Landing Page para um Produto Fictício
Escolha um produto (um aplicativo, uma ferramenta SaaS, uma marca de velas artesanais, qualquer coisa) e crie o tipo de landing page que você veria na página inicial deles. Uma seção de destaque (hero) com um título chamativo e um botão de chamada para ação (CTA). Uma seção abaixo destacando três recursos do produto. Depoimentos de clientes. Rodapé com links. O projeto inteiro é um ótimo treino de Flexbox e Grid, além de uma lição prática sobre espaçamento e hierarquia visual.
7. Site de Portfólio
Uma página com várias seções para exibir o seu trabalho, mesmo que no momento o seu "trabalho" sejam apenas duas páginas de tributo e um card de receita. Cabeçalho com navegação, seção de destaque, grid de projetos, seção sobre você e seção de contato. Use Grid para o layout dos projetos e Flexbox para o menu de navegação e a seção principal.
Este é um projeto super útil, mesmo que você ache que ainda não precisa de um portfólio. No momento em que começar a se candidatar a vagas ou buscar freelas, você já terá um pronto.
8. Tabela de Preços
Três planos de preços dispostos lado a lado, cada um em seu próprio card com um nome, uma lista de recursos e um botão de chamada para ação. Adicione um destaque de "Mais Popular" no card do meio. Tabelas de preços parecem simples, mas são cheias de pequenos detalhes: cards com a mesma altura, listas alinhadas, efeitos de hover nos botões. Um excelente treino de Flexbox.
9. Página Inicial de um Blog
A página inicial de um blog: cabeçalho com navegação e busca, um artigo em destaque no topo, um grid de posts recentes logo abaixo, uma barra lateral com categorias e comentários recentes, e um rodapé no final. Este projeto te ensina a lidar com layouts de conteúdo divididos em várias regiões, o que é muito próximo do que você fará no dia a dia de um desenvolvedor frontend.
As lições práticas de CSS da Coddy permitem que você escreva código de layout real com a ajuda do Bugsy, o assistente de IA pronto para explicar por que seu elemento não centraliza, em vez de te deixar sozinho com mais uma aba do Stack Overflow aberta.
10. Página de Login e Cadastro
Duas páginas interligadas, uma de login e outra de cadastro, com um formulário centralizado, cabeçalho com logotipo e links para alternar entre elas. O desafio é criar algo com visual profissional sem exagerar nos elementos. As melhores páginas de login são bem alinhadas e sutilmente elegantes. Um ótimo exercício de design e bom gosto.
11. Mockup de Dashboard
Um layout de painel (dashboard) estático: menu lateral à esquerda, barra superior com informações do usuário e área de conteúdo principal com alguns cards de estatísticas, um espaço reservado para gráfico e uma lista de atividades recentes. Sem interatividade por enquanto. Este é um projeto puramente de layout. O CSS Grid fará a maior parte do trabalho pesado. Ao final, você vai entender perfeitamente por que o CSS Grid existe e por que quem ainda não o utiliza vive reclamando de layouts.
Projetos de Animação e Efeitos em CSS
Agora chegamos à parte divertida. Projetos menores em escopo, mas focados em CSS avançado. Excelentes para dominar transições, keyframes, transformações e pseudo-classes como :hover e :focus.
12. Spinner de Carregamento
Um indicador de carregamento (spinner) feito puramente com CSS. Tente criar algumas variações: um anel giratório, três pontos saltitantes, um círculo pulsante ou uma barra de progresso que se preenche repetidamente. Cada um leva cerca de 15 linhas de CSS e ensina conceitos de @keyframes, animation e transform.
13. Galeria de Imagens com Efeitos de Hover
Um grid de fotos onde passar o mouse (hover) sobre cada uma revela uma legenda com uma transição suave. Experimente efeitos de hover diferentes: uma sobreposição que desliza, um zoom na imagem ou um filtro de cor que desaparece gradualmente. Este é o projeto onde o conceito de transition costuma fazer sentido de verdade para a maioria das pessoas. Você também aprenderá a sobrepor elementos usando position: absolute.
14. Barra de Navegação Animada
Uma barra de navegação com um logotipo à esquerda e itens de menu à direita, onde os itens ganham um sublinhado com uma animação deslizante ao passar o mouse, e a página ativa permanece sublinhada. No celular, o menu se transforma em um ícone de hambúrguer que abre um menu suspenso. Um padrão que você usará para sempre: estados animados em elementos interativos e comportamento responsivo para diferentes tamanhos de tela.
15. Efeito de Card que Gira (Card Flip)
Um card que gira ao passar o mouse para revelar algo no verso (uma frase, uma definição ou um detalhe extra). Usa transform: rotateY e backface-visibility, duas propriedades CSS que você não usa no dia a dia, mas que parecem mágica na primeira vez que funcionam. Um projeto rápido com um grande ganho de confiança.
16. Slider de Imagens Apenas com CSS
Um carrossel de imagens com rolagem horizontal e botões de anterior/próximo, construído inteiramente em CSS. Sem JavaScript. O truque consiste em usar botões de rádio (radio buttons) ocultos e o seletor :checked para alternar qual imagem fica visível. Um padrão inteligente que mostra o quanto você pode fazer apenas com CSS antes de recorrer ao JS. Vale a pena fazer pelo menos uma vez, mesmo que você normalmente usasse JavaScript para isso.
Projetos Avançados de HTML e CSS
Estes últimos projetos são para quando o básico já parecer rotina e você quiser um desafio de verdade. Ainda são feitos puramente com HTML e CSS (sem necessidade de JavaScript), mas vão testar seus limites em termos de layout, precisão e paciência.
17. Clone de uma Homepage Famosa
Escolha um site real (a página inicial da Netflix, a landing page do Spotify ou a página de produto da Apple) e recrie a parte visual dele em HTML e CSS com a maior precisão possível. Não precisa torná-lo funcional, apenas replique o layout, a tipografia, o espaçamento e as cores.
Você passará horas se perguntando como eles conseguiram aquele espaçamento exato, aprenderá por que os grids são medidos daquela forma e começará a notar as decisões de layout em cada site que visitar. Desenvolvedores frontend experientes costumam recomendar esse tipo de exercício há anos.
18. Arte em CSS
Desenhe algo usando apenas elementos div e CSS. Muitas pessoas criam ilustrações incrivelmente detalhadas dessa forma: personagens de desenho animado, paisagens, animais e até retratos. Comece com algo simples, como uma xícara de café, um emoji sorridente ou um robô básico.
Parece bobagem até você tentar. Depois, vira uma verdadeira aula de position, border-radius, box-shadow, gradientes e transform. No final, você entenderá o CSS em um nível que a maioria dos iniciantes nunca alcança, apenas por ter tentado desenhar um círculo perfeito dentro de um retângulo.
Onde a Coddy Entra
As lições de HTML e CSS da Coddy foram feitas sob medida para preencher a lacuna entre o "quero aprender isso" e o "consigo criar um projeto". Cada lição dura cerca de cinco minutos, você escreve código real no navegador e o Bugsy (o assistente de IA integrado) está lá para ajudar quando você travar em coisas como entender por que o margin: auto não está centralizando seu elemento verticalmente.
Toda a estrutura é pensada na prática diária. Cinco minutos aqui, cinco minutos ali — o mesmo padrão que faz as pessoas abrirem aplicativos de idiomas todas as manhãs, só que aplicado à programação. Se você já abandonou algum curso online por volta dos 30% de progresso, esse formato em pílulas rápidas é provavelmente o que estava faltando.
Tanto o HTML quanto o CSS estão totalmente na faixa gratuita, todas as lições, sem precisar configurar nada. Isso costuma surpreender as pessoas. Você não vai dar de cara com uma cobrança no meio do seu aprendizado de Flexbox!
Alguns Hábitos que Ajudam
Antes de escolher um projeto, aqui estão três pequenas atitudes que fazem uma diferença surpreendente:
Use as ferramentas de desenvolvedor do navegador. Clique com o botão direito em qualquer elemento, selecione "Inspecionar" e observe o painel de estilos. Você pode editar o CSS ao vivo no navegador para ver o que acontece. É a melhor ferramenta de depuração que você vai usar, e já vem de graça em qualquer navegador.
Desenvolva mobile-first (focado em dispositivos móveis primeiro). Comece a escrever seu CSS pensando em telas pequenas e depois adicione media queries para ajustar o visual em telas maiores. Fazer o caminho inverso é muito mais difícil. Esse é o padrão que a maior parte do código frontend moderno utiliza, então criar esse hábito agora vai te poupar muito retrabalho no futuro.
Coloque no ar a versão feia primeiro. Faça a página funcionar com textos provisórios (placeholders) e uma estilização básica. Deixe o acabamento para depois. Um erro muito comum entre iniciantes é passar três horas criando o botão perfeito para só depois perceber que o layout da página não funciona e que tudo precisará ser refeito.
O que Construir a Seguir
Se você terminar um projeto e o próximo parecer um passo natural, isso é um ótimo sinal. Você está pronto!
Escolha o próximo da lista e comece. Não espere até se sentir "pronto o suficiente", porque esse sentimento nunca chega. Um belo dia você simplesmente vai perceber que já construiu seis coisas e que a sétima parece perfeitamente viável.
Se não souber o que escolher, vá direto para aquele que te intimida um pouco. A evolução das suas habilidades acontece no limite da sua zona de conforto, não no meio dela.
E se você estiver batendo cabeça com o básico (seletores que não funcionam, layouts que quebram, Flexbox que não faz nada), afaste-se do projeto por um momento e faça algumas lições focadas para preencher essas lacunas.
As trilhas de HTML e CSS da Coddy foram desenhadas exatamente para isso: uma prática rápida e direcionada no conceito em que você travou, para depois você voltar com tudo para o seu projeto.
A Coddy transforma a programação em um hábito diário de cinco minutos com XP, ofensivas (streaks) e uma versão gratuita generosa que cobre todas as lições de HTML e CSS, para você finalmente criar a consistência necessária para colocar projetos reais no ar.
Share this article
About the Author
Coddy Team
Editorial Team
Frequently Asked Questions
Qual é o melhor primeiro projeto de HTML e CSS para um iniciante completo?
Uma página de tributo ou uma página pessoal "Sobre Mim". Ambas usam apenas HTML básico e uma pequena quantidade de CSS, e você concluirá qualquer uma delas em poucas horas.
Preciso aprender JavaScript antes de fazer projetos em HTML e CSS?
Não. Você pode construir uma quantidade surpreendente de coisas apenas com HTML e CSS: landing pages, portfólios, galerias de imagens, navegação animada e até mesmo um slider de imagens funcional. O JavaScript entra em cena quando você precisa de interatividade que o CSS não consegue lidar, o que geralmente só acontece no quinto ou sexto projeto.
Quanto tempo um projeto de HTML e CSS deve levar para um iniciante?
Um primeiro projeto deve levar, no máximo, um fim de semana. Travou nele por duas semanas? O escopo está muito grande. Reduza as funcionalidades até que algo possa ser entregue, finalize essa versão e só adicione mais se você ainda quiser.
Vale a pena fazer projetos de CSS se eu quiser ser um desenvolvedor backend?
Sim, pelo menos alguns deles. A maioria das vagas de backend ainda espera que você seja funcional com HTML e CSS para tarefas básicas de frontend, ferramentas internas e páginas de administração. Três ou quatro projetos tiram você da fase do "eu nem consigo" e o levam para o "consigo me virar e montar algo quando preciso".
Quais projetos de HTML e CSS ficam melhor em um portfólio?
Escolha variedade: uma landing page bem acabada, um layout responsivo (como um blog ou dashboard), um projeto que mostre habilidades de animação em CSS e, idealmente, um clone de um site real para provar que você consegue reproduzir um design. Quatro projetos bem-feitos superam quinze feitos pela metade.
Como faço para tornar meus projetos de HTML e CSS responsivos?
Comece com o layout para telas pequenas e, depois, adicione media queries do CSS para ajustar para telas maiores. Use unidades relativas como rem e % em vez de larguras fixas em pixels em todos os lugares. Teste redimensionando a janela do seu navegador ou usando a barra de ferramentas de dispositivos nas dev tools.
Posso aprender HTML e CSS no Coddy de graça?
Sim. O HTML e o CSS estão ambos no plano gratuito, com todas as lições incluídas. O plano gratuito limita o quanto você pode fazer por sessão (um sistema de energia que se recarrega com o tempo), mas não bloqueia o conteúdo atrás de um paywall.
Quais conceitos de CSS eu devo saber antes de encarar projetos intermediários?
O box model, Flexbox, CSS Grid, posicionamento (relative, absolute, fixed) e, pelo menos, o básico de design responsivo com media queries. Se algum desses parecer confuso, faça algumas lições práticas antes de partir para um projeto de layout. Caso contrário, você passará a maior parte do projeto pesquisando no Google em vez de programar.
