Responsive Preview Card using HTML, CSS, and Javascript
Design comparison
Solution retrospective
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.
What specific areas of your project would you like help with?h1 { font-size: clamp(1rem, 5.333333vw, 1.5rem); }
Any best practice advice is welcome!
Community feedback
- @joaotfrodriguesPosted 4 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 Rodrigues0 - @PatricioZarauzPosted 5 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 unnecessaryobject-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 theauthor
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.
0
Please log in to post a comment
Log in with GitHubJoin 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