Grid Flex JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop seems fine and for mobile state it is fine as well, but the 375px is too little. That 375px is just what it looks line for design not for breakpoint, adjusting it would be really great. Also, starting from mobile flow to desktop will be really good, trust, you'll nail those breakpoint. The responsiveness could be improved as well since right now, things are overlapping one another. You should inspect your layout in dev tools while coding it, ensuring that it will look good on all sizes.

  Regarding your questions:

  • Yep, it is perfectly line. Looking at your selector, the service-text you have reused it to all the section that looks like one another. That is really great, reusing selectors.
  • On the svg you typically use the fill right to use on the svg, but sometimes, if you look in the svg code. You might see a path or g element on those, and that is where you should use the fill property. To know properly, just insert that full svg code in the html. Then in your browser, inspect it, try first applying the fill on the svg, if it doesn't work, apply it on the path if it works, then you're good:>
  • On javascript, the listeners for the click event is fine. However, for the screen size, I wouldn't use that, let the @media query on css handle it for you. You don't need to use js on applying certain stylings to an element, especially when you want that styling applies on screen resize.

  Some other suggestions would be:

  • I would structure this site to be:

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

  So that all landmarks are visible to assistive tech.

  • I wouldn't as well put the website logo inside the nav element, since you are not treating it as a link, just purely img. I would put it in a separate container. That would be great if you made the top a header.
  • The alt value of the website logo should be alt="sunnyside". The image already has the text, better use it as the alt value. Also, if you are adding value to the alt attribute, do not include any word that relates to "graphic" such as "icon, images, logo, picture" avoid adding them. Just put the image description itself.
  • The navbar links should be inside a tag since those are links.
  • Do not put the button element as a child of ul. When using ul element, only li element is allowed to be a direct child element:
  • the arrow-down-icon's alt should be left empty like alt="". Good rule of thumb, if an img is just for decoration, better use alt="", if the img adds any content, make a descriptive alt value.
  • The orange image as well, only decorative, alt="" is better.
  • The learn more in every section should be using a tag since those are supposed links.
  • All the images in this website, except for the testimonial person are just purely decorative, using alt="" will be really good.
  • The position of the person after their name, I would wrap it in the same heading tag of the person, or would use a p on it, but not a separate heading tag.
  • footer website logo's alt should be alt="sunnyside" as well.
  • The links below the footer logo should be have used a structure like:

  <nav>
    <ul>
      <li>
        <a /> # each individual link inside a li and inside a
      </li>
    </ul>
  </nav>
  

  • The social media links should be wrapped inside a ul element and each inside the a tag. For example:

  <ul>
    <li>
      <a aria-label="facebook" /> # the image is inside a tag, imagine this is facebook link
    <li>
  </ul>
  

  The aria-label is a piece of text that is read by assistive tech. You use this especially when an element has no text inside it, this way, if we have that aria-label assistive tech will know that to say to the user that has navigated in that link.

  • The img of the social media should use only their names as the alt value or leave it blank alt="" if you don't want it to be seen by screen readers.

  • On mobile layout, the hamburger dropdown should use a button element instead of just using img. It is more accessible compared to img. Then add an aria-label to the button like alt="hamburger dropdown toggler", this will make sure users will know what this button does.

  As I said, the responsiveness should be improved. Still, you did a good work.

  Marked as helpful

  0