Frontend Mentor | Blog card coding challenge solution

Solution retrospective

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

It was a little difficult to align items properly. It took a little time to do things properly. But eventually I was able to pull it off.

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

I was not able to add box-shadow no matter how much I change my code. In this particular section I would like to get some help.

Community feedback

Darkstar• 1,000

@DarkstarXDD

Posted 3 months ago

You don't have to wrap every element in a <div>. Both <p> and <div> are block level elements so there is no point wrapping a single <p> element with a <div>. A <div> maybe useful if you want to group multiple <p> elements (or any other elements) together. Try to keep the HTML as simple as possible.
The text "HTML & CSS foundations" is a heading. You can use a <h1> for it.
The <div> you have given the class .main should be a <main> landmark element. Check this
You don't need any media queries in this challenge. A single max-width on the card is enough.
For box-shadow try this. box-shadow: 0.5rem 0.5rem rgb(0, 0, 0)

Marked as helpful

Guri58• 20

@Guri58

Posted 3 months ago

@DarkstarXDD Thanks alot for taking your time to give some tips. I will make sure next time to keep these things in mind. Through your suggestions I am able to learn new things. As a beginner your review was highly insighful for me.

Blog card

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community