Estudos_FRONT-END.

---

HTML.

---

Módulo 02.

• 0201 Tag - Explicação de o que é uma Tag.
• 0202 Tags Iniciais - Explicação das tags mais comuns.
• 0203 Estrutura HTML - Tags de informação para os navegadores.
• 0204 Editor de Plugins - Instalando o Live Server, Prettier e ajustando o settings.json do vscode.
• 0205 Editor Atalhos - Alguns atalhos que vão me ajudar no decorrer dos estudos.
• 0206 Link Caminhos - Diferença de link relativo e absoluto.
• 0207 CSS Básico - Explicação do CSS e uso Básico.
• 0208 CSS Seletores - Algumas distinções entre classes e ids.
• 0209 HTML Exercício - Exercício Cinema.
• 0210 Background e Cores - Mostrando o atributo de background e background-color.
• 0211 Box Model 1 - Explicação do que é um box model e como isso é usado para sites.
• 0211 Box Model 2 - Apresentação da div ou caixa comumente chamada.
• 0212 Estilos do Browser - Mostrando que alguns navegadores já vem com stylos básicos ativos por padrão.
• 0213 Display - explicação sobre o posicionamento.
• 0214 Display Exercício - Um bom exercício para começar com os posicionamento de algumas estruturas básicas.
• 0216 Imagens 1 - Testando a tag de imagem.
• 0216 Imagens 2 - Mostrando dois sites para ajudar com imagens.

---

Módulo 03

• 0301 Top, Right, Bottom, Left - Mostra como podemos usar esses atributos em css e usar ao nosso favor. podemos usar no padding e no margin, mas sem esquecer de colocar o atributo display: inline-block se não não vai funcionar as margens externas.
• 0302 Grid Columns 1 - preparando as informações como html e css para uso do grid.
• 0302 Grid Columns 2 - Com o uso do grid podemos dividir a tela de várias formas.
• 0303 Align e Justify Content - O uso do grip e justify content para ajustar os itens.
• 0304 Grid Column 1 e 2 - Aprendendo a dividir o grid layout.
• 0305 Grid Column 1 + Grid Column 2 - Posicionamento o grid layout com align e justify itemns. Com isso eu consigo posicionar os itens dentro do grid, como por exemplo: grid-column: 1 / 3 que vai ocupar a coluna 1 e 2.
• 0306 Grid Template Rows - Aprendendo a controlar as linhas do grid com grid-template-rows, definindo quantas linhas o grid terá e o tamanho de cada uma.
  • Com grid-template-columns você define quantas colunas o grid terá e o tamanho de cada coluna.
  • Usando place-items: start é possível alinhar todos os itens ao início do grid.
  • Também é possível posicionar elementos em locais específicos do grid usando grid-column e grid-row, por exemplo:
  • Definir que um elemento ocupe todas as colunas,
  • Que outro fique apenas em uma coluna específica,
  • Ou que um elemento ocupe várias linhas dentro de uma coluna.
  • No arquivo 0306_2.html A div com a classe .info foi configurada como um novo grid dentro do grid principal.
  • display: grid; faz com que os elementos internos da .info também sejam organizados em grid.
  • place-items: start; alinha todos os itens ao início tanto na horizontal quanto na vertical.
  • gap: 20px; adiciona um espaçamento de 20px entre os itens internos.
  • place-self: start; faz com que a própria .info fique alinhada ao início da célula do grid principal onde ela está.
  • Isso permite um controle mais preciso do alinhamento e espaçamento dos elementos dentro da .info, deixando o layout mais organizado.
• 0307 Flexbox 1 - Introdução ao Flexbox, uma técnica de layout que permite organizar elementos de forma flexível e responsiva.

---

Módulo 04

• 0402 Pontos de Referência 2 - Neste módulo, aprendemos sobre pontos de referência (landmarks) em HTML5, que são elementos semânticos como nav, main, article e section.
  • Esses elementos ajudam a estruturar melhor o conteúdo da página, tornando a navegação mais intuitiva e acessível, principalmente para pessoas que utilizam leitores de tela.
  • Também exploramos boas práticas para melhorar a acessibilidade e usabilidade das páginas, destacando a importância de uma navegação clara e organizada.
• 0403 Listas - Nesta aula, aprendemos a criar e utilizar listas em HTML para organizar informações de forma clara e estruturada.
  Foram apresentados três tipos principais de listas:

  • Listas não ordenadas (<ul>): Usadas quando a ordem dos itens não importa, marcando cada item com um ponto.

  • Listas ordenadas (<ol>): Usadas quando a ordem dos itens é importante, numerando cada item automaticamente.

  • Listas de definição (<dl>, <dt>, <dd>): Usadas para apresentar termos e suas definições, como em glossários ou FAQs.

  • Também foi mostrado como criar listas aninhadas, ou seja, listas dentro de listas, para organizar informações hierarquicamente (por exemplo, filmes e seus títulos).

---

Módulo 05

• 0501 Unidades 1 - Nesta aula, aprendemos sobre as diferentes unidades de medida em CSS e como elas afetam o layout dos elementos.
  Foram apresentadas duas unidades principais:

  • Pixels (px): Unidade absoluta e fixa. Um pixel sempre terá o mesmo tamanho, independentemente do tamanho da tela ou configurações do navegador. É ideal para elementos que precisam ter um tamanho específico e constante.

  • REM (rem): Unidade relativa baseada no tamanho da fonte do elemento raiz (html). Por padrão, 1rem equivale a 16px. É mais acessível e responsiva, pois se adapta às preferências do usuário e diferentes dispositivos.

  • No exemplo, comparamos dois conjuntos de elementos: um usando 24px e padding: 16px 32px, e outro usando 1rem e padding: 1rem 2rem. Isso demonstra como as unidades relativas (rem) tornam o design mais flexível e acessível, enquanto pixels oferecem controle preciso mas menos adaptabilidade.

• 0503 Background 1 - Nesta aula, aprendemos sobre as propriedades de background em CSS e como aplicar imagens de fundo de forma eficiente.
  Foram apresentadas as principais propriedades de background:

  • background-color: Define uma cor sólida como fundo (exemplo: lightblue).

  • background-image: Permite usar uma imagem como fundo usando url().

  • background-repeat: Controla se a imagem se repete ou não (no-repeat evita repetição).

  • background-size: Define o tamanho da imagem de fundo (cover faz a imagem cobrir todo o elemento).

  • background-position: Posiciona a imagem no elemento (center top centraliza horizontalmente e alinha ao topo).

  • O exemplo demonstra como criar um elemento com 600px de altura usando uma imagem de bicicleta como fundo, com propriedades otimizadas para responsividade. A combinação dessas propriedades permite criar layouts visuais atraentes e profissionais.

• 0503 Background 2 - Nesta aula, expandimos o conhecimento sobre backgrounds em CSS, introduzindo os gradientes lineares como alternativa às imagens e cores sólidas.
  Foram apresentados os seguintes conceitos:

  • : Reforçamos o uso de , , e para imagens de fundo.