🌊 Ocean theme | Social links profile

Community feedback

• 

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  Hello @anaiswritingcode 👋

  Here is my feed back for your solution (i have previewed your solution before but forgot):

  About using display and HTML default behaviors

  • Every HTML has an default display: inline / block, inline will make elements with the same parent stay in one line while block level elements will break to a new line (vertically to the left side).
  • display: grid/flex will declare the element as the grid/flex container element (allow child elements manipulation from parent - current element and also behave like a block level element) while display: inline/block only affect current element.
  • Only use flex/grid when you need to align child elements differently (as i have stated inline/block behaviors above). In you case, you can just leave it as it is and every elements stay vertically on the left.

  Talking about elements position

  • Block level elements will expand it's width to fit parent elements. So for texts, you can use text-align: center to make them centered. Alternatively, use flexbox:

  .card {
      display: flex;
      flex-direction: column; /* row - by default*/
      align-items: center; /* make elements on the same direction centered vertically on the declared axis above - if column then horizontally*/
  }
  

  • To give an element more space, you should use margin and padding. Use margin when you want to make space to it's sibling elements and padding otherwise to make space for itself and it's child elements.

  About HTML semantic and accessibility

  • Avoid unnecessary div wrapping, keep your HTML simple. Because div has no semantic meaning (choose div when there is no other elements that fit the use case), you should leave the content as it is if the layout does not need special style control (like flexbox, making a border a around it,... ).
  • Consider using more semantic HTML such as article, section, address, blockquote,... to give more context for the content inside it. For example you should consider using article or section for your card (depend on content type - is it a section or article?). These list of social links should be used with a element to represent a link and provide a href attribute (when click it will redirect users).

  The theming idea is great!! It make your solution more special.

  Have a nice day!! Happy coding 😁💃

  Marked as helpful

  1