Una de las cosas fundamentales y quisa una de las que solemos pasar por alto a la hora de aprender css, es el uso de los selectores, si eres nuevo en css muy posiblemente uses un id para cada elemento, lo que no está mal al principio, ya que en proyectos reales es imposible dar un id a cada elemento además de que es de muy muy mala práctica hacer algo así o parecido.

Pero bueno seguramente estás pensando en que tú no eres un idiota y sabes que en lugar de poner un id a cada elemento, utilizas clases, lo que es una buena practica y es lo recomendado. Sin embargo, que pasa si quieres acceder a un elemento dentro de tu elemento, que a su vez está dentro de otro elemento, puedes darle un id o una clase, pero podrías ahorrarte eso, si supieras hacer un buen empleo de los selectores, por eso hemos encontrado una manera, para que puedas aprender css jugando, se trata de css diner.

Css diner

página de inicio de css diner

La mecánica de juego es bastante sencilla, en la mesa aparecerán distintos platos y alimentos, que tienes que seleccionar en el editor de texto que se tiene abajo a la izquierda, ¿cómo se seleccionan? Se te brindará un código html en donde puedes analizar la estructura de como está maquetado el nivel.

editor de texto de css diner

Puede que al principio todo lo veas muy fácil, pero como en cualquier juego las cosas se van complicando conforme vas avanzando. A lo largo de los 32 niveles aprenderás el uso de los selectores de clase, id, tipo, atributo y las psudoclases, es decir seleccionar elementos hijos, estamos seguros de que este juego te ayudará al momento de darle vida a tus maquetaciones.