# PLAYLIST DE HTML/CSS

## NOME: GABRIEL OLIVEIRA LOOZE MIRANDA
## TURMA: INFO A
## NÚMERO: 11

## vídeo 0

baixar vscode, baixar extensão vscode icons, ctrl shift p abre uma aba de comandos,

## vídeo 1

para começar, sempre escolha a pasta para abrir um local de trabalho. arquivos tem extensões, arquivos da web tem extensão .html. html é formado por tags, tags ficam sempre entre sinais de maior e menor. ao fechar uma tag você coloca barra antes do nome da tag e o sinal de maior.
tags tem filhos e mães.
dentro da tag head, são configurações do site
tag body tem o conteúdo do site
é possível colocar atributos dentro de tags
no começo, se coloca o css dentro de head, na tag style
w3school tem informações de todas as tags de html E css
formatar na tag é melhor utilizado se formatado no css
a tag img já se auto-fecha

## vídeo 2

boas práticas
criar pastas
assets > images & audios & videos & fonts
pages > arquivos hmtl e css

como estão separados, usar tag link para o css funcionar

../ significa fechar, assim para fazer referências para arquivos na pasta assets

para importar fontes, usar font face. em font family colocar o nome a ser utilizado no css, e para linkar basta fazer o mesmo sistema de caminho

usar classes para fomratações customizadas

## vídeo 3

extensão live server cria um servidor local
ele faz refresh na página automaticamente
tema do vídeo: qual espaço uma tag ocupa
"*" aplica para todas as tags

## vídeo 4

vídeo sobre flex box
necessário haver um container para aplicar o flexbox
usar display: flex;
padrão do flexbox é em row
usar flex-direction, com row e column
justify content alinha os itens

## video 5

é possível formatar duas classes ao mesmo tempo
usando vírgula compartilha o mesmo bloco para diferentes classes
!important previne algo de ser sobreescrito

uma div pode ter duas classes, basta dar um espaço entre o nome das classes

possível colocar o nome de uma tag após o nome da classe no css, assim podendo formatar algo específico

usando nth-child, é possível escolher qual filha específica você gostaria de formatar em ordem de todos os elementos dentro da div

usando nth-of-type é possível escolher a filha de acordo com o tipo filtrado

hover é para quando você passa o mouse por cima do elemento

## vídeo 6

tema do vídeo é fontes
dois jeitos de importar fontes, usando tag link ou import no css para fontes remotas

para fontes locais, usar font face

## video 7

tema cores
códigos hexadecimais ou rgb
colocando o nome de algumas cores, funciona

hexadecimal começa com hash, e contém 6 dígitos, de 0 a 9 e A até F

formatação opacity muda a opacidade da cor

valores rgb funcionam em 3 valores, de 0 até 255

rgba tem a ver com opacidade

## vídeo 8

tema unidades de medidas

px é medida absoluta
em é medida relativa
em tem a ver com o tamanho do pai, então configurando o valor do pai, você muda o valor padrão de em daquela box

rem é uma medida relativa que não se importa com o pai, sendo assim levando em conta a medida do dispositivo

porcentagem trabalha com a tela em si

vh é a altura da viewport, assim dá para preencher a tela toda quando quiser. vw seria a largura da viewport.

vh e vw são utilizados como porcentagem, sendo 100 = 100%

## vídeo 9

inline block = não ocupa tudo, podendo dividir divs que estão lado a lado

padding espaçamento interno, possível espaçar os lados como quiser, ao colocar apenas um valor, será espaçado em todos os lados, ao colocar em 2 valores, serão contados o primeiro valor para cima e o segundo para os lados e ao colocar quatro valores, serão colocados espaçamentos em ordem de cima, direita, baixo e esquerda. Também dá para usar padding-top/bottom/right/left para definir um padding específico com apenas um valor.

margin, espaçamento externo. O mesmo que o padding em questão de comandos.

box sizing é algo que limita os espaçamentos de serem a soma dos elementos, assim deixando altura do tamanho especificado.

## vídeo 10

tema altura e largura

4 formatações

width, height, min width, min height, max width e max height

min é o mínimo que algo pode ter de tamanho, e max seria o máximo

muito usados para fazer sites responsivos

necessário usar flexbox

## vídeo 11

formatações de background

background color muda a cor do fundo

background image coloca uma imagem de fundo

background size muda o tamanho do fundo

background repeat faz com que repita apenas de um lado ou não repete

background position muda a posição da imagem

background attachment faz um pequeno parallax, efeito bonito