Entrar Ainda não tem acesso?
3
respostas

Resolução diferente

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Cards

por Tiago Felix
| 13.5k xp | 12 posts

Oi gente tudo bem? Então, eu costumo sempre tentar implementar tudo sozinho antes de ver a aula, acho facilita no aprendizado, e dessa vez eu consegui chegar no resultado porem com uma resolução diferente. Gostaria de compartilhar meu codigo aqui com vcs (só a parte dos cards mesmo) e pedir a opinião e a sugestão de vcs, caso alguma coisa não esteja legal.

HTML

 <section class="card">
        <div class="card__descricao">
            <h3 class="descricao__titulo">Talvez você também se interesse por...</h2>
            <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h3>
            <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
            <div>
                <img class="descricao__icones" src="./img/Favoritos.svg" alt="Pagina de favotiros">
                <img class="descricao__icones" src="./img/Compras.svg" alt="Pagina de favotiros">
            </div>

        </div>
        <div class="card__descricao">
            <img class="coonteudo__inmagem" src="/img/Angular.svg" alt="Icone do Angular">
            <a class="conteudo__botao" href="#">Saiba mais</a>
        </div>
    </section>

CSS

.card{
    background-color: var(--branco-primario);
    border-radius: 10px;
    margin: 1em;
    padding: .7em;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

}

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

.descricao__titulo{
    color: var(--titulo-primario);
    font-weight: 700;
}

.descricao__titulo-livro{
    font-weight: 700;
    font-size: 18px;
    color: var( --titulo-secundario);
}

.descricao__texto{
    font-weight: 400;
}


.conteudo__botao{
    color: var(--branco-primario);
    font-weight: 700;
    background-color: var(--titulo-primario);
    padding: 12px 16px 12px 16px;
    text-align: center;
    text-decoration: none;
}
3 respostas
por Matheus Marques Da Silva
| 112.2k xp | 51 posts

Olá Tiago, beleza? Olha amigo seu codigo esta bem estruturado! Limpo e organizado, isto ajuda qualquer outro programador a ajustar seu código e corrigir erros futuros!

Só uma recomendação, nos elementos pais, deixe algo mais descritivo, por exemplo "card", e muito vago, ja que "futuramente" você pode acabar adicionando outro, entendeu? Isto serve para qualquer outro elemento, é então evitar ter que modificar sua class futuramente junto com o seu css por causa de "conflitos" futuros, então especifique um pouco com base no que aquilo representa , "card-de_recomendacoes" Para os Elementos filho deste, seja ainda mais especifico, e que tenha relação com o elemento pai, por exemplo, além de usar o "descricao__titulo" use "card-titulo", pois facilita a identificação tanto no HTML e principalmente no CSS, evitando confusões e deixando o código mais facil de se manusear por você ou por outros!

Faça o mesmo para as classes .conteudo__botao e descricao__icones, pois "poderá haver outros "futuramente", mesmo que neste projeto não, e bom já se habituar a fazer isto já que ao entrar no mercado de trabalho, outras pessoas vão mexer no seu código.

Então mais um Exemplo: .conteudo-botao_saibamais

Bem espero ter ajudado! Deus abençoe!

por Tiago Felix
| 13.5k xp | 12 posts

Muito obrigado pelo feedback Matheus, confesso que reamente ainda tenho uma certa dificuldade em dar nomes as classes e seus elementos "filhos", inclusive caso vc tenha alguma dica de material ou algo para melhorar ficaria mto grato, pode parecer algo bobo mas minha cabeça da umas travadas nessas horas de nomear kkkkk

por Matheus Marques Da Silva
| 112.2k xp | 51 posts

Tiago, a escolha de nomes para classes e IDs, vai de variar, e é necessário um pouco de percepção do que você esta fazendo e o que aquela linha ou bloco de linhas vai realizar, por isso, não existe uma "formula", existe recomendações, como esta que te dei, isto você adquire com o tempo e pratica, eu tambem tenho estes problemas, mas estou a todo momento buscando formas de deixar o código mais legível, organizado e sem confusões para min, ou a comunidade.

Acredito que no Youtube, Google, e paginas na internet, você possa encrontrar mais orientações sobre o tema, infelizmente não tenho um material para te apresentar, mas acredito que a comunidade do Discord da Alura vai te ajudar muito! Bem, não se preocupe, continue na caminhada que todo vai dar certo, Abraços!