Code review Mobile First con AI

Clase 17 de 17 • Curso de Responsive Design: Maquetación Mobile First

Juan Riaño

student•

Me encantaría un curso como el que menciona la profe al final del video, excelente curso he aprendido bastante, Muchas Gracias!

Sergio Steven Aguilar Arboleda

student•

Hola, por aca dejo el PROMPT para quien lo necesite:

Actúa como un revisor senior de Frontend especializado en Mobile First. Evalúa la app en desarrollo enfocándote exclusivamente en buenas prácticas Mobile First. Analiza el código disponible (HTML, CSS, JS/TS, framework si aplica) y devuelve un reporte claro y accionable.

Alcance de la evaluación

Evalúa primero mobile (≤ 480-600px) y luego cómo escala a breakpoints mayores.

Criterios a evaluar

Estrategia Mobile First
- Uso de min-width en media queries.
- Base pensada para móvil, no "desktop adaptado".
- Progresión clara de layouts.
Layout y Unidades
- Uso correcto de %, rem, vw, vh, dvw, dvh.
- Evitar alturas fijas problemáticas en mobile.
- Uso adecuado de flex/grid y container queries (si aplica).
Contenido Prioritario
- Jerarquía visual clara above-the-fold.
- Evitar contenido secundario desplazando lo esencial.
- Scroll intencional.
Interacción y Usabilidad
- Targets táctiles ≥ 44px.
- Espaciados adecuados (márgenes/paddings).
- Inputs legibles (≥ 16px para evitar zoom).
- Estados :focus, :active, :hover bien manejados.
Performance Mobile
- Imágenes responsivas (img/picture, srcset, formatos modernos).
- loading="lazy" y fetchpriority cuando corresponda.
- Evitar JS innecesario en mobile.
- Peso y render-blocking.
Viewport y Navegadores Móviles
- Uso correcto de meta viewport.
- Manejo de barras del navegador (vh modernos).
- Comportamiento en iOS y Android.
Accesibilidad en Mobile
- Contraste.
- Navegación por teclado/lector.
- Labels en inputs.
- ARIA solo cuando aporta valor.
Testing
- Evidencia de pruebas en mobile real o emulado.
- Uso de DevTools mobile, throttling de red, orientación.

Formato de salida

Devuelve el resultado en Markdown, con estas secciones:

Resumen Ejecutivo (Mobile First Score: 0-100)
Fortalezas
Problemas Detectados (con severidad: Alta / Media / Baja)
Recomendaciones Concretas
- Qué cambiar
- Por qué
- Ejemplo de código si aplica
Checklist Mobile First (✓ / ✘)

Reglas

Sé específico y técnico.
No expliques teoría básica.
Prioriza impacto real en mobile.
No hagas suposiciones no justificadas por el código.

Saludos.

Code review Mobile First con AI

Juan Riaño

student•

Me encantaría un curso como el que menciona la profe al final del video, excelente curso he aprendido bastante, Muchas Gracias!

Sergio Steven Aguilar Arboleda

student•

Hola, por aca dejo el PROMPT para quien lo necesite:

Alcance de la evaluación

Evalúa primero mobile (≤ 480-600px) y luego cómo escala a breakpoints mayores.

Criterios a evaluar

Estrategia Mobile First
- Uso de min-width en media queries.
- Base pensada para móvil, no "desktop adaptado".
- Progresión clara de layouts.
Layout y Unidades
- Uso correcto de %, rem, vw, vh, dvw, dvh.
- Evitar alturas fijas problemáticas en mobile.
- Uso adecuado de flex/grid y container queries (si aplica).
Contenido Prioritario
- Jerarquía visual clara above-the-fold.
- Evitar contenido secundario desplazando lo esencial.
- Scroll intencional.
Interacción y Usabilidad
- Targets táctiles ≥ 44px.
- Espaciados adecuados (márgenes/paddings).
- Inputs legibles (≥ 16px para evitar zoom).
- Estados :focus, :active, :hover bien manejados.
Performance Mobile
- Imágenes responsivas (img/picture, srcset, formatos modernos).
- loading="lazy" y fetchpriority cuando corresponda.
- Evitar JS innecesario en mobile.
- Peso y render-blocking.
Viewport y Navegadores Móviles
- Uso correcto de meta viewport.
- Manejo de barras del navegador (vh modernos).
- Comportamiento en iOS y Android.
Accesibilidad en Mobile
- Contraste.
- Navegación por teclado/lector.
- Labels en inputs.
- ARIA solo cuando aporta valor.
Testing
- Evidencia de pruebas en mobile real o emulado.
- Uso de DevTools mobile, throttling de red, orientación.

Formato de salida

Devuelve el resultado en Markdown, con estas secciones:

Resumen Ejecutivo (Mobile First Score: 0-100)
Fortalezas
Problemas Detectados (con severidad: Alta / Media / Baja)
Recomendaciones Concretas
- Qué cambiar
- Por qué
- Ejemplo de código si aplica
Checklist Mobile First (✓ / ✘)

Reglas

Sé específico y técnico.
No expliques teoría básica.
Prioriza impacto real en mobile.
No hagas suposiciones no justificadas por el código.

Saludos.

Code review Mobile First con AI

Fundamentos de Mobile First

¿Por qué tu web debe ser Mobile First?

¿Qué es Mobile First y cómo empezar?

Prepara tu proyecto Mobile First

Estructura Mobile First

Construye un header responsive con HTML semántico

Flexbox y Clamp para crear un Hero responsive

Build mobile-first skill cards with CSS

Cómo CSS Grid Areas reorganiza tu contenido

Patrones responsive con CSS Grid y auto-fit

Optimización de Performance y Accesibilidad

Cambia el layout con Flexbox según la pantalla

Optimiza imágenes con picture y srcset

Fallbacks de Cloudinary en picture elements

Prueba tu web en el teléfono con Live Server

Debug en iOS Safari

inputmode y autocomplete en HTML

Pruebas de rendimiento Mobile First con Lighthouse

Container Queries vs Media Queries en CSS

Code review Mobile First con AI