Responsive Social Media Card Html Css

Community feedback

• 

  geomydas•1,440

  @geomydasPosted 5 months ago

  Here are some simple tips on when to use rem or any other units

  rem: font-size, paddings, margins; px: border-radius, border, box-shadow (generally the small stuff); em: letter-spacing;

  CSS Units Guide: https://www.youtube.com/watch?v=N5wpD9Ov_To;

  Writing more efficient css

  1. Just use SASS
  2. Use native CSS Nesting
  3. Use CSS Variables

  HTML Code Critique.

  1. Geez, too much divs. Use main, section and other semantic elements.
  2. <p> elements nested in .social should be changed into a <button> element

  CSS Code Critique

  1. Need a CSS Reset. (makes your code look the same no matter what browser). Use this one: https://www.joshwcomeau.com/css/custom-css-reset/;

  2. This challenge doesn't even need a media query. No need for changing the width on mobile. Use padding on the parent element (body) and set both width and max-width on the card. The width should be in responsive units (% is best), and the max-width should be in fixed units (px)

  Marked as helpful

  0