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

2
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.

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 usa para crear la estructura de una página web.

Con HTML definimos títulos, textos, imágenes, enlaces y secciones. HTML no da estilo, solo organiza el contenido.

¿Qué es una etiqueta?

HTML funciona mediante etiquetas. La mayoría tienen una apertura y un cierre. 

<p>Este es un párrafo</p>
<h1>Este es un título</h1>
  • <p> → Párrafo
  • <h1> → Título principal
  • <h2> a <h6> → Subtítulos

Estructura básica de una página

Toda página HTML tiene una estructura básica obligatoria. 

<!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

<p>: Párrafos

<strong>: Texto importante

<em>: Texto enfatizado

Enlaces e imágenes

<a>: Enlaces

<img>: Imágenes

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

Contenedores

<div>: Contenedor genérico

<section>: Sección

<header>: Cabecera

<footer>: Pie de página

Listas en HTML

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

Ejercicio práctico

Crea una página HTML que tenga:

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

Este ejercicio te ayuda a dominar la estructura básica de 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

CSS — Domina el diseño web

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje que se usa para diseñar páginas web. Mientras HTML crea la estructura, CSS decide cómo se ve: colores, tamaños, posiciones, animaciones y efectos visuales.

Piensa en CSS como la ropa del HTML. El HTML es el cuerpo, el CSS es el estilo.

Sintaxis básica de CSS

Una regla CSS tiene tres partes: selector, propiedad y valor. 

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

Selectores fundamentales

Los selectores indican a qué elementos se aplican los estilos.

  • Selector de etiqueta → afecta a todas las etiquetas
  • Selector de clase → reutilizable
  • Selector de ID → único
/* Etiqueta */
p {
  color: #333;
}

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

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

Colores en CSS

CSS permite usar colores por nombre, hexadecimal o RGB. 

h1 {
  color: purple;
}

p {
  color: #555;
}

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

Texto y tipografía

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

h1 {
  font-size: 2.5rem;
}

p {
  line-height: 1.6;
}

Espaciado y caja

Todo en CSS es una caja. Controlar márgenes y relleno es clave. 

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

Flexbox (layout moderno)

Flexbox sirve para alinear y distribuir elementos fácilmente. 

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

Sombras y efectos

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

Ejercicio final

Diseña una tarjeta de presentación para tu amigo que tenga:

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

Este ejercicio combina todo lo aprendido hasta ahora. 

.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