Aprendendo HTML/CSS

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.

Mais links úteis os seus estudos HTML/CSS

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.

• 9 de fevereiro de 2023

  • Unidades de medida: absolutas e relativas
  • Adaptação de elementos à proporções distintas de telas
  • medias queries e responsavidade

• 10 de fevereiro de 2023

  • Revisando os conceitos aprendidos até aqui, criando um novo projeto.
  • Variáveis css, imagens de contexto e de fundo
  • grid layout: link1, link2, link3, liink4;
  • Configuração de fontes e customização de botões.

• 11 de fevereiro de 2023

  • Elementos inline-block
    • Pare de chutar e aprenda como funciona o display: inline-block
    • The CSS Display Property – Display None, Display Table, Inline Block and More
    • Inline Elements and Block Elements in HTML - Explained
  • Flexbox e Pseudo-classes

• 12 de fevereiro de 2023

  • Carousel

• 13 de fevereiro de 2023

  • Medias queries
  • Ocultar elementos quando a resolução mudar
  • Em páginas web com várias seções, recomenda-se criar um arquivo css para cada seção, importando todos no arquivo css principal, utilizando @import...
  • Pseudoclasses

Meus códigos

O repositório do projeto Aprendendo HTML/CSS.