Aprende selectores CSS jugando

  • Por
Selecciona elementos con selectores CSS y pasa niveles de dificultad, para aprender de una manera divertida, a modo de juego.
16/04/2014 -

CSS Diner es un juego sencillo con el que podemos aprender a usar correctamente los selectores de CSS. Se trata de una serie de niveles de dificultad creciente en los que van apareciendo elementos encima de una mesa y sobre los que tienes que seleccionar un conjunto de ellos.

Comienza con una mesa y dos platos. Tienes que seleccionar los dos platos. Luego hay dos manteles y un plato y tienes que seleccionar los manteles. En los sucesivos niveles se van integrando elementos encima de la mesa, manzanas, naranjas, platos diferentes, etc. y tenemos que ir seleccionando cosas que nos piden, donde cada vez se hace más difícil y requiere más conocimientos para poder pasar las pruebas.

Para los impacientes, podéis visitar http://flukeout.github.io/

El juego en sí es bastante sencillo de entender y te ayuda a practicar con selectores de clase, identificador, atravesar la jerarquía de etiquetas usando varios selectores a la vez para llegar a elementos determinados, etc. Lo bueno es que la dificultad es siempre creciente, con lo que poco a poco se van agregando nuevos tipos de selectores y nos permite no desesperarnos al principio si no sabemos demasiado.

Solo hay un detalle que se puede mejorar y que he visto al intentar resolver algunos niveles. A veces, si varios selectores pueden servir para seleccionar los elementos del objetivo, tienes que intentar indicar el selector más simple posible para resolver el problema. Lo que ocurre es que de momento el juego no te advierte ese detalle y puede parecer que estás indicando la respuesta correcta, pero con un selector más complejo y por ello no se resuelve el nivel.

Si queréis pasar varios niveles sin tener que resolverlos todos, para los más "pro", se puede indicar un número de niveles que deseas saltar. La cosa se pone más interesante a partir del nivel 12 que comienzan algunos pseudoselectores que no se usan tanto en el día a día.

Es un proyecto de Open Source, que se encuentra en desarrollo y en el que cualquiera puede aportar, codificando nuevos niveles o funcionalidades en Github. El repositorio del código fuente del juego lo encuentras en: https://github.com/flukeout/restaurant

Ahora solo queda demostrar nuestra habildad y aprender algún selector nuevo, jugando!