WebLab Practicar

DE LA PRIMERA ETIQUETA A LA PRIMERA INTERACCIÓN

La web se aprende
construyéndola.

Una guía para entender HTML, CSS y JavaScript. Lee, prueba y descubre cómo cada pieza cambia lo que ves.

Sin frameworks · Ejemplos editables · A tu ritmo

tu-primera-web.html
ASÍ SE CONECTAN

Hola, mundo.

Tu idea empieza con una estructura.

  1. HTML<h1>Hola, mundo.</h1>
  2. CSScolor: #233de0;
  3. JSbutton.addEventListener(...);

TRES LENGUAJES. UNA MISMA PÁGINA.

Construye una base que entiendas.

Empieza por el contenido, dale forma y después añade comportamiento.

01

HTML

El significado y la estructura.

  • Historia y anatomía del documento
  • Referencia de etiquetas
  • Semántica, formularios y accesibilidad
Estudiar HTML
02

CSS

El diseño y la distribución.

  • Cascada, selectores y caja
  • Grid, Flexbox y diseño móvil
  • Controles con resultados visuales
Estudiar CSS
03

JavaScript

La lógica y la interacción.

  • Variables, funciones y colecciones
  • DOM, eventos y asincronía
  • Código editable con consola
Estudiar JavaScript

UN MÉTODO SENCILLO

No memorices sin probar.

  1. 01

    Comprende

    Lee qué hace cada elemento y qué problema resuelve.

  2. 02

    Experimenta

    Cambia una propiedad o una instrucción y compara el resultado.

  3. 03

    Decide

    Revisa cuándo usarlo, cuándo evitarlo y qué alternativa existe.

ANTES DE EMPEZAR

Tus primeras preguntas.

¿Necesito instalar algo?

Para leer y practicar aquí basta un navegador moderno. Para trabajar con tus propios archivos puedes usar un editor y un servidor local, como Live Server.

¿HTML, CSS y JavaScript hacen lo mismo?

No. HTML expresa estructura y significado; CSS decide la presentación; JavaScript maneja lógica e interacciones. Se complementan.

¿Está todo el lenguaje explicado?

HTML contiene una referencia amplia de elementos vigentes y una lista de obsoletos. CSS y JavaScript cubren las bases y los recursos principales; sus estándares y APIs son mucho más extensos y enlazamos la referencia completa.

¿En qué orden estudio?

HTML, CSS y JavaScript. Construye primero una página sencilla, hazla adaptable y después añade una interacción pequeña. Puedes volver a las referencias cuando lo necesites.

DEL CÓDIGO A LA COMPOSICIÓN

Aprende también a diseñar.

Da intención a tus páginas: orden, ritmo, tipografía y color.

04

Composición

Jerarquía, retícula de 12 columnas, distribuciones, 8 puntos y C.R.A.P.

Estudiar composición
05

Tipografía

12 fuentes reales, seis familias, elección por contexto y escala interactiva.

Estudiar tipografía
06

Color

Tonos, armonías, paletas por negocio, 60–30–10 y contraste.

Estudiar color

CONVIERTE LA TEORÍA EN CRITERIO

Ahora comprueba lo que sabes.

Practica un reto, prueba una interfaz y consulta su documentación.