Skip to content
OverviewSolutions
6
Comments
4

Miguel N Saleme

@MiguelN79480 points

Siempre intentando aprender.

Latest solutions

Latest comments

  • Miguel N Saleme•80
    @MiguelN794

    Very good, mate!

  • Miguel N Saleme•80
    @MiguelN794

    Hi friend, you would have to do the css or I don't know if you are going to do it in react.

    good luck, and keep it up

  • P
    Eric Kumasaka•180
    @emkuma
    What are you most proud of, and what would you do differently next time?

    At least I attempted to make it responsive.

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

    Brain fog, helplessness, frustration, anger, setbacks.

    Exercise, meditation, coffee.

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

    Appreciate getting newbie appropriate feedback.

    Try to be respectful.

    Thank you.

    Eric Kumasaka

    I attempted to make this design responsive.

    2
    Miguel N Saleme•80
    @MiguelN794

    Hi friend. Don't worry, it's normal, sometimes you have to stretch and do something else when you can't do anything.

    To center the card, I added to the body:

    display: flex; justify-content: center; align-items: center;

    If you are not using AI extensions, I would recommend you try Codeium for Visual Studio Code, so you can check so that it does not generate all that stuff that is bad for you.

    Good luck and this is the way.

  • Miguel N Saleme•80
    @MiguelN794

    Sure, here is the feedback:

    1. Semantic HTML:

      • The HTML structure is mostly semantic. The use of <main>, <div>, <h1>, <p>, and <footer> tags is appropriate. However, consider using a <section> tag instead of a <div> for the container to enhance semantic meaning.

    2. Accessibility:

      • The alt attribute for the image is well-used, providing a description for screen readers.
      • To improve accessibility, consider adding aria-label attributes where necessary, such as on the links in the footer to describe their purpose.
      • Ensure that the color contrast between text and background is sufficient for readability.

    3. Responsive Layout:

      • The current HTML does not include any responsive design elements. Ensure that the CSS includes media queries to handle different screen sizes.
      • Use relative units (like percentages or viewport units) instead of fixed units (like pixels) for widths and heights to make the layout more flexible.

    4. Code Structure, Readability, and Reusability:

      • The code is well-structured and readable. The indentation and spacing are consistent.
      • Consider using classes or IDs to target specific elements for styling or JavaScript functionality, which can improve reusability.

    5. Design Consistency:

      • Without the design reference, it's hard to determine if the solution differs considerably from the design. Ensure that the CSS matches the design specifications provided by Frontend Mentor.