Skip to content
OverviewSolutions
24
Comments
12

Elio Flores

@eliofloBuenos Aires, Argentina400 points

Learning web development

I’m currently learning...

Learning react

Latest solutions

View more solutions

Latest comments

  • Elio Flores•400
    @elioflo

    Hello Maximilian, I love the animations you added to the card. Observation: to center the card you can use

    body {
    ...
    place-content:center;
    ...
}

    which centers it vertically and horizontally.

  • Elio Flores•400
    @elioflo

    Hi,

    Great job on your website so far! I have a few suggestions that could help improve your site even further:

    • Check your website's accessibility and HTML structure by using validation tools like the HTML Validator and Accessibility tool. Making necessary fixes based on these reports can improve your site's overall quality and accessibility.

    • Ensure that your site follows HTML semantic conventions by including appropriate tags, such as the h1 tag for your main heading, as well as using main and footer tags where necessary. You can read more about HTML semantics on resources like mdn and w3schools.

    • Consider using a radio button instead of a regular button for your rating system since the button behaves like a radio button. This can make the rating process more intuitive for users.

    Keep up the great work and let me know if you have any questions!

    Elio Flores

    Marked as helpful
  • Elio Flores•400
    @elioflo

    Hello,

    Great job on your solution so far! I have a few suggestions to help you improve it even further:

    • Accessibility: Make sure to take a look at accessibility guidelines and run an HTML accessibility report to identify any issues that need fixing. This will ensure that your solution is inclusive and usable for everyone. Some tools HTML validator and Accessibility testing tool.

    • Alt attribute: Don't forget to set the alt attribute for any images you use. This is important for accessibility and also helps with SEO.

    • As an alternative You can use/play with opacity attribute for the overlay class.

    • Centering elements(for the overlay icon): There are multiple ways to center elements, such as using Flex, Grid, or Position. Experiment with different techniques to find what works best for your specific use case.

    I hope these suggestions are helpful to you. Keep up the great work!

    Elio Flores

  • Elio Flores•400
    @elioflo

    Hi, Great job!

    Some suggestions for improvement:

    I hope this helps you!

    Elio Flores

  • Elio Flores•400
    @elioflo

    ¡Hola! ¡Buen trabajo! ¡Te quedó genial!

    Me gustaría darte algunas sugerencias/consejos para mejorar aún más:

    • Te recomiendo investigar sobre el enfoque o método Mobile First y tratar de aplicarlo en tu proyecto. Este enfoque consiste en empezar primero para dispositivos móviles, y luego adaptarlo a pantallas más grandes. Esto es beneficioso porque es más fácil adaptar un diseño pequeño a una pantalla más grande, que al revés. Además, garantiza que tu sitio web o aplicación sea accesible y usable en todos los dispositivos, lo que puede mejorar la experiencia del usuario y aumentar la retención. Hay muchos tutoriales en youtube que te pueden servir.

    • Para el botón, es más conveniente utilizar <button><svg...></button> en vez de div, ya que se trata precisamente de un botón.

    • En el archivo styles.css, estás utilizando main y .container para referirte a lo mismo. Aunque no hay nada que te lo impida, puede prestarse a confusión a la hora de saber qué estilos se están aplicando. Te recomiendo que utilices una sola forma para referirte al elemento.

    • Te sugiero que investigues sobre SASS para los estilos. Esto te ayudará a organizar mejor las clases en diferentes archivos en vez de tener todo en uno solo.

    ¡Espero que estos consejos te sean útiles! Si tienes alguna pregunta/duda, no dudes en preguntarme.

    Elio Flores

    Marked as helpful
  • Elio Flores•400
    @elioflo

    Hi there! Your solution looks good.

    I noticed that you used margin to center the .conteudo class div, but if the viewport height is too short, the .conteudo div may not look centered anymore. The Both Horizontally & Vertically css-tricks section on css-tricks has some advice and alternatives for centering elements.

    In your case, you could try using the following code to center the .conteudo div:

    .container {
    display: grid;
    min-height: 100vh;
    place-items: center;
}

    This method will ensure that the .conteudo div is centered for any viewport height size.

    You're doing a great job with your coding. I hope this comment helps you improve your solution!

    Elio Flores

View more comments