Social links profile: mobile-first solution using flexbox

Community feedback

• 

  Arne•1,110

  @DudeldupsPosted 8 months ago

  Hello! 👋🏻

  Your solution looks good, well done! You could give the card a max-width because card components that get too wide look mostly weird 🤓

  Using a <figure> element is good, if you have written text that also describes the image, you can also use the <figcaption> as a child of the figure.

  A <section> should always contain actual content that makes sense viewed separately from the rest of your site. You can replace the first section with a regular div.

  For the second section, a <ul> with each link inside a <li> would be semantically more appropriate. Almost always where there's a repeated element, you can think of a <ul> or <ol> if each item is actually numbered consecutively.

  In your CSS, you set the font-size to 62.5%. There's no need to do that. Just get used to think in rem and don't recalculate something that has been calculated. Users that change their default font size have potential issues with this and it's a red flag for potential employers, if you want to apply for jobs later.

  And one quick tip for your focus state, if you use :focus-visible instead of :focus, the style will only be applied for keyboard interactions. This is almost always the desired behaviour, of course there are use cases for :focus, too 😋

  Hope this helps, happy coding! 🤖

  Marked as helpful

  0

  ---

  

  P

  Valeria Montoya•240

  @ValeriaMontoyaPosted 8 months ago

  Hi 👋🏼 I really appreciate that you took the time to review my code. Thank you for all your advices and detailed explanations, I'll keep them on mind for my next projects 🤓

  0