My solution to the Blog Preview challenge

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

  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.

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  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!

  1
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

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

  0