Submitted 3 months ago

Responsive Preview Card using HTML, CSS, and Javascript

chelsea-here• 140

@chelsea-here

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

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 getting the font percentage decrease to work, while maintaining accessibility using rem's for font-size. Also, proud of using javascript to access the color variable from css and script hover color change effect.

// accessing the color variables from my css file
const style = getComputedStyle(document.body);
const yellow = style.getPropertyValue("--primary-color-yellow");

// creating mouseover effect
title.addEventListener("mouseover", function (e) {
  this.style.color = yellow;
});

// now i need a mouseout event listener so its only active during my hover
title.addEventListener("mouseout", function (e) {
  this.style.color = "";
});

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

Getting the font to work was the hardest part. I learned how to use clamp to achieve the desired effect.

h1 {
  font-size: clamp(1rem, 5.333333vw, 1.5rem);
}

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

Any best practice advice is welcome!

Community feedback

João Rodrigues• 70

@joaotfrodrigues

Posted about 2 months ago

Hi Chelsea,

First of all, great job on your project! I loved the use of the CSS clamp property, it adds a nice touch to the responsiveness of your design.

Now, the HTML semantic structure needs some changes. The card content should not be directly inside the <main> tag, but instead wrapped in an <article> tag within the <main>.

Inside the <article> tag, you could have a <header>, <section>, and <footer>. The <header> would be for the image, the <section> for the content, and the <footer> for the author details.

Regarding the hover animation, it's best practice to use the CSS pseudo-class :hover for styling hover effects.

Overall, you’re doing a fantastic job! Keep up the great work and consider these adjustments to further enhance your project.

Best regards, João Rodrigues

Patricio Zarauz• 140

@PatricioZarauz

Posted 3 months ago

Congrats on completing the challenge and having a pixel perfect solution!!

The only tips I can give you is regarding the author class, where the author div has an unnecessary object-fit attribute and has a display of flex, which is perfect but you added an unnecessary padding-right to the img child, the better solution, would have been to use a gap attribute on the author class.

I repeat, great work and awesome comments!!

PS. if you want a challenge, you can try and add some animations to the hover effect, try doing this with only css.

Please log in to post a comment

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