Aprender CSS: Curso Code — Práctica de programación en CSS con un editor de HTML y CSS en tiempo real en tu teléfono

Tres aspectos causan la mayoría de los problemas de layout de los principiantes. El modelo de caja: el padding y los bordes se suman por defecto al ancho declarado de un elemento, por lo que una caja acaba siendo más ancha que el número que escribiste. La especificidad: una regla más específica en otra parte está sobrescribiendo la tuya sin que te des cuenta. Y la herramienta de layout equivocada: intentar construir una página bidimensional con Flexbox, que está pensado para una sola fila. Aprender CSS: Curso Code organiza sus cursos para que entiendas estos tres aspectos en ese orden, en lugar de descubrirlos a base de ensayo y error.

Solo un poco, y puedes aprenderlo junto con las lecciones en lugar de terminarlo primero. CSS describe cómo se presentan los elementos de HTML, así que saber que una página está formada por elementos —encabezados, párrafos, listas e imágenes— es una base suficiente para empezar. El editor en vivo de la app muestra el HTML y el CSS juntos, de modo que la conexión entre ambos se ve desde la primera lección.

Flexbox organiza los elementos en una sola línea —una fila de botones o una barra de navegación— y distribuye el espacio sobrante a lo largo de ese único eje. Grid define filas y columnas al mismo tiempo, de modo que colocas los elementos en una cuadrícula bidimensional real en lugar de desplazarlos con márgenes. Normalmente, el layout de una página se hace con Grid; una sola fila de controles dentro de él suele hacerse con Flexbox. El curso enseña ambos antes de dejarte decidir.

CSS resuelve las reglas en conflicto teniendo en cuenta primero la especificidad y después el orden de aparición en el código. Un selector de ID gana a un selector de clase, y una clase gana a un selector de elemento simple, independientemente de cuál aparezca más abajo en la hoja de estilos. Por eso una regla que parece correcta puede perder frente a otra que olvidaste en otra parte; el curso Especificidad y cascada de la app existe precisamente para que ese orden sea predecible y no misterioso.

Sí, sigue valiendo la pena aprenderlo directamente. Los frameworks de utilidades como Tailwind son una capa basada en conceptos de CSS, no un sustituto; cuando una clase de utilidad no hace lo que esperas, entender el modelo de caja, la especificidad y los sistemas de layout subyacentes es lo que te permite desbloquearte. Además, es una de las habilidades con las que más rápido se ven resultados, ya que cada cambio aparece inmediatamente en la página.

La constancia importa más que el número total de horas. Si haces lecciones cortas a diario, la mayoría de los principiantes puede trabajar con confianza con selectores, espaciado, tipografía y layouts básicos con Flexbox o Grid en unas pocas semanas, mucho antes de llegar a los aspectos más complejos, como los casos límite de especificidad o las container queries. Los 20 proyectos guiados de la app están pensados específicamente para practicar esa etapa, una página real cada vez.

La app se puede descargar gratis en el App Store y Google Play. El primer curso, el primer proyecto guiado, dos misiones de búsqueda de errores y el editor en vivo son gratis, con una cuota diaria de AI Mentor. Pro desbloquea todos los cursos, los 20 proyectos y las 20 misiones, el examen para obtener el certificado y el uso ilimitado de AI Mentor, además de eliminar los anuncios.

Aprender CSS: Curso Code está disponible para iPhone y iPad en el App Store y para Android en Google Play, con la interfaz en 22 idiomas y una clasificación de edad de 4+. Está dirigido a principiantes absolutos, diseñadores que quieren aplicar estilos a sus propias páginas y personas que están cambiando de carrera o estudiando para prepararse para entrevistas de front-end.

La vista previa instantánea necesita específicamente una conexión para renderizar tu HTML y CSS, tal como indica la app, en lugar de degradarse silenciosamente. El texto de las lecciones y el material de lectura están preparados para seguir funcionando con una conexión inestable, lo que cubre la mayoría de los desplazamientos, pero esta app no ofrece sesiones de vista previa en vivo completamente sin conexión.

Aprender CSS: Curso Code funciona en iOS a través del App Store y en Android a través de Google Play, y la app está disponible en 22 idiomas. Tiene una clasificación de edad de 4+. Si apruebas el examen final, la app emite un certificado de finalización como prueba del trabajo que has hecho, útil en un CV junto con los proyectos guiados que puedes explicar, pero no equivale a una titulación acreditada.