Banco de Preguntas Conceptuales — Unidad 1
Las 20 preguntas del “Examen conceptual rápido” de la Unidad 1 (HTML5 semántico, Tailwind CSS, Lighthouse, Git y Render; Semanas 1-2). Cada una trae una respuesta modelo breve y las palabras clave mínimas que tu respuesta hablada debe incluir. No hace falta repetir la respuesta palabra por palabra, pero sí nombrar esos conceptos. Se complementan con los 20 retos de live coding, que usan tu Práctica 2.
HTML5 semántico + Tailwind CSS + Git/Render
¿Qué diferencia hay entre <section> y <div>, y por qué un lector de pantalla los trata distinto?
Respuesta modelo: <section> tiene significado semántico (agrupa contenido temático) y las tecnologías de asistencia lo anuncian como una región navegable; <div> es un contenedor genérico, sin significado.
<section> y “sin significado/genérico” con <div>.¿Qué significa que Tailwind sea “utility-first” en comparación con escribir un archivo .css tradicional?
Respuesta modelo: En vez de escribir reglas CSS en un archivo aparte, se combinan clases pequeñas de un solo propósito directamente en el HTML (ej. p-4 solo pone relleno; bg-emerald-600 solo el fondo).
¿Qué quiere decir “mobile-first” y por qué una clase sin prefijo aplica primero al celular?
Respuesta modelo: La clase sin prefijo (ej. grid-cols-1) es la base y vale desde el celular hacia arriba; los prefijos (sm:, md:, lg:) son min-width que agregan reglas recién desde ese ancho.
¿Qué diferencia hay entre required y type="email" como validación HTML5?
Respuesta modelo: required exige que el campo no quede vacío; type="email" exige además que el texto tenga formato de correo (algo@dominio). Ambas las valida el navegador, sin JavaScript.
required) de “formato válido” (type=email) como dos validaciones distintas.¿Qué revisa Lighthouse en la categoría Accessibility y por qué importa el contraste de color?
Respuesta modelo: Revisa reglas automatizables: alt en imágenes, contraste de color, label vinculado a su input, orden de encabezados. El contraste importa porque un texto poco contrastado es ilegible para personas con baja visión.
¿Cuántas veces puede aparecer <main> en una página y qué pasa con <header> y <footer>?
Respuesta modelo: <main> es único: una sola vez por página, con el contenido principal. <header>, <nav> y <footer> normalmente van una vez a nivel de página (aunque un <section> o <article> puede tener su propio header/footer); <section> y <article> sí se repiten.
<main> va una sola vez y que <section>/<article> sí pueden repetirse.¿Por qué cada tarjeta de Skills o de Proyectos es un <article> y no un <div>?
Respuesta modelo: Porque cada tarjeta tiene sentido leída sola, aislada del resto de la página; un <article> lo expresa, un <div> no dice nada.
<div> genérico.¿Qué diferencia hay entre git init, git add y git commit?
Respuesta modelo: init crea el repositorio local; add prepara (staging) los archivos modificados; commit los guarda como una fotografía del proyecto con un mensaje.
¿Por qué el historial de commits pesa 20% de la evaluación?
Respuesta modelo: Porque una progresión semanal real, con fechas, prueba que el trabajo se hizo a lo largo del tiempo y no de una sola vez la noche anterior.
¿Por qué este portafolio se publica como Static Site en Render y no como otro tipo de servicio?
Respuesta modelo: Porque es HTML/CSS/JS puro: no hay backend ni base de datos que procesar en el servidor, solo archivos que se sirven tal cual.
¿Qué dispara el redeploy automático en Render?
Respuesta modelo: Un git push a la rama main conectada al servicio: GitHub avisa a Render y este vuelve a publicar el sitio solo.
git push + la rama conectada.¿Qué diferencia hay entre el Play CDN de Tailwind y una instalación con build?
Respuesta modelo: El Play CDN genera las clases al vuelo en el navegador, sin compilar nada antes (cómodo para aprender); el build genera de antemano un archivo .css optimizado que solo trae las clases usadas.
¿Por qué md:grid-cols-3 no reemplaza a grid-cols-1?
Respuesta modelo: Porque Tailwind es mobile-first: grid-cols-1 aplica siempre y md:grid-cols-3 solo se suma como regla extra desde 768px hacia arriba, sobreescribiendo a la base en esos anchos.
md: actúa solo desde 768px.¿Por qué focus:ring-2 no es solo decoración?
Respuesta modelo: Porque quien navega con teclado (Tab) no usa el mouse y necesita ver claramente qué campo o botón está activo; el anillo de foco es lo que se lo muestra.
¿Qué diferencia hay entre :hover y :focus?
Respuesta modelo: :hover responde al mouse encima del elemento; :focus responde al elemento activo o seleccionado, y también se alcanza por teclado.
¿Sobre qué URL corres Lighthouse y por qué?
Respuesta modelo: Sobre la URL pública de Render, no sobre localhost, porque esa es la que usa un visitante real y refleja el rendimiento real del sitio publicado.
Si Lighthouse marca una imagen sin alt, ¿qué corriges y cómo?
Respuesta modelo: Agrego un alt con una descripción real de lo que muestra la imagen; no lo dejo vacío ni con un texto genérico como “imagen” o, peor, con el nombre de una clase CSS.
alt descriptivo + que no debe ir vacío ni genérico.¿Pondrías una clave secreta o una contraseña directo en el HTML de tu portafolio?
Respuesta modelo: No, nunca: todo lo que está en el HTML, CSS o JavaScript del cliente es visible para cualquiera con “Ver código fuente” o las herramientas de desarrollo.
¿Qué breakpoints de Tailwind usaste y desde qué ancho empieza cada uno?
Respuesta modelo: sm: desde 640px, md: desde 768px y lg: desde 1024px. Todos son min-width: valen desde ese ancho hacia arriba.
¿Qué pasaría si en el header pusieras flex-row sin el prefijo md:?
Respuesta modelo: Se aplicaría siempre, incluso en celular, porque no hay ningún prefijo que lo restrinja; el nombre y el nav quedarían apretados uno al lado del otro en una pantalla angosta. Por eso el header usa flex-col como base y md:flex-row desde 768px.