# Módulo 1 - Fundamentos da Web

## Identificação

- **Status:** concluído
- **Nível:** iniciante
- **Carga horária:** 12 horas
- **Formato sugerido:** 6 aulas de 2 horas
- **Projeto:** página pública do Micro-SaaS

## Propósito

Este módulo apresenta a Web como plataforma de desenvolvimento. O aluno não começa decorando tags ou copiando código: primeiro compreende o caminho percorrido por uma requisição e depois constrói uma interface que respeita semântica, responsividade, acessibilidade e segurança básica.

## Competências

Ao final do módulo, o aluno será capaz de:

- diferenciar Internet e Web;
- explicar a relação entre cliente, servidor, DNS e HTTP;
- inspecionar requisições com as ferramentas do navegador;
- criar uma página com HTML semântico;
- estilizar uma página responsiva com CSS;
- adicionar uma interação simples com JavaScript;
- publicar o projeto;
- avaliar o resultado usando critérios objetivos.

## Pré-requisitos

- saber utilizar arquivos e pastas;
- instalar e abrir um editor de código;
- utilizar um navegador;
- não é necessário conhecimento prévio de programação.

## Sequência de aulas

| Aula | Tema | Produto da aula |
|---|---|---|
| [1.1](renderizadas/aula-01.html) | Como a Web funciona | Mapa de uma requisição e primeira página |
| [1.2](renderizadas/aula-02.html) | HTML semântico | Estrutura completa da landing page |
| [1.3](renderizadas/aula-03.html) | CSS e design responsivo | Interface adaptável a celular e desktop |
| [1.4](renderizadas/aula-04.html) | JavaScript no navegador | Formulário interativo |
| [1.5](renderizadas/aula-05.html) | DevTools, acessibilidade e segurança | Auditoria e correções |
| [1.6](renderizadas/aula-06.html) | Publicação e apresentação | Landing page publicada |

## Projeto do módulo

O aluno criará a página pública da **Knowledge AI**, plataforma inteligente de conhecimento que será desenvolvida durante toda a formação.

### Funcionalidades

- cabeçalho com navegação;
- seção principal com proposta de valor;
- apresentação dos principais recursos;
- chamada para ação;
- formulário de lista de espera;
- retorno visual após o envio;
- layout responsivo;
- navegação por teclado;
- metadados básicos.

### Estrutura inicial

```text
knowledge-ai/
|-- index.html
|-- css/
|   `-- styles.css
|-- js/
|   `-- main.js
`-- assets/
```

## Avaliação

| Critério | Pontos |
|---|---:|
| Estrutura semântica | 20 |
| Responsividade | 20 |
| Acessibilidade | 15 |
| Interação JavaScript | 15 |
| Organização do código | 10 |
| Uso de Git | 10 |
| Publicação e apresentação | 10 |
| **Total** | **100** |

## Critérios de conclusão

- obter pelo menos 70 pontos;
- entregar o repositório;
- apresentar a página funcionando em celular e desktop;
- explicar uma requisição HTTP observada no navegador;
- não apresentar erros no console durante o fluxo principal.

## Riscos pedagógicos

### Copiar código sem compreender

O aluno deverá explicar cada parte essencial do projeto e realizar uma pequena alteração durante a apresentação.

### Dependência precoce de IA

A IA poderá ajudar a explicar mensagens de erro, mas o aluno deverá escrever e compreender a primeira versão da página.

### Excesso de ferramentas

O módulo utiliza apenas editor, navegador, Git e arquivos estáticos. Frameworks serão introduzidos depois que os fundamentos estiverem consolidados.

## Entrega para o portfólio

- link público da página;
- repositório organizado;
- README com objetivo, tecnologias e instruções;
- captura da página em versão móvel e desktop;
- breve relato do que foi aprendido.

## Materiais de conclusão

- [Lista de verificação de auditoria](materiais/checklist-auditoria-web.md)
- [Rubrica do projeto](materiais/rubrica-projeto-modulo-1.md)
- [Roteiro de apresentação](materiais/roteiro-apresentacao.md)
- [README do projeto de referência](exemplos/aula-1.2/README.md)

## Fontes Markdown

- [Aula 1.1](aulas/01-como-a-web-funciona.md)
- [Aula 1.2](aulas/02-html-semantico.md)
- [Aula 1.3](aulas/03-css-responsivo.md)
- [Aula 1.4](aulas/04-javascript-navegador.md)
- [Aula 1.5](aulas/05-devtools-acessibilidade-seguranca.md)
- [Aula 1.6](aulas/06-git-publicacao-apresentacao.md)