Responsive Site using HTML and Sass

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. The layout in desktop looks great, the responsiveness could be better because there are some section when you resize the screen's width, the elements are being squished, buttons are almost overlapping other contents. However, the mobile layout looks really great.

  The animation are great as well, but I prefer when the image is now visible, the element stays at that and won't animate again, once is enough:>

  Some other suggestions would be that:

  • No need to set max-width: 100% on the body tag since it will use 100% at default still.
  • Use a header for the topmost part. A typical layout structure looks like:

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

  By doing this, you are making the elements that has content be inside a landmark element. This helps users to properly navigate your site.

  • The website-logo should be outside the nav since it is not one of your navigational links.
  • The alt for the website-logo should be alt="easybank", website-logo should always be meaningful. Also, when using alt avoid adding words that relates to "graphic" such as "logo, icon,image..." img is already a graphic so no need to describe it as one.
  • request invite button lacks a visual indicator. If you remove the outline property to an element, make sure to add an indicator on the element's :focus-visible state so that users will know where they are at when navigating your site.
  • The hero-section image needs a more meaningful alt value than just hero-image. If the image is meaningful, describe the image.
  • Avoid using multiple h1 on a page. Use only at least 1 h1 per page.
  • Each icon on the second section should be hidden since they are just decorations. Use alt="" on it and add an extra aria-hidden="true" attribute on the img tag so that it will be invisible for all users.
  • When using heading tag, make sure you are not skipping a level. If you use h3 make sure that h1, h2 are present before it.
  • alt values for each of the article img could be left empty or maybe use a more meaningful alt ?
  • Since those are articles right, it would be great to use article tag to wrap the content. Then the heading text of each article should be a link so use a tag on them. Since on a real site, those will be a link for individual article. Also the name of the person for each article could be a heading tag.

  FOOTER

  • Website logo should use alt="loopstudios" as well.
  • Those social media could be inside a ul element since those are "list" of social media.
  • Each social media should be inside a a tag since those are supposed links. Each a tag should either use aria-label attribute or an sr-only element inside it. The value for whatever method you will use should be the name of the social media like:

  <a href="facebook.com" aria-label="facebook">
    img inside 
  </a>
  

  This way user will know where this link would take them. But the sr-only method is the preferred one, you can search that one up to know how sr-only works.

  • Each social media img should be hidden since they are just decoration, use the alt="" and aria-hidden="true" attribute on them.
  • The 6 links could have been wrapped inside a nav element, since those are still your websites' navigational links. Also, you don't separate each 3 links, they should be inside a single ul element since they are related, a 1 whole navlinks.

  MOBILE

  • Hamburger menu should be using button and not img. An interactive component needs to use an interactive element, always. img alone is not accessible for this kind of t component.

  SUPPOSING BUTTON IS USED

  • The button should have again either aria-label attribute or sr-only element inside it. The value will describe what does the button do. A sample value would be "navigation dropdown menu".
  • The button needs to use aria-expanded="false" as an default attribute on it. It will be changed by js to true if the user toggles the button.
  • Make the font-sizes for the text large on the mobile state, right now they are very small. Adjust it.
  • Lastly, work more on the responsive state on this one. Before submitting, always inspect your layout in dev tools, check whether the layout is looking good at different screen size.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Prabhjot Kaur•115

  @prabhkaur301Posted about 3 years ago

  @pikamart Thank you so much for such a knowledgeable feedback. It helps in understanding these concepts and their importance in web development. I am working on the improvement of this project.

  1