Skip to content
OverviewSolutions
4
Comments
4
aditya-alshi
@aditya-alshi

All comments

  • EDWINTOAPANTA02•120
    @EDWINTOAPANTA02Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    estoy orgulloso de seguir aprendiendo a utilizar html y css, y todo lo que contiene estos temas como etiquetas, organizacion, estilos y demas

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

    el desafio que encontre fue que no este tan junto el nombre de la ubicacion, utilice tanto los margin como pading

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

    el desafio que encontre fue que no este tan junto el nombre de la ubicacion, utilice tanto los margin como pading

    social link

    #accessibility#airtable#angular#angular-material#anime-js
    1
    aditya-alshi•60
    @aditya-alshiPosted 2 months ago

    Hey @EDWINTOAPANTA02,

    Great job on the project!

    I have a few observations and suggestions:

    • Reducing Nesting:
      Would it be possible to move the <a> element out of the <button> and have it stand alone like this?

      <a href="#" class="link">GitHub</a>

      Instead of:

      <button class="boton_link">
    <a href="#" class="link">GitHub</a>
</button>

      This would allow the focus state to be applied directly to the <a> element, rather than transitioning from <a> to <button>.

    • Improving Accessibility:
      How would you like to improve accessibility? Perhaps you could start by updating the alt attribute for the <img> to something like: "Profile image of Jessica Randall". Additionally, consider using aria-label for interactive elements.

    • Using Semantic Elements:
      Have you considered using more semantic HTML elements? For example, using <main> for the main content container instead of relying on <div>. I’ve found that my HTML code has improved significantly by using <div> as sparingly as possible.

    Overall, Great work

    0
  • aditya-alshi•60
    @aditya-alshiPosted 2 months ago

    Hey @JuniorGodoyOrtega,

    Great work on the projects! You've demonstrated excellent use of semantic elements, which truly enhances both readability and accessibility.

    I had a few observations and suggestions to further refine your code:

    • Nesting Reduction: Would it be possible to simplify the nesting structure? For example, reducing:

      <main>
    <article>
        ...content
    </article>
</main>

      to just:

      <main>
    ...content
</main>

      This could help keep the markup cleaner while still maintaining semantic clarity.

    • Figure Element Usage: Have you considered whether the <figure> element might be redundant in your current setup? Since your alt attribute already provides clear image descriptions, removing <figure> could simplify the structure without losing accessibility benefits.

    • SEO Considerations: A great suggestion I recently received from a senior developer at Frontend Mentor was to start incorporating SEO best practices in projects. This can include using:

      • Meta descriptions and title tags.
      • Descriptive alt text (which you're already doing well!).

    Overall, fantastic work!

    Marked as helpful
    0
  • aditya-alshi•60
    @aditya-alshiPosted 2 months ago

    Hi @almarinezb

    Great efforts on this project.

    Here's one way to look at margin and padding. This diagram by MDN Web Doc can be helpful.

    How I think about it is, I imagine someone need to pack their crockery. They would take a wooden box. Lay some foam, or shredded paper to cushions the crockery. They place crockery in between the cushion. Close the box. And wrap the box with bubble-wrap.

    Here the crockery will be the content, the foam or shredded paper will be the padding, the box will be the border, and the bubble wrap will be the margin.

    Also. I would suggest to apply display flex to your

    .container{

}```
    0
  • Frontend-Ichi•70
    @Frontend-IchiSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that i completed the challenge, but i could not make the conatiner correct.

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

    I encountered a problem with making my container.

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

    I believe the issue comes from my IDs in my html.

    Frontend mentor QR Challenge

    1
    aditya-alshi•60
    @aditya-alshiPosted 2 months ago
    • You might want to use flexbox for centering the component
    • Make the size of the component consistent by using aspect-ratio CSS property.
    • As much as possible follow the instructions in the readme.md and style-guide.md file provided by frontend mentor for the assignment
    • According to suggested method by frontend mentor, you can focus on one element styling at a time. only after some satisfactory change, move to the next element.
      • For example: Start with body element make the height of the body to 100vh. And then use flexbox to justify and align the element center.
      • After that you can start with the main container itself. style it with consistent height and width (mentioned above). Once the size of the parent element is done, now you can style the image component.
      • You can make the image-width to 100%. This way the image will cover the entire width of its parent, which has already been set to consistent size.
      • Add padding to qr-container and background color white.
      • Follow the instruction in the readme.md and style-guide.
    1