Submitted 5 months ago

Blog preview card html/css solution

hyperavtr•150

@hyperavtr

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

By getting knowledge that :hover pseudo-element can't apply any changes to parent of the selected element .

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

1.I've tried to make change my #blog-preview-card's(parent element, container) shadow-box value by hovering the #header(child element) .This turned out to work only in opposite way, e.g. this way:

.parent:hover .child { background-color: white; }. (When you hover over the parent element, it will change the background color of the child element to white)

I've seen some variants for solution of my problem with pseudo-element :has and assigning position: relative to parent and position: absolute to child element but it didn't worked at my case. If It's possible and can work with my code please write your options. I struggled a lot with this and it's a bit annoying to leave it how it is, but if it's realm of JavaScript usage, okay, so be it.

2.W3C validator, seems, not to be complaining about my code, but if you look and it's semantic will seem to you wrong/unnecessary/unreasonably overcomplicated, I'll be grateful for letting me know.

Community feedback

Dylan de Bruijn•3,230
@DylandeBruijnPosted 5 months ago
@hyperavtr

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things I like about your solution 🎉

Use of semantic HTML elements

Clear descriptive CSS classes

Use of CSS custom properties

Things you could improve ✍️

I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.

Try experimenting with the CSS layout tool Flexbox, it will help you greatly structuring elements on your webpage.

You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.

Try centering your card using Flexbox on the body.

I suggest against using figure and figcaption for the card. These elements are used for images and captions.

Try styling your elements using classes over ID's.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎
Marked as helpful
2
hyperavtr•150
@hyperavtrPosted 5 months ago
@DylandeBruijn Hi, Thanks a lot, I'll follow your suggestions and fix things. But I have a question about using ID's and classes. I thought that choosing one of them for purpose of styling depends from what level of styling priority you want to assign to elements and from on how many elements per page this styling should to affect. For example, if number of the elements > 1 I should use classes due to its reusability. But if the case is unique, so why don't use the ID? Or ID's just needed for anchors on the page and for within labels and some similar things, or it's just a bad practice at all to use it for purpose of styling?
1
Dylan de Bruijn•3,230
@DylandeBruijnPosted 5 months ago
@hyperavtr

I use ID's rarely, speaking from my personal experience as a professional front-end developer. Cases where I use them:

As anchors for navigation on a page.

To select an element using Javascript.

For something like a website logo, which is unique.

Important thing to know is that ID's can only exist once per page. And you'll run into trouble when you use them to style elements of reusable components like the blog card in this example. Because it's a very common design pattern to have multiple cards in a grid.

Note that you won't see any errors as HTML and CSS are designed to be very fault tolerant, most browsers will in fact apply the specified styles to all elements given the same ID. However, this is considered bad practice as it defies the W3C spec.

I hope that makes sense!
Marked as helpful
1
hyperavtr•150
@hyperavtrPosted 5 months ago
@DylandeBruijn Yeah, I got your point. Using classes for styling purpose will make code just more extensible. Thank you once again!
1

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