Desarrollo web: responsive y JavaScript básico

Desarrollo web: responsive y JavaScript básico

Diseño responsive

• Una web que se adapta a diferentes pantallas (móvil, tablet, PC).
• Meta viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Media queries: CSS que cambia según tamaño de pantalla.
• Flexbox: sistema CSS para organizar elementos en fila o columna. Fácil de hacer responsive.

/* Flexbox básico */
.contenedor {
  display: flex;
  gap: 20px;
}

/* Media query para móvil */
@media (max-width: 768px) {
  .contenedor {
    flex-direction: column;
  }
}

JavaScript básico

Lenguaje que añade INTERACTIVIDAD a la web.

// Variables
let nombre = "María";
let edad = 15;

// Función
function saludar() {
  let nombre = prompt("¿Tu nombre?");
  alert("Hola " + nombre);
}

// Evento
document.getElementById("botón").addEventListener("click", function() {
  document.getElementById("texto").innerHTML = "¡Has hecho clic!";
});

Aplicaciones

• Botón que cambia color de fondo.
• Formulario que valida datos.
• Contador que sube/baja al hacer clic.
• Galería de imágenes interactiva.