¡Hola, futura víctima de una entrevista técnica! 👋
¿Te estás preparando para una entrevista para un puesto de front-end? Ya te imaginas cómo hablarás sobre los geniales React Hooks y los genéricos de TypeScript, pero el entrevistador de repente pregunta: «¿Cuál es la diferencia entre inline y inline-block?» Y tú así: surprised_pikachu.jpg
Sí, sí, incluso en 2026, en las entrevistas de trabajo les gusta hablar de los conceptos básicos. ¿Y sabes qué? Es lo correcto. Porque una persona que no entiende el modelo de caja, pero intenta explicar el DOM virtual, es como un conductor que no sabe dónde está el pedal del freno, pero habla de motores cuánticos.
Vamos a analizar las mismas preguntas que hacen que incluso los mayores se pongan nerviosos antes de la entrevista.
1. Modelo de caja (Box Model): un clásico del género
Pregunta: ¿En qué consiste el modelo de bloques?
Respuesta para el entrevistador:
Cada elemento es un pastel de capas de:
Content — el contenido en sí
Padding — sangría dentro del elemento
Border - marco
Margin — sangría externa
Qué decir a continuación (para parecer inteligente):
"Por defecto, width y height se aplican solo al contenido. Pero si usas box-sizing: border-box, las dimensiones incluirán el relleno y el borde. Esto evita desbordamientos inesperados y ha sido un estándar en CSS-reset durante mucho tiempo».
Por qué preguntan:
El 99% de los errores de diseño se producen cuando te olvidas de margin o padding. O cuando box-sizing no es el correcto.
2. Posicionamiento: Static, Relative, Absolute, Fixed, Sticky
Pregunta: ¿Cuál es la diferencia entre los tipos de posicionamiento?
Respuesta corta:
Static — comportamiento normal (como si
positionno se especificara en absoluto)Relative — desplazamiento con respecto a su posición normal
Absolute — posicionamiento relativo al padre posicionado más cercano
Fixed - en relación con la ventana gráfica (se adhiere al desplazarse)
Sticky — híbrido relativo y fijo (se adhiere al alcanzar el punto)
Piedra submarina:
El elemento absoluto busca un padre con position: relative/absolute/fixed. Si no lo encuentra, se posiciona en relación con <body>. Esta es la razón por la que el modal a veces se va al espacio.
3. Flexbox: el favorito de todos los diseñadores
Pregunta: ¿Cómo centrar un div vertical y horizontalmente?
Respuesta en 2026:
.container {
display: flex;
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
}Puntos adicionales:
«También hay una cuadrícula con place-items: center, pero el flex es más fácil para diseños de un solo eje».
Si alguien en la entrevista habla de margin: 0 auto y tablas, o está atrapado en 2010 o está comprobando si tú lo estás. 😄
4. Grid vs. Flexbox: la eterna disputa
Pregunta: ¿Cuándo usar Grid y cuándo Flexbox?
Respuesta correcta:
Flexbox — para diseños unidimensionales (línea O columna)
Grid — para diseños bidimensionales (filas y columnas al mismo tiempo)
Ejemplo:
Navegación, tarjetas en una fila → Flexbox
Diseño de página completo, cuadrícula compleja → Cuadrícula
5. Especificidad de los selectores (Specificity)
Pregunta: ¿Qué estilo se aplicará?
#header .nav li { color: red; }
.nav li { color: blue; }
li { color: green; }Respuesta:
Rojo, porque la especificidad se considera como (ID, Class, Tag):
Primero: (1, 1, 1) = 111
Segundo: (0, 1, 1) = 11
Tercero: (0, 0, 1) = 1
Truco:!important interrumpe todo, pero usarlo es como escribir código en CAPS LOCK. Funciona técnicamente, pero todos lo mirarán con recelo.
6. El HTML semántico no es solo una palabra de moda
Pregunta: ¿Por qué son necesarias las etiquetas semánticas?
<header>, <nav>, <article>, <section>, <footer> no son solo <div> con estilo.
Ventajas:
SEO — los motores de búsqueda entienden la estructura
Accessibility — los lectores de pantalla saben qué está dónde
Legibilidad del código — comprender más rápido lo que está sucediendo
Antipatrón:
<div class="header">
<div class="nav">...</div>
</div>Es como llamar a una variable var1, var2 — funciona, pero ¿para qué?
7. Pseudoclases vs. pseudoelementos
Pregunta: ¿Cuál es la diferencia?
Pseudoclases (dos puntos):
a:hover { }
li:first-child { }
input:focus { }Selecciona elementos en un estado específico.
Pseudoelementos (dos puntos):
p::before { content: "👉 "; }
p::after { content: " 👈"; }Crean elementos virtuales.
8. Z-index y contexto de superposición
Pregunta: ¿Por qué mi elemento con z-index: 9999 sigue estando debajo de otro elemento?
Respuesta:z-index solo funciona dentro de su contexto de apilamiento.
Crean un nuevo contexto:
position: absolute/relative/fixed+z-indexopacity < 1transformfilterY unas 10 propiedades más
Si vesz-index: 99999en el código, debes saber que alguien luchó desesperadamente contra un error y perdió.
9. Unidades de medida: px, em, rem, vh, vw
Pregunta: ¿Qué diferencia hay?
Hoja de referencia:
px — píxeles absolutos
em — en relación con el tamaño de la fuente principal (¡en cascada!)
rem — con respecto al tamaño de la fuente
<html>(no en cascada)vh/vw — porcentaje de la altura/ancho de la ventana gráfica
% — en relación con el padre
remes la mejor opción para un diseño adaptable moderno. Cambias el tamaño de la fuente a html: todo se escala.
10. Display: none vs Visibility: hidden vs Opacity: 0
Pregunta: ¿Cuál es la diferencia?
Respuesta:
Propiedad | Ocupa un lugar | Disponible para eventos | Animado |
|---|---|---|---|
| ❌ | ❌ | ❌ |
| ✅ | ❌ | ❌ |
| ✅ | ✅ | ✅ |
Cuándo usar qué:
Eliminar por completo —
display: noneOcultar guardando el lugar —
visibility: hiddenAparición/desaparición suave —
opacity
11. Adaptabilidad: Media Queries
Pregunta: ¿Cómo hacer que un sitio web sea adaptable?
Sintaxis básica:
/* Mobile first подход */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}Tendencia moderna:
Utilizar clamp() para un escalado suave:
font-size: clamp(1rem, 2vw, 2rem);12. Variables CSS (propiedades personalizadas)
Pregunta: ¿Cómo funcionan las variables CSS?
Ejemplo:
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Ventajas sobre las variables Sass:
Se puede cambiar a través de JavaScript
Soporta la herencia
Funcionan de forma nativa en el navegador
13. Margin collapse vertical
Pregunta: ¿Por qué no se suma el margen entre dos bloques?
Respuesta:
Los márgenes verticales se contraen (se toma el más grande). Esto se llama colapso de margen.
Ejemplo:
.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }
/* Расстояние между ними = 30px, а не 50px */Cómo desactivar:
Contenedor Flexbox/Grid
overflow: hiddenen el padrepaddingoborderen el padre
14. Inline vs Inline-block vs Block
Pregunta: ¿Cuál es la diferencia?
Tabla de verdad:
Tipo | Ancho/alto | En una nueva línea | Se puede margin/padding |
|---|---|---|---|
| ❌ | ❌ | Solo horizontal |
| ✅ | ❌ | ✅ Todo |
| ✅ | ✅ | ✅ Todo |
Ejemplo de vida:<span> — inline, <div> — block, y <button> por defecto — inline-block.
15. Pseudoclase :nth-child() y sus amigos
Pregunta: ¿Cómo seleccionar cada tercer elemento?
Respuesta:
li:nth-child(3n) { /* Каждый третий */ }
li:nth-child(odd) { /* Нечетные */ }
li:nth-child(even) { /* Четные */ }
li:nth-child(3n+1) { /* 1, 4, 7, 10... */ }Piedra submarina::nth-child() cuenta a todos los vecinos, incluso de diferentes tipos. Si solo necesita algunos, use :nth-of-type().
🚀 Y ahora sobre la formación (sin aburrir)
Vale, has leído todas estas preguntas, tal vez incluso hayas apuntado algo. Pero seamos sinceros: en una semana, la mitad se te habrá olvidado. Así es como funciona nuestro cerebro.
Problema: La teoría sin práctica es como ver un vídeo de «Cómo aprender a nadar». Está claro, pero intenta no ahogarte.
Solución: Práctica, práctica, práctica. Y no solo «abrir el editor y escribir tres líneas», sino de forma sistemática.
Aquí es donde puedes mejorar de verdad:
Kodik — aplicación móvil para aprender programación, donde:
La teoría se dosifica poco a poco (sin sobrecarga)
Practica inmediatamente con las tareas interactivas
Aprendes directamente en el teléfono (en el metro, en la cola, en cualquier lugar)
Cursos de Python, JavaScript, HTML/CSS y otras tecnologías
El truco es que no solo lees «cómo funciona flexbox», sino que inmediatamente diseñas elementos reales. Se forma la memoria muscular, y en la entrevista las manos mismas recordarán la sintaxis.
Bonus - Canal de Telegram de Kodik — una comunidad donde compartimos publicaciones útiles y trucos, discutimos las últimas características de los idiomas y marcos, ayudamos a resolver si algo no está claro.
Conclusión: ¿cómo no meter la pata en la entrevista?
Tres reglas de oro:
No te asustes si no sabes la respuesta. Es mejor decir honestamente «No estoy seguro, pero supongo...» y razonar lógicamente que decir tonterías.
La práctica es más importante que el estudio. Crea proyectos de mascotas, copia tus sitios favoritos, rompe y repara. Hacer con las manos es lo que mejor se recuerda.
Comprensión > Memorización. Saber que
display: flexhace que los elementos sean flexibles no es suficiente. Entender por qué y cuándo usarlo es lo que se necesita.
¡Buena suerte en la entrevista! Que el flex te acompañe. 🚀