Design comparison
Solution retrospective
For some reason, the images I used in this challenge don't seem to load on the web page, after i uploaded on GitHub
Community feedback
- @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 amax-width
of around20rem
, so it doesn't get too wide on larger screens. -
Headings must always be in order, so change
<h3>
to a<h2>
.
CSS:
-
height
onbody
should bemin-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 -
- @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 - When using the tag
- @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
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