99

Recursos para practicar CSS

43914Puntos

hace un mes

Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Aprende HTML y CSS desde cero, sin conocimientos previos. Conoce todo sobre etiquetas HTML, semántica, CSS, como dar estilos a los elementos de tu sitio web, medidas EM/REM, modelo de caja y mucho más. Aprenderás todo lo que necesitas para empezar a construir sitios para internet de manera eficiente.

¿Alguna vez dijiste “el diseño no es para mi”, “no tengo habilidad para el estilo” o “nunca necesitaré saber CSS”?

La negación como raíz de los males

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.

Lugares para practicar CSS

Flexbox Froggy


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

CSS Grid Garden


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.

CSS Diner


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.

Flexbox Defense


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.

CSS Battle


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.

Flexplorer


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.

CSS Grid Playground


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.

Unfolding the Box Model


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.

Ok, quiero comenzar ya mismo

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.

Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Aprende HTML y CSS desde cero, sin conocimientos previos. Conoce todo sobre etiquetas HTML, semántica, CSS, como dar estilos a los elementos de tu sitio web, medidas EM/REM, modelo de caja y mucho más. Aprenderás todo lo que necesitas para empezar a construir sitios para internet de manera eficiente.
Héctor Daniel
Héctor Daniel
@Terranigma

43914Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
5
5012Puntos

@Terranigma Puedes agregar tambien los siguientes recursos:

1.- Flexbox Zombies. (Gratuito)
2.- Grid Critters (Pago)

Bastante genial el de los zombies. Para el otro no llego 🤑🤑

2
43914Puntos
un mes

En estos momentos Flexbox Zombies ya es de pago, así que procuré compartir recursos gratuitos 😅

4
5012Puntos
un mes

Estimado @Terranigma al menos por el momento permanece libre por si desean echarle un vistazo… Saludos 👍🏻👍🏻 . Excelentes tus recursos. Me acabo de terminar el de Flexbox Defense 😄😄

flex.jpg
3
43914Puntos
un mes

Ah caray, de seguro algo cambió 👀
¡Gracias por el aviso!

3
1505Puntos

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.

1
10501Puntos
un mes

Estoy de acuerdo. Tengo que guardar los posts interesantes en un archivo de bloc de notas porque luego no los encuentro.

2

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

2
1769Puntos

Excelentes herramientas para reforzar el conocimiento.
Muchas gracias por el aporte.

2
10501Puntos

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.

2
2070Puntos

Super este contenido, con Flexbox Froggy aprendí mucho, veré las demás herramientas

2
10592Puntos

Aprendi mucho gracias a esto, gracias.

2
1188Puntos

Buenísimo aporte, estoy deseando ponerlo en práctica!

2
2903Puntos

Pero que genial articulo, justo estaba desmotivado con CSS y leer esto me sirvió de mucho y también conocer mejor el panorama gracias.

1
10795Puntos
un mes

Animo! Estas siguiendo algun curso?

2
10795Puntos

Gracias por los recursos como siempre!
Muy buenos para fortalecer lo visto en clase 😄

2
10138Puntos

Gracias por el aporte 😃

2
5621Puntos

¡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.

2
7062Puntos

Alguien sabe si el Curso de Responsive Design: Maquetación Mobile First del profe Diego, ya se encuentra disponible?

1
5012Puntos
un mes

Aún sigue diciendo : Próximamente. También estoy esperando ese curso

1
5222Puntos
un mes

yo aun estoy esperando cada dia entro porque se ve muy interesante

1
43914Puntos
un mes

Pronto su fecha en la agenda 😄

1
3031Puntos
17 días

El 22 de octubre se habilita, yo también estoy a la espera