Modulo 1
Ex 01 resumo:
Estrutura básica de um site.
se muda a linguagem na tag lang""
título do site na tag title
head == cabeça
body == corpo
h1 == título de lv1
p == parágrafo
<!-- --> == comentários em HTML
Ex 02 resumos:
Como escrever Parágrafos e fazer quebras de linhas
Tags para símbolos especiais, emojis e onde encontrá-los
Ex 03 resumos:
Como colocar ícone de favorito
como carregar imagem internas e externas
como colocar ulr da imagem
Ex 04 resumos:
Como criar ícones de favoritos e onde fazer ou baixá-los
Ex 05 resumos:
Ex 06 resumos:
Hierarquia de títulos, quantidade de títulos
onde e como utilizados
Ex 07 resumos:
diferença entre THML4 e 5
tags obsoletas e onde saber quais tags estão sendo utilizadas atualmente
Ex 08 resumos:
Formatação de textos parte 1
principais tags de formatação
Formatação de textos parte 2
como colocar citações abreviações e linkas a frase completa
Ex 09 resumos:
Como montar e ordenar Listas e suas definições
Ex 10 resumos:
links internos para navegar em outra página do mesmo site
link externos para navegar em outro site
link para downloads e parâmetros e arquivos
Ex 11 resumos:
Foi explicado o conceito de tamanho de imagens para um site e foram geradas três imagens de tamanhos diferentes e como faz para o site carregar a imagem conforme o tamanho da tela.
Implementação de áudios direto na tag "audio" e dentro da tag “audio” utilizando a tag "source"
e alguns parâmetros.
quais melhores tipos de áudio devemos carregar no site.
Ex 12 resumos:
Conversão de vídeos e quais formatos mais compatíveis em sites.
programa para conversão de vídeos HandBrake
como converter, carregar vídeos direto no site e carregar vídeos externos.
Ex 13 resumos:
Introdução a utilização das CSS e qual melhor forma de usá-las no código utilizando a técnica estilos in-line ou estilo na linha do código.
obs.: A técnica utilizada nesta aula não é recomendada pois é muito mais trabalhosa e deixa o código muito verboso e misturado recomendado para coisas pequenas e especificas.
Ex 14 resumos:
Como utilizar as CSS em um local diferente utilizando a técnica de estilos internos onde se aplica todas as CSS na cabeça do site sendo assim manos trabalhoso e deixando o código limpo e mais fácil de interpretar recomendado para páginas pequenas.
Ex 15 resumos:
Como utilizar estilos externos onde se cria um arquivo somente de CSS que pode ser utilizado em todas as páginas do site criando um link nas páginas de HTML.
obs.: todas as técnicas podem ser utilizadas simultaneamente em um projeto.
Anotações extras Mod 01:
atalho para atribuir uma tag rapidamente em um texto utilizando os comandos:
selecione o texto que queira atribuir a tag e digite, Control + Alt + p, selecione a opção wrap with abbreviation, digite a tag que deseja e parte ENTER.
Modulo 2
Ex 16 Resumos:
Como utilizar cores em um site e tipos de códigos que as representam no VSCode.
A psicologia das cores e seus efeitos quando aplicadas no site e quais melhores formas de utilizadas.
Harmonia de cores e quantidade normalmente utilizadas em sites e sites de referência para fazer paleta de cores.
Captura de cores em sites e como aplicá-las no próprio site.
Como aplicar efeito degradê.
Exemplo de site harmônico.
Ex 17 Resumos:
Surgimento da tipografia a origem da imprensa de tipos moveis criada pelo Gutenberg para otimizar a fabricação de livros.
Ensinado a buscar três conceitos básicos Boas cores, boas imagem e boas letras.
Anatomia das letras com os parâmetros métricos, altura X altura maiúscula, linha ascendente, linha descendente e altura do corpo.
parâmetros anatômicos, serifa, sem serifa, anco, esporão, arco, vértice, calda, terminal, braço, pé, espinha, barriga e olho.
Glifos que juntos formam uma fonte que serve de referência para utilizar no site.
fontes com famílias tipográfica e sem famílias tipografia.
categoria de fontes, serifadas, sem serifas == sans-serif, mono espaçada, escrito à mão == handwriting e comemorativo == display.
Fontes, suas famílias e seus efeitos na página e como aplicar no CSS.
site de referência de fontes https://www.w3schools.com/js/default.asp
Tamanho de fontes, seus parâmetros e referencias.
peso de fontes e implementação de fontes em shothands
Ex 18 Resumos:
Implementação de fontes externas utilizando o site Google Fontes sendo carregadas online
Implementação de fontes externas utilizando o site dafont.
como baixar e armazenar a fonte nos arquivos do site.
Como pegar a fontes e suas propriedades com a extensão font ninja do Google.
Como retirar uma fonte de uma imagem por meio de três sites:
<https://www.whatfontis.com>
<https://www.fontsquirrel.com>
<https://www.myfonts.com>
Ex 19 Resumos:
Regra charset "UTF8" nas CSS para se compatível com caracteres especiais
seletor personalizado por id com #
seletor personalizado por class com .
Ex 20 Resumos:
Implementação de pseudo-class utilizando :
Implementação de pseudo-element utilizando ::
implementação de elementos filhos utilizando o >
Ex 21 Resumos:
Oque são caixas em HTML e CSS e suas anatomias
tipos de caixas e suas funções
como utilizar a ferramenta Devtools do Chrome para editar as CSS de um site.
configurações do boxsizeing
como configurar os parâmetros do padding, border e margin com shorthands
Grupamentos de tags e suas funcionalidades.
implementação de sombras em caixas e seus parâmetros com auxílio do devtoos
implementação de bordas arredondadas
como criar uma bola
Como utilizar uma imagem como borda
Anotações extras Mod 02:
site para construção e elaboração de um site <https://wireframepro.mockflow.com>
site para elaborar paleta de cores <https://color.adobe.com/pt/trends/Fashion>