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.
Some files aren't accessible from your github repository so we can evaluate what you've done!
To Speed Up Bit than now when coding.
What challenges did you encounter, and how did you overcome them?To make it responsive for the Mobile Screens.
It's well done, except for the fact that the folder weren't properly organized. the styles.css file needs to be in the assets/css folder, for example, to be properly organized.
It's well done, except for the fact that the folder weren't properly organized. the styles.css file needs to be in the assets/css folder, for example, to be properly organized.
Does the solution include semantic HTML?
Yes, but some improvements can be made by replacing some div with semantic tags like <header> or <article>.
Is it accessible and what improvements could be made?
Partially. More detailed image descriptions and ARIA tags could improve accessibility.
Does the layout display on different screen sizes?
Not completely. Use relative units and media queries for better responsiveness.
Is the code well structured, readable and reusable?
Yes, but styles can be better organized and reused, especially by avoiding fixed widths.
Does the solution differ significantly from the design?
No, it remains faithful to the design, but could include more visual details such as transitions or animations.
To finish the stylesheet.css file, it's best to put it in the assets/css/ folder to have a good project structure.
Estoy feliz por haber podido realizarlo sin ninguna complicacion:
Personalmente no encontre ninguna dificultad, no es el primer Challenge que hago (Puede ser que haya errores y no lo sepa).
What specific areas of your project would you like help with?Me gustaria recibir ayuda en cualquier parte del codigo si se cree que se podria haber hecho de una mejor forma.
It's good to see you've adopted good practices like using css variables.
