Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
3

CateLo

@CateLo97Montevideo30 points

👋 ¡Hola! Soy Caterine, desarrolladora web, siempre aprendiendo y explorando nuevas tecnologías. 🚀

Latest solutions

  • Social links profile


    CateLo•30
    Submitted 2 months ago

    1 comment
  • ...

    #pure-css

    CateLo•30
    Submitted 2 months ago

    1 comment
  • Card con código QR usando HTML, CSS y Flexbox


    CateLo•30
    Submitted 2 months ago

    1 comment

Latest comments

  • P
    Rick van de Sande•80
    @rickvandesande
    Submitted 2 months ago

    Social links profile solution

    1
    CateLo•30
    @CateLo97
    Posted 2 months ago

    ...

  • Kabelo P Matlakala•200
    @DeLightPlus
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I was able to accurately translate the design into a clean, responsive, and accessible HTML and CSS layout. It really helped me improve my attention to detail—especially when matching spacing, typography, and layout across mobile and desktop views.

    If I were to do it again, I’d take a more mobile-first approach in my CSS, possibly using media queries earlier in the design. I’d also explore using CSS variables or utility classes to make the code more scalable and maintainable for larger projects.

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

    One of the main challenges was making the card layout look consistent across different screen sizes, especially getting the spacing, shadows, and rounded corners to match the design precisely. I also struggled a bit with aligning the profile section and ensuring the text overflow didn’t break the layout on smaller screens.

    To overcome these issues, I inspected the design carefully and adjusted margins, paddings, and font sizes using media queries. I also used Flexbox to manage the layout structure more efficiently and tested the component on different devices to make sure it looked good everywhere.

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

    I'd really appreciate feedback on how to better structure my CSS for scalability. Right now, it's all written in one place, and I'm unsure if there are best practices I should be following for organizing styles—especially for small components like this.

    I’d also like input on accessibility. Are there improvements I could make to ensure the card is screen-reader friendly or better for keyboard navigation?

    Lastly, if there’s a more efficient way to manage spacing and typography to match the design perfectly without hardcoding pixel values, I’d love to learn about that too.

    Blog Preview Card with HTML & CSS

    #pure-css
    1
    CateLo•30
    @CateLo97
    Posted 2 months ago

    ...

  • Najoa Prome•30
    @najoaa
    Submitted 2 months ago

    Responsive QR code component challenge built with HTML and CSS

    1
    CateLo•30
    @CateLo97
    Posted 2 months ago

    Your code has a clear and readable structure.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub