Room homepage using html css and javascript

Community feedback

• 

  Andrey•2,570

  @dar-juPosted about 2 months ago

  Hi collins-ai!

  Great job! The page is well adapted to different screens. The layout is very close to the design. You made it accessible from the keyboard. Your code is clear and well structured. The logic works correctly.

  I can add something:

  • look at the screen resolution of 1300-1350 pixels, there is a bottom horizontal scroll, which means that part of the content goes beyond the screen. It looks like the first <section> can't shrink anymore
  • semantically, the icons and decor should not have alt filled in, these are non-content images. The burger, close button and arrows should have alt empty. But you must specify in a aria-label attribute what these buttons do. This will improve the accessibility of the site.
  • <section> is not just text, it is an entire block, for example, a section can be moved entirely to another part of the page or site and the section should look complete. All images need to be moved to the appropriate sections
  • in CSS, you don't need to use @media in each block, it increases the code and the load on the site. Move @media to separate blocks and style the classes there.
  • js can be shortened a little, but this is not necessary:

  const updateImage = (direction) => {
      index = (index + direction + desktopHeroImages.length) % desktopHeroImages.length;
      const images = window.innerWidth <= 640 ? mobileHeroImages : desktopHeroImages;
      heroImage.src = images[index].image;
      heading.innerHTML = images[index].heading;
      paragraph.innerHTML = images[index].paragraph;
  };
  
  left.addEventListener('click', () => updateImage(-1));
  left.addEventListener('keypress', () => updateImage(-1));
  right.addEventListener('click', () => updateImage(1));
  right.addEventListener('keypress', () => updateImage(1));
  

  Otherwise, everything is great, good luck with your development!

  Marked as helpful

  0

  ---

  

  collins-ai•440

  @collins-aiPosted about 1 month ago

  @dar-ju your comment is very rich and contains useful information. Thanks a lot.

  0