Skip to content
OverviewSolutions
3
Comments
5
Bruno Pinho
@pinhob

All comments

  • Bruno Pinho•80
    @pinhobPosted over 1 year ago

    Hi, Gustavo! Great work finishing the challenge! 🚀

    I have a few suggestions for you of things that I found helpful doing my solution for this challenge:

    • I like your approach to the hover effect in the NFT image, but try to use width: 100% in the .imgNFT class. This will make your image responsible and also the same size as the ::before and ::after elements.

    • You can remove the height of the <main> component, or use min-height: 60vh instead of height: 60vh. This way, the element will grow to fit all the children's content. You can see more about the min-height property here, it's really helpful in some cases.

    • Take a look at the BEM methodology to name classes. It's a great way to choose how to name our classes, in my opinion! (If you want a really good video in Portuguese, watch this one)

    I hope you find theses tips helpful.

    Congrats again for the challenge and happy coding! 🤓

    1
  • Nirmal Roy•70
    @nirmalroyalrichSubmitted over 1 year ago

    I always find hard to resize something or link images and svg's, learnt a lot while doing this project.

    NFTPreviewCardComponent

    1
    Bruno Pinho•80
    @pinhobPosted over 1 year ago

    Hey, Nirmal! Very cool solution! Congrats!

    I also learned a lot doing this challenge. 🤓

    Two suggestions I have, if you want to try to add more elements to your solution:

    • If you want to do the white border in the author avatar, like in the original design, you can use this code in the img style:
      border: 1px solid var(--color-primary);
  border-radius: 50%;
    • If you want to do the hover effect in the NFT image, you can solve it using the pseudo-elements ::before or ::after in your image container. If you want to have an idea, I found this codepen helpful to have a grasp of how to do it. For the eye icon being centered, I used flexbox inside my ::after selector.

    And congrats again for the project. Good coding! 🚀

    0
  • Gerald LeCour•170
    @Gerald-LeCourSubmitted over 1 year ago

    Thanks to @Bruno-Pinho for helping me figure out how to apply the gradient over the equilibruim image when you hover over it.

    Responisive NFT Preview Card

    1
    Bruno Pinho•80
    @pinhobPosted over 1 year ago

    Hey, Gerald! Cool solution for the challenge so far! 🙂

    The hover gradient and icon were tricky for me too - I spend a lot of time trying to find a solution and need to see how other people did at the end to create my own.

    But one way to solve it is using the pseudo-elements ::before or ::after in your image container. If you want to have an idea, I found this codepen helpful to have a grasp of how to do it. Outside the gradient part, for the icon being centered, I used flexbox.

    I'm not 100% sure that my solution is the best approach, but if you want to check it out, you can see my code here. I highlighted the important part for you.

    And good coding for you, man! 🚀

    Marked as helpful
    1
  • Bruno Pinho•80
    @pinhobPosted over 1 year ago

    Fala, Cauan! Muito legal ver outro brasileiro por aqui!

    Vou escrever em português pra facilitar pra gente, então, beleza? 😅

    Seu projeto tá bem legal, mas tenho algumas sugestões:

    • Uma dica que dou é pesquisar sobre a metodologia BEM para nomes de classes e aplicar em seu projeto.

    Ajuda bastante na hora de nomear as classes de forma mais clara e é um padrão bastante utilizado com CSS puro. Esse vídeo aqui é bem legal e fala mais sobre o BEM.

    • Outra dica é usar rem para os valores de tamanho de fonte do seu projeto.

    As classes como .small e .left tão usando pixels e por isso elas não se adaptam ao tamanho de fonte escolhido pelo usuário. Usando rem sua aplicação ficaria mais acessível e evitaria isso - se quiser fazer o teste, vai nas configurações do seu navegador e muda o tamanho da fonte. Vai ver que o título muda de acordo mas que os parágrafos não.

    A diferença do rem pros pixels é que ele considera esse tamanho de fonte definido pelo usuário para calcular o tamanho da fonte.

    Se não quiser ficar fazendo a conversão de pixels para rem de cabeça, você pode usar a função calc() e deixar o CSS fazer por você, usando a fórmula tamanho que quer / 16 * 1 rem. O valor de 16 é em relação aos 16pxs que costumam ser o tamanho padrão de fonte dos navegadores. Exemplo:

    .small {
  font-size: clamp(12 / 16 * 1rem) // 0.75rem
}
    • E por último, vi que você já atualizou a questão do tamanho do card. Se quiser que suas mudanças se reflitam no print aqui da plataforma, você pode pedir generate a new screenshot dentro do painel da sua solução.

    No mais, parabéns pelo projeto. E bons códigos por aí! 🚀

    0
  • arjuyyy•40
    @arjuyyySubmitted over 1 year ago

    I found it challenging to use the CSS "Position" Property and struggled with the best possible approach to this. Since I'm a newbie, I have to watch videos and tutorials about CSS Position and Display again and again to have a clear understanding. Display FLEX property helped me a lot not only in this challenge but as a Web Developer.

    I feel like there's a better, more convenient, and more efficient way to code this (with less code of lines) but as of now, prior to my current knowledge, this is my best approach.

    Display flex property saved the day!!!!!!

    NFT preview card USING FLEXBOX

    1
    Bruno Pinho•80
    @pinhobPosted over 1 year ago

    Hey, arjuyyy! Congrats. Great work! 🎉

    And flexbox is awesome! Time after time saves my day too! 🤓

    If you want a really good article to learn more about this, I really recommend this one.

    If you want to save a (very) few lines you can put the attributes at the end in just one declaration, like:

    .name:hover, h2:hover {
    color:hsl(178, 100%, 50%);
}

    The same for all the cursor: pointer declarations. But, well, this is just a question of preference.

    Anyway, great job. Good coding! 🚀

    Marked as helpful
    0