Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Projeto] Resolução Desafio Imagem

{% load static %}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Space</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'styles/style.css' %}">

</head>

<body>
    <div class="pagina-inicial">
        <header class="cabecalho">
            <img src="{% static '/assets/logo/Logo(2).png' %}" alt="Logo da Alura Space" />
            <div class="cabecalho__busca">
                <div class="busca__fundo">
                    <input class="busca__input" type="text" placeholder="O que você procura?">
                    <img class="busca__icone" src="{% static '/assets/ícones/1x/search.png' %}" alt="ícone de search">
                </div>
            </div>
        </header>
        <main class="principal">
            <section class="menu-lateral">
                <nav class="menu-lateral__navegacao">
                    <a href="index.html"><img src="{% static '/assets/ícones/1x/Home - ativo.png' %}"> Home</a>
                    <a href="#"><img src="{% static '/assets/ícones/1x/Mais vistas - inativo.png' %}"> Mais vistas</a>
                    <a href="#"><img src="{% static '/assets/ícones/1x/Novas - inativo.png' %}"> Novas</a>
                    <a href="#"><img src="{% static '/assets/ícones/1x/Surpreenda-me - inativo.png' %}"> Surpreenda-me</a>
                </nav>
            </section>
            <section class="conteudo">
                <section class="imagem">
                    <div class="imagem__conteudo">
                        <img class="imagem__imagem" src="{% static '/assets/imagens/galeria/carina-nebula.png' %}">
                        <div class="imagem__info">
                            <div class="imagem__texto">
                                <p class="imagem__titulo">“Penhascos Cósmicos” na Nebulosa Carina</p>
                                <p class="imagem__descricao">12 de julho de 2022</p>
                                <p class="imagem__texto">O que se parece muito com montanhas escarpadas em uma noite enluarada é na verdade a borda de uma região jovem e próxima de formação de estrelas NGC 3324 na Nebulosa Carina. Capturada em luz infravermelha pela Near-Infrared Camera ( NIRCam ) no Telescópio Espacial James Webb da NASA, esta imagem revela áreas anteriormente obscurecidas do nascimento de estrelas.</p>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
        </main>
    </div>
    <footer class="rodape">
        <div class="rodape__icones">
            <a href="https://twitter.com/AluraOnline" target=”_blank” >
                <img src="{% static '/assets/ícones/1x/twitter.png' %}" alt="ícone twitter">
            </a>
            <a href="https://www.instagram.com/aluraonline/" target=”_blank” >
                <img src="{% static '/assets/ícones/1x/instagram.png' %}" alt="ícone instagram">
            </a>
        </div>
        <p class="rodape__texto">Desenvolvido por Alura</p>
    </footer>
</body>

</html>
1 resposta

Fala, Eduardo! Tudo bom?

Agradeço por trazer sua solução para o fórum!

Curti demais como trabalhou a integração do Django com arquivos estáticos para organizar o projeto, entendeu perfeitamente a importância da estrutura semântica em HTML para manter clareza e usou bem a separação de estilos via CSS externo para garantir manutenção mais simples. Esse tipo de prática deixa o código mais escalável e profissional.

Algo bem legal para complementar é ajustar pequenos detalhes de acessibilidade e consistência, como o uso correto de target="_blank" (com aspas retas) e adicionar alt descritivos em todas as imagens. Dessa maneira:

<a href="https://twitter.com/AluraOnline" target="_blank">
  <img src="{% static '/assets/ícones/1x/twitter.png' %}" alt="Ícone do Twitter">
</a>

Isso faz com que os links externos funcionem corretamente e melhore a acessibilidade para leitores de tela.

E algumas boas práticas que você pode adotar são:

  • Consistência: revisar aspas e atributos para evitar erros de sintaxe.
  • Acessibilidade: garantir que todos os ícones tenham alt descritivos.
  • Organização: separar componentes em templates menores no Django para facilitar manutenção.

Continue postando as suas soluções! Além de ganhar pontos de XP na plataforma, você pode ajudar outros estudantes no fórum.

Ah, uma pergunta: você prefere evoluir esse projeto adicionando mais páginas com navegação dinâmica no Django ou focar em melhorar a acessibilidade e responsividade da página inicial?

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!