Design comparison
Solution retrospective
It appears the avatar picture doesn't load while the favicon does. Does anyone have any idea why ?
Thanks a lot !
Community feedback
- @gautam32b7Posted 9 months ago
Hi
You have provided the path as
<img src="/assets/images/avatar-jessica.jpeg" class="img" alt="">
. Just change to<img src="./assets/images/avatar-jessica.jpeg" class="img" alt="">
./
means the current directory.Also, don't let the
alt
attribute empty. Give description about the image in thealt
attributeMarked as helpful0@B4rkaPosted 9 months ago@gautam3333
Thank you a lot for your input ! I'm still very new and learning HTML/CSS so that kind of feedback helps a lot. Looks like I need to read my CLI courses again !
0 - @3eze3Posted 9 months ago
Hi B4rka🎡, good solution for this challenge.
Answering your question and checking your <img> tag the src attribute of the tag you forgot to put "./" which means from the current directory to reference the img , because if you put "/" you would be referencing from the root.
<img src="./assets/images/avatar-jessica.jpeg" class="img" alt>
Some recommendations that I could give you in HTML:
-
When working with images try to put the alt attribute, it serves for accessibility and gives you a better semantic for your page.
-
As for the use of the <article> you could opt for another more generic tag, since <article> is a self-contained tag, and has its own value.
-
Also the use of semantic tags, such as <nav> for your links, use of a <section> for the letter container or an <article>, this so that you have more semantic value.
CSS
- You could opt to use the @font-face rule for your fonts instead of importing it directly. I was reading about that just now, I leave you the material here: @font-face rule
If you have a question, or have conflicts with a project you can write me on linkedin. 🎈
Happy coding.🎗
Marked as helpful0@B4rkaPosted 9 months ago@3eze3
Thank you very much for your answer. I'm still very much learning HTML/CSS and I tried to at least replicate the design and not to worry so much about the semantics of my tags. I will try to be careful about them from now on.
Also, thanks a lot for your link about @font-face. I will give it a thorough read.
0 -
- @danielmrz-devPosted 9 months ago
Hello @B4rka!
Your project looks great!
I have one suggestion for you to improve it even more:
- Using
margin
is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
📌 Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
0 - Using
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