Contenido del curso

Eventos Exclusivos

Semana Platzi

Sergi Code: CSS, IA y el frontend hoy

Resumen

Ser desarrollador frontend hoy implica mucho más que escribir código: requiere criterio, creatividad y la capacidad de posicionarte como solucionador de problemas frente a la inteligencia artificial. En una charla con Sergi Code, profesor del curso de CSS avanzado en Platzi, exploramos cómo navegar la industria tech desde la lógica, las habilidades blandas y las nuevas propiedades de CSS que están cambiando el juego.

Cómo destacar como frontend dev en la era de la IA

La pregunta que se repite en la comunidad es clara: si la IA maqueta, escribe y depura código, ¿qué nos hace diferentes? Sergi propone un enfoque concreto: construir un repositorio del que estés orgulloso y defenderlo como si fuera una tesis. El README debe funcionar como tu carta de presentación, explicando por qué hiciste el proyecto, qué habilidades demuestra y qué problema resuelve.

¿Qué hace destacar a un desarrollador frontend frente a la IA? Posicionarse como solucionador, no como codeador pasivo. Mostrar proyectos reales con un README sólido que defienda decisiones técnicas y demuestre criterio en el uso de herramientas.

El concepto de solucionador atraviesa toda la conversación [21:30]. No se trata de competir con la IA en velocidad, sino de aportar criterio: entender qué pide el negocio, qué riesgos de seguridad existen y cómo ajustar el resultado a la realidad del cliente.

Por qué necesitas criterio al usar inteligencia artificial

Herramientas como GitHub Copilot, Cursor, Claude o ChatGPT aceleran el trabajo, pero tienen lo que Sergi llama verborragia: sugieren importaciones incorrectas, duplican código o generan variables que no coinciden con la lógica del proyecto. Si copias y pegas sin entender, el cascarón se ve bien, pero por debajo el código puede tener problemas de seguridad o de funcionalidad.

La recomendación práctica para quien recién empieza es dejar la IA en pausa durante el primer año de estudio o, al menos, usarla para que te explique paso a paso. Así entrenas tus propias redes neuronales y construyes la intuición que te permitirá detectar cuándo una sugerencia automática no encaja [37:40].

Qué propiedades de CSS están subestimadas hoy

Antes de saltar a frameworks y grids sofisticados, hay tres propiedades que todo dev debería dominar: display, position y overflow. Son las primeras que se aprenden y las más ignoradas, pero entender cómo manipulan los bloques en la web evita horas de frustración alineando elementos.

Cómo funciona la pseudoclase :has en CSS

La novedad que más entusiasma a Sergi es la pseudoclase :has, que permite seleccionar al padre según una condición del hijo. Es un cambio profundo porque ahorra JavaScript: ya no necesitas leer con JS si un input está checked para aplicar estilos. CSS lo resuelve solo.

¿Qué es la pseudoclase :has en CSS? Es un selector que aplica estilos al elemento padre dependiendo del estado o presencia de un hijo. Permite ocultar elementos o cambiar diseños sin escribir JavaScript adicional.

Tailwind o Bootstrap: cuándo conviene cada framework

Los frameworks de CSS aceleran el trabajo y mantienen el estándar empresarial, pero te quitan flexibilidad. La diferencia principal:

  • Bootstrap ofrece un sistema de clases rápido para prototipar y construir interfaces tradicionales.
  • Tailwind propone una infraestructura más completa, con componentes que se copian y pegan dentro de un menú visual.
  • CSS base da máxima flexibilidad y resultados únicos, pero exige más tiempo y dominio técnico.

La elección depende del proyecto: si necesitas velocidad y consistencia visual, los frameworks funcionan; si buscas un diseño propio o una experiencia inmersiva, conviene volver a CSS puro.

Cómo prepararte para entrevistas técnicas con IA disponible

Muchas empresas piden hacer live coding sin abrir otras ventanas para evitar que copies código de la IA. Frente a esto, Sergi propone tres ideas que ordenan el panorama [54:20]:

  1. Aprende los fundamentos primero, antes de delegar en la IA.
  2. Consultar documentación oficial es legítimo y no debería estar penalizado.
  3. Tú también eliges la empresa. Si el proceso de entrevista no respeta tus valores, está bien rechazarla.

¿Está mal usar documentación en una entrevista técnica? No. Consultar la documentación es parte del trabajo diario de un desarrollador y demuestra criterio. Lo que importa es entender lo que estás buscando y aplicarlo correctamente.

Por dónde empezar si quieres ser frontend developer

La ruta recomendada para alguien que recién entra al mundo del desarrollo web es secuencial: HTML primero, hasta sentirte cómodo manipulándolo; luego CSS, empezando por el manejo de cajas y propiedades básicas; y finalmente JavaScript, con foco en la manipulación del DOM.

Esta progresión funciona porque el frontend tiene una ventaja gratificante sobre lenguajes como Java: ves el resultado en pantalla desde la primera línea. Esa retroalimentación inmediata sostiene la motivación durante los primeros meses, cuando la curva de aprendizaje es más exigente.

Qué pasa con el rendimiento web y el server side rendering

La performance es clave cuando manejas grandes volúmenes de datos. Conceptos como lazy loading (carga diferida) y server side rendering (renderizado desde el servidor) ya vienen integrados en frameworks como Next, React y Angular. La idea: que el servidor, con su potencia, prepare el HTML, y el cliente solo hidrate lo necesario para que la experiencia se sienta instantánea.

Cómo equilibrar creatividad y pragmatismo en proyectos reales

Ser obsesivo o muy creativo sin límites lleva al mismo problema: no entregas. El balance está en ser pragmático, exigirte con un ideal de perfección pero alcanzarlo en iteraciones. La creatividad sirve para moldear soluciones efectivas, no para perderte en detalles infinitos.

Lo mismo aplica al trabajo en equipo con diseñadores y QAs. Cada rol tiene un bagaje de decisiones detrás. Asumir que solo tu perspectiva técnica es válida sesga el producto y rompe la coordinación que hace que algo salga bien a producción.

¿Qué propiedad de CSS te ha cambiado la forma de programar? Cuéntalo en los comentarios.