Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Forma diferente resultado igual o parecido!

Olá ao realizar a lista de exercícios da aula 3, atividade 6, item 4 e 5, notei que ao final, minha forma de chegar ao resultado foi diferente e talvez até mais trabalhosa, claro isso se deu ao fato de tentar desenvolver um raciocínio prórprio para concretizar o aprendizado, mas essa forma diferente da do instrutor meu preocupou em estar incorrendo em erro e também se a forma que fiz é uma boa prática ou não, baseado nisto envio os cógigos HTML e CSS do projeto de aula da Alura com minhas modificações destacadas em comntário do CSS. A cor verde posta no hover foi só para fazer diferente mesmo. Aguardo uma instrução de retorno segue abaixo:

HTML:

<!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>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="#">Home</a>
            <a class="cabecalho__menu__link" href="#">Sobre min</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong 
            class="titulo-destaque">com um Front-end de qualidade!
            </strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora
            Front-end com especialidade em React, HTML e
            CSS. Ajudo pequenos negócios e designers a
            colocarem em prática boas ideias. Vamos
            conversar?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes</h2>
                <a class="apresentacao__links__link" href="https://github.com/rafaballerini">
                    <img src="./assets/github.png">
                    Github
                </a>
                <a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballerini">
                    <img src="./assets/linkedin.png">
                    linkedin
                </a>
                <a class="apresentacao__links__link" href="https://twitch.tv/guilimadev">
                    <img src="./assets/twitch.png">
                    Twitch
                </a>
            </div>
        </section>
        <img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Alura.</p>
    </footer>
</body>

</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

*{
    margin: 0;
    padding: 0;
}
body{
    /*height: 100vh;*/
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.cabecalho{ /*Aula 3, atividade 6, item 4*/
    padding: 4% 15%; /*Aula 3, atividade 6, item 5*/
    color: #22D4FD;
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 600;

}

.cabecalho__menu{ /*Aula 3, atividade 6, item 4*/
    display: flex;
    gap: 80px;
    padding: 0% 1%;

}

.cabecalho__menu__link{ /*Aula 3, atividade 6, item 4*/
    text-decoration: none;
    color: #22D4FD;
}

.cabecalho__menu__link:hover{ /*Aula 3, atividade 6, item 4*/
    color: #00ff00;
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao{
    padding: 8% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.apresentacao__links__subtitulo{
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}
.apresentacao__links__link{
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}
.apresentacao__links__link:hover{
    background-color: #272727;
}

.rodape {
    color: #000000;
    background-color: #22D4FD;
    padding: 24px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400px;
}
3 respostas

Olá, Rafael, como vai?

Sua abordagem mostra um ótimo esforço para aplicar o que foi aprendido de forma autônoma, e isso é muito positivo. Comparando com a proposta do instrutor, há diferenças interessantes tanto no estilo quanto na estrutura, e vale destacar também os impactos que cada escolha pode ter na responsividade.

Na sua implementação, você usou padding com unidades em porcentagem (4% 15%) na .cabecalho, o que é uma decisão inteligente quando pensamos em responsividade, pois esse tipo de unidade se adapta proporcionalmente ao tamanho da tela. Já o gap: 80px entre os links cria bastante espaço, o que funciona bem em telas maiores, mas pode exigir ajustes em telas menores, dependendo do layout geral. Um gap mais moderado ou controlado via media queries pode ajudar nesses casos.

A solução do instrutor, por outro lado, utiliza valores fixos de padding e margin com px, o que dá um controle mais direto sobre o layout, mas pode exigir mais ajustes manuais para se adaptar a diferentes tamanhos de tela. O uso de justify-content: center também tende a manter o conteúdo mais centralizado, o que pode favorecer layouts mais estreitos, como em dispositivos móveis.

Ou seja, em termos de responsividade, a sua escolha de trabalhar com unidades relativas já é um passo à frente. Com pequenos ajustes, como eventualmente diminuir o gap em telas menores, sua solução pode se adaptar a diferentes resoluções.

No geral, ambas as abordagens são válidas. O que muda é o foco: a do instrutor é mais direta e controlada, enquanto a sua já incorpora práticas mais próximas de um design responsivo.

O fórum está à disposição sempre que quiser trocar mais ideias ou compartilhar seus avanços.

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

Pode me ajudar a entender o que quer dizer media queries?

solução!

Olá, Rafael.

Claro, posso te explicar. Media queries são regras do CSS que permitem aplicar estilos diferentes dependendo do tamanho da tela. Elas são muito úteis para criar sites responsivos, ou seja, que funcionam bem tanto em telas grandes (como de computadores) quanto pequenas (como celulares).

Por exemplo, se você quiser diminuir o espaçamento entre os links do menu em telas menores, pode usar algo assim:

@media (max-width: 768px) {
  .cabecalho__menu {
    gap: 40px;
  }
}

Esse bloco de código diz: “Se a largura da tela for de no máximo 768 pixels, aplique esse novo estilo para a classe .cabecalho__menu. Com isso, o espaçamento entre os itens do menu será reduzido em telas menores, melhorando a visualização.

No próximo curso da sequência, chamado "HTML e CSS: trabalhando com responsividade e publicação de projetos", você vai ver esse conteúdo com mais profundidade e na prática, o que vai ajudar bastante a expandir o que você já começou a construir.

Qualquer outra dúvida, o fórum está à disposição.