20 preguntas frecuentes de HTML y CSS en entrevistas de trabajo

Las preguntas frecuentes de HTML y CSS en entrevistas para trabajar como frontend developer pueden cambiar una de la otra, pero estas son algunas respuestas rápidas que podemos tomar en cuenta en la siguiente.

Como desarrolladores frontend damos por hecho que sabemos lo suficiente de HTML y CSS hasta que llegamos a una entrevista en la que tenemos que explicar del porque estamos usando un <div> en vez de usar un <main>, <sidebar> o cualquier etiqueta semántica que tenemos a disponibilidad.

Preguntas frecuentes de HTML y CSS

Vamos a separar las preguntas de HTML y CSS, dando a entender que son cosas muy distintas. Entendiendo que HTML es el lenguaje de maquetado estándar para páginas web. Le indica al navegador web cómo mostrar la página web.

Como desarrolladores web, debemos ser prácticos con HTML y CSS. Por lo tanto, se vuelve muy importante prepararse para las preguntas de HTML y CSS mientras nos preparamos para las entrevistas

1. Preguntas sobre HTML

Preguntas frecuentes de HTML y CSS

Que es DOCTYPE en HTML?

Indica al navegador que la página está escrita en HTML y la versión de HTML utilizada. es la sintaxis de HTML5.

Toda página HTML debe comenzar con DOCTYPE. Si no se especifica DOCTYPE, el navegador no obtendrá la versión de HTML y entrará en «modo quirks«.

¿Cuál es la diferencia entre <!DOCTYPE html>  y <!Doctype html>? ¿Qué sintaxis es válida?

Ambas sintaxis son válidas y no hay diferencia entre ellas porque la declaración de doctype no distingue entre mayúsculas y minúsculas.

¿Qué son los elementos nulos o etiquetas singleton en HTML?

La etiquetas «singleton» o elementos nulos (singleton tags/ void elements) son aquellas etiquetas que no necesitan etiqueta de cierre, siendo las más conocidas <hr> y <br>.

Cuando estamos trabajando con React js si es necesario cerrarlas. <hr />

Que son elementos semánticos?

Describen la información que tienen de manera significativa tanto para el desarrollador como para el navegador web.
Por ejemplo: La etiqueta <footer> se considera etiqueta semántica porque indica muy claramente para qué se utilizan y el tipo de contenido que contienen.

<header>
<footer>
<p>
<table>

Cuales es la diferencia entre div y span?

  • div se usa para dividir la página web en bloques, mientras que span se usa para agrupar elementos sin efectos secundarios en la página web.
  • div es un elemento de nivel de bloque, mientras que span es un elemento en línea («inline»)
  • El desarrollador puede aplicar estilo usando una etiqueta div a una sección entera, mientras que span se puede usar fácilmente para darle estilo a cualquier palabra o frase dentro de un párrafo.

Cuales es la diferencia entre localStorage y sessionStorage?

  • LocalStorage y sessionStorage son casi iguales, con la única diferencia de que los datos de almacenamiento de sessionStorage se eliminarán automáticamente después de cerrar la ventana/pestaña.
  • Los datos de localStorage no se borrarán al cerrar la pestaña/ventana, se eliminarán solo cuando el usuario los elimine o la aplicación web borre los datos.
  • Con el localStorage/ sessionStorage podemos almacenar muchos más datos que las cookies. También son más seguras que las cookies.

¿Podemos usar varias etiquetas body en una página HTML?

No podemos usar varias etiquetas body en un solo documento HTML. Si tenemos varios pares de etiquetas body en un documento HTML, se considerará HTML no válido. La mayoría de las veces no dará errores hasta que el usuario agregue algunos scripts o CSS.

¿Cuales son los elementos de lista en HTML?

  • Elemento de la lista: <li>
  • Lista ordenada: <ol>
  • Lista desordenada <ul>
  • Lista descriptiva: <dl>

2. Preguntas de CSS

Preguntas frecuentes de HTML y CSS

¿Qué es la unidad vh en CSS?

vh representa la altura de la ventana gráfica. Mide la altura en porcentaje con respecto a la ventana gráfica. Para altura de página completa, será 100vh. vh se usa comúnmente cuando queremos establecer el color de fondo para toda la página.

¿Cuál es la diferencia entre un elemento «inline» y un elemento de bloque?

<span> es un ejemplo de elemento en línea y div es un ejemplo de elemento de nivel de bloque. Los elementos en línea se usan principalmente dentro de algunos elementos principales como <p>, que es un elemento de nivel de bloque para aplicar estilo en esa línea/frase en particular.

Los elementos en línea comienzan a afectar desde la misma línea. Los elementos a nivel de bloque se utilizan para dividir una página web en bloques y aplicar estilo/realizar operaciones en ellos. Se saltan la línea donde están definidos y empiezan a afectar desde la nueva línea.

¿Qué es el modelo de caja en CSS?

Como sugiere el nombre, puede decir que el modelo de cuadro (box model) CSS es un cuadro que envuelve cada elemento HTML que incluye contenido, relleno, borde y margen. El contenido es la parte más interna que contiene el contenido real de la página web. Luego viene el relleno que está rodeado por un borde. El margen es la parte más externa que despeja el área fuera del borde.

¿Cuál es la diferencia entre em, rem y pixel? ¿Cuándo no se debe usar la unidad de píxel?

pixel(px) se considera una unidad absoluta. Rem y em se consideran unidades relativas. La unidad de píxeles es fija y no cambia de tamaño con respecto a otros elementos.

El elemento raíz (rem) es relativo al elemento raíz. El elemento (Em) es relativo a su elemento principal. El uso de unidades de píxeles al trabajar con páginas web receptivas puede resultar en una mala experiencia para el usuario porque los píxeles no cambian su tamaño con respecto a otros elementos.

¿Cuáles son las diferentes propiedades de posición?

Las propiedades de posición de CSS son las siguientes:

  • Estático: cuando la posición es estática, el elemento no se ve afectado por las propiedades left, right, top o botton . Por defecto todos los elementos son estáticos.
  • Relativo: cuando la posición relativa se aplica a un elemento, se verá afectado por las propiedades left, right, top o botton.
  • Absoluto: cuando la posición del elemento es absoluta, se colocará en relación con su elemento principal.
  • fixed: cuando el elemento se coloca como fijo, no se verá afectado por el desplazamiento. Permanecerá fijo en su posición. Por ejemplo, el encabezado de la aplicación.
  • sticky: cuando el elemento se coloca como sticky, mostrará propiedades combinadas de posiciones relativas y fijas. Por ejemplo, si tenemos varios encabezados de aplicaciones y se aplica una posición fija en el encabezado 2, el encabezado 2 se comportará como relativo hasta que termine el desplazamiento del encabezado 1 y luego se comportará como fijo y no se moverá de su posición.

¿Cuál es la diferencia entre Visibility: hidden y display: none?

  • Visibility: hidden significa que estamos solicitando que ese elemento sea invisible en la página web, pero el punto a tener en cuenta aquí es que el elemento está oculto pero ocupa su espacio/dimensiones en la página web.
  • display: none significa que no estamos mostrando ese elemento en la página web y, por lo tanto, en este caso, no ocupará espacio en la página web y otros elementos se ajustarán en consecuencia.

¿Qué es la especificidad en CSS? ¿Cuál es el orden de preferencia?

Los navegadores web utilizan la especificidad para decidir qué propiedad CSS se debe aplicar al elemento dado. La especificidad entra en escena cuando el mismo elemento es el objetivo de varias declaraciones de clase CSS.

El estilo CSS en línea tiene una mayor preferencia en comparación con ID, seguido de class.

¿Cuál es la diferencia entre margen y relleno?

Según el modelo de cuadro CSS (box model), el padding es el espacio vacío entre el contenido real de la página y el borde. Margin es el área fuera del borde. En otras palabras, podemos decir que el padding está dentro y margin está fuera con respecto al borde aplicado al elemento.


Espero que con esta listas de preguntas frecuentes de HTML y CSS sean de ayuda en alguna entrevista para frontend developer que tengas en un futuro y no quedes en blanco como el que escribe este artículo. Que a pesar de saber cómo funcionan las cosas, no supo explicar técnicamente

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *