Primeiras tags HTML (h1..h6, p, /hr, a, ol, ul, li)
Aula 8 - Correção do exercício
Exercício de tags HTML
Aula 10 - Estrutura base
Criação de uma Estrutura básica de arquivo HTML, com ênfase nas metatags
Aula 13 - Primeiras regras de CSS
Fundamentos de estilos com CSS
Aula 19 - Praticando
Aplicando estilos em links e listas. Introdução às pseudo-classes.
Aula 20 - Exercício. Centralizar na tela
Aplicando estilos em páginas. Centralização e decoração de texto.
Aula 24 - Trabalhando com imagens
Trabalhar imagens em HTML, posicionamento de imagens com float e imagens em background com CSS.
Aula 26 - Projeto 1
Criação de projeto com os conceitos estudados. Utilização de Float, menu inline com li (Meu projeto)
Aula 29 - Propriedade display, inline, block e inline-block
Estudo sobre as propriedades de display do CSS. Veja o código CSS para anotações importantes.
Aula 30 - Projeto 1 - Menu horizontal
Refatoração do Projeto 1. Aplicação de text-align e display para criação do menu horizontal.
Aula 31 - Box-sizing
Entendendo o box-sizing: border-box
Aula 33 - Float e clear
Entendendo a propriedade float(left, right) e clear(left, right e both)
Aula 34 - Projeto 1 - Cards horizontais
Refatoração do Projeto 1 para corrigir a posição dos cards utilizando overflow, float e width em %
Aula 36 - Propriedade Position
Trabalhando com position (relative / absolute)
Aula 37 - Projeto Fashion
Projeto Fashion (utilizando minha formatação)
Aula 38 - Projeto Fashion
Projeto Fashion (refatoração pelo professor)
Aula 42 - Listas aninhadas e de definição
Listas aninhadas e listas de definição(cria listas para definir o significado de determinado termo)
Aula 43 - Overflow
Entendendo o text overflow(visible, hidden, scroll e auto)
Aula 45 - Tabelas
Trabalhando com tabelas(border, head, foot, data, colspan, rowspan)
Aula 46 - Formulário de busca no Google
Utilizando form (action, method get e post, target) e atributo name para enviar dados no navegador. Introdução ao input submit e text.
Aula 48 - CSS em formulários
Estilizando formulários com CSS. Criação de um formulário de login
Aula 49 - Tipos de entrada de dados
Tipos de input, utilização do label, utilização do atributo name e value(
Aula 53 - Border-radius
Utilizando o border-radius
Aula 54 - Box-shadow
Aplicando sombras em box
Aula 55 - Text-shadow
Aplicando sobras em textos
Aula 56 - Gradiente linear
Utilizando gradiente de cores(gradiente em angulos, aplicando varias cores, variando coloração atravé do gradiente)
Aula 57 - Fontes customizadas
Criando familias de fontes com @font-face e importando fontes externas
Aula 58 - Transições suaves
Transições com aplicação de pseudo-classe "hover"
Aula 59 - Projeto Strata
Projeto completo com semântica de HTML e várias estilizações em CSS para referencia
Aula 82 - Refatoração
Refatoração do Projeto Strata, com alguns ajustes para acessibilidade.
Aula 84 - Seletores compostos - parte 1Ótima aula sobre seletores. Reassistir se estiver com dúvidas. Interessante fazer uma lista desses seletores.
Aula 85 - Seletores compostos - parte 2
Utilização de seletores:
seletor: nth-child(n): seleciona o seletor que seja o n filho do seletor anterior.
seletor1 > seletor2: seleciona apenas o seletor2 diretamente descendente do seletor1.
seletor1 + seletor2: seleciona apenas o seletor imediatamente após o seletor 1.
seletor1 ~ seletor2: seleciona todos os seletores2 após o seletor1.
seletor1:not(seletor2): não aplica a propriedade no seletor2 definido.
seletor[atributo="x"]: aplica a propriedade em todos os seletores que tenham o valor que está definido nos [].
seletor[atributo^="x"]: aplica a propriedade em todos os seletores que os atributos iniciam com o valor que está definido nos [].
seletor[atributo]: aplica a propriedade em todos os seletores que possuam o atributo indicado nos [].
seletor[atributo$="x"]: aplica a propriedade em todos os seletores que os atributos terminam com o valor que está definido nos [].
Utilização das pseudo-classes :before e :after. Inserem o conteúdo do atributo content(obrigatório) no objeto selecionado.
Os conteudos inseridos não são selecionáveis e não são localizados pelos motores de busca.
As pseudo-classes iniciam com : os pseudo-elemantos iniciam com ::. O after e before estudados na aula anterior são pseudo-elementos e devem (nos navegadores a partir do ie9) ser iniciados por ::
Aula 88 - Pseudo-classes e pseudo-elementos - parte 2
pseudo-classes:
:checked executa as ações quando o objeto está checado.
:disabled executa as ações quando o objeto estiver desabilitado.
:empty executa as ações quando o objeto estiver vazio.
:focus executa as ações quando o objeto recebe foco.
:hover executa as ações quando o objeto recebe o contato do pointer.
Quando queremos colocar uma <div> no fluxo de tabulação podemos utilizar o atributo html tabindex="n".
pseudo-classes:
seletor:nth-child(n) executa as ações no n elemento do seletor definido se o n filho for do elemento definido.
seletor:nth-of-type(n) executa as ações no n elemento do seletor definido independente dos elementos que existão entre ele. (exemplo p:nth-of-type(3) pega o 3o p independente de outras tags entre ele).Não funciona com classes.
seletor:first-child e seletor:last-child executa as ações no primeiro ou último filho do elemento.
pseudo-classes:
::first-letter aplica estilo na primeira letra do texto.
::first-line aplica estilo na primenria linha do texto.
::selection aplica estilo quando o usuário seleciona o texto.
Para testar compatibilidade de sites utilizar o site caniuse.com
A propriedade transform: translate(X,Y) que tamém pode ser translateX(), translateY() movimenta o objeto para as posições definidas no eixo X e Y em relação ao seu posicionamento original, diferente do position: relative que podemos definir as posições com top, right, left, bottom: (n)px mas em relação ao elemento pai.
Podemos utilizar o translate com px ou %. Quando utilizamos o translate com 100% em objetos que ocupam todo o fluxo do documento ele sairá do fluxo. Podemos observar isso com o overflow: hidden.
O transform: rotate() faz a rotação em graus do elemento em relação ao seu eixo central. Podemos alterar o eixo com a propriedade transform-origin: (left, right, top, bottom) que reposiciona o eixo de rotação.
Podemos utilizar o translate e o rotate juntos, mas a ordem que eles forem indicados na atribuição do transform será obedecida resultando em posições diferentes.
O transform: skew(X,Y) que também pode ser skewX(), skewY() faz a distorção do elemento de acordo com o eixo.
O transform: scale(X,Y) que também pode ser scaleX(), scaleY() altera o tamando do elemento em unidades (múltiplos).
Criando uma página com os temas abordados anteriormente.
pseudo-seletor ::after e ::before.
Criado um box para simular o input checkbox da seguinte maneira. Foi feita a seleção do input[type="checkbox"]:checked ou seja o input do tipo checkbox na condição checado. Em seguida foi selecionado o label imediatamente posterior ao input com o atributo + label. Nesse label foi selecionado o elemento filho com a classe .chk que é o span que forma o quadrado de 15px x 15px.
Por fim foi feito um efeito para o check parecer com um tick. (Somente vendo a aula para entender)
Criação do checkbox (minha versão)
Aula 94 - Desafio - resolução
Criação do checkbox (versão do professor). Aqui foi utilizado para criar o botão interno o pseudo-elemento ::before. No mais corrigi o transition do meu projeto para funcionar no uncheck também (Veja o código).
Aula 95 - Desafio - Será que nosso checkbox está acessível?
Ajuste do checkbox para acessibilidade com o teclado, com a mudança da propriedade no input de visibility:hidden para opacity:0 e a adição de uma propriedade :focus na span da checkbox.
Aula 96 - Efeito hover lindão em thumbnails
Criação de efeitos sobre imagens utilizando as pseudo-classes :hover, ::before, ::after. Note que para centralizar o conteúdo do atributo ::after utilizamos a propriedade transform: translate(50%, 50%) de modo a ajustar o quadro no centro da imagem.
Aula 98 - media type
Na tag link onde incluimos os arquivos de estilo temos o atributo media que pode receber como parametro: screen, print ou handheld. Aqui utilizamos o media="print" para criar os estilos específicos para impressão.
Para inserirmos um valor que está no html podemos utilizar a pseudo-classe :after e no atributo content utilizarmos o valor attr(valor). No exemplo para mostrar o link contido em um href utilizamos a seguinte sintaxe:
content='(' attr(href) ')' sendo que o '(' e ')' estão "concatenados" com o valor do attr.
Utilizando @media para definir atributos de acordo com o tamanho disponivel para exibição.
Aprendemos também sobre a importância da meta-tag name="viewport" content="width=device-width (faz com que a imagem se adapte ao tamanho da tela do dispositivo).
Criando uma variação de telas com @media e float: left. Criando uma limpeza de fluxo com classe utilizando clear:both.
Variando o tamanho dos elementos com width: calc(X% - Ypx); para manter a variação de tamanho responsiva.
Modificando fontes nas media queries. Unidade de medida de fonte: px: pixel, em fonte relativa ao font-size. O font-size padrão é 16px. Sempre que trabalhamos com em a unidade será em relação ao objeto pai.
Já o rem é sempre relacionado ao elemento root (no caso o <html>).
Criação do <html> do projeto.
Aula 104 - CSS do projeto - parte 1
Fazendo a estilização do header e nav-menu. Foi utilizado no CSS a propriedade @charset "UTF-8" para padronizar os caracteres. Não sei porque utilizar no CSS também se já temos no HTML.
Pelo modo como estamos estilizando a página, posso dizer que ela está sendo feita no método mobile-first.
Estilização da primeira <section> sem muitas novidades.
Aula 106 - CSS do projeto - parte 3
Fazer a a importação dos icones no site icomoon.io, baixar os arquivos e incluir o style.css gerado pelo site no html.
Estilização da primeira parte do texto. Foi utilizado o seletor de inicio para os spans iniciados com 'icon'(veja código).
Ajustes no texto principal.
Aula 108 - CSS do projeto - parte 5
Ajustes no footer.
Aula 109 - CSS Responsivo - parte 1
Criação dos parametros de media queries (@media screen and (min-width=780px)). Ajustes no header para responsividade a partir de 780px.
Aula 110 - CSS Responsivo - parte 2
Criação de um "grid" de duas colunas com parametros width e com a classe de limpeza de fluxo .clearfix::after. Ajuste dos botões à direita.
Aula 111 - CSS Responsivo - parte 3
Criação dos parametros de media queries (@media screen and (min-width=1000px)). Ajustes no header para responsividade a partir de 1000px. Fiz alguns ajustes por minha conta pois o background estava menor que o zoom total e estava repetindo a imagem. Utilizei o box-sizing, o professor utilizou a soma de height e padding.
Aula 112 - CSS Responsivo - parte 4
Criação dos parametros de media queries (@media screen and (min-width=1000px)). Ajustes no header para responsividade a partir de 1080px. Ajustes no grid para 4 colunas no conteudo superior e duas no inferior.
Aula 113 - CSS Responsivo - parte 5
Inserção do ícone play na imagem do header, ajuste no tamamnho do último breaking point, ajustes de tamanhos gerais e criação de um max-width.
Aula 115 - Áudio
Utilizando a tag <audio>. Precisamos utilizar juntto com a tag o atributo controls para mostrar os controles de reprodução na tela.
Só devemos utilizar o src="" na tag <audio> se formos utilizar apenas um arquivo de áudio. O ideal é termas vários arquivos com formatos diferentes (.mp3, .ogg, etc) para compatibilidade com todos os browsers.
Para isso utilizamos a tag <audio> e dentro dela uma tag <source> para cada arquivo com tipo de áudio diferente. Nesse caso utilizamos o atributo type="audio/tipo de mídia para especificar ao navegador qual arquivo ele pode escolher.
Podemos ainda na tag <audio> utilizar os atributos autoplay e loop. O autoplay não funciona em todos os browsers.
A tag <video> tem as mesmas particularidades da <audio>, devendo ser utilizado a tag <source> para os diversos tipos de vídeo.
Os atributos também são os mesmos autoplay, loop, muted
Com a tag <iframe> podemos colocar arquivos html locais ou da web diretamente em um frame na nossa página. Nem todos os sites permitem a inclusão.
Os atributos são frameborder. Utilizamos também para vídeos do youtube. Os links do youtube quando copiamos para inserir em nossa página já vem por padrão como <iframe>.
A tag <figure> não tem a ver com imagens e sim com o fluxo do documento. Ela deve ser utilizada sempre que o conteúdo puder ser removido do texto sem que este perca o sentido (figure = figuração????).
Pode ser utilizada com a tag <figcaption$gt que coloca uma legenda a figura.
O atributo srcset="" serve para indicar o local da imagem a ser utilizada. Um dos parâmetros que passamos para esse atributo é XXXw que é a largura da imagem. O srcset="" deve ser alternativo ao src="" que é o atributo genérico.
Já o atributo sizes informa ao navegador, antes mesmo dele rodar o CSS, qual o tamanho que a imagem vai ocupar na tela. Sua sintaxe é sizes="XX.XXvw onde XX.XX é o valor em percentual que a imagem vai ocupar em relação a viewport (vw = viewport width).
Em sites onde uzamos o media queries o sizes deve ser utilizado da seguinte forma: sizes="(min-width: 480px) 33.33vw, 100vw" onde quando o tamanho do viewport for menor que 480px a imagem vai ocupar 33,33% da viewport, e quando for maior 100% da viewport.
A tag <picture> pode conter diversas imagens. Ela é utilizada junto com a tag <source> e define as opções de imagem para cada tamanho de tela, podendo inclusive utilizar diversas imagens com diferentes focos de acordo com o tamanho da viewport (ver exemplos em Media Queries).
Na aula 121 foi apresentado ainda o atributo type que funciona como nas tags <audio> e <video> onde voce indica a extensão dos arquivos de imagem que serão utilizados.
Utilizando a tag <picture> com imagens pré definidas em diferentes tamanhos. O projeto segue os exemplos da aula 119, mas não ficou muito claro a utilização de todos os tamanhos possíveis. Tavez esse precedimento seja melhor explicado em outra aula.
Aula 124 - Preparando o ambiente com CSS counter
Implementando um contador em CSS. Utilizando as propriedades counter-reset, counter-increment e em ::before content: counter(xxxxx). Este contador insere numeros sequenciais nas divs.
Aula 125 - gradientes radiais - parte 1
Cores de fundo: temos uma propriedade no CSS chamada background-clip, que permite escolher qual o preenchimento da propriedade background (border-box, padding-box, content-box).
Cores: podemos trabalhar com as cores pelos nomes, por rgb(r,g,b) (em porcentagem ou valor de 0 até 255), em rgba(r,g,b,tranparencia), em hsl(hue, saturation, lightness) onde o hue é em graus e determina a cor predominante (0deg - vermelho, 120deg).
Gradiente: os gradientes devem ser utilizados com background-image.
linear-gradient() pode ter como definição o sentido do efeito (to bottom left/to top right) ou em graus e pode utilizar várias cores ou transparent. Podemos ainda utilizar mais de um linear-gradient ao mesmo tempo.
radial-gradient() pode ter como parametro várias cores. Pode também ser definido como circle, ellipse.
Outras propriedades de alinhamento: closest-side, farthest-side, closest-corner, farthest-corner. Outro efeito interessante é quando colocamos o background-attachment: fixed.
Por fim, o execício da aula 126 foi aplicar um radial-gradient no topo de uma imagem para dar um efeito.
No display: flex o tamanho dos filhos não é aplicado diretamente neles, mas o sim no componente pai. O elemento que recebe o display: flex é chamado flex container, e os filhos que estão dentro do container são os display items.
A propriedade flex-direction por padrão recebe o valor row, mas podemos utilizar ainda os seguinter valores: column, row-reverse e column-reverse
O tamanho dos filhos, quando aplicamos a propriedade flex, varia de acordo com o tamanho da tela. Quando definimos um width para o elemento que não cabe na tela, os elementos vão ser redimensionados para se ajustar a tela (ficam menores que o definido).
Podemos fazer com que o elemento mude de posição quando não couber na tela com a propriedade flex-wrap. Podemos aplicar as duas propriedades acima utilizando a propriedade flex-flow: _direction _wrap.
Outra propriedade, o justify-content justifica os itens no espaço disponível. Seus valores podem ser center, flex-start, flex-end, space-around (distribui no espaço com margem), e space-between (distribui no espaço sem margem).
A propriedade align-items faz o alinhamento no eixo vertical. O align-items: baseline alinha os elementos pela base da fonte.
O align-content faz a justificação de todo o bloco, portanto só faz sentido quando temos a propriedade flex-wrap: wrap pois nesse caso movimenta todo o bloco (as linhas quebradas)
Entre as propriedades aplicadas nos filhos temos o flex-basis que define a largura do item.
A propriedade flex-grow faz com que o(s) item(s) seja redimensionado ocupando todo o espaço que sobra na tela. Ele divide os elementos pela soma dos valores definidos no flex-grow de cada item.
Já a flex-shrink reduz os elementos proporcionalmente para caberem na tela.
Podemos aplicar as tres propriedades acima com a propriedade flex: _grow _shrink _basis
A propriedade order aplicada aos itens filhos tem por padrão o valor '0'. Se aplicarmos qualquer valor a apenas um item ele vai ser o último item na ordem. Se aplicarmos um valor negativo o item passa a ser o primeiro.
Podemos ainda aplicar as propriedades vistas acima em cada item separadamente.
Na aula 132 passamos a entender a movimentação do flexbox.
Quando alteramos o flex-direction de row para column mudamos o posicionamento dos eixos de referencia.
Dessa forma o flex-basis que define a largura passa a definir a altura e o height passa a definir a largura do elemento.
Aula que descreve como os eixos do flexbox se comportam.
Aula 133 - Flexbox na prática
Montagem de um pequeno exemplo com flexbox. Note que utilizamos o flexgrow: 1 no parágrafo para posicionar o botão na base do box, pois o parágrafo ocupa todo o espaço que sobra entre o tútulo o o botão.
Foi criado um display: flex dentro do display: flex principal. Assim o primeiro posiciona os cards (que estão na classe da <section> que é o container principal).
O segundo display: flex posiciona os itens que estão dentro da classe do <article> que tem o conteúdo dos cards.
Introdução ao Grid Layout. Na figura acima podemos ver os principais nomes dos elementos do grid. Quanto a compatibilidade podemos verificar no site Can I use mas não podemos utilizar em versões do IE.
Aula 136 - grid templates
Para criarmos o grid layout iniciamos definindo a propriedade display: grid. Em seguida podemos definir quantas colunas utilizaremos e sua dimensão com a propriedade grid-template-columns.
Definimos a quantidade de linhas com a propriedade grid-template-rows. As propriedades de colunas e linhas podem ser definidas passando-se como atributo os valores de cada coluna ou linha individualmente (ex: grid-template-columns: 100px 100px 100px) ou com o valor repeat (ex: repeat(3, 100px)).
Não precisamos passar os valores de forma exata. Podemos por exemplo utilizar para um container de 300px repeat(2, 75px) 100px;. Nesse caso não teremos um total de 300px, mas sim 250px. O restante ficará fora da definição da coluna.
Para aplicar margens entre os elementos do grid, se usamos a propriedade margin temos o espaçamento de todos os itens em relação ao container principal e não apenas entre os elementos do grid.
Para aplicarmos as margens apenas entre os elementos do grid utuilizamos a propriedade grid-row-gap e grid-column-gap que podem ser unificados como grid-gap: row col(essas propriedades estão obsoletas segundo o Emmet do VSCode) .
Quando aplicamos o grid-gap temos a distribuição de espaço não uniforme, como na aula anterior onde sobra 10px ao lado direto da margem.
Quando utilizamos a unidade fr definimos que o espaço deve ser preenchido por 'n' frações do espaço total. Dessa forma quando, por exemplo definimos o numero de colunas com grid-template-columns: repeat(3, 1fr) indicamos 3 colunas distribuidas em 3 partes iguais.
Assim, se definirmos o width: 100% teremos 3 colunas iguais variando com o tamanho da janela do navegador.
Da mesma forma, se definirmos uma coluna fixa com _n px e as demais com 1fr teremos uma coluna fixa e as demais variando de acordo com a tela.
Para posicionarmos os elementos no grid devemos utilizar o numero das linhas do grid e não a posição do elemento.
As propriedades que movimentam os elementos são: grid-row-start/end, grid-column-star/end. Posicionamos os elementos definindo a "linha" de início e fim do elemento.
Quando selecionamos mais de um linha no intervalo entre o início e o fim, mesclamos os elementos no espaço e temos uma "quebra" dos demais elementos que vão se acomodar nos espaços. Pode ser necessário aumentar o número de linhas ou colunas para acomodar esses itens.
Se quisermos selecionar a ultima linha do grid podemos utilizar o seu valor ou podemos referenciá-la como -1.
Podemos utilizar a propriedade de forma resumida utilizando apenas grid-row: (n_inicio / n_fim) e grid-column: (n_inicio / n_fim).
Podemos utilizar o atributo span para selecionar o numero de colunas a serem mescladas da seguinte forma: grid-column: 1 / span 2. Com o span temos a seleção por elemento e não por linha.
Aula 141 - Criar uma estrutura de layout usando CSS Grid
Criação de um layout completo utilizando grid. Note que podemos sobrepor os itens no posicionamento do grid. O último elemento ficará por cima, mas podemos alterar esse posicionamento utilizando o z-index.
Aula 142 - grid-template-areas e grid-area
Ao utilizar o grid area, fazemos o desenho do template com os nomes das classes que utilizamos. Assim se tivermos um grid de 3 colunas e quisermos preencher o header com uma coluna utilizamos grid-template-areas: header header header, e depois apenas informamos na classe .header o valor grid-area: header.
O mesmo com as outras áreas. Por exemplo para preenchermos duas colunas com nav e uma com aside, listamos em grid-teplate-areas: nav nav aside, e assim por diante.
O grid-template-areas deve ser definido no container pai.
Se quisermos deixar algum ponto do grid em branco utilizamos o valor ' . ' (ponto).
Com template área não conseguimos mesclar os frames.
Para criarmos grid-lines nomeamos as linhas de grid, que ficam entre as células do template. Pdemos fazer isso utilizando '[]' com os nomes das linhas como se fossem nomes de classes.
Os nomes de grid-lines devem ser inseridos entre os valores que definem as medidas das células da seguinte forma:
grid-template-rows: [header-start] 100px [header-end nav-start] 50px 1fr 50px;.
No exemplo acima nomeamos a primeira linha do grid como 'header-start', a segunda linha como 'header-end' e 'nav-start' (nesse caso a segunda linha tem dois nomes por motivos semanticos).
Nomeadas as linhas utilizamos esses nomes para definir o grid-column e o grid-row, substituindo o valor posicional numérico pelos nomes atribuidos.
Quando utilizamos a notação main-start, main-end ou nav-start, nav-end, podemos suprimir o -start e o -end escrevendo apenas grid-row: nav invés de grid-row: nav-start / nav-end.
Podemos utilizar grid-lines nomeadas utilizando o repeat() da seguinte forma:
grid-template-columns: repeat(3, [col-start] 1fr [col-end])
Nesse caso ao referenciarmos as colunas em cada elemento chamamos apenas de col-start _numero da posição / col-end _numero da posição
Usamos o auto-fit para redimensionar os elementos de acordo com a variação do tamanho do container. Para o auto-fit ter utilidade devemos dimensionar os elementos com minmax(valor_mínimo, valor_máximo).
Já o auto-fill aumenta o número de colunas escondidas sem redimensionar os elementos. Ele preenche essas colunas com os elementos excedentes.
Quando utilizamos o auto-fill no entanto as linhas que são formadas além das definidas com o grid-template-row não serão dimensionadas automaticamente, ou seja, devemos dimensionar tantas linhas quanto forem necessárias para o número de elementos.
As linhas que são criadas automaticamente, independente da definição em grid-template-row são chamadas linhas implícitas. As definidas são chamadas linhas explícitas. As linhas implícitas são dimensionadas de acordo com o conteúdo do elemento.
Para que todas as linhas sejam redimensionadas sempre que necessário no grid-layout utilizamos a propriedade grid-auto-rows. Podemos colocar mais de um valor nessa propriedade o que fará que os valores sejam intercalados.
Minha execução do desafio.
Aula 148 - Resolução do desafio
Diferenças importantes sobre a minha execução:
Para as bordas do display não foi utilizado border, mas sim box-shadow: inset 3px 2px 0 white, ou seja, o inset, seta a sombra para dentro.
Na criação das linhas do grid foi utilizado a seguinte sintaxe grid-template-rows: auto repeat(5, 40px);, contra a minha que foi grid-template-rows: repeat(6, minmax(50px, 1fr));
Outras tags semânticas:
<kbd> - formata o texto para exibir teclas a serem pressionadas.
<abbr title="significado_da_abreviação"> - descreve uma abreviação e, em alguns navegadores, apresenta o que está escrito no title quando passamos o mouse.
<time datetime="2018-09-15T20:00:00-03:00"> - tag utilizada para atribuir data no formato intenacional. A descrição do datetime apresenta "ANO-MES-DIA_T_HORA:MIN:SEG+GMT".
<del> - indica que o texto foi removido, <ins> indica que o texto foi inserido.
Definição de <span lang=en-us> para termos em outrs linguagens.
Detalhes sobre especificidade. O !important sobreescreve qualquer estilo, por mais específico que seja, inclusive o estilo inline.
A cascata de especificidade de estilos tem a seguinte ordem(do menos específico para o mais específico): Estilo do Browser (default), Estilo do Ususário (alguns estilos como programas de acessibilidade), Estilo do Autor (regras gerais menos específico para o mais específico, declarado primeiro para o declarado por último), Estilos inline, Estilos do Autor definidas como !Important e Regras do Usuário declaradas como !Important.
Utilização do 'BEM' - Block Element Modifier. O 'BEM' é uma nomenclatura de classes para facilitar a especificação dos estilos CSS. Consiste em criar uma classe de bloco e denominar seus elementos filhos com o mesmo nome da classe do bloco seguida de '__' e um nome complementar.
O objetivo é não utilizar tags como seletor no código CSS. Outras metodologias que existem são o Atomic Design e o ITCSS.
Como os elementos são em bloco o height obedece a altura do elemento pai. Portanto para que o height funcione em porcentagem devemos atribuir valores a todas as tags pais até a tag <html>.
Para evitar aplicar height em todos os elementos, podemos utilizar uma unidade de medida que se adapta automaticamente ao viewport que é a vh(viewport height). Da mesma forma podemos utilizar o vw(viewport width).
Propriedades de transição: transition-property, transition-duration, transition-delay e transition-timing-function. (shorthand: transition: property duration timing-function delay;)
Podemos fazer transições múltiplas separando as propriedades ou conjunto de propriedades por vírgula.
Animation e Keyframes: enquanto o transition faz apenas transições simples e dependem da interação do usuário através de pseudo-classes ou do javascript, o animation permite fazer transições complexas, independente do usuário e com maior controle sobre a animação.
Os @keyframes são posicionados na linha do tempo em percentuais do tempo total para cada frame. Os frames entre cada keyframe são calculados automaticamente.
Somente valores numéricos podem ser animados. Melhores propriedades para animação são transform e opacity. Podemos utilizar a propriedade will-change para prepar o navegador para a animação(apenas em alguns elementos pois pode prejudicar a performance).
Para criarmos animações primeiro definimos o @keyframe com as opções de animação que vamos fazer em cada ponto da linha do tempo e o nome que será dado à animação.
Depois definimos qual o elemento do html que será animado através de seu seletor. Nele devemos inserir as propriedades da animação (animation-name, animation-duration, animation-timing-function)
Outras propriedades: animation-iteration-count (quantas vezes repete), animation-direction (define a direção da animação), animation-delay (atraso no início da animação)
animation-fill-mode serve para definir em que momento o elemento vai adquirir as propriedades da animação.
animation-play-state muda a propriedade para running ou paused.
Criação de um slideshow utilizando @keyframes. Ver código para detalhes.