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

Static Website

@braasantos

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@valeOopa

Posted

¡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

Posted

@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
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