Criar Landing Page com HTML, CSS e JavaScript: Tutorial para Iniciantes

Aprenda a criar landing page com todos os códigos completos neste tutorial onde você vai criar um aplicativo fictício chamado Focus App.

Vamos estruturar o esqueleto da página usando HTML, com um cabeçalho, seções de conteúdo e rodapé, tudo de forma clara e acessível. Na segunda parte, adicionaremos estilos e a parte visual com CSS. Ao final, na terceira parte, você terá uma página funcional, com elementos de interatividade JavaScript.

Uma landing page completa nasce em três camadas: a estrutura semântica no HTML (header, hero, benefícios, depoimentos, download e footer), o visual no CSS com variáveis, Box Model e Google Fonts, e a interatividade no JavaScript, com modo claro/escuro e pop-up de formulário. No tutorial, o projeto Focus App traz os códigos completos.

Para fazer o download dos arquivos utilizados no tutorial, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Parte 1: HTML

O que é HTML e para que serve?

HTML (HyperText Markup Language) é a linguagem de marcação que forma o esqueleto de todas as páginas web. Ele define a estrutura do conteúdo, como títulos, parágrafos, imagens e links, permitindo que o navegador entenda como exibir a página.

• Estrutura básica: Organiza o conteúdo em tags como <html>, <head> e <body>.
• Semântica: Usa elementos como <header> e <section> para dar significado ao conteúdo.
• Base para estilização: Prepara a página para receber estilos (CSS) e interatividade (JavaScript).

Como configurar o ambiente para desenvolver em HTML?

Antes de começar, você precisa de um editor de código, como o Visual Studio Code (VS Code), e algumas extensões úteis.

• Instale o VS Code: Baixe e configure o editor no site oficial.
• Extensões recomendadas:
  • Live Server: Permite visualizar a página no navegador em tempo real.
  • Auto Rename Tag: Facilita a edição de tags HTML.
• Organize os arquivos: Crie uma pasta para o projeto com uma subpasta assets para imagens (como logos e ícones).

Se precisar de ajuda, aqui temos um guia passo a passo para a instalação do VS Code.

Como criar a estrutura básica de uma página HTML?

Toda página HTML começa com uma estrutura padrão. No VS Code, digite ! e pressione Tab para gerar o código inicial.

No <head>, adicione:

• <meta charset="UTF-8">: Define a codificação de caracteres.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Garante responsividade.
• <title>: Define o título da página, como "Focus App - Aumente sua Produtividade".

No <body>, você construirá o conteúdo, como o cabeçalho, seções e rodapé.

Como criar o cabeçalho (Header) da página?

O cabeçalho (<header>) contém a logo, links de navegação e, neste caso, um ícone para alternar entre modo claro e escuro.

• Logo: Use a tag <img> para inserir um arquivo SVG (ex.: assets/logo.svg) com texto alternativo (alt).
• Links de navegação: Use a tag <a> com o atributo href apontando para IDs de seções (ex.: #beneficios).
• Ícone de modo: Outra tag <img> para o ícone de sol (ex.: assets/icone-sol.svg).

Exemplo de código para o header

<header>
  <img src="assets/logo.svg" alt="Logo do Focus App">
  <a href="#beneficios">Benefícios</a>
  <a href="#depoimentos">Depoimentos</a>
  <a href="#download">Download</a>
  <img src="assets/icone-sol.svg" alt="Ícone de Sol">
</header>

O que é a primeira dobra e como criá-la?

A primeira dobra é a parte da página visível assim que ela carrega, essencial para captar a atenção do usuário. Para o Focus App, ela inclui um título principal, um texto descritivo, um botão de ação (CTA) e uma ilustração.

• Título principal (<h1>): Use apenas um por página, como "Focus App: Foque no que Importa".
• Parágrafo (<p>): Texto descritivo, como "Domine sua atenção com o app número 1 em produtividade pessoal".
• Botão (<button>): Um CTA, como "Quero Começar".
• Ilustração: Uma imagem SVG (ex.: assets/ilustracao-hero.svg) com width="400" para ajustar o tamanho.

Exemplo de código para a seção Hero

<section>
  <h1>Focus App: Foque no que Importa</h1>
  <p>Domine sua atenção com o app número 1 em produtividade pessoal.</p>
  <button>Quero Começar</button>
  <img src="assets/ilustracao-hero.svg" alt="Ilustração Hero" width="400">
</section>

Como estruturar a seção de Benefícios?

A seção de benefícios destaca as vantagens do Focus App, usando um subtítulo e parágrafos dentro de divisões (<div>).

• Subtítulo (<h2>): Ex.: "Diferenciais do Focus App".
• Parágrafos: Liste benefícios como "Sessões de foco personalizadas" e "Acompanhamento do progresso".
• Divisões: Use <div> para agrupar cada benefício, facilitando a estilização futura.

Exemplo de código para Benefícios

<section id="beneficios">
  <h2>Diferenciais do Focus App</h2>
  <div>
    <p>Sessões de foco personalizadas</p>
  </div>
  <div>
    <p>Acompanhamento do progresso</p>
  </div>
  <div>
    <p>Notificações inteligentes</p>
  </div>
</section>

Como criar a seção de Depoimentos?

A seção de depoimentos usa a tag <figure> para associar imagens a legendas, dando um toque profissional.

• Subtítulo (<h2>): Ex.: "O que dizem os usuários".
• Figura (<figure>): Contém uma imagem (<img>) e uma legenda (<figcaption>).
• Exemplo: Depoimentos fictícios com imagens (ex.: assets/depoimento1.jpg).

Exemplo de código para Depoimentos

<section id="depoimentos">
  <h2>O que dizem os usuários</h2>
  <figure>
    <img src="assets/depoimento1.jpg" alt="Depoimento da Ana">
    <figcaption>Depoimento da Ana</figcaption>
  </figure>
  <figure>
    <img src="assets/depoimento2.jpg" alt="Depoimento do João">
    <figcaption>Depoimento do João</figcaption>
  </figure>
</section>

Como construir a seção de Download?

A seção de download incentiva o usuário a baixar o app, com um título, texto e um botão CTA.

• Subtítulo (<h2>): Ex.: "Pronto para focar de verdade?".
• Parágrafo: Texto motivador, como "Baixe agora e transforme sua produtividade".
• Botão: Um CTA, como "Download Gratuito".

Exemplo de código para Download

<section id="download">
  <h2>Pronto para focar de verdade?</h2>
  <p>Baixe agora e transforme sua produtividade.</p>
  <button>Download Gratuito</button>
</section>

Como adicionar o rodapé (Footer)?

O rodapé (<footer>) finaliza a página com informações simples, como direitos autorais.

• Parágrafo: Ex.: "Focus App © 2025. Todos os direitos reservados.".

Exemplo de código para Footer

<footer>
  <p>Focus App © 2025. Todos os direitos reservados.</p>
</footer>

Como usar IDs para navegação entre seções?

IDs são atributos que identificam elementos para navegação. Cada seção (Benefícios, Depoimentos, Download) recebe um ID único, e os links no cabeçalho apontam para esses IDs usando #.

Conclusão: O que vem a seguir?

Com este tutorial, você entendeu como funciona uma landing page e sua estrutura, como cabeçalho fixo, seções de conteúdo e navegação funcional, entre outros.

Faça download do código completo no início do artigo e edite como quiser para pôr o conhecimento em prática!

Nosso próximo passo será estilizar a página com CSS para deixá-la visualmente atraente.

Siga lendo para estas próximas etapas!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: A primeira das três aulas monta só o esqueleto: HTML estrutura, CSS estiliza e JavaScript dá interatividade. O caminho é criar o index.html, gerar o esqueleto pelo atalho do editor e ir montando cabeçalho, seções e rodapé com as tags semânticas. As âncoras do menu só passam a funcionar quando cada seção recebe um id.

Neste vídeo (31 min):

• 2:00 - Baixar os arquivos da aula e copiar a pasta com as imagens e os ícones.
• 3:00 - O que o HTML faz e o que fica para o CSS: um é estrutura, o outro é estilo.
• 4:00 - Criar o index.html e gerar o esqueleto com o atalho de exclamação e Tab.
• 5:00 - O que cada parte do esqueleto significa, incluindo o atributo de idioma da página.
• 6:00 - A diferença entre <head> e <body>: configuração e conteúdo.
• 6:40 - A meta de viewport, sem a qual não existe layout responsivo.
• 7:00 - A tag de título e como abrir a página no navegador pelo Live Server.
• 8:00 - Começar o corpo pelo <header>, que é um elemento semântico.
• 10:00 - A tag de imagem e os atributos de caminho e de texto alternativo.
• 12:00 - A âncora e o atributo href apontando para o id de uma seção.
• 14:00 - A tag <section> e a hierarquia de títulos, com um H1 só por página.
• 17:00 - Os parágrafos e o botão que serve de chamada para ação.
• 22:00 - A <div> como divisão sem significado, e quando ela é desnecessária.
• 27:00 - Os ids nas seções, que é o que faz o menu de âncoras finalmente funcionar.

Trechos do vídeo:

• Tag semântica não muda a aparência, muda o significado: o navegador entende que aquele trecho é cabeçalho, seção ou rodapé, e isso não depende de nenhum estilo.
• O <figure> existe para amarrar a legenda à imagem. Com a imagem solta e o texto ao lado, essa relação não fica registrada em lugar nenhum.

Parte 2: CSS

Bem-vindos à segunda parte do nosso curso básico de desenvolvimento web!

Na aula anterior criamos a estrutura HTML da landing page do Focus App.

Agora, vamos usar CSS para estilizar a página, deixando ela visualmente mais atraente e funcional.

Este tutorial é voltado para iniciantes, assumindo que você nunca trabalhou com CSS. Vamos do zero, com explicações claras e exemplos práticos!

O que é CSS e para que serve?

CSS (Cascading Style Sheets) é a linguagem de estilização usada para definir a aparência de páginas web. Enquanto o HTML organiza o conteúdo, o CSS controla cores, fontes, espaçamentos e layouts.

• Estilização: Define cores, tamanhos de fonte e fundos.
• Layout: Organiza elementos com flexbox, grid ou outros métodos.
• Responsividade: Adapta a página para diferentes dispositivos.
• Cascata: Permite herança e prioridade de estilos (especificidade).

Como configurar o CSS no projeto?

Para começar, criaremos um arquivo CSS e vincularemos ele ao HTML.

1. Crie o arquivo CSS: No VS Code, clique com o botão direito na pasta do projeto, selecione "New File" e nomeie como style.css.9
2. Vincule ao HTML: No index.html, dentro do <head>, adicione:

<link rel="stylesheet" href="style.css">

3. Teste inicial: No style.css, adicione um estilo simples para verificar a conexão:

body {
  background-color: #f0f0f0;
}

Abra o index.html com a extensão Live Server e veja se o fundo da página mudou para um cinza claro.

Entendendo o Box Model

O Box Model é o conceito central do CSS, representando cada elemento como uma caixa com:

• Conteúdo: O texto ou imagem dentro do elemento.
• Padding: Espaçamento interno, entre o conteúdo e a borda.
• Border: Borda ao redor do padding.
• Margin: Espaçamento externo, fora da borda.

Por padrão, o navegador adiciona margens e paddings aos elementos, o que pode atrapalhar o layout. Vamos resetá-los.

Exemplo de código: Resetando o CSS

/* Seletor universal para resetar margens e paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• box-sizing: border-box: Faz com que a largura e altura incluam padding e borda, evitando surpresas no tamanho dos elementos.

O que é o Seletor Universal?

O seletor universal (*) no CSS é como um superpoder: ele seleciona todos os elementos de uma página HTML, independentemente de sua tag, classe ou ID. Pense nele como uma varinha mágica que aplica estilos a tudo o que está no documento, desde <div>, <p>, <h1> até <span> e qualquer outra tag. A sintaxe é simples:

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

Neste exemplo, todos os elementos da página terão margem e padding zerados, além de usar o modelo de dimensionamento border-box. Simples, mas poderoso!

Por que isso é útil?

Imagine que você está começando um projeto e quer garantir que todos os elementos tenham um estilo base consistente, eliminando as diferenças padrão dos navegadores (como margens ou paddings variados). O seletor universal é perfeito para isso! Ele é um atalho para aplicar regras gerais sem precisar listar cada tag individualmente.

Casos Práticos de Uso

1. Reset CSS

Um dos usos mais comuns do seletor universal é o reset CSS, que zera estilos padrão dos navegadores para criar uma base neutra. Por exemplo:

* {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

Isso garante que elementos como <h1>, <p> ou <ul> não herdem margens ou tamanhos de fonte padrão, permitindo que você defina seus próprios estilos sem surpresas.

2. Estilização Global

Quer aplicar uma fonte ou cor padrão a todos os elementos? O seletor universal facilita:

* {

font-family: 'Arial', sans-serif;

color: #333;

}

Aqui, todos os elementos da página usarão a fonte Arial e a cor de texto cinza escura, a menos que você sobrescreva essas propriedades em seletores mais específicos.

3. Debugging Rápido

Está com um problema de layout e não sabe de onde vem? O seletor universal pode ajudar a identificar elementos problemáticos:

* {

outline: 1px solid red;

}

Isso adiciona uma borda vermelha a todos os elementos, permitindo que você visualize a estrutura da página e identifique problemas de espaçamento ou alinhamento.

Aplicando fontes personalizadas com Google Fonts

Vamos usar a fonte Inter do Google Fonts para uma aparência moderna.

1. Acesse o Google Fonts: Vá ao site do Google Fonts, pesquise por "Inter" e copie o código de incorporação.
2. Adicione ao HTML: No <head> do index.html, adicione:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

3. Aplique no CSS: No style.css, defina a fonte para o <body>:

body {
  font-family: 'Inter', sans-serif;
  color: var(--texto);
  background-color: var(--fundo);
}

Definindo variáveis CSS

Para facilitar a manutenção, usaremos variáveis CSS no :root:

:root {
  --texto: #333333;
  --fundo: #f8f8f8;
  --fundo-claro: #ffffff;
  --verde: #4CAF50;
  --verde-escuro: #388E3C;
  --border-radius: 10px;
}

Essas variáveis serão usadas em toda a página, permitindo alterações globais em um único lugar.

Estilizando o cabeçalho (Header)

O cabeçalho contém a logo, links de navegação e o ícone de modo claro/escuro. Vamos usar flexbox para organizar os elementos.

Passo 1: Estrutura HTML do cabeçalho

No index.html, agrupamos os links e o ícone em uma <div>:

<header>
  <img src="assets/logo.svg" alt="Logo do Focus App">
  <div class="header-textos">
    <a href="#beneficios">Benefícios</a>
    <a href="#depoimentos">Depoimentos</a>
    <a href="#download">Download</a>
    <img src="assets/icone-sol.svg" alt="Ícone de Sol">
  </div>
</header>

Passo 2: Estilização com CSS

No style.css, adicione:

header {
  background-color: var(--texto);
  color: var(--fundo-claro);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-textos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-textos a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

• display: flex: Organiza os elementos em linha.
• justify-content: space-between: Coloca a logo à esquerda e a <div> à direita.
• gap: 20px: Adiciona espaçamento entre os links e o ícone.
• color: inherit: Faz os links herdarem a cor do elemento pai (header).

Estilizando a seção Hero

A seção Hero é a primeira dobra, com título, texto, botão e ilustração. Vamos usar flexbox para dividi-la em dois blocos.

Passo 1: Estrutura HTML

No index.html, agrupamos o texto e o botão em uma <div>:

<section>
  <div class="container">
    <div class="hero-textos">
      <h1>Focus App: Foque no que Importa</h1>
      <p>Domine sua atenção com o app número 1 em produtividade pessoal.</p>
      <button>Quero Começar</button>
    </div>
    <img src="assets/ilustracao-hero.svg" alt="Ilustração Hero" width="400">
  </div>
</section>

Passo 2: Estilização com CSS

No style.css, adicione:

section {
  padding: 60px 30px;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.hero-textos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.hero-textos button {
  background-color: var(--verde);
  color: var(--fundo-claro);
  padding: 12px 20px;
  border: none;
  border-radius: var(--border-radius);
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hero-textos button:hover {
  background-color: var(--verde-escuro);
}

• .container: Limita a largura máxima e centraliza o conteúdo.
• flex-direction: column: Organiza o texto e botão verticalmente.
• transition: Suaviza a mudança de cor no hover do botão.

Estilizando a seção de Benefícios

A seção de benefícios destaca os diferenciais do app com cards.

Passo 1: Estrutura HTML

No index.html, agrupamos os cards:

<section id="beneficios">
  <div class="container">
    <h2>Diferenciais do Focus App</h2>
    <div class="cards">
      <div class="card"><p>Sessões de foco personalizadas</p></div>
      <div class="card"><p>Acompanhamento do progresso</p></div>
      <div class="card"><p>Notificações inteligentes</p></div>
    </div>
  </div>
</section>

Passo 2: Estilização com CSS

No style.css, adicione:

#beneficios {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.card {
  background-color: var(--texto);
  color: var(--fundo);
  padding: 16px 28px;
  border-radius: var(--border-radius);
}

• gap: 32px: Aumenta o espaçamento entre o título e os cards.
• justify-content: space-between: Distribui os cards horizontalmente.

Estilizando a seção de Depoimentos

A seção de depoimentos usa <figure> para imagens e legendas.

Passo 1: Estrutura HTML

No index.html, agrupamos os depoimentos:

<section id="depoimentos">
  <div class="container">
    <h2>O que dizem os usuários</h2>
    <div class="figures">
      <figure>
        <img src="assets/depoimento1.jpg" alt="Depoimento da Ana">
        <figcaption>Depoimento da Ana</figcaption>
      </figure>
      <figure>
        <img src="assets/depoimento2.jpg" alt="Depoimento do João">
        <figcaption>Depoimento do João</figcaption>
      </figure>
    </div>
  </div>
</section>

Passo 2: Estilização com CSS

No style.css, adicione:

#depoimentos {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}

.figures {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: 300px;
}

figure img {
  border-radius: 50%;
}

• border-radius: 50%: Torna as imagens circulares, desde que sejam quadradas.
• max-width: 300px: Limita a largura dos depoimentos.

Estilizando a seção de Download

A seção de download incentiva o usuário a baixar o app.

Passo 1: Estrutura HTML

No index.html:

<section id="download">
  <div class="container">
    <h2>Pronto para focar de verdade?</h2>
    <p>Baixe agora e transforme sua produtividade.</p>
    <button>Download Gratuito</button>
  </div>
</section>

Passo 2: Estilização com CSS

No style.css, adicione:

#download, #beneficios {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

#download .container {
  text-align: center;
}

#download button {
  background-color: var(--verde);
  color: var(--fundo-claro);
  padding: 12px 20px;
  border: none;
  border-radius: var(--border-radius);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#download button:hover {
  background-color: var(--verde-escuro);
}

• Seletores múltiplos: #download, #beneficios aplica o mesmo fundo às duas seções.
• text-align: center: Centraliza o texto na seção de download.

Estilizando o rodapé (Footer)

O rodapé finaliza a página com informações simples.

Passo 1: Estrutura HTML

No index.html:

<footer>
  <p>Focus App © 2025. Todos os direitos reservados.</p>
</footer>

Passo 2: Estilização com CSS

No style.css, adicione:

header, footer {
  padding: 30px;
}

footer {
  text-align: center;
  font-size: 14px;
}

• Seletores múltiplos: header, footer aplica o mesmo padding.

Formas de escrever CSS

Existem três formas de aplicar CSS:

1. Inline: No elemento HTML com o atributo style (menos recomendado devido à baixa manutenção).

<p style="color: #333333;">Texto</p>

2. Interno: Dentro de uma tag <style> no <head> ou <body>.

<style>
  p { color: #333333; }
</style>

3. Externo: Em um arquivo .css vinculado com <link> (melhor prática, usada neste tutorial).

Especificidade

A especificidade determina qual regra CSS prevalece:

• Inline > ID > Classe > Tag
• Exemplo: Um estilo inline (style="...") sobrescreve uma regra em style.css.

Conclusão: O que aprendemos e próximos passos

Nesta aula, estilizamos a landing page do Focus App com CSS, aprendendo:

• Box Model: Como margin, padding e border afetam os elementos.
• Flexbox: Para layouts responsivos e alinhamento.
• Variáveis CSS: Para manutenção eficiente.
• Especificidade: Como o CSS prioriza regras.

O próximo passo é adicionar interatividade com JavaScript, como o modo claro escuro e um pop-up.

Siga lendo o tutorial para finalizar a página do nosso app!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Parte 3: JavaScript

Bem-vindos à terceira e última parte do nosso curso básico de desenvolvimento web!

Nas aulas anteriores criamos a estrutura HTML e estilizamos a landing page do Focus App com CSS. Agora vamos adicionar interatividade a ela usando JavaScript, incluindo o modo claro/escuro e um pop-up interativo.

Este tutorial é voltado para iniciantes, assumindo que você nunca trabalhou com JavaScript. Vamos do zero, com exemplos práticos e explicações claras.

O que é JavaScript e para que serve?

JavaScript é a linguagem de programação que adiciona interatividade às páginas web. Enquanto o HTML define a estrutura e o CSS cuida da aparência, o JavaScript permite ações dinâmicas, como alternar temas, abrir pop-ups e responder a cliques.

• Interatividade: Responde a ações do usuário, como cliques e rolagem.
• Manipulação do DOM: Altera elementos HTML e CSS em tempo real.
• Lógica: Adiciona funcionalidades, como validações e animações.

Como configurar o JavaScript no projeto?

Para começar, precisamos vincular um arquivo JavaScript ao nosso HTML e configurar o ambiente.

1. Crie o arquivo JavaScript: No VS Code, clique com o botão direito na pasta do projeto, selecione "New File" e nomeie como script.js.
2. Vincule ao HTML: No arquivo index.html, adicione a tag <script> dentro do <body>, antes do fechamento </body>:

<script src="script.js"></script>

3. Teste inicial: No script.js, adicione um teste simples para garantir que o JavaScript está funcionando:

console.log("JavaScript carregado!");

Abra o index.html com a extensão Live Server, pressione F12 para abrir o console do navegador e verifique se a mensagem aparece.

Como implementar o modo claro/escuro?

O modo claro/escuro alterna as cores da página quando o usuário clica no ícone de sol/lua no cabeçalho. Vamos usar JavaScript para detectar o clique e alterar as variáveis CSS.

Passo 1: Configurar variáveis CSS

No arquivo style.css, já temos variáveis no :root. Vamos garantir que elas suportem o modo claro e escuro:

:root {
  --texto: #333333;
  --fundo: #f8f8f8;
  --fundo-claro: #ffffff;
  --verde: #4CAF50;
  --verde-escuro: #388E3C;
  --fundo-escuro: #1a1a1a;
  --texto-escuro: #ffffff;
}

Passo 2: Adicionar o evento de clique

No script.js, selecionamos o ícone do modo (sol/lua) e alternamos a classe dark-mode no elemento <body>:

const iconeModo = document.querySelector('header img[alt="Ícone de Sol"]');
const body = document.body;

iconeModo.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  // Alterna o ícone entre sol e lua
  iconeModo.src = body.classList.contains('dark-mode') 
    ? 'assets/icone-lua.svg' 
    : 'assets/icone-sol.svg';
});

• document.querySelector: Seleciona o elemento <img> com o atributo alt="Ícone de Sol".
• addEventListener: Escuta o evento de clique.
• classList.toggle: Adiciona ou remove a classe dark-mode do <body>.

Passo 3: Estilizar o modo escuro

No style.css, adicionamos estilos para quando a classe dark-mode estiver ativa:

.dark-mode {
  --texto: var(--texto-escuro);
  --fundo: var(--fundo-escuro);
}

.dark-mode header {
  background-color: #222222;
}

.dark-mode .hero-textos,
.dark-mode #beneficios,
.dark-mode #download {
  background-color: #2a2a2a;
}

.dark-mode .card {
  background-color: #333333;
}

Essas regras alteram as cores quando o modo escuro é ativado, usando as variáveis definidas.

Como criar um pop-up interativo?

O pop-up será exibido quando o usuário clicar no botão "Quero Começar" na seção Hero, mostrando um formulário simples para coletar e-mail.

Passo 1: Adicionar o HTML do pop-up

No index.html, dentro do <body>, antes da tag <script>, adicione a estrutura do pop-up:

<div class="popup" id="popup">
  <div class="popup-content">
    <h3>Cadastre-se no Focus App</h3>
    <p>Insira seu e-mail para começar sua jornada de produtividade!</p>
    <input type="email" placeholder="Seu e-mail" id="email-input">
    <button id="submit-email">Enviar</button>
    <button id="close-popup">Fechar</button>
  </div>
</div>

• .popup: Contêiner do pop-up, inicialmente invisível.
• .popup-content: Centraliza o conteúdo interno.
• input: Campo para o e-mail.
• Botões: Um para enviar e outro para fechar o pop-up.

Passo 2: Estilizar o pop-up com CSS

No style.css, adicione os estilos para o pop-up:

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.popup.active {
  display: flex;
}

.popup-content {
  background-color: var(--fundo-claro);
  padding: 20px;
  border-radius: var(--border-radius);
  max-width: 400px;
  text-align: center;
}

.popup-content h3 {
  margin-bottom: 10px;
}

.popup-content input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--texto);
  border-radius: var(--border-radius);
}

.popup-content button {
  background-color: var(--verde);
  color: var(--fundo-claro);
  padding: 10px 20px;
  border: none;
  border-radius: var(--border-radius);
  margin: 5px;
  cursor: pointer;
}

.popup-content button:hover {
  background-color: var(--verde-escuro);
  transition: background-color 0.3s ease;
}

.dark-mode .popup-content {
  background-color: #333333;
  color: var(--texto-escuro);
}

• display: none: Esconde o pop-up por padrão.
• .active: Exibe o pop-up quando a classe é adicionada.
• position: fixed: Fixa o pop-up na tela, com fundo semitransparente.
• transition: Suaviza a mudança de cor no hover dos botões.

Passo 3: Adicionar interatividade com JavaScript

No script.js, adicione o código para abrir e fechar o pop-up e processar o formulário:

const botaoQueroComecar = document.querySelector('.hero-textos button');
const popup = document.querySelector('#popup');
const botaoFechar = document.querySelector('#close-popup');
const botaoEnviar = document.querySelector('#submit-email');
const emailInput = document.querySelector('#email-input');

botaoQueroComecar.addEventListener('click', () => {
  popup.classList.add('active');
});

botaoFechar.addEventListener('click', () => {
  popup.classList.remove('active');
});

botaoEnviar.addEventListener('click', () => {
  const email = emailInput.value;
  if (email.includes('@') && email.includes('.')) {
    alert('E-mail cadastrado com sucesso: ' + email);
    popup.classList.remove('active');
    emailInput.value = '';
  } else {
    alert('Por favor, insira um e-mail válido.');
  }
});

• Seleção de elementos: Usa querySelector para acessar o botão, pop-up, input e botões de ação.
• Abertura do pop-up: Adiciona a classe active ao clicar em "Quero Começar".
• Fechamento do pop-up: Remove a classe active ao clicar em "Fechar".
• Validação de e-mail: Verifica se o e-mail contém @ e . antes de exibir uma mensagem de sucesso.

Como melhorar a validação do formulário com Pydantic?

Se você acompanhou nosso tutorial anterior sobre Pydantic, pode integrar validação de e-mail no backend. Embora este tutorial foque no frontend, aqui está um exemplo de como o Pydantic validaria o e-mail no servidor:

from pydantic import BaseModel, EmailStr

class Cadastro(BaseModel):
    email: EmailStr

# Exemplo de uso
try:
    cadastro = Cadastro(email="joao@email.com")
    print("E-mail válido:", cadastro.email)
except ValueError as e:
    print("Erro de validação:", e)

Este código usa o EmailStr do Pydantic para garantir que o e-mail tenha um formato válido. Você pode conectar o formulário a uma API (como FastAPI) para processar o e-mail no servidor.

O que é DOM no JavaScript?

O DOM (Document Object Model, ou Modelo de Objeto de Documento) é uma interface que representa a estrutura de um documento web, como HTML, XML ou SVG, em forma de uma árvore de elementos. Ele organiza os elementos da página (como botões, textos e imagens) de maneira que o JavaScript possa acessá-los e manipulá-los.

Para que serve o DOM?

O DOM permite que desenvolvedores interajam dinamicamente com páginas web. Com ele, é possível:

• Selecionar elementos: Acessar elementos específicos (ex.: um botão com ID btn-text) usando métodos como getElementById ou querySelector.
• Modificar conteúdo: Alterar textos, cores, estilos ou até criar e remover elementos.
• Adicionar interatividade: Associar eventos, como cliques, para executar ações (ex.: mudar o texto de uma caixa ao clicar em um botão).

Como funciona na prática?

1. Visualizando o DOM: No navegador, pressione F12 e vá para a aba "Elements" para ver a árvore de elementos do documento HTML.
2. Manipulando com JavaScript:
   • Seleção: Armazene elementos em variáveis, como const botao = document.getElementById('btn-text').
   • Alteração: Modifique propriedades, como botao.textContent = 'Novo texto' ou botao.style.backgroundColor = '#ff0000'.
   • Eventos: Adicione interatividade, como botao.addEventListener('click', () => { elemento.style.display = 'none'; }) para esconder um elemento ao clicar.

Por que é importante?

O DOM é essencial para o desenvolvimento web, pois permite criar páginas dinâmicas e interativas com poucas linhas de código. Ele conecta o HTML com o JavaScript, possibilitando alterações em tempo real sem recarregar a página.

Dica: Pratique manipulando o DOM no console do navegador ou em um arquivo JavaScript linkado ao HTML (usando <script src="script.js" defer>). Explore métodos como querySelector e addEventListener para dominar a interação com elementos!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Conclusão: O que aprendemos e próximos passos

Nesta aula, adicionamos interatividade à landing page do Focus App com JavaScript, implementando:

• Modo claro/escuro: Alternância de temas com variáveis CSS e manipulação do DOM.
• Pop-up interativo: Um formulário funcional com validação básica de e-mail.
• Integração com Pydantic: Uma sugestão para validação robusta no backend.

Se você chegou até aqui, parabéns! Você agora sabe fundamentos valiosos das três tecnologias fundamentais para desenvolvimento web!

E se quiser continuar seu aprendizado, um bom próximo passo é explorar frameworks como React, para criar interfaces mais dinâmicas, ou aprofundar-se em backend, com FastAPI e Pydantic.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Conteúdo extra: Adicionando Segurança Básica com Login

Neste tutorial, vamos adicionar uma camada de segurança à landing page do Focus App, criada nos passos anteriores, implementando uma tela de login que protege o acesso ao conteúdo principal.

Usaremos React com React Router DOM no front-end para gerenciar rotas e exibir a tela de login ou a página principal com base na autenticação. No back-end, usaremos Node.js com Express para criar um endpoint de login que valida credenciais. As credenciais serão mocadas em variáveis de ambiente para fins didáticos, mas discutiremos como usar um banco de dados para uma solução mais robusta.

Pré-requisitos

• Ambiente configurado: Visual Studio Code com extensões como ES7+ React/Redux e Live Server.
• Dependências instaladas:
  • Front-end: Node.js, React, React Router DOM.
  • Back-end: Node.js, Express, dotenv.
• Estrutura do projeto: Baseado no tutorial anterior, com a landing page do Focus App em HTML, CSS e JavaScript.

Estrutura do Projeto

Organize o projeto com duas pastas principais:

• frontend/: Contém o código React da landing page e da tela de login.
• backend/: Contém o servidor Express para o endpoint de login.

Passo 1: Configurando o Back-end

1. Crie a pasta do back-end:
   • No diretório raiz do projeto, crie uma pasta chamada backend.
   • Dentro dela, inicialize um projeto Node.js: cd backend npm init -y
2. Instale as dependências:
   • Instale Express e dotenv para gerenciar o servidor e variáveis de ambiente: npm install express dotenv
3. Crie o arquivo .env:
   • Crie um arquivo .env na pasta backend para armazenar credenciais mocadas:USER_EMAIL=abc@123.com USER_PASSWORD=abc123
   • Aviso: Nunca armazene credenciais diretamente no código ou em repositórios públicos. Use variáveis de ambiente em produção e um banco de dados para autenticação real.
4. Configure o servidor Express:
   • Crie um arquivo server.js na pasta backend:

import express from 'express';
import dotenv from 'dotenv';

dotenv.config();

const app = express();

// Middleware para processar formulários
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// Endpoint de login
app.post('/api/login', (req, res) => {
  const { email, password } = req.body;
  const userEmail = process.env.USER_EMAIL;
  const userPassword = process.env.USER_PASSWORD;

  if (email === userEmail && password === userPassword) {
    return res.redirect('/saudacao');
  } else {
    return res.status(401).send('<h1>Login e/ou senha inválidos</h1>');
  }
});

app.listen(3001, () => {
  console.log('Servidor rodando na porta 3001');
});

• Explicação:
  • express.urlencoded: Permite processar dados de formulários enviados pelo front-end.
  • dotenv.config(): Carrega as variáveis do arquivo .env.
  • O endpoint /api/login verifica se o email e a senha enviados correspondem às variáveis de ambiente. Se válidos, redireciona para /saudacao; caso contrário, retorna um erro 401 (Não Autorizado).
• Atualize o package.json:
  • Adicione um script para rodar o servidor com nodemon (para reiniciar automaticamente em alterações): "scripts": { "start": "nodemon server.js" }
  • Instale o nodemon como dependência de desenvolvimento:npm install --save-dev nodemon
• Inicie o servidor: npm run start
  • O servidor estará rodando em http://localhost:3001.

Passo 2: Configurando o Front-end

1. Crie a pasta do front-end:
   • Na raiz do projeto, crie uma pasta frontend e inicialize um projeto React:npx create-react-app frontend cd frontend
2. Instale o React Router DOM:
   • Instale a biblioteca para gerenciar rotas:npm install react-router-dom
3. Organize os componentes:
   • Na pasta frontend/src, crie uma subpasta pages para os componentes:
     • Login.jsx: Tela de login.
     • Saudacao.jsx: Landing page do Focus App (adaptada do tutorial anterior).
   • Crie os arquivos com o atalho rfce (se usar a extensão ES7+ React) no VS Code.
4. Crie o componente de Login:
   • Em frontend/src/pages/Login.jsx, adicione o código abaixo:

import React, { useState } from 'react';
import './Login.css';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch('http://localhost:3001/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ email, password })
      });

      if (response.redirected) {
        window.location.href = response.url; // Redireciona para /saudacao
      } else {
        const errorText = await response.text();
        alert(errorText); // Exibe mensagem de erro
      }
    } catch (error) {
      console.error('Erro ao fazer login:', error);
      alert('Erro ao fazer login. Tente novamente.');
    }
  };

  return (
    <div className="container">
      <h1>Faça seu Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          placeholder="Digite seu e-mail"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          name="password"
          placeholder="Digite sua senha"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">Fazer Login</button>
      </form>
    </div>
  );
}

export default Login;

• Explicação:
  • Usa useState para gerenciar os campos de email e senha.
  • O handleSubmit envia uma requisição POST ao endpoint /api/login com os dados do formulário.
  • Se a resposta for um redirecionamento (login válido), o navegador segue para /saudacao. Caso contrário, exibe o erro retornado pelo servidor.

1. Estilize o formulário de login:
   • Crie frontend/src/pages/Login.css:

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

input {
  padding: 12px;
  font-size: 16px;
  border: 1px solid #333;
  border-radius: 5px;
  width: 300px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #388E3C;
}

1. Explicação:
   • Usa flexbox para alinhar o formulário verticalmente.
   • Estiliza os inputs e o botão com cores consistentes com o tema do Focus App (verde do tutorial anterior).
   • Adiciona transition para um hover suave no botão.
2. Adapte a landing page para o componente Saudacao:
   • Em frontend/src/pages/Saudacao.jsx, adapte o HTML do tutorial anterior para React:

import React from 'react';
import './Saudacao.css';

function Saudacao() {
  return (
    <>
      <header>
        <img src="assets/logo.svg" alt="Logo do Focus App" />
        <div className="header-textos">
          <a href="#beneficios">Benefícios</a>
          <a href="#depoimentos">Depoimentos</a>
          <a href="#download">Download</a>
          <img src="assets/icone-sol.svg" alt="Ícone de Sol" />
        </div>
      </header>
      <section>
        <div className="container">
          <div className="hero-textos">
            <h1>Focus App: Foque no que Importa</h1>
            <p>Domine sua atenção com o app número 1 em produtividade pessoal.</p>
            <button>Quero Começar</button>
          </div>
          <img src="assets/ilustracao-hero.svg" alt="Ilustração Hero" width="400" />
        </div>
      </section>
      <section id="beneficios">
        <div className="container">
          <h2>Diferenciais do Focus App</h2>
          <div className="cards">
            <div className="card"><p>Sessões de foco personalizadas</p></div>
            <div className="card"><p>Acompanhamento do progresso</p></div>
            <div className="card"><p>Notificações inteligentes</p></div>
          </div>
        </div>
      </section>
      <section id="depoimentos">
        <div className="container">
          <h2>O que dizem os usuários</h2>
          <div className="figures">
            <figure>
              <img src="assets/depoimento1.jpg" alt="Depoimento da Ana" />
              <figcaption>Depoimento da Ana</figcaption>
            </figure>
            <figure>
              <img src="assets/depoimento2.jpg" alt="Depoimento do João" />
              <figcaption>Depoimento do João</figcaption>
            </figure>
          </div>
        </div>
      </section>
      <section id="download">
        <div className="container">
          <h2>Pronto para focar de verdade?</h2>
          <p>Baixe agora e transforme sua produtividade.</p>
          <button>Download Gratuito</button>
        </div>
      </section>
      <footer>
        <p>Focus App © 2025. Todos os direitos reservados.</p>
      </footer>
    </>
  );
}

export default Saudacao;

1. Explicação:
   • Converte o HTML do tutorial anterior para JSX, substituindo atributos como class por className.
   • Usa um fragment (<>) para retornar múltiplos elementos, conforme exigido pelo React.
   • Mantém a estrutura e os IDs para navegação.
2. Aplique o CSS da landing page:
   • Crie frontend/src/pages/Saudacao.css com o CSS do tutorial anterior:

:root {
  --texto: #333333;
  --fundo: #f8f8f8;
  --fundo-claro: #ffffff;
  --verde: #4CAF50;
  --verde-escuro: #388E3C;
  --border-radius: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--texto);
  background-color: var(--fundo);
}

header {
  background-color: var(--texto);
  color: var(--fundo-claro);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-textos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-textos a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

section {
  padding: 60px 30px;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.hero-textos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.hero-textos button {
  background-color: var(--verde);
  color: var(--fundo-claro);
  padding: 12px 20px;
  border: none;
  border-radius: var(--border-radius);
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hero-textos button:hover {
  background-color: var(--verde-escuro);
}

#beneficios {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.card {
  background-color: var(--texto);
  color: var(--fundo);
  padding: 16px 28px;
  border-radius: var(--border-radius);
}

#depoimentos {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}

.figures {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: 300px;
}

figure img {
  border-radius: 50%;
}

#download, #beneficios {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

#download .container {
  text-align: center;
}

#download button {
  background-color: var(--verde);
  color: var(--fundo-claro);
  padding: 12px 20px;
  border: none;
  border-radius: var(--border-radius);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#download button:hover {
  background-color: var(--verde-escuro);
}

footer {
  padding: 30px;
  text-align: center;
  font-size: 14px;
}

1. Configure as rotas no React:
   • Atualize frontend/src/App.js para gerenciar as rotas entre o login e a landing page:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Saudacao from './pages/Saudacao';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/saudacao" element={<Saudacao />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

1. Explicação:
   • BrowserRouter engloba o gerenciamento de rotas.
   • Routes e Route definem as rotas: / para a tela de login e /saudacao para a landing page.
   • Quando o usuário acessa a raiz (/), ele vê a tela de login. Após autenticação bem-sucedida, é redirecionado para /saudacao.
2. Inicie o front-end:
   • No terminal, na pasta frontend, execute:npm start
   • O React rodará em http://localhost:3000.

Passo 3: Testando a Integração

1. Acesse a tela de login:
   • Abra http://localhost:3000 no navegador.
   • Você verá o formulário de login com os campos de email e senha.
2. Teste com credenciais inválidas:
   • Insira um email ou senha incorretos (ex.: teste@teste.com, 123456).
   • Clique em "Fazer Login". Você verá uma mensagem de erro: <h1>Login e/ou senha inválidos</h1>.
3. Teste com credenciais válidas:
   • Insira as credenciais mocadas: abc@123.com e abc123.
   • Clique em "Fazer Login". Você será redirecionado para http://localhost:3000/saudacao, onde verá a landing page do Focus App.
4. Verifique no console do navegador:
   • Abra o DevTools (F12), vá para a aba "Network" e monitore as requisições.
   • Ao enviar o formulário, veja a requisição POST para http://localhost:3001/api/login e o redirecionamento para /saudacao quando bem-sucedido.

Passo 4: Melhorias e Próximos Passos

Para tornar a autenticação mais robusta, considere:

1. Banco de dados:
   • Substitua as credenciais mocadas por um banco de dados (ex.: MongoDB ou PostgreSQL).
   • Armazene senhas criptografadas usando bibliotecas como bcrypt.
   • Exemplo:

// No server.js
import bcrypt from 'bcrypt';
// Conecte ao banco de dados e valide:
const user = await User.findOne({ email });
if (user && await bcrypt.compare(password, user.password)) {
  res.redirect('/saudacao');
} else {
  res.status(401).send('Login e/ou senha inválidos');
}

1. Tokens de autenticação:
   • Use JSON Web Tokens (JWT) para autenticação persistente.
   • Após login bem-sucedido, gere um token e armazene-o no localStorage do navegador.
   • Verifique o token em cada acesso à rota /saudacao.
2. Proteção de rotas:
   • No front-end, adicione uma verificação para proteger a rota /saudacao:

function ProtectedRoute({ children }) {
  const isAuthenticated = localStorage.getItem('token');
  return isAuthenticated ? children : <Navigate to="/" />;
}
// Em App.js
<Route path="/saudacao" element={<ProtectedRoute><Saudacao /></ProtectedRoute>} />

1. Melhorias no front-end:
   • Exiba mensagens de erro diretamente no formulário em vez de um alert.
   • Adicione uma página de recuperação de senha.
2. Segurança:
   • Configure CORS no back-end para restringir origens:

import cors from 'cors';
app.use(cors({ origin: 'http://localhost:3000' }));

Dica: Valide entradas no front-end e back-end para evitar ataques como SQL Injection ou XSS.

Conclusão

Com este tutorial, você adicionou uma camada de segurança à landing page do Focus App, implementando uma tela de login que valida credenciais no back-end e redireciona usuários autenticados para a página principal. A solução usa React Router DOM para gerenciar rotas e Express com dotenv para processar credenciais mocadas de forma segura. Para projetos reais, conecte o back-end a um banco de dados e implemente tokens JWT para maior segurança.

Próximos passos:

• Integre um banco de dados para autenticação real.
• Adicione proteção de rotas no front-end.
• Melhore a interface do login com mensagens de erro mais amigáveis.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Posts mais recentes de HTML e CSS

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Display CSS: Nova Sintaxe e Como Usar26 de novembro de 2025
  Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.

Perguntas frequentes