Exercícios — FAQ DevShop

1. Você é o desenvolvedor encarregado de criar a página de Ajuda do e-commerce “DevShop” chamada faq.html. A página deve apresentar as dúvidas mais comuns de forma organizada e oferecer um formulário de contato direto para questões não respondidas.

Conteúdo do FAQ para que você não precise inventar

Utilize o texto abaixo para criar a seção de perguntas e respostas da página.

* Pergunta 1: Como faço para rastrear meu pedido?
* Resposta 1: Após a confirmação da sua compra, você receberá um e-mail com o código de rastreamento. Você pode usar esse código no site da transportadora para acompanhar a entrega em tempo real.

* Pergunta 2: Quais são as formas de pagamento?
* Resposta 2: Aceitamos as principais bandeiras de cartão de crédito, PIX e boleto bancário. O pagamento pode ser parcelado em até 10x sem juros no cartão.

* Pergunta 3: A DevShop entrega na minha cidade?
* Resposta 3: Sim, entregamos em todo o território nacional! O prazo e o valor do frete podem variar de acordo com a sua localidade.

Requisitos

• A página deve ter um título principal de nível 1.
• Deve conter no mínimo os 3 itens de sanfona (“accordion”) utilizando o conteúdo fornecido. Cada item deve permitir que o usuário clique na pergunta para expandir e ver a resposta.
• Abaixo da lista de perguntas, deve existir um botão que, ao ser clicado, abre uma janela modal.
• Dentro do modal, deve haver um título de nível 2.
• O modal deve conter um formulário de contato com os campos: nome, e-mail, telefone e mensagem.
• O formulário deve ter um botão para enviar os dados e um botão para cancelar (que fechará o modal).
• Faça com que o primeiro item do FAQ já apareça aberto por padrão quando a página carregar (Você deve pesquisar como fazer isso).

Seu exercício deve ficar similar a imagem abaixo:

2. Você vai criar uma página de homenagem ou apresentação sobre um tema do seu interesse pessoal chamada fan-page.html. Escolha um tema que você goste, como seu canal do YouTube ou streamer favorito, sua banda ou artista musical preferido, um filme, série ou jogo que você adora, um destino de viagem dos sonhos ou até mesmo seu time do coração.

Requisitos

• A página deve ter um título principal de nível 1 sobre o tema que você escolheu.
• O conteúdo deve ser organizado em pelo menos duas seções, cada uma com um subtítulo de nível 2.
• Em uma das seções, você deve incorporar um vídeo do YouTube relevante para o seu tema, que seja reproduzível diretamente na página.
• Na outra seção, você deve incorporar um mapa interativo do Google Maps que aponte para um local significativo relacionado ao seu tema (por exemplo, a cidade natal do artista, o local onde um filme foi gravado, o estádio do time, etc.).
• Para obter o código de ambos os conteúdos, você precisará investigar as opções de “Compartilhar” e, em seguida, “Incorporar” disponíveis nas próprias plataformas do YouTube e do Google Maps.

Desafio Extra (Opcional):

• Além do vídeo e do mapa, encontre um terceiro serviço online que permita a incorporação de conteúdo (como Spotify, X (Twitter), Pinterest, etc.) e adicione um elemento dele à sua página. Por exemplo, uma playlist de uma trilha sonora ou o tweet de um criador de conteúdo.

Seu exercício deve ficar similar a imagem abaixo:

3. Você entrou em um projeto de um blog de tecnologia, o “GigaPixel Blog”, e descobriu que o desenvolvedor anterior construiu a estrutura da página principal usando apenas tags <p> e texto simples. Sua tarefa é refatorar este código, aplicando as tags HTML semânticas apropriadas.

Código HTML Inicial

<body>

    <p>GigaPixel Blog</p>
    <p>Seu portal para o futuro da tecnologia.</p>

    <p>Home | Notícias | Reviews | Contato</p>

    <p>A Revolução Quantum: Como a Computação Quântica Moldará Nosso Futuro</p>
    
    <p>Por Ada Lovelace Jr.</p>
    <p>Publicado em: 12 de setembro de 2025</p>

    <p>A computação quântica promete transformar radicalmente a tecnologia como a conhecemos. Com a capacidade de processar informações de maneiras fundamentalmente novas, os computadores quânticos podem resolver problemas complexos que estão além do alcance até dos supercomputadores mais poderosos de hoje.</p>
    <p>Empresas de tecnologia e centros de pesquisa em todo o mundo estão em uma corrida para desenvolver processadores quânticos estáveis e escaláveis. As aplicações potenciais vão desde a criação de novos medicamentos e materiais até a otimização de sistemas financeiros e o avanço da inteligência artificial.</p>

    <p>Posts Populares</p>
    <p>Review do Novo AI Phone</p>
    <p>5 Dicas para Otimizar seu PC</p>
    <p>O Futuro da Realidade Virtual</p>
    
    <p>© 2025 GigaPixel Blog. Todos os direitos reservados.</p>

</body>

Requisitos

• Sua página deve conter um titulo principal de nível 1 e dois subtítulos de nível 2.
• Deve conter pelos menos as tags semânticas: <header>, <nav>, <article>, <main>, <aside> e <footer>.
• A página deve conter duas listas não ordenadas.

Seu exercício deve ficar similar a imagem abaixo: