Skip to content
OverviewSolutions
26
Comments
153

Andrés Gutiérrez Ramírez

@AGutierrezRSpain2,470 points

Professional with more than 3 years of experience passionate for new technologies and good practices with clean architecture and agile methodologies. Proactive

I’m currently learning...

🔸React.js 🚀 🔸Alpine.js 🚀 🔸Tailwind CSS 🎨 🔹Accessibility 💎

Latest solutions

View more solutions

Latest comments

  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezR

    Hello there @minu-arch 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    CSS and Styling:

    • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
    • Instead of fixed widths, employ max-width and min-width for flexible and responsive design. Like the image, set the parent to a max-width: 50%, and let the image to adapt width object-fit

    I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

    Happy coding!

    Marked as helpful
  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezR

    Hello there @AshongAbdallah06 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    General Structure and HTML:

    • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
    • All the content should be contained within landmarks. Every page minimally needs a <main> element.

    CSS and Styling:

    • Implement CSS custom properties to define and utilize project colors more easily.
    • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
    • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
    • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

    Accessibility and Semantic HTML:

    • The icons/illustration images are decorative, so their alt text must be empty: alt="".

    I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

    Happy coding!

    Marked as helpful
  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezR

    Hello there @DebabrataBanik 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    General Structure and HTML:

    • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

    CSS and Styling:

    • You could add the hover effect to the title. Change the color to yellow and implement a cursor: pointer.

    Accessibility and Semantic HTML:

    • The icons/illustration images are decorative, so their alt text must be empty: alt="".
    • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".

    I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

    Happy coding!

    Marked as helpful
  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezR

    Hello there @Ib-dI 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    General Structure and HTML:

    • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
    • All the content should be contained within landmarks. Every page minimally needs a <main> element.
    • Consider using <h2> for each card titles, instead of a <h1> for each card title.

    CSS and Styling:

    • Implement CSS custom properties to define and utilize project colors more easily.
    • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
    • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
    • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

    I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

    Happy coding!

  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezR

    Hello there @MustafaKemalV 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    General Structure and HTML:

    • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
    • All the content should be contained within landmarks. Every page minimally needs a <main> element.
    • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

    CSS and Styling:

    • Implement CSS custom properties to define and utilize project colors more easily.

    Accessibility and Semantic HTML:

    • The icons/illustration images are decorative, so their alt text must be empty: alt="".
    • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Jules Wyvern".

    I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

    Happy coding!

    Marked as helpful
  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezR

    Hello there @Anlperr 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    General Structure and HTML:

    • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

    CSS and Styling:

    • Implement CSS custom properties to define and utilize project colors more easily.
    • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
    • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
    • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

    Accessibility and Semantic HTML:

    • The icons/illustration images are decorative, so their alt text must be empty: alt="".
    • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".

    I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

    Happy coding!

    Marked as helpful
View more comments