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

News card

@Abdul-ganuine

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


All comments and advise are welcome

Community feedback

@JcCorrales94

Posted

En plano general está muy bien. Sugerencias a mejorar, no uses todo el rato etiquetas "div" y procura usar las correspondientes, por ejemplo, observé que no tienes ningún "header", más bien pusiste un "main" a la cabecera. Luego a lo que realmente sería el "main" lo llenaste de "div". Te falta mejorar un poco el nombrado de las etiquetas. También te recomiendo que empieces a practicar una metodología BEM para el nombrado de las etiquetas, eso te ayudará mucho luego en tu código CSS.

Por otra parte, tu CSS lo he visto bastante bien. Por ser un poco quisquilloso, te aconsejaría que no mezclar tanto %, px, vh, em, rem, etc. Sino te enfoques en 1 o 2tipos de medidas. En lo personal uso normalmente % y rem solamente y uno una regla global que te permite que 1 rem sea igual a 10px. La forma es la siguiente por si la quieres probar. html{font-size:62.5%;}. Coloca lo al principio del CSS con tus globales y ya cada vez que uses rem funcionará como te explique.

Respecto al Responsive, te ha faltado hacer el navegador Responsive. Eso se logra con una función básica de JavaScript que el mismo proyecto te trae.

Por lo demás, sigue así ^^ vas muy bien.

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