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

Interactive rating component

Sofia 40

@Escobar23

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Hola Sofia!

El maquetado del proyecto esta bien, hay uno que otro detalle para mejorar que te lo iré mencionado:

  1. Al main agregale padding, para que al estar en dispositivos moviles la tarjeta nunca toque los bordes, no se suele ver bien cuando parece que están apretados.
  2. Usa transiciones, cuando tienes un elemento que tiene un estado inicial y uno final como por ejemplo cambiar el color del boton al pasar el cursor por encima, lo más recomendable es ponerle al elemento el atributo transition, por ejemplo: transition: all 200ms (El primer valor es el atributo y el segundo la demora, en este caso decimos que todos los atributos que les afecta el hover demoren 200 ms.
  3. El botón SUBMIT modificale en font-weight ya que ese le da el grosor y en el diseño no es grueso más bien agregale el atributo letter-spacing, que sirve para agregar espaciado entre letras para que quede como el diseño.
  4. Te recomendaría tener en cuenta otras cosas y efectos por ejemplo al darle lick a un botón que quede de un color claro para saber que esta seleccionado. Masomenos ya he desarrollado este proyecto y podrías ver mi solución ya que parte de la idea que al darle click a un elemento puedes ir a su classList y ahí puedes agregar las clases que desees como "botonSelecionado" por ejemplo. Además de otra función que agregue para que cuando des click a otro botón se deseleccionen todos y se seleccione al cual le estas haciendo click. Te lo recomiendo porque hará que tu maquetado final quede más bonito.

En teoría eso es lo que te podría recomendar, quizás puedas comenzar usar el inglés para todo tu proyecto para que solo maneje un idioma como buena práctica.

Espero que mis comentarios te ayuden a mejorar, vas por buen camino felicitaciones :D!

Marked as helpful

1

Sofia 40

@Escobar23

Posted

@Sdann26 muchas gracias por las recomendaciones 🥰😁

1

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