moomz

HTML e CSS: crie sua primeira página web

HTML estrutura o conteúdo, CSS estiliza. Essa dupla é a porta de entrada mais visível para a programação.

Entendendo a diferença entre HTML e CSS

HTML é o esqueleto: títulos, parágrafos, imagens, links, botões. CSS é a pele: cores, fontes, espaçamentos, layout. Uma página sem CSS funciona, mas parece um documento cru. Uma página sem HTML não tem nada a estilizar. Aprenda a estruturar as coisas de forma limpa em HTML antes de se preocupar com design — um conteúdo bem organizado é muito mais fácil de estilizar depois.

Domine o layout moderno

Esqueça os truques antigos com tabelas. Hoje, duas ferramentas CSS cobrem 90% dos layouts: Flexbox para alinhar itens em linha ou coluna, e Grid para arranjos em grade. Dedique um dia para se familiarizar com cada uma. Quando você dominar as duas, montar o layout de uma página vira algo lógico, não uma batalha.

Pense em responsividade desde o início

A maior parte do tráfego web vem do celular. Sua página precisa se adaptar a todos os tamanhos de tela. Use unidades flexíveis em vez de pixels fixos, e media queries para ajustar o layout conforme a largura. Teste regularmente redimensionando a janela do navegador. Uma página bonita no desktop que quebra no celular é uma página fracassada.

Aplique agora

  • Crie um arquivo index.html e escreva uma estrutura básica
  • Adicione títulos, parágrafos, imagens e links
  • Vincule uma folha de estilos CSS externa
  • Aprenda Flexbox e depois Grid em exemplos pequenos
  • Torne a página responsiva com media queries
  • Publique sua página online gratuitamente para compartilhá-la

Mais em Competências digitais