Errores Comunes de Desarrollo Web para Principiantes

Estás empezando con el desarrollo web, sigues un tutorial al pie de la letra, pero tu página no se parece en nada al ejemplo. Frustrante, ¿verdad? Tranquilo, es el pan de cada día cuando aprendes. Aquí te voy a contar los problemas más comunes que te vas a encontrar con desarrollo web con HTML, CSS y JavaScript para principiantes y, lo más importante, cómo solucionarlos sin volverte loco.

Mi CSS no se aplica: la página se ve sin estilos

Este es, sin duda, el primer gran muro con el que todos nos topamos. Pasas un buen rato escribiendo reglas de estilo y cuando refrescas la página, nada ha cambiado.

Síntoma

Has creado tu archivo style.css, lo has llenado de selectores, colores y márgenes, pero tu página web sigue viéndose como un documento de texto plano. El fondo es blanco, la letra es la Times New Roman por defecto y los elementos están apilados uno encima de otro.

Causas probables

La mayoría de las veces, el problema está en uno de estos cuatro puntos:

• La hoja de estilos está mal enlazada en tu archivo HTML.
• La caché del navegador te está mostrando una versión antigua de la página.
• Hay un error de sintaxis en tu CSS que hace que el navegador ignore el archivo.
• Estás luchando contra la "especificidad" de CSS, donde otra regla más específica está sobreescribiendo la tuya.

Solución paso a paso

1. Revisa el enlace en tu HTML: Ve a tu archivo index.html y busca la etiqueta <link> dentro del <head>. Debería ser algo así: <link rel="stylesheet" href="css/style.css">. El error más común está en el atributo href. Asegúrate de que la ruta al archivo CSS es correcta desde la ubicación de tu HTML. Si ambos archivos están en la misma carpeta, sería simplemente href="style.css".
2. Fuerza una recarga sin caché: A veces el navegador es demasiado listo y para ir más rápido te muestra una versión guardada (en caché) de tus archivos. Para forzarlo a que descargue todo de nuevo, usa la combinación de teclas Ctrl+Shift+R (en Windows/Linux) o Cmd+Shift+R (en Mac).
3. Usa el Inspector de Elementos: Esta es tu herramienta fundamental. Haz clic derecho en tu página y selecciona "Inspeccionar" (o pulsa F12). En la pestaña "Elements" (o "Inspector"), selecciona el elemento HTML que quieres estilizar. A la derecha, verás un panel ("Styles") con todas las reglas CSS que se le aplican. Si ves tus estilos pero están tachados, significa que otra regla con más especificidad los está anulando. Si ni siquiera aparecen, el problema es el enlace del paso 1.
4. Valida tu código CSS: Un punto y coma olvidado, una llave que no se cierra... un pequeño error puede invalidar todo el archivo. Puedes usar validadores online o, mejor aún, instalar extensiones en tu editor de código como Visual Studio Code que te marcarán los errores mientras escribes.

El JavaScript no hace nada: mi página está "muerta"

Has añadido interactividad con JavaScript para que al pulsar un botón ocurra algo, pero no pasa absolutamente nada. La página se queda estática.

Síntoma

Haces clic en los botones y no responden. Un menú desplegable no se abre, una galería de imágenes no cambia de foto, un formulario no valida los campos. La consola del navegador (F12, pestaña "Console") puede que esté llena de mensajes de error en rojo.

Causas probables

• El archivo JavaScript no está correctamente enlazado en el HTML.
• El script se intenta ejecutar antes de que los elementos HTML a los que se refiere existan en la página.
• Un simple error de sintaxis (una coma, un paréntesis) ha detenido la ejecución de todo el script.

Solución paso a paso

1. La consola es tu mejor amiga: Pulsa F12 y ve a la pestaña "Console". Si hay errores, te dirá exactamente en qué línea de qué archivo está el problema. Un error como "Cannot read properties of null" suele significar que tu JS intentó seleccionar un elemento HTML que aún no se había cargado.
2. Revisa la etiqueta <script>: Tradicionalmente, la etiqueta <script src="js/main.js"></script> se coloca justo antes de cerrar la etiqueta </body>. Esto asegura que todo el HTML se ha cargado antes de que el JavaScript intente manipularlo.
3. Usa el atributo defer: La forma más moderna y limpia es colocar la etiqueta <script> en el <head> pero añadiendo el atributo defer. Así: <script src="js/main.js" defer></script>. Esto le dice al navegador que descargue el script en paralelo, pero que espere a ejecutarlo a que todo el HTML esté analizado.
4. Depura con console.log(): Igual que cuando usas el monitor serie en un proyecto con Arduino o ESP32 para ver qué valores tienen tus sensores, en JavaScript tu herramienta es console.log(). Ponlo en diferentes puntos de tu código para imprimir variables o mensajes y así ver hasta dónde llega la ejecución y qué valores tienen las cosas en cada momento.

Mi web se rompe en el móvil: el caos del responsive

En la pantalla de tu portátil todo se ve genial, pero cuando pasas el enlace a un amigo para que lo vea en su móvil, te manda una captura de pantalla que es un auténtico desastre.

Síntoma

El contenido es más ancho que la pantalla, obligando a hacer scroll horizontal. El texto es tan pequeño que es ilegible sin hacer zoom. Los elementos se superponen o se descolocan por completo.

Causas probables

• Te falta la meta etiqueta viewport en tu HTML.
• Estás usando unidades de medida absolutas (como px) para todo, en lugar de unidades relativas.
• No estás usando Media Queries para adaptar los estilos a diferentes tamaños de pantalla.

Solución paso a paso

1. Añade la meta etiqueta viewport: Esta es la línea más importante para el diseño responsive. Pon esto dentro de tu etiqueta <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Le dice al navegador del móvil que el ancho de la página debe ser el ancho del dispositivo y que la escala inicial debe ser 1.0 (sin zoom).
2. Usa unidades relativas: En lugar de definir el ancho de un contenedor como width: 800px;, usa porcentajes: width: 90%;. Para el tamaño de fuente, en lugar de font-size: 16px;, acostúmbrate a usar rem. Un rem equivale al tamaño de fuente de la raíz del documento (normalmente 16px), por lo que font-size: 1.5rem; serían 24px. Esto facilita la escalabilidad y la accesibilidad.
3. Introduce las Media Queries: Son la base del diseño adaptativo. Te permiten aplicar bloques de CSS solo si se cumplen ciertas condiciones, como el ancho de la pantalla. Un ejemplo clásico:

   /* Estilos para pantallas de 768px o menos */
@media (max-width: 768px) {
  .columna {
    width: 100%; /* Las columnas ocupan todo el ancho y se apilan */
  }
}

Las imágenes no se ven o la página carga muy lenta

Las imágenes son clave en una web, pero también una fuente común de problemas, ya sea porque no aparecen o porque hacen que la página tarde una eternidad en cargar.

Síntoma

En el lugar donde debería estar una imagen, ves un icono de imagen rota. O la página se queda en blanco durante varios segundos mientras se descargan las imágenes, frustrando al visitante.

Causas probables

• La ruta en el atributo src de la etiqueta <img> es incorrecta.
• El nombre del archivo tiene una errata. Ojo, los servidores web suelen distinguir entre mayúsculas y minúsculas (MiFoto.jpg no es lo mismo que mifoto.jpg).
• Las imágenes son demasiado pesadas (alta resolución, sin compresión) y no están optimizadas para la web.

Solución paso a paso

1. Verifica la ruta de la imagen: De nuevo, el inspector del navegador es tu aliado. Ve a la pestaña "Network" (o "Red"), filtra por "Img" y recarga la página. Verás todas las peticiones de imágenes. Si una aparece en rojo con un error 404 (Not Found), significa que la ruta es incorrecta. Comprueba que el src en tu HTML apunta al lugar correcto.
2. Optimiza tus imágenes SIEMPRE: Antes de subir una imagen a tu proyecto, pásala por una herramienta de optimización. Squoosh (de Google) o TinyPNG son opciones online gratuitas y muy buenas. Pueden reducir el peso de una imagen en un 70% o más sin que se note la pérdida de calidad.
3. Usa formatos de imagen modernos: Cuando sea posible, utiliza formatos como WebP o AVIF. Ofrecen una compresión mucho mejor que los clásicos JPG y PNG. La mayoría de navegadores modernos los soportan sin problemas.
4. Añade atributos width y height: Incluir las dimensiones de la imagen en la propia etiqueta <img> ayuda al navegador a reservar el espacio correcto mientras la imagen se carga, evitando que el contenido de la página "salte" bruscamente cuando aparece.

Estos son los problemas más típicos, pero no los únicos. El desarrollo web es un camino de constante aprendizaje y depuración. La clave es no frustrarse, aprender a usar las herramientas del navegador y entender que cada error es una oportunidad para comprender mejor cómo funciona todo. Si estás empezando desde cero, te recomiendo echar un vistazo a nuestra guía de desarrollo web para principiantes para asentar bien las bases. Y si ya te sientes cómodo y quieres dar el siguiente paso, quizás te interese conocer los mejores frameworks para desarrollo web que se están usando ahora mismo.

Un saludo,
David Ortega.