Social Links Profile using HTML, CSS/SASS

Community feedback

• 

  P

  webdevbynight•530

  @webdevbynight

  Posted about 1 year ago

  Some feedback:

  • the design file shows that the links texts are permanently bold, not only when hovered;
  • you should enhance the semantics of your HTML: the attribution footer should be wraped by the footer element, the main content should be within the main element and the card should be tagged as an article or section element (don’t hesitate over having a look at the HTML elements reference on MDN);
  • you should use relative units for font sizes such as em or rem: when using pixels to set font sizes, I am afraid this can lead to accessibility issues with users needing to be able to zoom texts in (by the way, you can define all dimensions, widths, paddings, margins, gaps… by using relative units: the design will get more elastic);
  • when possible, avoid using fixed heights: if you need to set a height, to use min-height is preferable;
  • if you want the whole container to occupy the whole height of the viewport, think of min-height: 100 dvh (check for relative length units based on viewport if you do not know what such a unit stands for);
  • even if Sass is a great tool, you do not need to use Sass variables any more to define colour values, since CSS has custom properties;
  • on main.scss, line 41, just declare font-weight: bold if you want to use the bold weight of the font (since there is only one font used, declared previously, you do not need to use font-family again).

  I hope this feedback helps you.

  11

  Marked as helpful