Design comparison
Solution retrospective
Hello everyone, some tips to improve my code? Any feedbacks are appreciated
Community feedback
- @Enmanuel-Otero-MontanoPosted about 2 years ago
¡Hola Jesus!
Contento de ver a alguien de mi tierra por aquí.😊
Tú código es bastante bueno, organizado y fácil de leer.
Solo dejame decirte un par de cosas.
Me parece que no usaste la fuente que indica en el desafío y me da curiosidad si es que se te olvidó.
Por otro lado. Algo que yo hubiera hecho diferente sería cambiar el div con la clase content por una etiqueta section o article con la misma clase del div. Esto para escribir un HTML más semántico e ir haciendo el hábito de escribir código lo más semántico posible.
Por último, intenta no encadenar más de tres selectores en CSS para aplicar estilo. Te recomiendo aplicar estilos siempre con el selector de clase, de esta manera siempre tendrás la misma especificidad en tu CSS y solo tendras que preocuparte por la casacada. Esto último te va a ayudar mucho en proyectos más grandes donde haya mucho CSS. Te dejaré una muestra de tu código donde están encadenado tres selectores para ser más claro. Otra cosa negativa de encadenar selectores es que afecta el rendimiento de la carga de tu página, ya que el navegador tiene que estar leyendo uno por uno hasta que haya coincidencia para aplicar el estilo, mientras que si lo haces con selector de clase aplica el estilo apenas encuentre el elemento con la clase correspondiente.
.section p a { color: #fff; cursor: pointer; transition: all 0.2s; text-decoration: none; font-size: 1.1rem; font-weight: 600; }
Un gran saludos para ti Jesús. Cualquier duda no dudes en preguntar.
Mantente codificando.🦾🦾🦾
1@yeezusch23Posted about 2 years ago¡Hola Enmanuel!
Me olvidé agregar la fuente en el desafío. 😁
Muchas gracias por los consejos, los tendré en cuenta para los próximos proyectos :)
Saludos desde Cuba👋
1 - @AdrianoEscarabotePosted about 2 years ago
Hello, how are you?
You did a good job on this challenge, I really liked your layout, I have some tips on how to further improve the responsiveness of the project:
Prioritize the use of unit approximation measures, for example:
@media (max width: 400px) { body { padding: 0 20px; } the main { width: 100%; } .img-container { width: 100%; } .icon-view-container img{ width: 100%; } }
the rest is very good! Hope it helps...👍
1
Please log in to post a comment
Log in with GitHubJoin 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