Aprende Desarrollo Web desde Cero

Domina HTML y CSS con ejemplos prácticos, ejercicios interactivos y proyectos reales. Tu camino hacia el desarrollo web profesional comienza aquí.

Comenzar Ahora

Bienvenido a tu Academia de Desarrollo Web

3
Tecnologías Core
0
Ejercicios Completados
5
Proyectos Finales

HTML - Estructura

Aprende a crear la estructura de páginas web con HTML5. Desde etiquetas básicas hasta formularios y elementos semánticos.

CSS - Diseño

Domina el diseño y estilizado web con CSS3. Aprende layouts, animaciones, flexbox, grid y responsive design.

JavaScript - Interactividad

Dale vida a tus páginas con JavaScript. Aprende lógica de programación, manipulación del DOM y eventos interactivos.

Práctica Real

Consolida tu aprendizaje con ejercicios prácticos y proyectos reales que podrás añadir a tu portafolio.

HTML — Lenguaje de Marcado

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje que se utiliza para crear la estructura de una página web.

Con HTML se definen los distintos elementos de una página, como títulos, párrafos, imágenes, enlaces y secciones.

HTML no se encarga del diseño; su función es organizar el contenido para que el navegador lo interprete correctamente.

¿Qué es una etiqueta?

HTML funciona mediante etiquetas. Las etiquetas indican al navegador qué tipo de contenido se está mostrando. La mayoría de ellas tienen una etiqueta de apertura y una de cierre. 

<p>Este es un párrafo</p>
<h1>Este es un título</h1>
  • <p> → Se usa para escribir párrafos de texto
  • <h1> → Representa el título principal de la página
  • <h2> a <h6> → Se usan para subtítulos y jerarquía de contenido

Estructura básica de una página

Toda página HTML debe seguir una estructura básica. Esta estructura permite que el navegador entienda correctamente el documento. 

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primera web</title>
  </head>
  <body>
    <h1>Hola Juan</h1>
    <p>Estoy aprendiendo HTML</p>
  </body>
</html>

Etiquetas HTML más usadas

Texto

<h1> a <h6>: Títulos y subtítulos

<p>: Párrafos de texto

<strong>: Texto importante o destacado

<em>: Texto enfatizado

Enlaces e imágenes

<a>: Enlaces a otras páginas

<img>: Inserción de imágenes

<a href="#">Haz clic</a>
<img src="foto.jpg" alt="Imagen">

Contenedores

<div>: Contenedor genérico

<section>: Sección de contenido

<header>: Cabecera de la página o sección

<footer>: Pie de página

Listas en HTML

Las listas se utilizan para mostrar elementos relacionados entre sí. La etiqueta <ul> crea una lista sin orden. 

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ejercicio práctico

Crea una página HTML que incluya los siguientes elementos:

  • Un título con el nombre que tú elijas
  • Un párrafo de presentación
  • Una lista con tres hobbies
  • Un enlace

Este ejercicio refuerza el uso de etiquetas, estructura y organización del contenido en HTML.

Ejercicios Prácticos Interactivos

Haz clic en "Empezar" para abrir el editor interactivo y completar cada ejercicio

Proyectos Finales

Proyecto 1: Landing Page Personal

Crea tu página personal de presentación con secciones: Sobre mí, Habilidades, Proyectos y Contacto. Debe ser completamente responsive.

Nivel: Principiante

Proyecto 2: Blog Profesional

Diseña un blog con página de inicio, artículos individuales y barra lateral. Incluye navegación, header, footer y sistema de grid para los posts.

Nivel: Intermedio

Proyecto 3: Dashboard de Estadísticas

Construye un panel de control con tarjetas de métricas, gráficos simulados con CSS y navegación lateral. Usa CSS Grid y Flexbox avanzado.

Nivel: Intermedio

Proyecto 4: E-commerce UI

Diseña la interfaz de una tienda online: página de productos, detalle de producto, carrito de compras. Incluye filtros y búsqueda.

Nivel: Avanzado

Proyecto 5: Portfolio Completo

Desarrolla tu portfolio profesional completo con múltiples páginas, animaciones CSS, formulario funcional y galería de proyectos interactiva.

Nivel: Avanzado

JavaScript — Dale vida a tus páginas

¿Qué es JavaScript?

JavaScript es el lenguaje de programación que permite añadir interactividad y comportamiento dinámico a las páginas web.

Mientras HTML define la estructura y CSS el diseño, JavaScript controla lo que sucede cuando el usuario interactúa con la página: clics, formularios, animaciones, peticiones a servidores y mucho más.

Es el tercer pilar del desarrollo web y el lenguaje de programación más usado del mundo.

Sintaxis básica

JavaScript se escribe dentro de etiquetas <script> o en archivos externos con extensión .js 

<script>
  console.log("¡Hola desde JavaScript!");
  alert("Bienvenido a JS");
</script>

Variables

Las variables permiten almacenar información para usarla después. En JavaScript moderno se usan let y const. 

let nombre = "Gonzalo";
let edad = 25;
const PI = 3.14159;

console.log(nombre); // Muestra: Gonzalo
console.log(edad);   // Muestra: 25
  • let → Para variables que pueden cambiar
  • const → Para valores constantes que no cambian
  • var → Forma antigua, evitar en código moderno

Tipos de datos 

// Números
let numero = 42;

// Textos (strings)
let texto = "Hola Mundo";

// Booleanos
let esVerdadero = true;

// Arrays (listas)
let frutas = ["manzana", "pera", "uva"];

// Objetos
let persona = {
  nombre: "Juan",
  edad: 30
};

Funciones

Las funciones son bloques de código reutilizables que realizan una tarea específica. 

// Declaración de función
function saludar(nombre) {
  return "Hola " + nombre;
}

// Llamada a la función
let mensaje = saludar("María");
console.log(mensaje); // Muestra: Hola María

// Función flecha (moderna)
const sumar = (a, b) => {
  return a + b;
};

console.log(sumar(5, 3)); // Muestra: 8

Condicionales

Los condicionales permiten ejecutar código solo si se cumple una condición. 

let edad = 18;

if (edad >= 18) {
  console.log("Eres mayor de edad");
} else {
  console.log("Eres menor de edad");
}

// Operador ternario (forma corta)
let mensaje = edad >= 18 ? "Mayor" : "Menor";
console.log(mensaje);

Bucles

Los bucles permiten repetir código múltiples veces. 

// Bucle for
for (let i = 0; i < 5; i++) {
  console.log("Número: " + i);
}

// Bucle para arrays
let colores = ["rojo", "verde", "azul"];

colores.forEach(color => {
  console.log(color);
});

Manipulación del DOM

El DOM (Document Object Model) permite a JavaScript interactuar con el HTML de la página.

Seleccionar elementos

// Por ID
let titulo = document.getElementById("titulo");

// Por clase
let botones = document.querySelectorAll(".boton");

// Por etiqueta
let parrafos = document.getElementsByTagName("p");

Modificar contenido

// Cambiar texto
titulo.textContent = "Nuevo título";

// Cambiar HTML
titulo.innerHTML = "<strong>Importante</strong>";

Modificar estilos

// Cambiar color
titulo.style.color = "red";

// Añadir clase CSS
titulo.classList.add("destacado");

Eventos

Los eventos permiten que JavaScript responda a las acciones del usuario. 

// Evento de clic
let boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
  alert("¡Botón presionado!");
});

// Evento con función flecha
boton.addEventListener("click", () => {
  console.log("Clic detectado");
});

// Eventos comunes
input.addEventListener("input", () => { /* cambio en input */ });
form.addEventListener("submit", () => { /* envío de formulario */ });
window.addEventListener("load", () => { /* página cargada */ });

Ejemplo práctico completo

Veamos un ejemplo que combina HTML, CSS y JavaScript para crear un contador interactivo: 

<!-- HTML -->
<div id="contador">
  <h2>Contador: <span id="numero">0</span></h2>
  <button id="incrementar">+1</button>
  <button id="decrementar">-1</button>
  <button id="reset">Reset</button>
</div>

<script>
// JavaScript
let numero = 0;
const display = document.getElementById("numero");

document.getElementById("incrementar").addEventListener("click", () => {
  numero++;
  display.textContent = numero;
});

document.getElementById("decrementar").addEventListener("click", () => {
  numero--;
  display.textContent = numero;
});

document.getElementById("reset").addEventListener("click", () => {
  numero = 0;
  display.textContent = numero;
});
</script>

Métodos útiles de arrays 

let numeros = [1, 2, 3, 4, 5];

// map: transforma cada elemento
let dobles = numeros.map(n => n * 2);
// Resultado: [2, 4, 6, 8, 10]

// filter: filtra elementos
let mayores = numeros.filter(n => n > 3);
// Resultado: [4, 5]

// reduce: reduce a un solo valor
let suma = numeros.reduce((total, n) => total + n, 0);
// Resultado: 15

// find: encuentra el primer elemento que cumple condición
let encontrado = numeros.find(n => n > 3);
// Resultado: 4

Ejercicio práctico

Crea una página que contenga:

  • Un campo de texto para ingresar tu nombre
  • Un botón que al hacer clic muestre "Hola [nombre]"
  • Un segundo botón que cambie el color de fondo de la página
  • Un contador que muestre cuántas veces se ha cambiado el color

Este ejercicio combina selección de elementos, eventos, manipulación del DOM y variables.

Consejos para aprender JavaScript

  • Practica escribiendo código todos los días, aunque sean 15 minutos
  • Usa console.log() constantemente para ver qué hace tu código
  • Empieza con proyectos pequeños y ve aumentando la complejidad
  • Lee mensajes de error con atención, te dicen exactamente qué falla
  • No memorices todo, aprende a buscar y entender la documentación

CSS — Domina el diseño web

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje utilizado para definir el aspecto visual de una página web. Mientras que HTML se encarga de crear la estructura y el contenido, CSS controla cómo se muestra ese contenido.

Con CSS puedes modificar colores, tamaños, márgenes, posiciones, tipografías, animaciones y efectos visuales.

Una forma sencilla de entenderlo es esta: el HTML es la estructura de la página y el CSS es el diseño que la hace atractiva.

Sintaxis básica de CSS

CSS funciona mediante reglas. Cada regla indica qué elemento se va a modificar y qué estilo se le va a aplicar. 

p {
  color: blue;
  font-size: 16px;
}

Selectores fundamentales

Los selectores permiten indicar a qué elementos HTML se les aplicarán los estilos. Existen diferentes tipos de selectores según el caso de uso.

  • Selector de etiqueta → Aplica estilos a todas las etiquetas del mismo tipo
  • Selector de clase → Permite reutilizar estilos en varios elementos
  • Selector de ID → Se usa para un elemento único en la página 
/* Selector de etiqueta */
p {
  color: #333;
}

/* Selector de clase */
.tarjeta {
  background-color: #f5f7fa;
  padding: 20px;
}

/* Selector de ID */
#principal {
  max-width: 800px;
}

Colores en CSS

CSS ofrece varias formas de definir colores. Las más comunes son los nombres predefinidos, los valores hexadecimales y el formato RGB. 

h1 {
  color: purple;
}

p {
  color: #555;
}

button {
  background-color: rgb(30, 60, 114);
}

Texto y tipografía

CSS permite controlar cómo se ve el texto: tipo de letra, tamaño, separación entre líneas y legibilidad general. 

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 2.5rem;
}

p {
  line-height: 1.6;
}

Espaciado y modelo de caja

En CSS, todos los elementos se comportan como cajas. Controlar márgenes, relleno y bordes es esencial para organizar el diseño. 

.tarjeta {
  margin: 20px;
  padding: 20px;
  border-radius: 12px;
}

Flexbox (layout moderno)

Flexbox es un sistema de diseño que facilita la alineación y distribución de elementos dentro de un contenedor. 

.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

Sombras y efectos

Las sombras ayudan a dar profundidad y jerarquía visual a los elementos. 

.tarjeta {
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

Ejercicio final

Diseña una tarjeta de presentación aplicando los conceptos aprendidos en esta sección.

  • Fondo blanco
  • Texto centrado
  • Tipografía moderna
  • Bordes redondeados
  • Sombra suave

Este ejercicio permite practicar sintaxis, selectores, tipografía, espaciado y efectos visuales. 

.tarjeta {
  background-color: #fff;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  font-family: Arial, sans-serif;
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

Ejercicio

Vista Previa