O que você precisa entender para começar no frontend

Fala, dev! Frontend é a parte de uma aplicação com a qual a pessoa interage no navegador. Aprender essa área envolve estrutura, apresentação e comportamento, além de acessibilidade, comunicação com serviços e manutenção do projeto.

Minha sugestão é avançar por entregas pequenas: uma página estruturada, uma interface responsiva, uma interação com JavaScript e, depois, um componente React. Você consegue observar o que cada tecnologia acrescenta ao projeto.

Entenda o navegador e a web

Comece acompanhando o caminho de uma página: o navegador solicita recursos, recebe respostas e interpreta HTML, CSS e JavaScript. Na prática, use as ferramentas de desenvolvimento para inspecionar elementos, conferir erros no console e observar requisições na aba Network.

Você não precisa dominar redes para montar uma página, mas deve conseguir identificar quando o problema está no endereço, na resposta do servidor, na interpretação dos dados ou no código da interface. O currículo da MDN ajuda a organizar essa aprendizagem por etapas.

HTML: estrutura e significado

HTML é uma linguagem de marcação. Use títulos em uma hierarquia coerente, links para navegação e botões para ações. Elementos como header, nav, main e footer ajudam a descrever as partes da página. Aprenda também a escrever texto alternativo de imagens de acordo com sua função.

Em formulários, associe o rótulo ao campo. O tutorial de rótulos da W3C explica por que essa associação é importante para a interação e para tecnologias assistivas.

formulario.html
<form action="/contato" method="post">
  <label for="email">Seu e-mail</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Enviar</button>
</form>

Esse exemplo mostra a estrutura do formulário. A rota /contato precisaria de um servidor capaz de receber o POST para realmente processar os dados. A validação no navegador ajuda a pessoa a preencher os campos, mas não substitui a validação no servidor.

Use Estruturando conteúdo com HTML, na MDN, para aprofundar semântica, títulos, links e imagens.

CSS: apresentação e layouts responsivos

Aprenda seletores, cascata, especificidade e modelo de caixa. Depois pratique Flexbox para distribuir itens e Grid para estruturar linhas e colunas. Teste a página em mais de uma largura, incluindo aumento de texto e conteúdo longo.

estilos.css
* {
  box-sizing: border-box;
}

.artigos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

Experimente acrescentar e remover cards para observar como o layout se adapta. A trilha de layouts CSS da MDN reúne conceitos de posicionamento, Flexbox, Grid e design responsivo.

Tailwind e Bootstrap oferecem formas de organizar estilos e componentes. Sass é um pré-processador, enquanto styled-components permite definir estilos em JavaScript. São alternativas com propósitos diferentes; escolha uma quando já conseguir explicar o CSS que ela produz.

JavaScript: comportamento e dados

Estude variáveis, tipos, funções, objetos, arrays, eventos e manipulação do DOM. Inclua módulos e operações assíncronas com Promises e async/await. Isso prepara você para entender interações e integrar a interface com serviços.

Ao consumir uma API, confira o status da resposta e modele os estados de carregamento, sucesso, erro e ausência de resultados. fetch não rejeita automaticamente a Promise só porque o servidor respondeu com um status como 404; verifique response.ok.

carregar-artigos.js
export async function carregarArtigos() {
  const resposta = await fetch('/api/artigos');

  if (!resposta.ok) {
    throw new Error('Não foi possível carregar os artigos.');
  }

  return resposta.json();
}

A rota do exemplo é ilustrativa e precisa existir no seu projeto. Use JavaScript na MDN para estudar a linguagem e Using the Fetch API para conferir o tratamento das respostas.

Acessibilidade faz parte da implementação

Teste se é possível navegar com teclado, identificar o foco e compreender mensagens de erro. Garanta contraste legível e não use apenas cor para comunicar um estado. Dê nomes claros aos controles, inclusive aos que exibem somente ícones.

A introdução à acessibilidade da MDN pode acompanhar cada projeto. Começar com elementos nativos adequados evita parte do trabalho de reconstruir comportamentos de interação.

Git, publicação e documentação

Git é o sistema de controle de versão; GitHub é uma plataforma que hospeda repositórios e oferece recursos de colaboração. Pratique commits compreensíveis, branches e revisão de mudanças. A introdução do GitHub explica essa relação.

Publique o primeiro projeto para que outras pessoas consigam usá-lo. Para páginas estáticas, o GitHub Pages é uma opção. Aplicações que precisam executar código no servidor exigem uma hospedagem compatível com esse ambiente.

Inclua um README com objetivo, execução, imagens quando úteis e limitações. Você pode seguir o artigo Como criar um README.md atraente no GitHub.

Quando começar React e TypeScript

React é uma biblioteca para construir interfaces com componentes. TypeScript é uma linguagem baseada em JavaScript que acrescenta verificação estática de tipos. Eles não são dois frameworks equivalentes e não substituem os fundamentos de web.

Antes de React, pratique funções, arrays, objetos e eventos. Depois estude componentes, JSX, props e estado. O guia Seu primeiro componente pode iniciar esse percurso; o artigo O que são React Hooks? continua com estado e sincronização.

TypeScript pode entrar gradualmente quando você já compreende o JavaScript do projeto. Os tipos ajudam durante o desenvolvimento, mas não validam sozinhos dados recebidos em tempo de execução. Consulte TypeScript para novos programadores.

Um primeiro projeto para consolidar o roteiro

  1. Monte uma página com apresentação, navegação e um formulário corretamente rotulado.
  2. Adapte o layout para celular e desktop usando CSS.
  3. Acrescente uma interação com JavaScript e trate seus estados.
  4. Revise teclado, foco, contraste e mensagens.
  5. Publique o projeto e escreva as instruções de execução.
  6. Refaça uma pequena parte em React e compare a organização do código.

O objetivo dessa sequência é construir entendimento com prática. Quando aparecer uma dúvida, investigue a camada envolvida e documente a descoberta. Esse hábito acompanha você mesmo quando as ferramentas mudam.