En esta clase, comenzaremos a trabajar con código, utilizando HTML y CSS para construir nuestra landing page. Si bien en la clase anterior exploramos con la IA la estructura y el stack tecnológico, ahora nos enfocaremos en la implementación práctica.

Creación de Archivos y Estructura Inicial

Utilizaremos la IA para generar el código base. La IA nos proporcionará una estructura inicial en HTML y CSS, permitiéndonos personalizarla según nuestras necesidades. Veremos cómo la IA nos asiste en la creación de los archivos index.html y style.css de forma automática, sin la necesidad de crear manualmente las carpetas o archivos.

Integración y Optimización con Tailwind CSS

Posteriormente, daremos un paso más y migraremos de nuestros estilos personalizados a Tailwind CSS para optimizar el desarrollo. La IA nos ayudará a:

• Reemplazar el CSS personalizado por la CDN de Tailwind CSS.
• Eliminar el archivo style.css redundante.
• Instalar las dependencias necesarias de Tailwind CSS de forma local.
• Configurar Tailwind CSS para un entorno de producción, garantizando un tamaño de archivo reducido y un mejor rendimiento.

Optimización y Componentización

Finalmente, la IA nos guiará en la optimización de nuestra landing page, incluyendo:

• La implementación de un menú de navegación responsive.
• La adición de lazy loading para las imágenes.
• La extracción de componentes reutilizables como tarjetas y títulos de sección para un código más limpio y mantenible.
• Mejoras de accesibilidad y la incorporación de atributos ARIA.

A lo largo de este proceso, la IA no solo generará el código, sino que también nos explicará el "porqué" de cada cambio, proporcionando una comprensión más profunda de las mejores prácticas de desarrollo.