Responsive social-link-profile using flexbox and custom properties.

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello again Kerwin, congratulations on completing another challenge!

  Following up on the comment below (or above), regarding the <article>, it's used for self-explanatory content, meaning it doesn't depend on the page as context. Using it for the card is correct, but you used two <article> elements, and one of them is in the wrong context. I'll explain below:

  • <article class="container-articles">, the correct tag for this would be <main>, as it contains all the main content of your page, which in this case is the card with the information.

  Regarding the <button> elements, it would be more appropriate to use <a> tags because the idea is that clicking on them should redirect you to a new page. Therefore, instead of just using a <footer>, it would also be a <nav> (in this case, <nav> within <footer>).

  Edit: I said the right is to use <nav>, but actually the correct thing is to use <ul> with <li>, because <nav> is dedicated to navigation within the page itself.

  A bonus tip is that you could also use an <address> tag for <p class="location">, as it makes more sense since it's related to the location.

  Congratulations again, your project is very semantic. Keep practicing and improving, you're doing great. If you need help with anything, please ask below.

  0
• 

  P

  Moa Davou•310

  @moadavouPosted 7 months ago

  Great work on this project!

  Here are a few suggestions for improvement:

  HTML

  • The article element should represent a self-contained piece of content that could be independently distributed or reused. However, in your case, it seems like you're using it more as a generic container (you have two instances of article). Consider using main instead for the article with the class name container-articles.

  • Alt text should provide a concise description of the image content. Consider describing the actual content or purpose of the image, like "Profile picture of Jessica Randall."

  • The button element is appropriate for interactive controls, for linking to websites, it's better to use a.

  CSS

  • Don't use px for font-size. This makes it so that the font won't change according to user settings.

  Edit: Quite a few mistakes were left in this response. I edited them out so that future readers don't get confused. Thank you @R3ygoski for taking notice!

  0

  ---

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello again Moa, I'd like to correct you on a few points you mentioned.

  Starting with CSS, it's actually the opposite of what you said. Using rem allows the font to adapt to the user's settings, while px does not allow it, as px is an absolute value, unlike rem, which is relative.

  Regarding HTML, in this case, it's not correct to use a <div>, but rather <article> for the card. This is because the <card> element may not be reused, but it is self-explanatory by itself.

  1

  

  P

  Moa Davou•310

  @moadavouPosted 7 months ago

  @R3ygoski Thank you for saving the day!

  I probably should not write more feedback tonight. I accidentally wrote rem instead of px. The first one was supposed to be div or main (for the double article) - but you explained it much better.

  Kerwin listen to Bernardo and not me 😅

  1