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

Juan Díaz Peña

@JDPWebCosta Rica90 points

Creative, chill and cunning. Cheers!

Latest solutions

  • CSS variables, media queries, responsive


    Juan Díaz Peña•90
    Submitted 7 months ago

    Need help to get this recipe page to figure the next winner numbers for the lotto.


    1 comment
  • Social Links Profile using flexbox


    Juan Díaz Peña•90
    Submitted 7 months ago

    Any and all feedback welcome.


    1 comment
  • Blog Preview Card Main Solution by JDP


    Juan Díaz Peña•90
    Submitted 7 months ago

    Any feedback is welcome.


    1 comment
  • NFT-Preview-Card-Component


    Juan Díaz Peña•90
    Submitted over 1 year ago

    0 comments
  • Result Summary Challenge


    Juan Díaz Peña•90
    Submitted over 2 years ago

    0 comments
  • Frontend Mentor - QR code component solution


    Juan Díaz Peña•90
    Submitted over 3 years ago

    1 comment
View more solutions

Latest comments

  • Peter Kruse•60
    @pikruse
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm really starting to get used to using flexbox, which seems like the standard. I'm proud of that

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

    For some reason, I had the most trouble formatting the table. I tried to do so with flex, but I realized that it was way easier without it.

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

    As per usual, I want to do things the most "industry-standard" and flexible way.

    Recipe Page

    1
    Juan Díaz Peña•90
    @JDPWeb
    Posted 7 months ago

    Great job mate! All seems to be in good order. My only suggestion is concerning the colors as they can be set with variables for an easier maintenance.

    Other than that,great job!

    Marked as helpful
  • P
    fmartinmora•80
    @fmartinmora
    Submitted 7 months ago
    What challenges did you encounter, and how did you overcome them?

    I start to use variable in css as example:

    :root{ --green: hsl(75, 94%, 57%); --white: hsl(0, 0%, 100%); --grey700: hsl(0, 0%, 20%); --grey800: hsl(0, 0%, 12%); --grey900: hsl(0, 0%, 8%); }

    Social Links Profile

    2
    Juan Díaz Peña•90
    @JDPWeb
    Posted 7 months ago

    Great job! Looking pretty good and close to the design.

    Concerning the code, would recommend either % or REMs instead of static measurements like PXs. Well done with the usage of variables in CSS, keep it up mate.

  • Stuart Bradley•60
    @stuartbradley
    Submitted 8 months ago

    blog preview card

    1
    Juan Díaz Peña•90
    @JDPWeb
    Posted 7 months ago

    Great job, looking nice.

    Would recommend setting a folder structure for the project. These being rather small makes not much of a difference, but on larger projects is best to have everything nice and tidy.

    Also would suggest the usage of CSS variables for colors or values that are used often.

  • Carliytox•80
    @Carliytox
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Estoy muy orgulloso de haber logrado una implementación funcional y visualmente atractiva del desafío, utilizando Flexbox para el diseño y asegurando que el componente sea completamente responsive. Fue un reto trabajar con el diseño móvil primero, pero al final pude obtener un diseño que se adapta bien tanto a dispositivos pequeños como grandes. La mayor lección fue aprender a aplicar Flexbox de manera efectiva para hacer que el diseño fuera flexible.

    La próxima vez, me gustaría explorar más a fondo la implementación de animaciones CSS para hacer que el componente se vea más dinámico, y también optimizar la estructura de los archivos CSS para que sea más modular y reutilizable.

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

    Uno de los principales desafíos fue asegurarme de que el diseño fuera completamente responsive y se viera bien en diferentes tamaños de pantalla. Hubo algunos problemas al principio con la disposición de los elementos en pantallas más pequeñas, pero logré solucionarlo ajustando los márgenes y utilizando media queries de manera efectiva.

    Otro reto fue trabajar con Git y GitHub para realizar los cambios y asegurarse de que todo estuviera bien versionado. A veces tuve problemas con la sincronización de los archivos, pero pude solucionarlo al revisar las configuraciones y asegurarme de que los archivos estuvieran correctamente añadidos antes de hacer commit.

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

    Me gustaría recibir retroalimentación sobre la organización del CSS, especialmente si hay mejores prácticas que podría seguir para hacer que el código sea más limpio y fácil de mantener. Además, agradecería consejos sobre cómo implementar animaciones CSS simples que podrían hacer que el diseño sea más interactivo, sin afectar negativamente el rendimiento.

    QR Code Component - Responsive Design with Flexbox

    1
    Juan Díaz Peña•90
    @JDPWeb
    Posted 7 months ago

    Excelente compañero! Me parece una solucion limpia y elegante. Gran trabajo! El resultado final es muy proximo a la muestra.

    Como sugerencia, las unidades de medida en el CSS podrian ser unidades relativas, REMs o porcentajes, para mejorar aun mas el aspecto responsive. Como practica es mejor si se coloca el tamaño de la fuente de una vez en las propiedades del Body en el CSS es mejor colocarlo en 16px para hacer el calculo de REMs mas facil.

Frontend Mentor logo

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

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