Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card built using HTML and CSS

Carlos Al 160

@crsaele

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@aykinsancakli

Posted

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

Posted

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
Discord logo

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