HTML , CSS and Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout looks bigger than the original but it's fine I guess? But scaling it down would be really awesome.

  Some suggestions would be:

  • Your background-image on the body tag is using a wrong path, do not use / root path when deploying in github, because it won't work, change the path into ./.
  • Always have a main element that will wrap the whole content of the page. main element helps users to properly navigate your website.
  • The alt for the vector img should have been left empty like alt="" since it is just a decoration. When an image only acts as a decoration, use alt="" on it, but if the img adds content, then use descriptive alt value. Also, avoid using words that relates to "graphic" like "background, image, picture.." as a value for alt, assistive tech will handle those for you.
  • Great that you made the annual-plan a heading tag, but the choice of tag level is wrong, if you use h4 make sure that h1, h2, h3 appears before it. Do not skip a heading level if you are going to use it.
  • I would use a tag for all the interactive elements, since the card itself is not a form then button is not really suited, unless there is a modal right, but since there aren't any, a tags are more preferable.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Fury•945

  @ashiqfuryPosted about 3 years ago

  Great work.

  • Add max-width property in desktop view, so that the container doesn't grow too much.
  • Use flexbox layout to make your code easy and clean. It also makes your design responsive.

  Thanks

  Marked as helpful

  0