---
# System prepended metadata

title: Módulo 1 - Frontend

---

## Aula 1 - Introdução a Web e Frontend

**Observações gerais: Senti falta dos exercícios**

1. Introdução
    - Tudo ok
2. O que é internet?
    - Tudo ok
3. Como a internet funciona?
    - Tudo ok
4. Navegadores Web
    - Tudo ok
5. O que é frontend e backend
    - Tudo ok
6. Tipos de frontend
    - Tudo ok 
7. As principais linguagens da web
    - No minuto 2:05 foi citado os simbolos de maior > e menor <, de forma invertida.
8. Removendo css e javascript da página
    - No minuto 3:44 foi dito que o html que não estava ativo, porém o que não estava ativo era o Javascript.

## Aula 2 - Setup

1. Introdução
    - Tudo ok
2. Deixando o vscode em português
    - Tudo ok
3. Vscode conhecendo o explorador
    - Nesse vídeo já surge um projeto diretamente dentro do vscode, mas não foi mostrado como adicionar esse projeto ou criar esses arquivos, isso pode trazer um pouco de confusão para os alunos (parece que no vídeo posterior, esses arquivos são criado, não sei se é apenas um erro na ordem dos vídeos).
    - O tema do vscode também é diferente dos demais, não sei se o vídeo foi gravado posteriormente, mas para que for detalhista isso vai ser percebido como um vídeo diferente dos demais.
4. Vscode conhecendo menu lateral esquerdo
    - Tudo ok
5. Extensões do vscode
    - Sempre estar alerta para não falar aula quando for se referir a vídeos
    - O ideal é mostrar o funcionamento das extensões, no vídeo só foi explicado o que cada uma faz, mas não foi mostrado os exemplos.
    - Por exemplo, é citada uma extensão chamada **auto close tag**, porém os alunos não sabem ainda o que é tag, porque irão aprender isso na próxima aula.
6. Atalhos dos vscode
    - Nesse vídeo novamente o tema do vscode está diferente, é sempre bom manter o padrão para que os alunos não pensem que é um vídeo "gambiarra", ou seja, um vídeo que foi adaptado para corrigir algum erro no conteúdo.
    - Em relação ao conteúdo, está ok.
7. Paleta de comandos vscode
    - Tudo ok.
8. Devtools
    - Esse vídeo na minha visão deveria vir em um momento futuro, pois alguns termos são usados e os alunos ainda não viram, tais como:
        - display block
        - elemento
        - tag img
        - div
        - styles
        - propriedade color
        - estilo computado
        - font-family, font-size
        - margin, width

## Aula 3 - HTML

1. O que é HTML
    - Tudo ok
2. Conhecendo as tags
    - No minuto 1:02 e no minuto 1:49 foram citados os simbolos de maior > e menor <, de forma invertida.
3. Tags de texto e estrutura de página
    - Tudo ok
4. Tags de texto e estrutura de página prática
    -  Nas aulas iniciais na minha visão seria melhor digitar todos os códigos, sem usar snippets do vscode. Nesse vídeo foi usado um snippet que já gera toda a estrutura do html.
    -  Também não foi explicado como que esse snippet gera automaticamente o código HTML.
5. Tags self-closing
    - O slide ficou todo cortado nesse vídeo 
![image](https://hackmd.io/_uploads/rkgLU7nY6.png)
6. Tags self-closing na prática
    - Tudo ok
7. Aninhamento de tags e indentação
    - Tudo ok
8. Aninhamento e indentação na prática
    - Tudo ok
9. Mais tags
    - Tudo ok
10. Mais tags prática
    - Tudo ok
11. Atributos
    - Tudo ok
12. Atributos na prática
    - Tudo ok.
13. Caminho absoluto e relativo
    - Tudo ok
14. Tags semanticas
    - Tudo ok
15. Tags semânticas na prática
    - Tudo ok
16. Tags block inline
    - Tudo ok
17. Arvore HTML
    - Tudo ok
18. Usando vídeo interativo
    - Não sei se haverá outra explicação, caso não, o vídeo precisaria ser mais detalhado e completo.
    
    
## Aula 4 - CSS

**Observações:**
- Faltou o vídeo 8, não sei se só foi um erro de nomenclatura ou não.
- Bem legal usar o inspecionar elementos para ensinar nas aulas



1. O que é CSS
    - Tudo ok
2. Estrutura CSS
    - Maior > e Menor < novamente invertidos
    - Fora isso, tudo ok.
3. Seletores
    - Tudo ok
4. Cascata
    - Não sei se é um problema, mas citar cada vídeo da aula como "aula", pode trazer confusão para os alunos. 
    - Não sei se é proposital, mas o inspecionar elementos tem sido usado, mas as explicações anteriores sobre ele foram poucas, a preocupação é os alunos não saberem como usar e ter reclamações.
5. Maneiras de escrever css
    - Tudo ok
6. Maneiras de escrever css prática
    - Tudo ok
7. Ordem de prioridade
    - Tudo ok
9. Herança
    - Tudo ok
10. Especificidade
    - Foi usado o loremipsum sem explicar como usar no vscode
    - Faltou aprofundar um pouquinho mais em especificidade, para mostrar o cálculo de especificidade![image](https://hackmd.io/_uploads/BJ5z0YpF6.png)

11. Unidade de medida
    - No video foi dito que o % é relativo ao tamanho da tela, mas na verdade o % é relativo ao tamanho do elemento pai. O que é relativo ao tamanho da tela é vw e vh. No caso do vídeo, aumentou porque o elemento pai era o body que por coicidência pega o tamanho total da tela.

12. Box Model
    - Tudo ok
13. Inline block
    - Tudo ok



## Aula 5 - CSS - Parte 2

1. Pseudo elementos
    - No minuto 4:12 foi dito "igual igual" para os sinais de :: (No caso seria, dois pontos dois pontos) (Foi confuysão porque no próximo vídeo foi usado o termo correto)
    - Exemplo bacana para before e after
2. Pseudo classes
    - Uma coisa que eu fiz nas minhas gravações e os alunos criticaram muito, foi quando eu falava: "Agora vamos usar uma ul, quer dizer vamos usar uma div, não... melhor usar a ul mesmo". Nesse vídeo Jess fez algo igual, pode dar problemas igual os meus vídeos deram. Porque os alunos julgam que isso é falta de planejamento

3. Combinadores
    - Tudo ok
4. Cores
    - Tudo ok
5. Propriedades de texto
    - Tudo ok
6. Propriedades que alteram o tamanho do elemento
    - Background Image foi mostrado de forma muito corrida
7. Outras propriedades
    - 