msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c6eb20fcc1'
${ noResults }
Web-Dev-For-Beginners/translations/br/3-terrarium/1-intro-to-html/assignment.md

4.1 KiB
Raw Blame History Escape

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 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. 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.