Responsive Blogr Site Using Css & Vanilla Javascript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. This is my first project and I still find this really hard to be honest:>. For the layout, I had to zoom out since you are using 1440px which is too big for lots including me who uses a 1366x768, the 1440px on the design is not related to the breakpoint. Toning it down would be great since showing the mobile layout from 0-1440px is too big, don't you think.

  AliAbuhumra already gave feedback on this, just going to add some suggestions as well:

  • A typical structure of a site looks like this:

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

  This way, all content of your page will be inside their own respective landmark element. For this, the header will only contain the navbar since the header will be using position: absolute so that the first section of the main could occupy the topmost part to show the design.

  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="sneakers".
  • Right now, your markup for the navbar is too complicated. What you could have looks something like this:

  <nav>
   <ul>
    <li>
      <button>Product</button>
      <ul>
        { links in here }
      </ul>
    </li>
    <li> ...</li>
    <li> ...</li>
   </ul> 
  </nav>
  

  You will need to have a parent ul that has 3 li that wraps each of the navlinks like the product, company, connect. Also, you don't need to use heading tag on each of those, use only button.

  • Also, when creating interactive components, use interactive elements. For example, the dropdown, you are making the arrow-icon, an img to be interactive which should not be since img is not designed to act that way right, that is why there are button for interactivity.
  • You don't need to have those div inside the a tags since you could just directly use the text-content of the div as the text-content of the a tag.
  • Also, when using a heading tag, make sure you are not skipping a level. If you use h4 then make sure that h1, h2, h3 are all present.
  • Don't nest a tag inside button or vice-versa. Use only a tag itself or button.
  • Those images that are in here except for the illustration of the phone, are only decorative images. 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.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • When using img tag, you don't need to add words that relates to "graphic" such as "illustration" and others, since img is already an image so no need to describe it as one.
  • Phone-illustration could have use a descriptive alt since the app is being show. It could be like alt="blogr app on a phone".

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • Again same as the proposed markup above, those links again on the bottom-part should use it. They are still you navigational links so use nav with ul that has 3 li items and each li will have a ul that will contain those list-of-links.

  MOBILE

  • Hamburger menu should be using a button since it is an interactive component.

  SUPPOSING BUTTON IS USED

  • The button should have a default atribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.
  • The hamburger button should have either aria-label attribute or sr-only text inside it which defines what the button does. You could use aria-label="navigation dropdown menu"
  • The img inside the hamburger-menu should have been hidden since it is only a decorative image.
  • Also the markup placement is wrong. The dropdown-toggle should be placed before the navbar so that after the user toggles the button the focus will be "next" to the dropdown.

  Right now, html is the problem in here. You could look up for some same challenges solution on this and take note of their structuring, but do not take mine since it is not accessible and haven't refactored it yet:>

  But still, great job again on this one.

  0

  ---

  

  Naresh•90

  @nareshpooniaPosted about 3 years ago

  @pikamart Hi Raymart,

  Thanks for such a detailed reply, I have fixed a few issues, for others, I am taking a note and will try to implement them in my next project.

  Thanks again

  1
• 

  AliAbuhumra•230

  @aliabuhumraPosted about 3 years ago

  Great job, but I have a few notes

  1 - remove the tag < a herf=""> from inside button

  2 - add landmarks in img like this 👉 </img>

  0

  ---

  

  Naresh•90

  @nareshpooniaPosted about 3 years ago

  @metaalii Thanks, Ali, I have fixed the HTML issues now

  0