infodocencia.net · Fundamentos Web

Aprende a programar HTML & JavaScript

Desde la primera etiqueta HTML hasta animaciones interactivas con Canvas. Un curso práctico, progresivo y con ejercicios reales que puedes ejecutar en el navegador.

▶ Acceder al curso Ver contenidos →

// programa del curso

Bloques de aprendizaje

El curso avanza por bloques que se construyen uno sobre otro. Cada ejercicio tiene un nombre numerado — tu progreso es siempre visible.

BLOQUE 01 · 001–012

Fundamentos HTML

Primera etiqueta, estructura head/body, contenedores, estilos en línea, eventos onLoad, asignaciones y maquetación básica.

<html> <div> style= onLoad

BLOQUE 02 · 100–103

CSS & Multimedia

Hojas de estilo, colores seguros, vídeo y audio HTML5, menús CSS, el despertador JavaScript y animaciones con estilos.

CSS <video> setInterval className

BLOQUE 03 · 1000–1100

JavaScript Avanzado

Ecuaciones de primer y segundo grado, sistemas de ecuaciones, funciones, eval, DOM y manipulación dinámica de elementos.

function DOM getElementById innerHTML

BLOQUE 04 · 1200–1800

Canvas & Proyectos

Dibujo con Canvas 2D, animaciones, juegos interactivos (Pong, Conecta 4, Simon), pizarra digital y generación de fractales y espirales de primos.

canvas getContext requestAnimationFrame touch

// habilidades adquiridas

¿Qué aprenderás?

Al terminar el curso dominarás los fundamentos que necesitas para construir páginas web interactivas desde cero.

HTML & Estructura

Etiquetas y jerarquía de documentos

Head, body, contenedores semánticos

Formularios e inputs

Multimedia: video, audio, imágenes

Maquetación con div y clases CSS

Hojas de estilo y colores seguros

Menús desplegables en CSS puro

Transiciones y pseudoclases

JavaScript & DOM

Variables, tipos y operadores

Condicionales if/else y switch

Bucles for, while, do-while

Arrays y recorridos con length

Funciones con parámetros

getElementById, innerHTML, className

Canvas 2D y animaciones

Eventos de teclado y táctiles

// ejemplos del curso

Del código al resultado

Cada concepto del glosario se practica con código real que ves ejecutarse en el momento.

001_primeraEtiqueta.html

<!-- Primera etiqueta HTML -->
<html>
  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Mi primera página web.</p>
  </body>
</html>

005_Asignacion.html

var nombre = prompt("Tu nombre:");
var saludo = "Hola, " + nombre;

document.getElementById('resultado')
  .innerHTML = saludo;

// Variables + DOM en acción

007_Evaluacion_Recorrido.html

var lista = [3, 7, 12, 5];
var suma = 0;

for(var i = 0; i < lista.length; i++){
  suma += lista[i];
}
// suma = 27 · arrays y bucles

1072_Funciones_Canvas.html

var ctx = canvas.getContext('2d');

function dibujarCirculo(x, y, r){
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2);
  ctx.fillStyle = '#00c8e0';
  ctx.fill();
}

// el docente

Instructor del curso

Sergio

Docente · Programación Web

Apasionado de la enseñanza del desarrollo web desde los fundamentos. Este curso nace de la experiencia en el aula: ejercicios numerados, glosario acumulativo y proyectos finales que los alumnos crean desde cero. Cada fichero del curso es un paso pequeño y concreto hacia el dominio real del lenguaje.