¿Alguna vez dijiste “el diseño no es para mi”, “no tengo habilidad para el estilo” o “nunca necesitaré saber CSS”?
Si respondiste “sí” a alguna de estas afirmaciones puedo entenderte, prefiero trabajar en el backend y tocar lo menos posible la parte del frontend porque no es lo tuyo. También es probable que hayas intentado echarle el guante en tus inicios al aprender a programar para la web y en algún punto te sentiste como Peter Griffin en este gif.
El motivo de por qué sucede esto es porque nos negamos a entender como funciona CSS y así como aceptaste entender la herencia prototipal de JavaScript o la concurrencia de Golang. Después comienza la frustración y en el peor de los casos tiramos la toalla cuando tenemos un mundo de posibilidades por que arreglas una cosa y se rompen diez.
Recordemos que CSS al final del día es un lenguaje y como tal obedece a los lineamientos del pensamiento computacional: realizará las instrucciones de forma procedimental con la misma precisión que un humano podría seguirlas, en tanto sean claras.
Lo único que debes hacer es entender su lógica, reglas y practicar así como has hecho con otros lenguajes o tecnologías. Así que te comparto algunos sitios donde puedes practicar tus habilidades.
Existe desde 2015, así que es probable que ya lo conocieras y la premisa es simple: tienes ranas que debes ordenarlas en sus lirios correspondientes utilizando display: flexy Flexbox.
Cuentas con 24 retos diferentes donde la dificultad irá incrementando al mismo tiempo que entiendes mejor esta parte de CSS, con más de 20 idiomas distintos incluyendo español
De mano del mismo autor que Flexbox Froggy, en este juego te encargarás de utilizar CSS Grid Layout para distribuir correctamente zanahorias, colocarles agua y eliminar hierba mala.
Tienes 28 niveles a tu disposición que te ayudarán a tener una mejor alineación de tus contenidos en CSS.
Otro divertido juego en el que debes seleccionar alimentos y platos utilizando la herencia de CSS para dominar la especificidad de tus estilos. Suena más complejo de lo que es, siendo que entender esto se vuelve bastante útil para que tus estilos se apliquen únicamente a los elementos que asignes y de la forma que indiques.
Acá son 32 retos que de igual forma la dificultad progresará conforme vayas avanzando hasta tener muy claro como funciona la herencia en CSS.
Inspirado en los anteriores juegos de Flexbox te presento este tower defense donde te encargarás de colocar estratégicamente algunas torretas para evitar que las oleadas enemigas lleguen del punto A al punto B.
Es una gran oportunidad de repasar Flexbos a través de los 12 niveles que nos ofrece, aunque llegado a este punto quizá busques algo más profundo y recomiendo abroches tus cinturones para lo que viene.
La cosa se vuelve más seria pues en este sitio no solo se trata de cumplir retos sino que también compites contra otras personas. Aún así no dejes que esto te distraiga del objetivo principal: replicar una imagen con el menor código posible.
Hay muchos retos para participar donde puedes incluso aparecer en la tabla de clasificación si te lo propones. Esto puede ser el principio de lograr dibujos con CSS, lo cual se verá reflejado con un mayor dominio de las hojas de estilo para la web.
Esta herramienta es bastante didáctica donde podrás simular la distribución de elementos con Flexbox. Tienes la posibilidad de modificar parámetros, ver el código generado y un resultado visual inmediato.
Mi recomendación es que jamás debas depender del código generado por otras aplicaciones, al mismo tiempo que debes experimentar todo lo necesario para entender lo que aparece en pantalla.
Al igual que Flexplorer acá podemos poner previsualizar la distribución y forma de elementos utilizando CSS Grid. Bastante práctico para practicar estilos y saber cuales serán los resultados.
La primera vez que visité este sitio me voló la mente pues está enfocado 100% a las transformaciones 3D de CSS y mostrar un poco de los resultados sorprendentes que se puede lograr cuando llegas a un nivel bastante avanzado.
El sitio por sí no te lleva a poner en práctica o aprender algo nuevo, es más bien un demo del cual podemos estudiar su repositorio para después replicar los efectos e implementarlos en nuestros proyectos.
Es momento de que le des una nueva oportunidad a CSS para reconciliarte, recuerda que eres una persona distinta a la de hace años, meses o semanas y ahora nunca quieres parar de aprender.
Para eso tenemos un curso en el que puedes aprender HTML y CSS desde cero. Una vez lo apruebes continuar tu aprendizaje en el Curso de Responsive Design: Maquetación Mobile First para crear un producto 100% real donde pondrás en práctica bastantes estilos de CSS.
Platzi debería tener una galería para poder guardar los blogs más interesantes y poderlos leer en un futuro.
Ahora estoy puliendo habilidades de diseño pero en un futuro me gustaría aprender de programación.
Estoy de acuerdo. Tengo que guardar los posts interesantes en un archivo de bloc de notas porque luego no los encuentro.
Mis trabajo es en su mayoría maquetación, sin embargo creo que será imposible conocer css al 100% cada día siento que lo conozco menos 😅
Están geniales para aprender aún más. Conocen plataformas similares enfocadas en lógica de programación y JS, eso me ayudaría mucho
¡Me parecen geniales todos los sitios en los que se pueden aprender jugando y experimentando! Voy a practicar desde ya. Gracias @Terranigma por el excelente aporte.
Ahorita estoy practicando con un proyecto de hacer una página web para un conocido, y precisamente algunos de esos sitios me sirvieron para poder aprender el uso de las hojas de estilo.
Buenísimo aporte, estoy deseando ponerlo en práctica!
Pero que genial articulo, justo estaba desmotivado con CSS y leer esto me sirvió de mucho y también conocer mejor el panorama gracias.
Animo! Estas siguiendo algun curso?
Gracias por los recursos como siempre!
Muy buenos para fortalecer lo visto en clase 😄
Excelente aporte compañero! 😄
Alguien sabe si el Curso de Responsive Design: Maquetación Mobile First del profe Diego, ya se encuentra disponible?
Aún sigue diciendo : Próximamente. También estoy esperando ese curso
yo aun estoy esperando cada dia entro porque se ve muy interesante
Pronto su fecha en la agenda 😄
El 22 de octubre se habilita, yo también estoy a la espera
Gracias por el aporte 😃
Excelente Post!
Aprendi mucho gracias a esto, gracias.
Super este contenido, con Flexbox Froggy aprendí mucho, veré las demás herramientas
Excelentes herramientas para reforzar el conocimiento.
Muchas gracias por el aporte.
Wow. ¿Y de JavaScript también tienes recomendaciones así?