¿Cómo aprender con AI?

¿Por qué este fundamental está aquí?

Porque hoy no se aprende igual que hace 10 años. Ni siquiera igual que hace 2. La Inteligencia Artificial se ha convertido en una herramienta transversal en todas las industrias, y aprender desarrollo web sin utilizarla es desaprovechar un recurso muy importante.

La IA no reemplaza tu esfuerzo, pero puede multiplicar tu rendimiento si sabes cómo usarla.

Este fundamental no es del todo técnico. No vamos a ver cómo usarla para generar código ni para depurar bugs. Eso vendrá más adelante. Aquí vas a aprender cómo puedes usarla para aprender mejor, más rápido y con más claridad.

Cada día aparecen nuevas herramientas AI. No te asustes. No tienes que estar al tanto de todas. Los conceptos que aprenderás aquí son “evergreen” y te servirán para interactuar con AI durante mucho tiempo.

¿Qué es AI?

La inteligencia artificial no es magia, ni tampoco una sola tecnología. Es un conjunto de técnicas matemáticas y computacionales diseñadas para que las máquinas puedan *reconocer patrones, aprender de datos y tomar decisiones o generar contenido con base en ello*. La rama que más impacto está teniendo en nuestro trabajo como desarrolladores es la llamada IA generativa, que es capaz de crear texto, imágenes o incluso código, como respuesta a una instrucción humana.

Pero más allá de su definición técnica, lo que debes entender como desarrollador en ciernes es esto: la IA no viene a sustituirte, sino a multiplicar tu capacidad si sabes integrarla bien. No necesitas entender redes neuronales profundas para beneficiarte de ella. Lo que necesitas es saber cómo interactuar con estas herramientas, cómo pedirles lo que necesitas y cómo evaluar críticamente sus respuestas. Como cualquier otra herramienta, puede potenciarte o hacerte perder el tiempo. Y en FrontendLeap vas a aprender a usarla bien.

Qué aprenderás aquí

• Qué es un prompt, por qué importa, y cómo diseñarlo.
• Cómo apoyarte en IA para entender conceptos, resolver errores y aprender más rápido.
• Cómo usar Copilot y ChatGPT en tareas comunes sin depender ciegamente de ellos.
• Cómo mantener tu pensamiento crítico mientras usas asistentes.
• Cómo evitar los errores más comunes al trabajar con IA.

Setup

• GitHub Copilot (cuenta gratuita).
  • Instala las extensiones de Visual Studio Code.
  • Cmd + I / Cmd + Alt + I sirven para interactuar con él.
    • También haciendo click en el icono en la barra superior de búsqueda.
• OpenAI ChatGPT (cuenta gratuita).

¿Qué es un prompt?

Un prompt es simplemente lo que le pides a una inteligencia artificial. Es tu input. La pregunta o instrucción que introduces en una herramienta como ChatGPT, Copilot, Claude o Perplexity para obtener una respuesta útil.

Aprender a escribir buenos prompts es una habilidad. No necesitas escribir como un poeta, pero sí necesitas ser claro, preciso y saber qué esperas recibir.

Un buen prompt te devuelve claridad. Un mal prompt, ruido.

Ejemplos de prompts para empezar:

1. "Explícame qué es HTML como si no supiera nada de desarrollo web."
2. "¿Para qué sirve CSS y cómo se diferencia de HTML?"
3. "Hazme una tabla comparando HTML, CSS y JavaScript."
4. "Dame una lista de 5 conceptos básicos que debería aprender primero si quiero convertirme en Frontend Developer."
5. "Imagina que eres mi profesor de desarrollo web. Quiero que me expliques los errores más comunes que cometen los principiantes."
6. "Estoy empezando desde cero. ¿Qué proyectos pequeños puedo hacer para practicar HTML y CSS?"

Situaciones cotidianas

Estás viendo el fundamental de "Box Model" y no entiendes por qué inline-block se comporta como se comporta.

• Prompt:

  ¿Puedes explicarme con una metáfora visual y un ejemplo por qué inline-block ocupa espacio pero no genera salto de línea como block?

Estás atascado en un ejercicio de Flexbox.

• Prompt:

  Estoy intentando alinear dos elementos uno a la izquierda y otro a la derecha usando Flexbox. ¿Cuál sería la forma más sencilla y por qué?

Quieres repasar lo aprendido.

• Prompt:

  Hazme una serie de 5 preguntas tipo test para repasar lo que acabo de aprender sobre la cascada en CSS. Añade retroalimentación a cada respuesta.

Quieres crear tu plan de estudio.

• Prompt:

  Estoy aprendiendo desarrollo web desde cero. ¿Puedes proponerme un plan de estudio de 8 semanas que combine teoría, práctica y repaso?

Ejemplo de workflow básico con IA

1. Usar Copilot en VSCode:
   • Escribe un comentario como // Add a button that says "Click Me" y observa cómo Copilot sugiere el código automáticamente.
   • O utiliza Copilot para completar funciones sencillas cuando estés atascado.
2. Usar ChatGPT:
   • Pregunta: “¿Qué significa que una etiqueta HTML sea semántica?”
   • Pide ejemplos: “Dame 3 ejemplos de etiquetas semánticas y para qué se usan.”
3. Corregir errores con IA:
   • Copia un trozo de código con error y escribe: “Este código me da un error, ¿puedes ayudarme a entender qué está mal y cómo corregirlo?”
4. Mejorar tu aprendizaje:
   • Pregunta: “Explícame el modelo de caja de CSS con una analogía visual.”

Consejos

• Ten claro lo que quieres conseguir (el resultado) antes de iniciar una conversación con la AI.
• Hasta nuevo aviso, desactiva Copilot (o cualquier otro apoyo AI “in editor”). Actívalo solo cuando sea estrictamente necesario.
• Y por encima de todo recuerda siempre que eres tú quien tiene el mando, la AI debe asistirte y habilitarte, no reemplazarte.

Qué se espera de ti

No necesitas dominar la IA. No necesitas pagar por ella. Solo necesitas entender que está aquí para quedarse y que si la ignoras, estás perdiendo una ventaja real.

Este fundamental te prepara mentalmente y técnicamente para incorporarla en tu forma de aprender.

Más adelante, cuando entremos en fundamentos técnicos como JavaScript, testing, debugging, etc., veremos otros fundamentales dedicados exclusivamente a cómo utilizar la IA para:

• Depurar código
• Crear tests
• Documentar automáticamente
• Mejorar tu código
• Automatizar tareas repetitivas

Esto es solo el primer paso. Pero es un paso esencial. Porque aprender a aprender con IA es la nueva alfabetización técnica.

Siguiente paso: cuando empieces a construir cosas, recuerda que siempre puedes volver aquí y replantear tus prompts. Tu forma de hablarle a la IA evolucionará con tu conocimiento. Igual que tu código.