Html, css , Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Site in general looks great as well the mobile, though there is just a horizontal scroll on it.

  Some suggestions would be:

  • It would be great to have a base styling of this:

  html {
    box-sizing: border-boxl
    font-size: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Always have a main element to wrap the main content of the site. For this use main tag on the .container selector.
  • The img for the background could have been used as the value for the background property. Have a look at that property^^.
  • Using position: absolute on an element specially when it is a large element like the .main selector is not a great approach since this style makes an element out of the flow. Normally, I would suggest remove stylings like these:

  position
  top
  left
  

  On the element and instead applying these:

  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  

  On the parent container of the element, but the current markup makes it hard to use since you are using img for the pattern-image which could be done in the background prop. But if you somehow managed to use background and have removed the 2 img tag on the markup, apply those stylings above in the .container selector^^

  • The illustration is only a decorative image. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • The music-icon is decorative as well so hide it using the above method.
  • Don't use span as a container that wraps other text-content. Use div instead of span to wrap the annual-plan section.
  • Use h2 on the annual-plan. When using a heading tag, make sure you are not skipping a level. If you use h3 then make sure that h1, h2 are all present.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  da’Keshra•140

  @daKeshra7Posted about 3 years ago

  @pikamart Thanks a lot. This helped structured my html and minimized y css code. Way to go....

  1