Skip to content
OverviewSolutions
7
Comments
5
Steven Nguyen
@snguyen56

All comments

  • Steven Nguyen•130
    @snguyen56Posted 2 days ago

    Good job on the challenge!

    I have one suggestion that may interest you to improve the semantic HTML:

    • Do not skip heading order. Headings should always go in order (h1, then h2, then h3, etc.). The preparation heading should be a h2 with unique styling on it (info on heading usage).

    I hope this tips helps you in the future!

    Happy Coding 🙂!

    Marked as helpful
    0
  • Miguel03nx•70
    @Miguel03nxSubmitted 12 days ago
    What are you most proud of, and what would you do differently next time?

    poder seguir practicando grid y en cada desafio aprender cosas nuevas y poderlas poner en practica

    What challenges did you encounter, and how did you overcome them?

    como separar los botones y los textos

    What specific areas of your project would you like help with?

    en el tamaño de todo que tal se ve y si hay que modificar algo necesariamente

    css grid

    1
    Steven Nguyen•130
    @snguyen56Posted 10 days ago

    Nice job!

    One suggestion that I have for you would be to use absolute units (like px) and not relative units (vh). This is to prevent your components from growing too large as the window size increases (information on CSS units).

    Overall, good work!

    (usando el traductor de google)

    ¡Buen trabajo!

    Una sugerencia que tengo para usted sería utilizar unidades absolutas (como px) y no unidades relativas (vh). Esto es para evitar que sus componentes crezcan demasiado a medida que aumenta el tamaño de la ventana (información sobre unidades CSS).

    En general, ¡buen trabajo!

    0
  • Steven Nguyen•130
    @snguyen56Posted 10 days ago

    Nice job on finishing the component!

    I have a few suggestions that may help to improve your code:

    • The mobile design looks great, but it seems that you have skipped doing the desktop design. You can add styling for desktop screens using media queries at a breakpoint of your choosing (info on media queries).

    • Do not skip heading levels. Always go sequentially when using heading elements (<h1>,<h2>,<h3>,etc.). If you're using different heading levels for their default stylings, it is better to add your own custom styles to the element rather than using headings out of order. This helps screen readers parsing your website and avoids confusion from users who use such software (Section Heading Usage).

    • Some of your CSS styles do not line up accurately with the given design. You can refer to the style guide file for some base style information on the design.

    I hope you find this information helpful!

    Good luck on your future projects 🙂!

    Marked as helpful
    0
  • Steven Nguyen•130
    @snguyen56Posted 18 days ago

    Nice job on the component!

    The component looks great, but I would suggest that you add some more semantic HTML to improve the code. Adding this can help the performance of your websites with search engines and improve accessibility.

    For example, you could add headings (h1-h6) to the start of sections instead of only using paragraphs. You can also add some landmarks (like header, main, or footer), which would help any screen readers parsing your site.

    Overall, good work!

    0
  • Steven Nguyen•130
    @snguyen56Posted 18 days ago

    Component looks great!

    If you want to improve the user experience, try using a click toggle for the active state for the JS, instead of a mouse leave event.

    For more information on toggling classes in JS, refer to this link: https://www.w3schools.com/howto/howto_js_toggle_class.asp

    Overall, well done!

    Marked as helpful
    1