Social Link with CSS and html

Community feedback

• 

  Daniel Enagu•205

  @DannyEnaguPosted 10 months ago

  Hi,

  Good job on the design interpretation. But your code can be improved.

  The following is how you can improve your code:

  • Always use semantic HTML tags when possible. For example,

    • Use heading (h1 - h6) tags for the texts Jessica Randall and London, United Kingdom.
    • Use anchor <a> tags for the social links not <button> tags.

  • Add an alt attribute to your <img /> tag to describe your image for accessibility.

  • Separation of concern: Although, there is nothing wrong with using the ** tag.

  • Always use CSS reset to avoid some unwanted browser behaviors. Check out Andy Bell's Modern CSS Reset.

  • Find and remove unused selectors. I could not find a reference as to where .attribution selector was used.

  • Use relative units like rem for font sizes. You can convert pixel to rem by dividing the pixel value by 16 (that is, 20px ==> 20 / 16 = 1.25rem).

  • Fix your class names. class names like first, second, semiFirst, bolded, etc. do not describe what the selector is doing. Possible suggestions are names like:

    • bolded = text-bold
    • yellow = text-yellow, location
    • semiFirst = semi-first or user-role
    • first = first-section or top-section, header
    • second = second-section or second-section

  I hope you find this helpful.

  Marked as helpful

  0