ferramentas essenciais
primeiro, precisamos de um editor de texto para escrever o nosso código. eu uso VS code :) mas é uma preferência pessoal, e é sempre bom explorar opções:
termos básicos
html:
significa «HyperText Markup Language». o HTML funciona como a estrutura básica e contém o conteúdo bruto da página. se a página web fosse uma casa, o HTML seria os elementos estruturais, como os alicerces e a estrutura. podes explorar mais aqui.
css:
significa «Cascading Style Sheets» (folhas de estilo em cascata). o CSS é um conjunto de regras que definem a aparência visual da página. o CSS seria comparável aos elementos de design de uma casa, o formato das janelas, as cortinas, a cor das paredes... mais aqui.
javascript
o javascript é uma linguagem de script utilizada para adicionar elementos interativos e funcionais a uma página web, como botões e animações. seria como o aspirador, a campainha, os interruptores... mais aqui.
organização
é importante manter todos os ficheiros relativos a um website na mesma pasta. Tenta desenvolver um sistema de organização que não mude muito e que possa crescer e/ou diminuir se necessário. isto vai ajudar-te a localizar ficheiros quando e se o website crescer e vai diminuir as chances do teu website "quebrar".
dá nomes aos ficheiros! sempre com letras minúsculas, números e dashes (-) ou underscores (_). nunca usar letras maiúsculas, espaços ou símbolos. mais info aqui :-)
elementos html semânticos
alguns elementos html são semânticos e outros são genéricos. um elemento semântico comunica claramente o seu significado/conteúdo ao navegador e às pessoas que estão a editar o código, alguns exemplos de elementos semânticos são: h1, p, ul, ol, header, footer, section
elementos como div e span são considerados "genéricos" porque não nos dizem qual é o seu conteúdo nem para que estão a ser utilizados. podemos começar a definir essa finalidade com classes ou ids, o que ajudará a comunicar o significado aos editores humanos, mas continuarão a ser genéricos para o navegador.
não há nada de errado em usar elementos genéricos, mas é boa prática usar elementos semânticos sempre que possível. algumas razões para isso: torna os nossos documentos mais fáceis de ler e acessíveis, principalmente para pessoas que utilizam tecnologias de assistência. mais uma vez, podes ver mais aqui.
atalhos no teclado
nota: até hoje, eu própria ainda estou a tentar adaptar-me aos atalhos. se for mais fácil, escreve :)
se estiveres a utilizar o VS Code, existe um plugin chamado Emmet instalado por predefinição. o emmet permite-lhe criar trechos de código html e css de uso comum através de abreviaturas. cheat sheet (ufa).