My solution to the Blog Preview challenge

Some additional tips:

HTML:

• "Learning" is a paragraph, not a heading. Headings are meant to represent other content that follows.

• I would wrap the date in a <time> tag.

• The profile image should be placed in the HTML as an <img>, and it must have a short and descriptive alt text.

• It is generally not recommended to set fixed widths and heights in px. The only width the card needs is a max-width of around 20rem, so it doesn't get too wide on larger screens.

• Headings must always be in order, so change <h3> to a <h2>.

CSS:

• height on body should be min-height - this way, the content will not get cut off if it grows beneath the viewport.

• I'm not sure you need a media query, when they are needed they must be in rem instead of px. It is also best practice to do the mobile styling as the default.

Hello @Mjornog!

Your solution looks great!

I have one suggestion:

• When using the tag <img>, make sure to set the correct path, otherwise your code won't be able to find the image. And if your code can't find it, it won't show.

📌 This is your code:

background-image: url(/assets/images/illustration-article.svg);

📌 And here's the update with the correct path:

background-image: url('./assets/images/illustration-article.svg');

Extra tip: Use just a simple <img> tag for the image in this case. It's a lot easier!

I hope it helps!

Other than that, great job!

Hi. You need to put a . before the first slash, like this: background-image: url(./assets/images/illustration-article.svg);