Responsive page with flexbox, nested selectors and data attributes

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing the Frontend Mentor challenge for the Room homepage! Your project is a great step forward in your web development journey. Here are a few suggestions to enhance your code:

  1. Consistency in Naming Conventions:

     • Maintain consistency in your class naming. You have classes like harmburger-btn, which seems to be a typo for 'hamburger'. Consistency helps in readability and maintenance.
     • Example:

       <button class="hamburger-btn">
         <!-- SVG code -->
       </button>
       

  2. Use Semantic HTML:

     • Use more semantic elements in your HTML for better accessibility and SEO. For example, use <header> for your navigation bar and <section> tags for major sections.
     • Example:

       <header class="nav-bar">
         <!-- Nav content -->
       </header>
       <section class="hero">
         <!-- Hero content -->
       </section>
       

  3. Optimize JavaScript for Performance and Readability:

     • In your JavaScript, consider combining event listeners where possible to reduce redundancy and improve performance.
     • Example:

       rightBtns.forEach((btn) => {
         btn.addEventListener('click', handleRightButtonClick);
       });
       function handleRightButtonClick() {
         // Handle the click event
       }
       

  Additional Resources:

  • For HTML semantics, check out MDN Web Docs - HTML elements reference.
  • On JavaScript performance, Google Developers - Optimizing JavaScript is a great resource.

  Keep up the fantastic work and continue to challenge yourself with new projects. Remember, every line of code you write is adding to your experience and expertise in the field of web development! 💻🌟

  Marked as helpful

  0