Community feedback

• 

  P

  Rahexx•920

  @RahexxPosted 3 months ago

  Code Review Feedback

  Great job with this challenge! Below is my detailed feedback on your work:

  ---

  HTML

  1. The structure is good, but consider simplifying your BEM naming convention. For example:
     • Instead of using accordion__container and accordion, you could simply use accordion, accordion__btn, and accordion__icon.
     • Similarly, for the FAQ section, using a modifier like faq--last is better than faq__last, as it aligns more closely with BEM principles.
  2. Ensure that alt attributes for icons are meaningful. Empty alt attributes may cause accessibility issues, as screen readers won’t convey any information about the images.

  ---

  CSS

  1. Your styles are clean and well-structured. However, to address the issue with spacing between the image and the screen edge on wider screens, you can use properties that allow better scaling and responsiveness like background-size: cover

  ---

  JavaScript

  1. Your JavaScript is clean and readable—great job! However, there’s a UX issue:
     • The functionality for expanding/hiding accordion information is not applied to the button icon. Many users will intuitively try to click the icon, so it’s essential to make it interactive.
  2. Instead of directly modifying styles in JavaScript, I suggest:
     • Create a CSS class for an "open" accordion state.
     • Use JavaScript to add, remove, or toggle this class. This approach is scalable and simplifies handling more complex scenarios in the future.

  ---

  General Advice

  Here are a few suggestions for you:

  1. Consider learning SASS (CSS preprocessor). It’s a quick skill to pick up and will make your CSS more manageable and modular in future projects. Learning SASS now will also serve as a solid foundation as you transition into more advanced JavaScript development.
  2. Focus on JavaScript basics before making another HTML, CSS and JS challange. This way, you’ll build a strong foundation without overwhelming yourself.

  ---

  Recommended Resources

  Here are some excellent resources to continue learning JavaScript:

  • JavaScript.info
  • FreeCodeCamp JavaScript Course
  • SuperSimpleDev - YouTube Course
    (A comprehensive, beginner-friendly video tutorial.)
  • MDN Web Docs - JavaScript (Official documentation.)

  Tips for Learning

  • Always complete exercises in tutorials, even if you think you know the answer. Hands-on practice is critical for mastering JavaScript.
  • Apply what you’ve learned by building small projects. Practical experience is the best way to solidify your knowledge.

  ---

  Final Thoughts

  • Keep up the great work! I recommend completing another challenge using just HTML and CSS while continuing to learn JavaScript at your own pace. Once you’re comfortable with the basics, start incorporating JavaScript into your projects.
  • Regarding your previous question about the challenge, I’ll share my contact information on GitHub.

  Well done, and good luck with your next project!

  Marked as helpful

  0

  ---

  

  chukwuma jennifer•160

  @jhenniiferPosted 3 months ago

  @Rahexx Thank you very much. I will start learning Sass today

  0
• 

  Akshobya Rao•100

  @AkshobyaRaoSWEPosted 3 months ago

  Hi @jhenniifer, Nice Job! After taking a look at it, I realized that the JS might not have been added to the code(which was a main part of the project statement). From what I see, you're doing well with CSS and HTML, so, if you haven't already, you might want to start thinking about learning vanilla js. Additionally, the background image doesn't cover the full viewport width, which can be fixed by adding background-size:cover. Overall, nice job! Happy Coding!

  Marked as helpful

  0

  ---

  

  chukwuma jennifer•160

  @jhenniiferPosted 3 months ago

  @2WeekOfGrind thank you. I am in the process of getting a hang of js. If you could recommend materials or tutorials, I'd really appreciate

  0