HTML, CSS, CSS Variables and Flexbox and Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Desktop layout look really great, you could make the upper-right-corner background to be a bit bigger. The mobile state looks great as well but if you go to at 390px below, the screen starts to hide the content and creates a horizontal scrollbar.

  Here are some other suggestions for the site:

  • For the site-logo, remove the word logo from it since you don't want to include words that relates to graphic such as logo when using alt attribute.
  • On the phone-section, the pattern background-image is only decorative so use the alt="" on it. Usually, when you use aria-hidden="true" on an img , you use an empty value for the alt attribute.
  • For the phone image, I think you can add a descriptive alt value for it , it could be something like alt="equalizer app running on mobile".

  FOOTER

  • Same as well for the site-logo, remove the logo word from it.
  • For the social-media links, remove the word link from each of the a tag since screen-reader will already announce that it is a link, so use only the social-media's name on it.
  • Adding an extra aria-hidden="true" on the img tag for each social media so that it will be totally ignored by screen-reader.

  Aside from those, great job again on this one.

  Marked as helpful

  2

  ---

  

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  @martpika Thanks for the tips. I tried to make the background match the Figma file. Still learning how to lay those out. I couldn't get the colored background to co-operate at all.

  1
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! David, really impressive and really good designed and it's responsive too. I checked your code and you really structured your code really well.

  Keep it up! ❤️

  Marked as helpful

  0

  ---

  

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  @skyv26 Thanks. I've gone back and looked at some of my old code, and wasn't easy to read. Now I try to keep everything separated according to sections and try to comment as much as possible.

  1