Pricing Component with Toggle (HTML/CSS & JavaScript) Responsive.

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing your Frontend Mentor challenge! It's awesome to see your hard work materialize into a well-structured project. Here are a few tips to further enhance your work:

  1. HTML Structure and Accessibility:

     • Great job on structuring your HTML! To further improve, consider using more semantic HTML elements like <section> for your card sections and <header> for your main heading. This not only improves readability but also enhances accessibility.
     • Add alt attributes to your images if not already present. This is crucial for screen readers and users who might have images disabled.

  2. CSS Best Practices:

     • You've done a good job with CSS. However, for maintainability, consider organizing your CSS. Group related styles together and comment sections like "Layout", "Typography", etc. This makes your stylesheet easier to navigate.
     • Avoid using too many absolute units like pixels. Instead, use relative units like em, rem, or percentages for better responsiveness and scalability.

  3. JavaScript Enhancements:

     • Your script for the toggle functionality is well-implemented. To make it more efficient, consider using classList.toggle for changing classes instead of directly manipulating styles. This keeps your JavaScript cleaner and separates concerns between style and behavior.

  Resources for Learning:

  • Semantic HTML: MDN Web Docs
  • CSS Best Practices: CSS-Tricks
  • JavaScript classList: MDN Web Docs

  Keep pushing your limits and exploring new challenges. Each project is a stepping stone to becoming a more proficient developer. Remember, the journey is as important as the destination. Keep up the great work! 💻🚀

  0