Responsive Fylo using HTML, SCSS, & JavaScript

Community feedback

• 

  P

  Nishanth Venkatesan•1,030

  @nishanth1596

  Posted about 1 month ago

  Hi Rebecca! Excellent work on this challenge! 🎉 It’s really impressive how semantic and accessible your HTML is! The transitions and animations look super smooth, Im definitely going to steal a few of these ideas for my next challenge 😉

  My few suggestions are; 1.Decorative Image Optimization Since the illustration is decorative, you can simplify the markup by removing the <figcaption> and aria-hidden="true". An empty alt attribute (alt="") is enough to hide it from screen readers

    <figure class="productive__banner">
            <img class="intro__img" src="./assets/images/illustration-2.svg" alt="" aria-hidden="true">
            <figcaption class="visually-hidden">Image doesn't need a caption</figcaption>
          </figure>
  
  
  <figure class="productive__banner">
            <img class="intro__img" src="./assets/images/illustration-2.svg" alt="" >
  </figure>
  

  2.Improving Tablet Layout UX For tablet screens, consider adding more horizontal padding and constraining the width of the input and button fields. Centering them would improve the overall visual balance. This is also where using React (or any component-based UI library) could shine, you only need to update the button/input styles once, and it would reflect everywhere!

  Again, great job! Keep up the amazing work and keep pushing yourself with more advanced setups like React, you’re clearly ready for it! 🚀

  10

  Marked as helpful
• 

  Marzia Jalili•7,070

  @MarziaJalili

  Posted about 1 month ago

  That's an A game build, no cap! 👑

  A tiny suggestion?

  For a lengthy home page, it's best practice to have a to top button. A button that shows up all across the page and when clicked will take users to the top of the page.

  ✅ As if the href attribute is set to # in the <a> element, it gets this job done so we will use that.

  ✅ And to make sure that the link appear all across the page, set its position to fixed. This won't affect other element too.

  ✅ You could take the example below into account:

  <a href="#" className="top-btn">Top</a>
  

  .top-btn {
    position: fixed;
    z-index: 100;
  }
  

  ✅ Or you could have it set as the one in the footer.

  Other than that, the web’s lit!

  🔥🔥🔥

  20