Skip to content
Submitted about 1 year ago

Blog Preview

AB•60
@rvupmo33
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Learning how to use mouse events in js to change another elements style when you hover on one element.

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

I had a lot of difficulty figuring out the text spacing, line height, etc.

To overcome this challenge I started clicking every available button for an element and noting down how to get to it. It took me around 10 minutes to figure out to get line height.

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

Whatever you think I could improve :)

If you could help me figure out text spacing that would be nice!

Code

Please log in to post a comment

Log in

Community feedback

  • Justin•100
    @aduatgit

    I think your solution looks very good!

    Some suggestions:

    • You don't need to use Javascript to create the hover effect, you can use the :hover tag to do that. Although using Javascipt definitely was good practice! Here is how I did it:
    .card__description_title {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--clr-neutral-900);
    font-weight: var(--fw-800);
}

.card__description_title:is(:hover, :focus) {
    color: var(--clr-primary);
}

    I used variables for the colors, but you get the gist.

    • You can use media queries to implement a mobile version, if you open your dev tools and squish the site you can see that you have some overflow. It could look like this:
    @media (max-width:420px) {
    .card {
        max-width: 320px;
    }
}

    This changes the width of the card to (max) 320px if the screen of the user is smaller than 420px.

    But overall your solution is very, very nice!

    Marked as helpful

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