Como Criar uma Landing Page Profissional com HTML, CSS e JavaScript do Zero

1. Antes de começar: o que vamos construir

Antes de escrever o primeiro código, é importante entender o que estamos tentando construir.

A página que montei foi pensada como uma landing page de apresentação de uma empresa fictícia chamada TechFlow. Ela possui um cabeçalho com navegação, uma área principal de destaque, estatísticas, apresentação de recursos, depoimentos, uma chamada para ação e um rodapé.

A estrutura pode parecer grande quando olhamos para o resultado final, mas ela é formada por blocos independentes. Essa foi uma das primeiras decisões que tomei durante o desenvolvimento, porque trabalhar por seções torna muito mais fácil alterar a página depois.

Outra decisão importante foi não utilizar um framework para resolver essas partes. Queria justamente entender quanto conseguiria fazer apenas com as tecnologias básicas da web.

Já que estamos falando de projetos para web e tecnologia, o celular também faz parte da rotina de muita gente que trabalha ou estuda usando a internet.

Clique na imagem para conferir o produto, as avaliações e o preço atual.

2. Começando pela estrutura HTML

O primeiro passo foi criar a estrutura HTML da página. Aqui procurei evitar aquele modelo em que todos os elementos ficam misturados em um único bloco enorme.

A página foi dividida em seções com responsabilidades diferentes. O cabeçalho fica separado da área Hero, que por sua vez fica separado das estatísticas, recursos, depoimentos, CTA e rodapé.

Um exemplo simples dessa organização é utilizar elementos como <header>, <section> e <footer> para deixar mais claro o papel de cada parte.

Isso não muda apenas a aparência do código. Também facilita bastante a manutenção. Se depois eu quiser modificar somente a área de depoimentos, consigo localizar aquele bloco sem precisar procurar a informação no meio de centenas de linhas.

No meu projeto, inclusive, deixei comentários identificando as principais áreas, como MENU, HERO, DEPOIMENTOS, CTA e FOOTER. É uma coisa simples, mas ajuda bastante quando o arquivo começa a crescer.

3. Criando uma identidade visual com variáveis CSS

Depois de estruturar o HTML, comecei a trabalhar no CSS. Uma das escolhas que considero mais úteis no projeto foi criar variáveis para as principais características visuais.

Em vez de repetir a mesma cor em dezenas de lugares, posso definir valores no :root e reutilizá-los no restante do CSS.

:root {
--primary: #6366f1;
--secondary: #8b5cf6;
--text: #1e293b;
--text-light: #64748b;
--bg-light: #f8fafc;
--white: #ffffff;
--border: #e2e8f0;
--shadow: 0 10px 40px rgba(0,0,0,0.08);


}

A vantagem disso aparece quando precisamos mudar a identidade visual. Se eu decidir trocar o roxo utilizado como cor principal, por exemplo, posso alterar a variável e vários componentes da página acompanham a mudança.

Para um projeto pequeno isso pode parecer exagero, mas é justamente esse tipo de organização que evita retrabalho quando a página cresce.

Para quem passa bastante tempo usando o smartphone, pequenos acessórios também podem fazer parte da rotina. Se quiser conferir uma opção, veja abaixo.

Clique na imagem para acessar a oferta e conferir as informações disponíveis na Shopee.

4. Montando o Hero da landing page

O Hero é aquela primeira grande área que o visitante encontra ao entrar na página. Por isso, foi uma das partes em que mais trabalhei a composição visual.

No projeto, utilizei uma estrutura em duas colunas para colocar o conteúdo textual de um lado e uma área visual do outro.

.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;


}

O ponto importante aqui é o display: grid. Com grid-template-columns: 1fr 1fr, o espaço disponível é dividido em duas partes proporcionais.

Isso permite manter o texto e a parte visual lado a lado no desktop. Mais tarde, nas regras responsivas, essa estrutura é alterada para funcionar melhor em telas menores.

Também coloquei botões de ação e elementos visuais no Hero para que a primeira tela não parecesse apenas um título acompanhado de um parágrafo.

5. Criando efeitos visuais sem biblioteca

Uma das coisas que eu queria testar era até onde conseguiria levar as animações apenas com CSS.

Foi aí que entraram os @keyframes. Eles permitem definir diferentes estados de uma animação e depois aplicá-la a um elemento.

@keyframes float {
0%, 100% {
    transform: translateY(0);
}

50% {
    transform: translateY(-10px);
}


}

Nesse caso, o elemento começa em sua posição normal, sobe alguns pixels no meio da animação e depois retorna. Repetindo o ciclo, conseguimos aquele movimento de flutuação.

O interessante é que isso acontece no navegador sem precisar de JavaScript para controlar cada movimento.

Também criei uma animação semelhante para determinados cartões visuais da página. São detalhes pequenos, mas ajudam a deixar a interface menos estática.

E já que o celular está sempre presente quando consumimos conteúdo de tecnologia, vale conferir também opções de proteção para o aparelho.

Clique na imagem para conferir os detalhes, avaliações e o preço atual.

6. Criando os cards de recursos

A seção de recursos foi criada usando cards. Cada card possui um ícone, um título e uma descrição.

O CSS utiliza Grid para organizar esses elementos e também adiciona um pequeno efeito quando o usuário passa o mouse sobre um card.

Um detalhe que gostei de utilizar foi uma linha no topo do card que inicialmente fica recolhida e aumenta durante o :hover. O efeito é feito com transformação no eixo X.

.recurso-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient);
transform: scaleX(0);
transition: transform 0.3s ease;


}

.recurso-card:hover::before {
transform: scaleX(1);
}

O conceito aqui é simples: scaleX(0) praticamente esconde a linha porque sua largura visual é reduzida no eixo horizontal. Quando o mouse passa pelo card, ela vai para scaleX(1) e aparece.

É um bom exemplo de como podemos conseguir efeitos interessantes sem precisar adicionar uma biblioteca inteira ao projeto.

7. Fazendo o menu funcionar no celular

Depois da parte visual, chegou a hora de adicionar comportamento com JavaScript.

O menu mobile é um bom exemplo porque não precisamos de uma solução complicada. Primeiro recuperamos os elementos do HTML.

const menuToggle = document.getElementById('menuToggle');


const navLinks = document.getElementById('navLinks');

Depois, adicionamos um evento de clique ao botão.

menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
navLinks.classList.toggle('active');


});

O ponto principal aqui é o classList.toggle(). Em vez de escrever uma lógica enorme para verificar se o menu está aberto ou fechado, podemos simplesmente adicionar a classe quando ela não existe e removê-la quando já existe.

O CSS fica responsável por determinar visualmente o que acontece quando essas classes aparecem.

Também fiz o menu fechar automaticamente quando o usuário clica em um dos links. Isso evita que o menu continue aberto depois que a pessoa já escolheu uma seção da página.

8. Alterando o header durante o scroll

Outra interação que coloquei foi uma mudança no comportamento do cabeçalho quando o visitante começa a rolar a página.

Para detectar isso, utilizei o evento scroll do navegador.

window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;

if (currentScroll > 50) {
    header.classList.add('scrolled');
} else {
    header.classList.remove('scrolled');
}


});

A lógica é simples: enquanto o usuário está no início da página, o header permanece em seu estado original. Depois que o scroll passa de 50 pixels, adiciono a classe scrolled.

O CSS pode então utilizar essa classe para modificar sombra, fundo ou outras características do cabeçalho.

Esse é um bom exemplo de divisão de responsabilidades: JavaScript detecta o comportamento e CSS decide como o elemento deve ficar visualmente.

Se você também costuma usar o celular durante bastante tempo do dia, aqui está mais uma opção que pode valer uma olhada.

Clique na imagem para acessar a oferta e conferir as informações atuais na Shopee.

9. Fazendo os elementos aparecerem durante o scroll

Uma das partes mais interessantes do JavaScript utilizado no projeto foi o IntersectionObserver.

Ele permite observar elementos da página e descobrir quando eles entram na área visível do navegador.

Primeiro, seleciono todos os elementos que receberam a classe animate-on-scroll.

const animateElements =
document.querySelectorAll('.animate-on-scroll');

Depois crio o observador:

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
    if (entry.isIntersecting) {
        entry.target.classList.add('visible');
    }
});


}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});

Quando o elemento passa a estar visível, adiciono a classe visible. O CSS é quem define a animação associada a essa classe.

Isso cria um efeito bastante comum em sites modernos: os blocos não aparecem todos de uma vez. Conforme o visitante percorre a página, os elementos vão surgindo.

O mais interessante é que não precisei ficar verificando a posição de cada elemento manualmente durante todo o scroll.

10. Criando o efeito de rolagem suave

Também quis evitar aquela sensação de que o navegador simplesmente pula de uma seção para outra quando o usuário clica no menu.

Para isso, o projeto identifica links que começam com # e intercepta o clique.

window.scrollTo({
top: offsetTop,
behavior: 'smooth'


});

O detalhe importante é behavior: 'smooth'. Ele faz com que a navegação até a seção aconteça gradualmente em vez de ocorrer como um salto instantâneo.

Também considerei um deslocamento de 80 pixels para evitar que o conteúdo fique escondido atrás do cabeçalho.

11. Criando contadores animados com JavaScript

Essa foi uma das partes em que mais vale a pena parar para entender o código.

A landing page possui números na área de estatísticas. Em vez de simplesmente mostrar o valor final, criei uma função que começa em zero e vai aumentando o número até chegar ao objetivo.

A função recebe o elemento, o valor final e a duração da animação:

function animateCounter(element, target, duration = 2000) {
const start = 0;
const startTime = performance.now();

function updateCounter(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    const ease = 1 - Math.pow(1 - progress, 3);
    const current = start + (target - start) * ease;

    // Atualização do valor...

    if (progress < 1) {
        requestAnimationFrame(updateCounter);
    }
}

requestAnimationFrame(updateCounter);


}

O performance.now() fornece uma referência de tempo de alta precisão. Com ela, consigo calcular quanto tempo já passou desde o início da animação.

Depois calculo o progresso dividindo o tempo decorrido pela duração desejada. O Math.min() impede que o valor ultrapasse 1.

Existe ainda um cálculo chamado de easing:

const ease = 1 - Math.pow(1 - progress, 3);

Ele faz com que a animação não tenha uma velocidade completamente linear. O movimento começa e termina de maneira mais suave, deixando o contador visualmente mais agradável.

Por fim, o requestAnimationFrame() solicita que o navegador execute a próxima atualização da animação no momento apropriado para renderização.

O resultado é aquele efeito em que os números parecem estar sendo contados até chegar ao valor final.

Se você chegou até aqui porque gosta de tecnologia e também passa bastante tempo no smartphone, confira esta outra opção.

Clique na imagem para consultar o produto e verificar preço, avaliações e condições atuais.

12. Tornando a página responsiva

Uma das partes que não pode ser deixada para depois é a responsividade.

A página precisa funcionar em uma tela grande, mas também precisa se adaptar quando o visitante estiver usando um notebook menor, tablet ou smartphone.

Para isso, utilizei media queries no CSS. Em determinados pontos de largura, a estrutura muda.

@media (max-width: 768px) {
.hero-grid {
    grid-template-columns: 1fr;
}


}

No desktop, o Hero possui duas colunas. Quando a tela fica menor, essas colunas deixam de ficar lado a lado e passam para uma única coluna.

O mesmo conceito é aplicado a outras áreas da página. Grids são reorganizados, botões podem ocupar mais espaço e o menu de navegação muda de comportamento.

Essa parte foi especialmente importante durante os testes porque uma coisa é olhar para o código e outra é realmente abrir a página em diferentes tamanhos de tela.

13. O que eu aprendi construindo esse projeto

Foi justamente durante a construção que percebi como pequenos detalhes podem mudar bastante o resultado final.

No começo, é tentador colocar vários efeitos porque eles parecem interessantes isoladamente. Porém, quando tudo começa a se movimentar ao mesmo tempo, a interface pode ficar visualmente cansativa.

Por isso, precisei encontrar um equilíbrio entre animação e simplicidade.

Também ficou evidente para mim a importância de separar as responsabilidades. HTML organiza o conteúdo, CSS cuida principalmente da apresentação e JavaScript entra quando precisamos de comportamento e interação.

Outra coisa que considero importante é testar enquanto desenvolvemos. Foi assim que consegui perceber detalhes de responsividade e ajustar alguns comportamentos que não eram tão evidentes olhando apenas para o código.

14. Baixe o projeto completo

Se você quiser estudar a landing page sem precisar reconstruir tudo do zero, deixei o projeto completo disponível para download.

Minha sugestão é abrir o arquivo primeiro e navegar pela página. Depois, comece a alterar pequenas coisas: troque as cores, modifique os textos, remova uma animação, crie um novo card ou altere o comportamento do menu.

É fazendo esse tipo de alteração que o código deixa de ser apenas um exemplo pronto e começa a realmente ensinar alguma coisa.

Conclusão

Criar esta landing page foi uma forma prática de testar o que é possível fazer apenas com HTML, CSS e JavaScript.

O resultado não depende de um framework para funcionar. A estrutura HTML organiza o conteúdo, o CSS cria a identidade visual e a responsividade, enquanto o JavaScript adiciona comportamentos como menu mobile, navegação suave, animações durante o scroll e contadores.

E essa é justamente a parte que considero mais interessante no projeto: depois que você entende como cada componente funciona, fica muito mais fácil deixar de depender de templates prontos.

Você pode pegar a mesma ideia e transformar completamente o resultado. Trocar a identidade visual, mudar as seções, criar novos componentes, conectar um formulário ou adaptar a página para um produto real.

Este artigo pode conter links de afiliados. Caso você realize uma compra através de um desses links, o NerdCult poderá receber uma comissão, sem custo adicional para você.