HTML é a linguagem da internet. Tudo além disso, pode ser pesquisado nos links abaixo. Em ordem, estão organizados por quantidade de documentação para tutoriais e exercícios.

HTML, na W3C: Especificação.

HTML, na Mozilla: Documentação.

CSS, na Mozilla: Documentação.

HTML, no W3Schools: Documentação e tutoriais.

CSS, no W3Schools: Documentação e tutoriais.

HTML/CSS, no FreeCodeCamp: Exercícios e formação completa.

VSCode: Editor de código.

Emmet: Plugin para auxiliar no código.

Live Server: Plugin para exibir as páginas localmente.

Developer Tools: Ferramenta do navegador para visualizar o fonte de páginas web.

Figma: Ferramenta de design.

O que estou aprendendo?

  • HTML é uma linguagem de marcação, utilizada para construir páginas web.
  • Utilizando marcações ou tags, podemos criar páginas e estilizá-las.
  • Com as tags, podemos transformar um simples texto, em uma página web, com fontes estilizadas, cores, imagens, vídeos e tudo que conhecemos em uma página web.
  • Existem tags específicas para escrever a estrutura de um página e escrever o estilo.
  • Tudo na web é muito visual, porém, a semântica também é importante. Por isso, existem tags específicas para agregar uma semântica às páginas web. Geralmente, essa tags não terão muito efeito visual, mas para o navegador é importante utilizá-las.
  • O css, é uma linguagem de estilos. Com css podemos dar estilo e um certo efeito nas páginas web.
  • Podemos utilizar a tag <link > para adicionar um arquivo de estilo ao html.
  • O figma é uma ferramenta de design. Com ele podemos definir todos os parâmetros a serem utilizados, e posteriormente escrevê-los em HTML/CSS.
  • Para definirmos blocos do textos para estilizarmos, podemos utilizar o id ou class. O id é mais utilizado para elementos únicos, enquanto class é mais utilizados para elementos que se repetem na página.
  • Podemos seguir um padrão para nomear essas classes - BEM.
  • O html por padrão recebe algumas configurações que podem atrapalhar o design customizado. Para isso, podemos resetar o estilo inicial utilizando algo como reset.css.
  • Por padrão uma página não ocupará a altura total da tela. Quando necessário, isso pode ser feito utilizando a propriedade height: 100vh.
  • Existem várias formas de trabalhar com medidas no css.
  • Flexbox é uma tecnologia muito utilizada para posicionar elementos na página.
  • Com o flexbox podemos posicionar e dimensionar os itens na página.
  • Podemos utilizar o Google Fonts para customizar a tipografia da página. E escolhida a fonte, existem tags específicas para configurar o tamanho, o peso outras configurações.

  • Botões podem ser criados com a estilização de âncoras, configurando sua referência para a página de destino. Além disso, configurações de cor de fundo e estilização de borda, possibilitará o efeito final de um botão de ação.

  • 6 de fevereiro de 2023
    • Flexbox: solução de posicionamento de itens em uma página web.
    • Contém tags que devem ser utilizadas nos elementos pai e filho.
    • FlexFroggy: Exercícios gameficados para treinar flexbox
  • 7 de fevereiro de 2023
    • Alternar orientação de elementos de uma página web com flex-direction: column;
    • Estilizar botões, outros exemplos.
    • Utilizando ícones em botões com Font Awesome
    • Estilizando botões com hover
    • Utilização de tags semânticas junto ao HTML. Exemplo: No header utilizar a tag nav para se referir à navegação da página/site.
    • Criação de links de navegação bem como as páginas destino.
    • Utilização de variáveis no css para representar cores, evitando a duplicação de código.

Meus códigos

O repositório do projeto Aprendendo HTML/CSS.