HTML y CSS en la entrevista: Guía de supervivencia para desarrolladores front-end en 2026 🎯

Cómo no convertirse en un meme "backend developer doing frontend"

¡Enhorabuena! Has decidido ir a una entrevista como desarrollador de front-end. Lo más probable es que ya sepas qué son las etiquetas semánticas, el modelo de caja y cómo centrar un div (spoiler: todavía no es tan fácil como parece 😅).

Pero seamos honestos: entre «he estudiado CSS» y «he pasado una entrevista de CSS» hay todo un universo de dolor, sufrimiento y preguntas como «¿sabes lo que es BFC?».

HTML: "Son solo etiquetas, ¿qué puede salir mal?"

1. La semántica no es filosofía, se trata de etiquetas

Pregunta: ¿Cuál es la diferencia entre <div> y <section> y por qué es necesaria la semántica?

Lo que necesitas saber:

Las etiquetas semánticas (<article>, <section>, <nav>, <header>, <footer>, <aside>) no solo hacen que el código sea "más bonito".

Ellos:

• Mejoran el SEO (a los motores de búsqueda les encanta la estructura)

• Hacen que el sitio web sea accesible para los lectores de pantalla

• Ayudan a los desarrolladores a comprender la estructura sin leer todo el código

<!-- Плохо: --><div class="article"><div class="header">Заголовок</div><div class="content">Контент</div></div>

<!-- Хорошо: --><article><header>
    <h1>Заголовок</h1></header><section>Контент</section></article>

Recuerda lo que dicen: "Usar <div> en todas partes es como nombrar todas las variables data1, data2, data3". Funciona técnicamente, pero los compañeros te odiarán.

2. Características de HTML5: no solo canvas y video

Preguntas principales 2025:

• ¿Cuál es la diferencia entre <canvas> y <svg>?

• ¿Qué son los atributos de datos y por qué son necesarios?

• ¿Cómo funciona localStorage vs sessionStorage?

Respuesta rápida sobre canvas vs svg:

• <canvas> — gráficos de mapa de bits, para animaciones y juegos complejos

• <svg> — vectorial, para iconos y elementos escalables

Atributos de datos — tu almacén de atributos personalizado:

<article data-post-id="12345" data-category="frontend"><!-- Можно читать через JS: article.dataset.postId --></article>

3. Formularios: más que solo input

Pregunta: ¿Qué nuevos tipos de input han aparecido en HTML5?

Respuesta para la impresión del entrevistador:

• type="email" — validación de correo electrónico

• type="tel" — teléfono (teclado móvil optimizado)

• type="date", type="time" — selectores de fecha nativos

• type="range" — control deslizante

• type="color" — selector de color

• required, pattern, min, max — ¡validación integrada sin JS!

<input type="email" required 
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
       placeholder="your@email.com">

4. Modelo de caja: la base de todo

Pregunta: Explica el CSS Box Model y la diferencia entre box-sizing: content-box y border-box.

Respuesta (recuerda de una vez por todas):

Box Model consta de:

• Content — el contenido en sí

• Padding — sangría interior

• Border - borde

• Margin — sangría exterior

/* content-box (default, но неудобно) */.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Итоговая ширина: 200 + 20*2 + 5*2 = 250px */
}

/* border-box (используют все адекватные люди) */.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Итоговая ширина: ровно 200px */
}

Si no usas * { box-sizing: border-box; } en 2026, es posible que te hayas quedado en el siglo pasado 🦕

5. Flexbox vs. Grid: la batalla eterna

Pregunta: ¿Cuándo usar Flexbox y cuándo Grid?

Una regla sencilla:

• Flexbox: para diseños unidimensionales (línea O columna)

• Cuadrícula: para dos dimensiones (filas y columnas al mismo tiempo)

Flexbox para la navegación:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Cuadrícula para la galería:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

Flexbox es cuando quieres alinear elementos. Grid es cuando quieres detener la guerra con float y position.

6. Especificidad de CSS: ¿por qué no se aplicó mi estilo?

Pregunta: Explica la especificidad de CSS y las prioridades de estilo.

Clasificación por fuerza (de débil a fuerte):

1. Selectores de etiquetas: div (0,0,1)

2. Clases: .button (0,1,0)

3. ID: #header (1,0,0)

4. Estilos en línea: style="..." (1,0,0,0)

5. !important — botón nuclear (¡nunca lo uses!)

/* Специфичность: 0,0,1 */p { color: blue; }

/* Специфичность: 0,1,0 */.text { color: red; }

/* Специфичность: 0,1,1 */p.text { color: green; } /* Этот выиграет! */

/* Специфичность: 1,0,0 */#content { color: purple; }

/* Если добавить !important — всё сломается */p { color: orange !important; } /* НЕ ДЕЛАЙТЕ ТАК */

7. Pseudoclases vs. pseudoelementos: ¿cuál es la diferencia?

¡Siempre se hace la pregunta!

Pseudoclases (:) — estado del elemento:

a:hover { color: red; }
input:focus { border: 2px solid blue; }
li:nth-child(2) { background: yellow; }

Pseudoelementos (::) — elementos virtuales:

p::before { content: "📌 "; }
p::after { content: " ✓"; }
::selection { background: yellow; }

Truco: Un dos puntos: estado, dos: elemento.

8. Adaptabilidad: Mobile-First en 2026

Pregunta: ¿Cómo implementar un diseño adaptable sin marcos?

Enfoque moderno:

/* Mobile-first: базовые стили для мобилок */.container {
  padding: 10px;
  font-size: 14px;
}

/* Для планшетов */@media (min-width: 768px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

/* Для десктопов */@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
  }
}

BFC (Block Formatting Context): para los más hardcore

Pregunta para middle/senior: ¿Qué es BFC y cómo crearlo?

En palabras sencillas:
BFC es un área de renderizado aislada donde los elementos interactúan según sus propias reglas.

Se crea cuando:

• overflow: hidden/auto/scroll (no visible)

• display: flow-root (¡un método moderno!)

• position: absolute/fixed

• display: flex/grid en el padre

• float: left/right

/* Проблема: плавающий элемент вываливается из контейнера */.container {
  border: 2px solid black;
}

.float-item {
  float: left;
  width: 200px;
}

/* Решение: создаём BFC */.container {
  overflow: hidden; /* Старый способ *// * o */display: flow-root; /* Método moderno */
}

🎓 ¿Y qué pasa con las prácticas?

La teoría es genial, pero sin práctica en la entrevista te sentirás como un desarrollador de backend que intenta centrar un div.

Aquí viene al rescate Kodik - una aplicación móvil para aprender programación, donde puedes bombear HTML y CSS directamente sobre la marcha. El metro, la cola en la cafetería, la pausa para el almuerzo: ¡cualquier lugar se convierte en un bootcamp de programación!

✅ Lecciones interactivas
con código real

✅ Práctica en la aplicación
¡no necesitas un ordenador!

✅ Se está siguiendo el progreso
automáticamente

✅ Problemas por niveles
de principiante a profesional

Y también tenemos nuestro Comunidad de Telegram! 🚀

Este es el lugar donde:

• 📚 Publicaciones útiles todos los días

• 💬 Puedes hacer una pregunta y obtener ayuda

• 🔥 Compartimos nuestra experiencia en entrevistas

• 😄 Publicamos memes

Suscríbete, para repetir los materiales a diario y mantenerte al día con las tendencias.

Las entrevistas de HTML y CSS en 2025 no se limitan a «¿conoces las etiquetas?». Se trata de comprender cómo el navegador renderiza una página, cómo optimizar el rendimiento y cómo escribir código compatible.

Regla de oro: Honestidad + conocimientos básicos + práctica = oferta.

¿No sabes la respuesta? Di: «No lo recuerdo exactamente ahora, pero sé dónde encontrar esta información y cómo aplicarla». Los entrevistadores valoran la honestidad y la capacidad de buscar soluciones más que saberse de memoria las 500 propiedades de CSS.

P.S. Recuerda: todos los desarrolladores sénior alguna vez buscaron en Google «cómo centrar un div css». La diferencia es que ahora conocen 5 formas de hacerlo y pueden explicar cuál es la mejor para una tarea determinada.