Social links card challenge HTML + CSS, beginner

Community feedback

• 

  Gautam Sarkar•850

  @gautam32b7Posted 8 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 the alt attribute

  Marked as helpful

  0

  ---

  

  B4rka•20

  @B4rkaPosted 8 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
• 

  ezecoder•870

  @3eze3Posted 8 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 helpful

  0

  ---

  

  B4rka•20

  @B4rkaPosted 8 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
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 8 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