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 - HTML & CSS only

@LorenzoBrugalli

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'm proud of how I implemented the hover effect. It added interactivity and improved the visual feedback for user interaction. Next time, I would approach the CSS with more structured classes and perhaps utilize more efficient selectors or frameworks to streamline the styling process. This would ensure cleaner code and easier maintenance in the future.

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

Adjusting the positioning of elements, especially text sizes, posed a challenge. To overcome this, I utilized CSS properties such as margin, padding, and flexbox for layout adjustments.

Community feedback

Micah Sells• 100

@Micahtron

Posted

Good work, every element's size looks almost exactly like it should relative to each other.

For the background shadow I saw you're using thicker borders on the right and bottom. A cleaner and more flexible way to achieve this would be to use a CSS drop-shadow. This way you can position the BG shadow anywhere you want relative to the card and the offset will match the design better. This also enables you to change the effects if you ever want to use this in another design (color, blur, etc.)

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