Me encanto poder serguir la metodología BEM.
What challenges did you encounter, and how did you overcome them?ninguno
What specific areas of your project would you like help with?Me encantaria saber si aplique bien la metodologia BEM con Sass y en que puedo mejorar para poder hacer mas limpio mi codigo.
I'm proud of finally completing my first project with JavaScript.
What challenges did you encounter, and how did you overcome them?Nothing quite extraordinary
What specific areas of your project would you like help with?Adding keyboard functionality for page navigation
<section> tags for each FAQ block instead of <div> to more clearly indicate the distinct sections of the page.<h2> or <h3> tag instead of <p class="question">, which improves semantic structure and helps screen readers identify key content sections.<button> for the toggle is good, but each button should ideally include aria-expanded="false" and aria-controls="answer-id" to improve accessibility.aria-label attributes to the buttons, or use aria-expanded to communicate the open/close state to screen readers.alt text for the background and icon images. Instead of “background pattern” or “star,” give more context for what these images represent or how they fit into the design.
<section> or <article> tag to wrap around the rating and thank-you containers for more semantic meaning, as these represent distinct sections of the page.Add alt text to images for screen readers to describe their function or content, instead of leaving it empty.
Use aria-live="polite" on the rating value container (<p class="selected">) to announce the rating selection for screen readers. This is especially helpful when users select a rating, as they may not know their choice was recorded without visual feedback.
Strengths: The use of flex properties for centering and layout alignment is effective, ensuring a consistent structure on smaller screens.
Media Queries: Consider adding media queries for smaller screens, like tablets or mobile devices. Reducing the width of .rating and .thank-you to adapt to narrower screens and increasing button size would enhance usability on mobile.
.img to .icon-container or .image-container to clarify its function.@media breakpoints would ensure the layout looks good across screen sizes without losing design fidelity.Overall, the code is clean and well-structured with small tweaks for improved readability, accessibility, and responsiveness.
it's well done, but the css file must be in assets/css/ to have a good structure and the javascript script in assets/js/
👉 I created suitable grid layouts for different devices for having a responsive design. 👉 This time I did not import the font from google fonts as a link but integrated it directly in the project as a local woff2-file and embedded it in the css with @font-face.
What specific areas of your project would you like help with?I would also like to keep an eye on accessibilty design for future projects. If anyone knows of any useful info pages, I would be happy to hear about them.✌️
I appreciate how well you've coded respecting best practices for css but for html;
Good work, you've done well.
