Skip to content
Submitted over 1 year ago

Static Website

braasantos•40
@braasantos
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Still have some difficulties with the responsiveness of the website, spent hours but it was just not working maybe bc i used the position absolute and relative when displaying the text and image. Can someone tell what should i do in the next pratices that can help me.

Community feedback

  • valeOopa•280
    @valeOopaPosted over 1 year ago

    ¡Bienvenido a Frontendmentor! Mire tu código y vi que pusiste la clase "numeros" asi que te hablare en español jajaja. Aparte, otra cosa que vi es la forma que posicionas y divides las cosas, te dejaré algunos consejos a continuación:

    1. Aprende a utilizar mejor Flex: utiliza propiedades como flex-direction, align-items y justify-content. También, investiga conceptos como el cross-axis y main-axis.

    2. Evita posicionar elementos de forma tan excesiva con position: No quiero decir que posicionar algunos elementos con position y darles propiedades como top y right sea malo, pero si vas a posicionar TODOS los elementos asi, va a ser muy estático y tendrás que utilizar muchas media queries y adaptar muchas resoluciones. Para esto existe Flex, viene a solucionar este problema y nos ayuda a posicionar los elementos de forma mas flexible.

    3. Empieza a utilizar medidas como % y EM: Esto para que se vaya adaptando mejor las distintas resoluciones, también todo esto tiene su pequeña teoría y recomiendo que te lo aprendas.

    4. Divide mas tu pagina: Note de que pusiste la imagen en un mismo contenedor que el texto y botones, trata de ir dividiendo mas tu contenido y darle forma. Puedes, por ejemplo, abrir el diseño del ejercicio e ir dividiéndolo en paint con cuadrados, asi te vas dando una idea de como será la estructura y el estilo.

    Si hablas español, te recomiendo mucho este curso, es demasiado completo, muy bien explicado y tiene todo lo que necesitas en el menor tiempo: https://www.youtube.com/watch?v=OWKXEJN67FE

    Entiendo perfectamente que todo esta puede llegar a ser abrumador, pero se constante, puede aprender todo esto y más, dedicate un tema a la vez, practica hasta que te sepas bien las bases y veras como en un futuro todo esta te será sencillo.

    ¡Happy Coding!

    1
    braasantos•40
    @braasantosPosted over 1 year ago

    @valeOopa muchas gracias hermano por lo feedback, miraré las cosas que dijiste, yo hablo portugues jajja

    0

Please log in to post a comment

Log in with GitHub

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