<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T09:35:14+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "br"
}
-->
# Tarefa de Prática de HTML: Criar um Mockup de Blog

## Objetivo

Desenhar e codificar manualmente a estrutura HTML para a página inicial de um blog pessoal. Este exercício ajudará você a praticar HTML semântico, planejamento de layout e organização de código.

## Instruções

1. **Desenhe o Mockup do Seu Blog**
   - Faça um esboço visual da página inicial do seu blog. Inclua seções principais como cabeçalho, navegação, conteúdo principal, barra lateral e rodapé.
   - Você pode usar papel e escanear seu esboço ou utilizar ferramentas digitais (ex.: Figma, Adobe XD, Canva ou até PowerPoint).

2. **Identifique os Elementos HTML**
   - Liste os elementos HTML que você planeja usar em cada seção (ex.: `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, etc.).

3. **Escreva o Código HTML**
   - Codifique manualmente o HTML para o seu mockup. Foque na estrutura semântica e nas melhores práticas.
   - Inclua pelo menos 10 elementos HTML distintos.
   - Adicione comentários para explicar suas escolhas e estrutura.

4. **Envie Seu Trabalho**
   - Faça o upload do seu esboço/mockup e do arquivo HTML.
   - Opcionalmente, forneça uma breve reflexão (2–3 frases) sobre suas decisões de design.

## Rubrica

| Critério         | Exemplar                                                                                   | Adequado                                                                        | Precisa Melhorar                                                                |
|------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Mockup Visual    | Mockup claro e detalhado com seções identificadas e layout bem pensado                     | Mockup básico com algumas seções identificadas                                  | Mockup mínimo ou pouco claro; falta identificação das seções                    |
| Elementos HTML   | Usa 10+ elementos HTML semânticos; demonstra compreensão de estrutura e melhores práticas  | Usa 5–9 elementos HTML; alguma estrutura semântica                              | Usa menos de 5 elementos; falta estrutura semântica                             |
| Qualidade do Código | Código bem organizado, legível e com comentários; segue os padrões HTML                  | Código razoavelmente organizado; poucos comentários                             | Código desorganizado; falta de comentários                                      |
| Reflexão         | Reflexão perspicaz sobre escolhas de design e desafios                                    | Reflexão básica                                                                 | Sem reflexão ou irrelevante                                                     |

## Dicas

- Use tags HTML semânticas para melhor acessibilidade e SEO.
- Organize seu código com indentação e comentários.
- Consulte [Referência de Elementos HTML do MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) para orientação.
- Pense em como seu layout pode ser expandido ou estilizado em tarefas futuras.

---

**Aviso Legal**:  
Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.