En fundamentos de javascript y lógica de programación.
Cualquier otra sugerencia es bienvenida. Gracias
I made my site full responsive by using media root
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?What should i do to make my code look more professional?
Hola @Wasu44:
Muy buena solución la que has mostrado, me da la sensación que primero has empezado por el diseño de escritorio y luego has continuado por el de móvil. No es que esté mal, pero creo que si lo haces al revés escribes algo menos de código (pero esto es discutible).
Si me lo permites, tengo una sugerencia con respecto a las imágenes (yo hice la misma solución que tú, pero me dijeron que era mejor con picture)
<picture> <source media=" (max-width: 33.75rem)" srcset=" ruta de la imagen móvil"> <img scr=" ruta de la imagen escritorio"> </picture>
proud of matching the given design. improving code.
Hola que tal, Sirex.
Has presentado una solución increíble, enhorabuena. Pero si me lo permites, me gustaría darte alguna sugerencia para que sea aún más increíble.
Limitaría el uso de la etiqueta b, ya que según la W3C, es mejor utilizar una etiqueta que sea semántica (tipo strong), o si solo le quieres dar el color de negrita, utilizar Css (bold).
Parece ser, que se te olvidó dejar un espacio entre la imagen y el botón de aprende más.
.card-content { margin: 1rem 0; }
No te preocupes, a mí me ocurre lo mismo. Espero que estas dos pinceladas te ayuden.
Un saludo y que pases buen día.
Complete it in an hour.
What challenges did you encounter, and how did you overcome them?Mostly when it comes to responsive but getting used to it.
What specific areas of your project would you like help with?I would like a feedback on the code if there is a better way for me to use it.
** Hola, Rustom0.
<div class="image-container"> <img/> </div>
.image-container { width: 90%; } img { max-width: 100%; }
I'm most proud of how quickly I completed the exercise using my basic knowledge of HTML and CSS. Next time, I would focus more on refining the design and experimenting with new techniques to enhance the overall quality.
What challenges did you encounter, and how did you overcome them?The exercise was quite straightforward, but my biggest challenge was working with media queries. I overcame it by reviewing documentation and experimenting with different breakpoints to ensure the layout was responsive across devices.
What specific areas of your project would you like help with?My main concern is whether I'm following best practices, even though the exercise was quite simple. I want to avoid replicating any mistakes when I work on larger projects, so any feedback on code structure or optimization would be really appreciated.
Hola ,que tal Justina.
.image img { max-width: 100%; /* Con width la imagen se escala infinitamente aunque pierda calidad, pero con max-width la imagen no se escala más allá del ancho máximo intrínseco de la imagen */ }
- Cuando yo empecé, también trabajaba con px (unidad absoluta). Pero luego me di cuenta que utilizando rem, em, % (unidades relativas), la escalabilidad y el diseño responsivo era más flexible.
- Lo dicho **trabajo fenomenal** y sigue así que vas muy bien.
I was able to do it faster than my first challenge.
What challenges did you encounter, and how did you overcome them?I dont have access of the figma files so i dont know the exact dimensions/measurements of the design
What specific areas of your project would you like help with?weirdly enough
display:grid ; place-items: center;
does not center the container vertically but it does so horizontally. I had to do height:85vh; to the body to center it completely.
Hola GorrionNado, tu solución es correcta, pero hay cosas que se podrían mejorar.
.qr-container { padding: 1rem;
De esta forma no se verá tan apretado el contenido.
A veces es mejor utilizar en vez de px:
Por último una correcta indentación de los elementos HTML es clave para que tú código sea legible por todos.
Espero que estos consejos te sean útiles para futuras soluciones.
Buen trabajo y a continuar aprendiendo (como todos).
The Time I spend building the main Layout is Decraesing every time I finish a Project, I'm really proud that I'm Actually learning Something and Leveling up My Skills.
What challenges did you encounter, and how did you overcome them?Nothing Was that hard as i actually practice some of my previous challenges regularly
What specific areas of your project would you like help with?Nothing as of now
Hola Mohamed, tu solución de las cuatro tarjetas es muy buena, sobre todo por que la has construido con una tremenda precisión ( casi de cirujano ). Lo que más me ha llamado la atención es que te has decantado por utilizar flex, que para este diseño no era nada fácil de hacer.
También he tomado nota de todas las consultas de medios que tienes. A partir de ahora las tendré en cuenta para futuras soluciones mías.
Felicidades y a seguir aprendiendo, que el saber no ocupa lugar ( pero si memoria en nuestro cerebro).
