huddle-landing-page-with-curved-sections (SASS - FLEXBOX)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Desktop layout looks nice but needed some paddings so that the contents won't feel like they are too spaced-out on their counterpart. The site is responsive and again, that padding would be nice because if you go to like 950px, the text are now touching the screen-sides. The site on mobile state looks great though.

  Some other suggestion on the site would be:

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

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

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

  • For this one, the preferred markup would look something like this:

  <header />
  <main />
  <footer />
  

  This way, all content of your page will be inside their own respective landmark element. The aside could be remove and use only div and be put inside the main tag.

  • The header should only contain the website-logo and the try it free and leave the hero-section to the main tag. The reason is that, you normally want the header to be as reusable for other pages of the site, by including the hero-section on that, you can't make it reusable because you don't want every page to have that default hero-section right, so only wrapped the top-most part of the site inside the header.
  • figure could just be replaced by the img tag itself since you don't really need to use it because there are no text to be figcaption.
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one. Use only huddle for the img tag's alt for the website-logo. Check other img tags on the site as well if they are using those words.
  • The hero-section image could just use again img with no figure tag. Also, adding an extra aria-hidden="true" attribute on img tags that are using alt="" will be really great so that screen-readers will totally ignore the image.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • Those wave-backgrounds could just be use as a value for background-image so that you won't have to create extra html tag.

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • Those phone and email-icon are only decorative. 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 you are using svg instead of img tag.
  • For the form-input. Your input right now currently lacks associated label to it or an aria-label to which will define the purpose of the input element. Always include it so that user will know what they need to give on each input. Make sure that label is pointing to the id of the input as well.
  • Use button with type="submit" instead of using input tag.
  • Also, creating your custom form-validation would be really nice, just to practice out that javascript skills.I have this simple accessible form snippet. Feel free to use it as reference when building out your form-validation:> Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • Social-media image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Francisco!•255

  @Francisco-Git99Posted almost 3 years ago

  @pikapikamart thank you very much for taking the time to watch the exercise and give me advice, I will apply the tips you gave me to continue improving. :D

  1