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

Responsive blog preview card using CSS translate and display flex.

Aleksandr 150

@FunTomDev

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 am most proud of the structure of my CSS file. By watching some useful YouTube videos I learned some basic funcitonalities I should use and often include in my projects. Now I try to use those all the time. There are no differences that should be made I think.

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

The challenge was to decide if I should set the heights of my elements manually or if those will match the reference when I set everything up. I tried to set those manually at first, but then I removed the height setting from some elements and they was the same on the page, so there was the answer for my question.

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

There are none

Community feedback

Rayco21 130

@Rayco21

Posted

.category{ font-size: var(--fs-400); font-weight: var(--fw-bold); font-family: var(--ff-body);

    background-color: var(--clr-primary);
    width: 82px;
    padding: 4px 12px;

    border-radius: 4px;

}

can set width: fit-content, then its width will only be as much as content needs better than setting it to fixed value imo

Marked as helpful

1

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