WEB102 · Fundamentos de HTML e CSS
Sobre o curso
Construa páginas limpas e acessíveis com HTML semântico e estilize-as com CSS moderno, incluindo box model, Flexbox e Grid. Você termina com um site de página única para um negócio local, escrito à mão.
Para quem é
Iniciantes que já entendem como a web funciona e querem criar suas primeiras páginas de verdade, sem construtores visuais.
Pré-requisitos
Ter concluído o WEB101 ou ter conhecimento equivalente sobre navegadores, URLs e HTTP.
O que você será capaz de fazer
- Escrever um documento HTML válido usando elementos semânticos para estrutura e significado.
- Montar um formulário acessível com rótulos, tipos de campo e validação nativa básica.
- Aplicar seletores CSS, cascata e box model para controlar espaçamento e tipografia.
- Diagramar uma página com Flexbox e Grid e conferir o resultado no inspetor do navegador.
Aulas
- Aula 1 · HTML semântico: estrutura e significado
- Aula 2 · Formulários e acessibilidade
- Aula 3 · Fundamentos de CSS, Flexbox e Grid
- Aula 4 · Laboratório e atividade
Laboratório: Codifique à mão o site de uma página para um negócio
Você vai criar os arquivos index.html e styles.css para um negócio local fictício, com seções semânticas, uma grade de serviços e um formulário de contato. Depois vai validar o HTML, inspecionar o box model no DevTools e corrigir pelo menos dois problemas apontados pelo validador ou pela sua revisão.
Ferramentas gratuitas: VS Code (gratuito) com a extensão Live Server ou o plano gratuito do CodePen; DevTools do navegador e o validador HTML gratuito do W3C
Atividade avaliada
Crie um site de página única para um pequeno negócio à sua escolha, como um pet shop ou um escritório de contabilidade. A página deve ter um cabeçalho com navegação, uma seção de destaque, uma seção de serviços diagramada com Grid, uma seção de depoimentos ou horários diagramada com Flexbox, um formulário de contato com pelo menos quatro campos rotulados e um rodapé. O HTML deve passar no validador do W3C sem erros, e você deve escrever um README curto com suas escolhas semânticas e de cores.
| Critério | Peso | Como é um trabalho excelente |
|---|---|---|
| HTML semântico e válido | 30% | Usa header, nav, main, section, footer e títulos em ordem; o validador não aponta erros. |
| Qualidade do CSS e do layout | 30% | Grid e Flexbox são usados de forma adequada; o espaçamento é consistente; os estilos são organizados e reaproveitados. |
| Formulário e conteúdo acessíveis | 25% | Todo campo tem rótulo, as imagens têm texto alternativo significativo e o contraste é legível. |
| README e apresentação | 15% | O README explica com clareza a estrutura, as cores e as fontes, e a página parece finalizada. |
Peça de portfólio
Um site de página única, codificado à mão e validado, para um pequeno negócio, guardado na sua pasta de projetos ou em um repositório gratuito no GitHub.
Próximo passo
Continue com WEB103 · Fundamentos de JavaScript · 6 horas · R$ 60,00
Conteúdo do curso
WEB102 · Fundamentos de HTML e CSS (4 h)
-
Aula 1 · HTML semântico: estrutura e significado
-
Aula 2 · Formulários e acessibilidade
-
Aula 3 · Fundamentos de CSS, Flexbox e Grid
-
Aula 4 · Laboratório e atividade
-
WEB102 Avaliação · Fundamentos de HTML e CSS