# Notas de Aula - Desenvolvimento Web

## Recursos
1. CSS
1. [CSS Reset](#CSS-Reset)
1. Eric Mayer
1. [Utilizar Font Awsome](#Fontawesome)
1. [Fonte Fluída](#Fonte-Fluída)
1. [Linkar CSS](#Linkar-CSS)
1. [Aplicação de fundo](#Aplicação-de-fundo)
1. [Animação](#Animação)
1. [MediaQuery](#Media-Query)
1. [Centralização de elementos]()
1. [Horizontal]()
1. [Vertical]()
1. [Variáveis em CSS]()
1. [Pseudo Classes]()
1. [Estado hover]()
1. JavaScript
1. [Funções de captura de elementos](#Métodos-para-captura-de-elementos)
1. [Monitorar eventos](#Monitorar-evento)
1. [Acessar formatação de um elemento](#Acessar-formatação-do-elemento)
1. [Gestão de classes](#Gestão-de-Classes)

## HTML
### Elementos estruturais
* **header**: Cria cabeçalhos
* **nav**: Delimita um conjunto de elementos de navegação
* **main**: Delimita o conteúdo principal da página
* **section**: Delimita uma seção/área da página
* **footer**: Cria um rodapé
* **div**: Tag sem significado representa um novo bloco de conteúdo, uma divisão
* **article**: Delimita um conteúdo que tem sentido completo, que poderia ser distribuído de forma independente sem prejuízo ao seu entendimento.
### Elementos textuais
* **p**: Cria um parágrafo
* **hx [h1,h2,h3...]**: Delimita um título, ou seja, um elemento que tem conteúdo associado a ele
* **a**: Cria um link/âncora
* **img**: Cria uma imagem
* **span**: Tag sem significado, similar a div só que com natureza inline
* **strong**: Especifica uma porção de conteúdo que tem maior importância frente ao resto daquele conteúdo
* **details/sumary**
### Formulário:
* **form**: Cria um formulário
* **fieldset**: Agrupa um conjunto de campos
* **legend**: Título de um fieldset
* **label**: Rótulo/Legenda de um campo de formulário
* **input**: Campo para entrada de dados
* legenda interna dos campos: placeholder
* item de preenchimento obrigatório
* tipos
* text
* number
* tel
* checkbox - caixa quadrada que permite marcar mais de um item
* radio - item de formato circular que permite a marcação de apenas uma opção
* **select**: Lista supensa
* **option**: Itens da lista de suspensa
* **textarea** Campo para entrada de texto com mais de uma linha

### Lembretes
* NÃO EXISTE LISTA DE UM ITEM SÓ
* Por critério de usabilidade a logo deve ser link para homepage
* Delimite conjunto de elementos de navegação com tag apropriada
* Não coloque um a dentro de um button ou vice-versa, ou o item é um link ou ele é um botão
* Não coloque um H (h1,h2...) dentro de um p e vice-versa, ou o item é um título ou um paragrafo ele não pode ser as duas coisas ao mesmo tempo

## CSS

### Propriedades

* **display:flex** - deixa os filhos do elemento um ao lado do outro
* Não há sentido em aplicar flex em elemento que tem apenas um filho
* **Propriedades Associadas**
* **justify-content** - controlará a disposição horizontal de elementos sob ação do flex
* **align-itens**: controlará a disposição vertical de elementos sob ação do flex
* **flex-wrap**: define o que ocorre caso não haja espaço disponível para que outros elementos possam ficar ao lado de outros
* **margin** - espaçmaneto externo [sup dir inf esq]
* **padding** - espaçamento interno
* **with** - largura
* **height** - altura
* **font-size** - tamanho da fonte
* **font-family** - tipografia a ser aplicada ao elemento
* **font-weigth** - atribuição de negrito [bold | bolder | valores entre 100 e 900]
* **text-decoration** - opções de uso de linha no texto, incluindo o underline
* **text-align** - alinhamento do texto
* Quando colocado diretamente em uma imagem não terá efeito algum
* Deve ser colocado no elemento para que seu conteúdo sofra o efeito do alinhamento de texto
* **border** - aplica borda a um elemento [tamanho tipo cor]
~~~css
border:1px solid red;
~~~
* **box-shadow** - aplica borda a um elemento [offset-x offset-y blur-radius spread-radius color]
~~~css
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
~~~
* **background** - aplica fundo (cor,imagem,gradiente) no elemento. Para aplicar mais de um fundo separe por vírgulas
* **color** - altera a cor do texto

### Lembretes
* Verifique se o css foi adicionado a sua página
* Verifique se você está fazendo uso do CSS Reset
* A cor do link só é modificada quando a tag a é incluída no seletor
* Atribuir flex a elemento com um único filho não faz muito sentido para alterara posicionamentos

# Conteúdo

## HTML
* [Devdocs](https://devdocs.io/html/)
## CSS
* CSS Reset
* [Adaptação](https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e)

# Anexos
## CSS
### CSS Reset
~~~html
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
~~~
### Fontawesome
~~~html
<script src="https://kit.fontawesome.com/bd5b44309d.js" crossorigin="anonymous"></script>
~~~
* Acesse o site [fontawesome](https://fontawesome.com/search) para encontrar o ícone que deseja utilizar
* Lembre de alterar a tag para a tag spam que é mais semântica
### Fonte Fluída
~~~css
html {
font-size: calc(15px + 0.390625vw);
}
~~~
### Linkar CSS
~~~html
<link rel="stylesheet" href="local do arquivo" type="text/css" />
~~~
### Aplicação de fundo
* Para aplicar mais de um fundo dentro do mesmo elemento utilize a propriedade background e separe cada um dos fundos por vírgula. Caso queira sobrepor com um cor ainda assim será preciso utilizar o gradiente repetindo a mesma cor. Nos testes realizados em sobreposição de fundos a cor solida não é aceita apenas gradiente e imagens.
~~~css
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
~~~

~~~css
section{
background:linear-gradiente(rgba(0,0,0,0.5),rgba(0,0,0,0.6)), url(../images/fundo.jpg) no-repeat;
background-size: cover, cover;
}
~~~

~~~css
div{
background: linear-gradient(to bottom right, red, yellow);
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
background:linear-gradient(45deg, red 0 50%, blue 50% 100%)
}
~~~
### Animação
* **trasition**: aplica uma trasição quando o valor de uma propriedade for modificado. [property name duration timing function delay]
* [Documentação MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transition)
~~~css
transition: margin-left 4s ease-in-out 1s;
~~~

### Media Query
* [Documentação MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
## JavaScript

### Métodos para captura de elementos

* **getElementById**: recupera um único elemento que teve seu id informado como parâmetro
~~~js
let elemento = document.getElementById("banner");
~~~

* **querySelector**: recupera o primeiro elemento que corresponder ao seletor CSS informado como parâmetro
~~~js
let elemento = document.querySelector("ul");
~~~
* **querySelectorAll**: recupera todos elementos que correspondam ao seletor informado como parâmentro dentro do escopo em que foi chamado
~~~js
let elementos = document.querySelectorAll('span');
~~~

### Monitorar evento
* Elemento único
~~~js
let elemento = document.getElementById("banner");
elemento.addEventListener("click", function (e) {
console.log("hey Jude");
});
~~~
* Conjunto de elementos
~~~js
let elementos = document.querySelectorAll('p');
elementos.forEach((item) => {
item.addEventListener('click', function(e){
console.log("Foi");
})
});
~~~
### Acessar formatação do elemento
* Utilize a propriedade style e depois o nome da propriedade CSS que deseja atribuir valores
~~~js
let elemento = document.getElementById("banner");
elemento.style.display="block";
elemento.style.color = "green";
elemento.style.backgroundColor = "red";
~~~

### Gestão de Classes
* classlist
~~~js
let elemento = document.getElementById("banner");
elemento.style.display="block";
elemento.style.color = "green";
elemento.style.backgroundColor = "red";
~~~

### Centralização de elementos

#### Horizontal
* [text-align]()
* Funciona para alinhamento de elementos inline, como exto e imagem.

#### Vertical

* [Align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
* Funciona em alementos com flex, grid ou block

### Variáveis em CSS
~~~css
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
}
~~~

### Pseudo Classes
* :user-valid / :user-invalid

### Estado hover

### Animação

* **interpolate-size** : animar altura e padding