Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Feedback sobre o código, estruturas e boas práticas

Oi, pessoal! Tudo bem?

Estou participando da imersão da Alura e trabalhando nos desafios propostos. Tenho uma dúvida que sempre me acompanha: será que as estruturas que estou criando e os códigos que estou desenvolvendo nesses desafios são de boa qualidade? Eu me pergunto se eles atendem aos requisitos exigidos no mercado de trabalho, já que, muitas vezes, o código não fica exatamente igual ao exemplo proposto.

Aqui está um exemplo de código que desenvolvi para o footer de uma página. Gostaria de saber a opinião de vocês:

html:

<footer>
    <div class="footer-main">
        <div class="footer-main__content">
            <span class="footer-tittle">Testar o premium de graça</span>
            <span class="subtitle">Inscreva-se para curtir música ilimitada e podcasts com apenas alguns anúncios. Não precisa de cartão de crédito.</span>
        </div>
        <button class="subscribe__button">Inscreva-se grátis</button>
    </div>
</footer>

css:

footer {
    position: fixed;
    bottom: 0;
    color: #FFF;
    width: 100%;
    background: linear-gradient(to right, #BE18A2, #4296FF);
}

.footer-main {
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
}

.footer-tittle {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    font-family: "DM Sans", sans-serif;
}

.footer-main__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-main .subscribe__button {
    border-radius: 20px;
    width: 150px;
    font-weight: 800;
}

O que vocês acham? Há algo que eu poderia melhorar ou que pode ser otimizado? Agradeço desde já pela ajuda!

1 resposta
solução!

Oi, Pedro! Tudo bem?

Que legal que você está participando da imersão da Alura e se dedicando aos desafios. É super importante buscar feedback para melhorar continuamente suas habilidades. Vamos dar uma olhada no seu código:

  1. HTML Estruturado: Seu HTML está bem estruturado e semântico. Usar tags como <footer> é uma boa prática, pois melhora a acessibilidade e o SEO da página.

  2. CSS:

    • Design Responsivo: Você está utilizando flexbox, o que é ótimo para criar layouts responsivos. Isso facilita a adaptação do design em diferentes tamanhos de tela.
    • Cores e Gradientes: O uso de um gradiente de fundo no footer é uma boa escolha para adicionar um toque visual interessante.
    • Consistência de Nomes: Notei que você usou "tittle" em vez de "title". É uma pequena correção, mas manter a consistência nos nomes ajuda na legibilidade do código.
    • Botão: A estilização do botão está clara e a largura fixa pode funcionar bem, mas considere usar unidades relativas (como % ou em) para melhorar a responsividade.
  3. Boas Práticas:

    • Acessibilidade: Considere adicionar atributos aria ou role quando necessário para melhorar a acessibilidade.
    • Comentários: Incluir comentários no código pode ajudar outros desenvolvedores (ou você mesmo no futuro) a entender rapidamente a estrutura e o propósito de cada seção.

No geral, seu código está bem organizado e segue boas práticas. Pequenos ajustes como a correção de nomes e a consideração de acessibilidade podem ajudar a torná-lo ainda melhor. Continue praticando e buscando feedback, isso é fundamental para o desenvolvimento profissional.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado