Skip to content
Submitted 3 months ago

Blog preview card

Beatriz Ponces•60
@BeatrizPoncesIP
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Eu me orgulho muito de ter conseguido tornar o site responsivo, especialmente sem recorrer à IA ou a vídeos no YouTube. Desta vez, decidi deixar os textos em inglês para facilitar a comparação do tamanho da fonte. Usei em em vez de px, e na próxima vez, pretendo experimentar rem.

What challenges did you encounter, and how did you overcome them?

Enfrentei desafios consideráveis em relação ao tamanho do post. O que ficava esteticamente agradável em um dispositivo parecia excessivamente grande em outro. A responsividade somente com flexbox foi uma tarefa árdua; utilizar Media Queries torna o processo muito mais simples!

What specific areas of your project would you like help with?

Qual é a melhor maneira de se opter responsividade usando flex?

Community feedback

  • Rgeb1•110
    @Rgeb1Posted 3 months ago

    Hiya, I really like your solution—you can tell you put a lot of work into it, and you should be pleased with the result. Well done on making it responsive; you did a great job, especially considering the challenges you faced in figuring it all out. To enhance accessibility, consider adding more descriptive 'alt' text for the images to help those who depend on screen readers (advice I also need to take myself lol). Other than that, well done! :)

    0
  • Quentin Luback•140
    @qlubackPosted 3 months ago

    Congrats !

    I noticed in figma files that the article image has a fixed height of 200px. So the image is cropped horizontally, take a look to this CSS rule to manage image cropping (useful for responsive purposes) : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord