Skip to content
OverviewSolutions
24
Comments
12
Elio Flores
@elioflo

All 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

  • Elio Flores•400
    @elioflo

    Hi, I think your solution looks great! My suggestion would be to focus on approaching the design rather than making it identical. I remember when I started out, I found it very difficult to make my designs look exactly the same as the reference. Instead, it's better to concentrate on improving your HTML and CSS skills, so that you can better understand how to implement your design. At the end of the day, it's mainly about getting the sizes and proportions right. So, don't get too caught up on making the design perfect.

    You can use dev tools to help you approach the design, and if your project looks similar to the design, that's good enough. What I like to do is measure the sizes and proportions and try to replicate them as closely as possible.

    I hope this advice is helpful to you!

    Elio Flores

    Marked as helpful
  • Elio Flores•400
    @elioflo

    Hi,

    Great job on your solution so far!

    I have a couple of suggestions that could help improve it even further:

    • To make the menu button responsive, you'll need to use some JavaScript and manipulate the display property. You can learn more about this technique by checking out the tutorial on W3Schools.

    • I noticed that the font-size in your solution increases as the viewport size increases because you're using viewport units (vw) to specify the font size. While this can be a useful technique in some cases, it can also lead to inconsistent font sizes on different devices. You may want to consider using rem or em units instead. These units are relative to the font-size of the root element (html) or the parent element, respectively, and do not change with the viewport size. This can help ensure that your font sizes are consistent across different devices. Check out this post on css-tricks to learn more about font size and units.

    Keep up the good work! Let me know if you have any questions.

    Elio Flores

    Marked as helpful
  • Elio Flores•400
    @elioflo

    Great job! Your solution looks great!

    As some of the other comments have mentioned, you can further improve your page by using media queries to make it responsive. Another way to make your page responsive is by using percentage values for the width property. This allows the element to adapt to different screen sizes and take up a percentage of its parent container's width. For example:

        .responsive-box {
        width: 100%;
        max-width: 800px;
    }

    This will cause the box to adjust its width to the size of the viewport, until the viewport is wider than 800px, at which point the box will stop growing in size.

    Here are some alternatives for centering an element: you can use position (as you have done), flex, or grid.

        // WITH FLEX
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    // WITH GRID
    .center {
        display: grid;
        place-items: center;
    }

    I hope this helps! If you have any questions, feel free to ask.

    Elio Flores

    Marked as helpful
  • Elio Flores•400
    @elioflo

    Hello,

    I really appreciate your solution, it's great! I noticed that the footer element is present in the HTML code, but it doesn't appear to be showing up in the browser. Any reason?

    Elio Flores

  • Elio Flores•400
    @elioflo

    Hello,

    Your solution is excellent - it has a simple HTML structure and styling, and looks great!

    I can offer you some advice or alternative methods to style your CSS:

    • To center an element, you can use either flex or grid. If you choose to use grid, it can be achieved in just two lines of code:
    body {
    display: grid;
    place-items: center;
}
    • If you know that all child elements have the 'text-align: center' property, you can set this property to their parent element. In this case, you can set this property to the main element and remove it from the p and h1 elements.".
    main {
    // code ....
    text-align: center;
}
    • For img element:
      • The default value for the height property is 'auto', so it can be omitted if you want to use the default value.
      • If you are not moving the element from its default position, using the 'position: relative' value is not necessary.
      img {
    width: 100%;
    border-radius: 10px;
}

    I hope my tips are helpful to you. Keep up the good work!

    Elio Flores

    Marked as helpful
  • Elio Flores•400
    @elioflo

    Nice work!