Skip to content
Submitted 10 months ago

Blog preview card built using HTML and CSS

Carlos Al•200
@crsaele
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?

I take immense pride in having successfully consolidated my understanding of foundational CSS properties, including but not limited to color, font-size, and background-color. Additionally, I have made significant strides in acquiring knowledge about fundamental HTML elements such as img, p, h1, and span. This proficiency has not only enhanced my technical skills but also equipped me with a robust foundation to further explore the intricacies of web development.

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

I expanded my expertise by delving deeper into advanced CSS concepts, specifically focusing on the nuances of CSS shadows and the strategic application of margins to effectively manage whitespace between elements, thereby refining my ability to craft visually appealing and harmonious user interfaces.

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

Please let me know if i could improve my code in any way.

Community feedback

  • Aykın Sancaklı•680
    @aykinsancakliPosted 10 months ago

    Hello @crsaele,

    Your solution looks great and sooo close to the design!

    The only missing thing is the responsiveness of the card

    @media (max-width: 28em) {
  html {
    font-size: 56.25%;
  }

  .card {
    margin: 0 3.2rem;
  }
}

    This way we ensure that the viewport do not stick to the sides of our card (now we have enough outside margin), also since we decrease the font-size, now everything is a little smaller so it fits.

    Again great solution and hope this little improvements helps.

    All the best!

    Marked as helpful
    1
  • Kulyk-Volodymyr•660
    @Kulyk-VolodymyrPosted 10 months ago

    Nice solution!

    This component can be more responsive on a mobile screen by adding width: 100% to the main image.

    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