Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice generator app

Eduardo 200

@EDDuardOo-Code

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I like to know , if there is a way to manipulate or make an image float and make that responsive (that is the most difficult thing for me )?

also would you recommend use Bem to write better css?

I use the body to manage the responsive card this time it was fun

Community feedback

David 8,000

@DavidMorgade

Posted

Buenas Eduardo, enorabuena por finalizar el challenge, buen trabajo!

Si quieres hacer una imagen responsive en algún lugar de tu layout lo más normal es que la ajustes o con flex o con grid y le pongas un max-width a su contenedor para que no se salga de tu layout, ademas tienes distintas propiedades con object-fit para adaptar tu imagen a la pantalla.

Te recomiendo que aprendas BEM, actualmente puede que con los frameworks de javascript no se use tanto, pero para proyectos con CSS si que lo recomiendo totalmente, si quieres aprender bien BEM, un compatriota tuyo de mexico tiene un buen curso (Juan de la torre), de CSS con SASS flex grid y demas que además explica como usar la metodología BEM (tampoco es muy dificil aprenderla)

Buen trabajo usando el body para centrar el contenido, en este tipo de retos suele ser la mejor opción.

Espero que mi feedback te sea de ayuda, si tienes cualquier duda no dudes en preguntar! un saludo

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord