Fragua Tech

Desarrollo Web Frontend

Parte 1

Clase 4 — HTML, CSS y JavaScript para construir interfaces modernas

↓

Objetivos de aprendizaje

Al terminar esta clase, serás capaz de construir una página web funcional desde cero.

🧱

HTML semántico

Estructurar contenido con etiquetas que describen su significado.

🎨

CSS moderno

Aplicar estilos y layouts con Flexbox y Grid.

⚡

JavaScript básico

Añadir interactividad con variables, funciones y DOM.

🛠

DevTools

Depurar tu código directamente en el navegador.

HTML: la estructura de la web

HTML es el esqueleto de toda página web. Define la estructura y el significado del contenido.

Piensa en una página como un cuerpo humano:

🦴

HTML

El esqueleto. Aporta la estructura y sostiene todo lo demás.

👜

CSS

La piel y la ropa. Da apariencia, color, forma y estilo.

💪

JavaScript

Los músculos y los nervios. Aporta movimiento y reacción.

Estructura básica de una página HTML5

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Primera Página</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header><nav>...</nav></header>
  <main><h1>Bienvenido</h1></main>
  <footer>© 2026</footer>
  <script src="script.js"></script>
</body>
</html>

head lleva metadatos (título, viewport, hojas de estilo); body lleva el contenido visible.

HTML semántico

Usar etiquetas con significadomejora la accesibilidad y el SEO, y hace el código más legible.

EtiquetaUsar para
<header>Logo y navegación principal
<nav>Menús y enlaces de navegación
<main>El contenido único de la página
<section>Agrupar contenido relacionado
<article>Posts de blog, noticias, contenido autónomo
<aside>Barras laterales, notas al margen
<footer>Pie de página, contacto, copyright

Elementos esenciales

# Texto y enlaces
<h1>Título principal</h1>
<p>Párrafo de texto.</p>
<a href="https://ejemplo.com">Visitar</a>
<img src="foto.jpg" alt="Descripción">
# Listas
<ul><li>No ordenada</li></ul>
<ol><li>Ordenada</li></ol>
# Formulario
<form action="/enviar" method="POST">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre"
         name="nombre" required>
  <label for="email">Email:</label>
  <input type="email" id="email"
         name="email" required>
  <button type="submit">Enviar</button>
</form>

El atributo for de label debe coincidir con el id del input.

Accesibilidad: no es opcional

Siempre incluye el atributo alt en imágenes

El texto alternativo describe la imagen para personas que usan lectores de pantalla y también para cuando la imagen no carga. Además, es esencial para SEO.

<img src="logo.png"> <!-- mal -->
<img src="logo.png" alt="Logotipo de Fragua Tech">

Regla práctica: si la imagen aporta información, describe qué muestra. Si es decorativa, usa alt="" para que los lectores la ignoren.

Material complementario

CSS: diseño visual moderno

CSS selecciona elementos HTML y les aplica estilo.

/* Por etiqueta */
p { color: blue; }
/* Por clase — el más usado */
.destacado { background: yellow; }
/* Por ID — usar con moderación */
#titulo { font-size: 2rem; }
/* Pseudo-clase */
a:hover { color: red; }

El modelo de caja

Todo elemento HTML es una caja con cuatro capas.

Contenido

Texto o imágenes

Padding

Espacio interior

Border

Borde visible

Margin

Espacio exterior

/* Incluye padding y border en el ancho */
*, *::before, *::after {
  box-sizing: border-box;
}

Regla de oro: box-sizing: border-box en todo proyecto. Evita sorpresas al calcular tamaños.

Flexbox — layouts en una dimensión

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
}
nav a {
  color: white;
  text-decoration: none;
}
PropiedadValores comunes
justify-contentcenter, space-between, flex-start
align-itemscenter, stretch
flex-directionrow, column
gap16px, 1rem

CSS Grid — layouts en dos dimensiones

Ideal para galerías, dashboards y cualquier rejilla responsive.

.galeria {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

💡 repeat(auto-fill, minmax(300px, 1fr))

Crea tantas columnas como quepan, cada una de mínimo 300px y que crezcan para llenar el espacio. Responsive sin media queries.

Diseño responsivo — mobile first

Empieza estilando para móvil y añade mejoras para pantallas mayores.

/* Base: móvil */
.contenedor { padding: 1rem; }
/* Tablet */
@media (min-width: 768px) {
  .contenedor {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }
}
/* Desktop */
@media (min-width: 1024px) {
  .contenedor { max-width: 960px; }
}
Material complementario

JavaScript básico

Añade interactividad a tu página: responder a clics, validar formularios, actualizar el DOM sin recargar.

Variables

const nombre = "Ana";    // No cambia — usar por defecto
let edad = 25;           // Puede cambiar
// Nunca uses var

Regla: empieza con const; cámbialo alet solo si el valor tiene que cambiar.

Tipos de datos

const texto = "Hola";
const numero = 42;
const verdadero = true;
const lista = [1, 2, 3];
const objeto = { nombre: "Ana", edad: 25 };

string

texto

number

números

boolean

true / false

array

listas

object

pares clave-valor

Funciones (arrow functions)

const saludar = (nombre) => `Hola, ${nombre}!`;
// Llamada
console.log(saludar("Ana"));
// "Hola, Ana!"

Las template strings(`${variable}`) permiten interpolar valores sin concatenar.

Manipulación del DOM

El DOM es la representación del HTML en memoria. JavaScript lo lee y lo modifica en tiempo real.

// Seleccionar un elemento
const titulo = document.getElementById("titulo");
// Cambiar contenido y clases
titulo.textContent = "Nuevo título";
titulo.classList.add("destacado");
// Reaccionar a eventos
const boton = document.querySelector("#mi-boton");
boton.addEventListener("click", () => {
  alert("Hiciste click!");
});
Demo en vivo

Ejemplo: contador interactivo

Este contador se actualiza con JavaScript puro. Pruébalo aquí mismo.

0

Haz clic en los botones: detrás usan addEventListener y actualizan el DOM.

let cuenta = 0;
const display = document.getElementById("valor");
document.getElementById("incrementar")
  .addEventListener("click", () => {
    cuenta++;
    display.textContent = cuenta;
  });
Material complementario

Las DevTools del navegador

Accede con F12 oCtrl+Shift+I.

PestañaPara qué sirve
ElementsInspeccionar y modificar HTML/CSS en vivo
ConsoleEjecutar JavaScript, ver console.log y errores
NetworkVer peticiones HTTP, tiempos de carga, tamaños
SourcesDepurar con breakpoints y paso a paso
ApplicationCookies, localStorage, sessionStorage

Trucos del día a día

Ctrl+Shift+M

Modo responsive: simula distintos tamaños de pantalla (móvil, tablet, desktop).

Editar CSS en caliente

En Elements, cambia valores en el panel Stylespara experimentar sin tocar el archivo.

Throttling de red

En Network, simula una conexión 3G lenta para ver cómo se comporta tu página con internet pobre.

Console como calculadora

La consola ejecuta cualquier JavaScript al vuelo. Perfecta para pruebas rápidas y explorar objetos.

Material complementario

Resumen de la Clase 4

ConceptoDefinición
HTMLLenguaje de marcado que define la estructura
CSSLenguaje de estilos que define la apariencia
JavaScriptLenguaje que agrega interactividad
DOMRepresentación del HTML manipulable por JavaScript
FlexboxSistema CSS para layouts en una dimensión
GridSistema CSS para layouts en dos dimensiones
SemánticoEtiquetas con significado (header, nav, main, article...)
Mobile firstEstrategia: estilar primero para móvil, ampliar con media queries
DevToolsPanel del navegador para inspeccionar y depurar
Material complementario
Básico

Ejercicio 4.1: Página semántica

Crea un artículo de blog usando solo etiquetas semánticas para la estructura principal.

<body>
  <header><h1>Mi Blog</h1></header>
  <nav>...enlaces...</nav>
  <main>
    <article>
      <h2>Título del post</h2>
      <p>Contenido...</p>
    </article>
    <aside>Posts relacionados</aside>
  </main>
  <footer>
    <form>...suscripción...</form>
  </footer>
</body>

Valida con un lector de pantalla o el panel Accessibility de DevTools.

Básico

Ejercicio 4.2: Navbar con Flexbox

Logo a la izquierda, 4 enlaces al centro, botón de "Contacto" a la derecha, fondo oscuro con texto claro.

<!-- HTML -->
<nav class="navbar">
  <div class="logo">MiSitio</div>
  <div class="nav-links">
    <a href="#">Inicio</a>
    <a href="#">Servicios</a>
    <a href="#">Blog</a>
    <a href="#">Equipo</a>
  </div>
  <button class="btn-contacto">Contacto</button>
</nav>
/* CSS */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1a1a2e;
}
.nav-links {
  display: flex; gap: 2rem;
}
.nav-links a { color: #eee; }
Intermedio

Ejercicio 4.3: Galería con CSS Grid

6 tarjetas que muestren 3 columnas en desktop, 2 en tablet, 1 en móvil. Cada card con imagen, título, descripción y botón. Sombra y efecto hover de elevación.

.galeria {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.card:hover { transform: translateY(-6px); }

auto-fill + minmax ya hace responsive sin necesidad de media queries.

Interactivo

Ejercicio 4.4: Contador con historial

Contador con botones +1 / −1 / +5 / −5 y reset. El número cambia de color según el valor y se guarda el historial de las últimas 5 operaciones.

Contador interactivoHistorial: 0 / 5
0

Últimas 5 operaciones

Pulsa cualquier botón para empezar.

    Avanzado

    Ejercicio 4.5: Formulario con validación

    Validación en tiempo real: nombre (mín. 3), email, contraseña (8+, una mayúscula, un número) y confirmación. El botón solo se activa cuando todo es válido.

    🌐

    Proyecto: Portafolio personal

    Construye una página web de portafolio personal con HTML, CSS y JavaScript puros — sin frameworks.

    Secciones obligatorias

    • • Header con navegación funcional
    • • Hero con tu nombre
    • • Sobre mí
    • • Habilidades
    • • Proyectos: 3 cards en grid
    • • Formulario de contacto con validación
    • • Footer con redes sociales

    Técnicas que usarás

    • • HTML semántico (header, main, section, footer)
    • • Flexbox y Grid
    • • Media queries (mobile first)
    • • Event listeners y manipulación del DOM
    • • Validación en tiempo real
    • • Accesibilidad (alt, labels)

    Criterios de evaluación

    Checklist

    • ☑ HTML semántico correcto
    • ☑ Layout con Flexbox y/o Grid
    • ☑ Responsive en al menos 3 breakpoints
    • ☑ JavaScript funcional
    • ☑ Código limpio y organizado
    • ☑ Se ve profesional y es usable

    Bonus

    • ⭐ Modo oscuro con toggle
    • ⭐ Animaciones CSS (transiciones, keyframes)
    • ⭐ Publicar en GitHub Pages o Netlify
    • ⭐ Formulario que envía a una API real
    • ⭐ Lighthouse > 90 en accesibilidad
    🌐

    Tu primera página es el principio

    HTML, CSS y JavaScript son labase sobre la que se construye toda la web moderna. En la próxima clase veremosframeworks y herramientas que aceleran el trabajo.

    Fragua Tech — Clase 4