Sobre a Grid

Olá Leveditor, tudo bem?

Sobre a sua primeira pergunta, eu não entendi muito bem. Mas o grid-area é um atalho para: grid-row-start, grid-column-start, grid-row-end, grid-column-end. Além disso, ele pode nomear alguma seção do grid e usá-la para montar um grid completo com grid-template-area, por exemplo:

.header{
    grid-area: header;
}

.main{
    grid-area: section;
}

.aside{
    grid-area: aside;
}

body{
    grid-template-areas: 
    "header header" //PEGA TODA A LARGURA
    "section aside"; //DIVIDE A LARGURA IGUALMENTE ENTRE O SECTION E  ASIDE

Depois dê uma olhada nesse guia, deve te ajudar ainda mais: https://www.origamid.com/projetos/css-grid-layout-guia-completo/

Espero ter ajudado, abraços!

Nas vídeos aulas o professor só colocou imagem como exemplo, mais se quiser colocar videos ao invés de ficar colocando imagem como fazer isso?

Tipo a primeira imagem é sobre o jogo Fortnite certo, se eu quiser colocar vídeo no lugar da imagem do Fortnite como fazer isso é possível fazer isso?

Obrigado entendi o que é grid area

Se um video estiver em seu computador, é só utilizar o elemento <video>. No link a seguir você pode ver como se aplica com exempos: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/video

Mas se o vídeo estiver no YouTube, é só clicar em "compartilhar'' e depois em "incorporar" que você ganhará um código assim:

<iframe width="560" height="315" src="https://www.youtube.com/embed/D8rGA6XmJYI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Depois disso, é só colocar esse código no lugar da imagem que você quiser trocar.

Espero ter ajudado, abraços!

obrigado