Responsive landing page using Flexbox and Grid & utilizing SCSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really great work on this one. Layout in desktop looks really good, responds good and the mobile layout is good as well.

  I don't have any suggestion for scss because we all have different approach on it. I also use bem and it is really good. But if there were, if you find reusing a lot of same stylings, use @extend and create a extension class with % so that it won't be compiled. I personally use @extend than @mixin since @mixin compiles the same css for the selector which is bad since it just duplicates it.

  Some other suggestions would be:

  • The website logo link should not be inside the nav element, since it is not really a navigational link.
  • The website logo a tag should have aria-label="homepage" so that users will know where this link would take them.
  • The five primary links in the header are the ones that needs to be inside the nav element. Also they should be inside ul element. Using ul element on it would make it great, because screen reader will announce how many links or items are there inside the ul element.
  • Always have a main element that will wrap the whole main content. A typical structure would look like:

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

  • On the article section, each card should be inside a article since those are articles right, better use it.

  FOOTER

  • Website logo a tag should have aria-label="homepage" as well.
  • The social media links should have been inside a ul since those are still list of links.
  • Other 6 links should be inside nav element and are inside ul element. Those are the navigation list of links of the website.

  MOBILE

  • The hamburger menu should be using button element and not a tag, since it is not really a link, it is a control for the dropdown.
  • Hamburger menu button should have aria-label="menu dropdown toggler" on it, so that users will know what this button does.
  • The button as well should have aria-expanded on it being changed by javascript, if the dropdown as appeared or not.

  Aside from those, great work on this one.

  Marked as helpful

  0

  ---

  

  Jhon Loyd Pastorin•135

  @jlpastoPosted about 3 years ago

  Hi @pikamart Thank you for your detailed feedback. It is really helpful, i I was blown away to be honest after realizing I had overlook so many things. Rest assured that I will going to update my website and correct my code. Thanks again and looking forward to get your feedback to my future projects. Tia

  1