Proyectos de JavaScript para principiantes: Empieza a programar hoy

Leer un tutorial de JavaScript y terminarlo son dos experiencias totalmente distintas.

La primera se siente productiva. En la segunda es donde realmente aprendes. ¿Llevas un tiempo machacando lecciones de JS y tu código sigue viviendo dentro de los ejercicios de otra persona? Bueno, eso se acabó.

Saber qué son los bucles no sirve de nada hasta que usas uno para hacer que algo funcione. Los tutoriales te enseñan las palabras; los proyectos te enseñan a hablar el idioma.

Así que aquí tienes 18 proyectos de JavaScript para principiantes, cada uno con una pequeña guía para que sepas por dónde empezar. Elige uno, créalo y pasa al siguiente.

Primero, domina las bases de JavaScript

Todos los proyectos de JS para principiantes se apoyan en variables, funciones, condicionales, bucles, arrays, objetos y un puñado de métodos del DOM. Si aún no los dominas de forma natural, pasarás más tiempo peleándote con la sintaxis que programando.

El curso de JavaScript de Coddy está diseñado justo para esto. Lecciones de cinco minutos que te guían paso a paso por el núcleo del lenguaje. Escribes y ejecutas código directamente en el navegador sobre la marcha. Sin instalaciones, sin configurar entornos, sin el típico "instala Node primero".

Bugsy, nuestro asistente de IA integrado, está ahí en cada lección por si algo no te cuadra.

Si puedes leer, escribir y explicar lo siguiente sin dudar, estás listo. Si no, repasa los conceptos básicos de JS en Coddy hasta que lo consigas.

• Variables y tipos primitivos (string, number, boolean)
• Sentencias if/else y switch
• Bucles for, while y for...of
• Funciones y arrow functions (funciones flecha)
• Arrays y sus métodos más comunes (push, pop, map, filter, find)
• Objetos y notación de punto/corchetes
• Acceso básico al DOM (querySelector, addEventListener, textContent)

¿Los tienes? ¡Perfecto! ¡A programar!

Proyectos iniciales: Hola, DOM

Estos proyectos son pequeños a propósito. Se centran en uno o dos conceptos, de modo que si algo falla, puedas encontrar la causa rápidamente. Y oye, ¡no te los saltes solo porque parezcan sencillos!

1. El clásico contador

Qué es: un número en pantalla con un botón de más (+) y otro de menos (-).

Por qué es útil: es la aplicación más pequeña posible que combina HTML, CSS y JavaScript. Trabajarás con el estado (una variable que cambia), actualizaciones del DOM y escuchadores de eventos (event listeners). Unas veinte líneas de código, más o menos.

Cómo crearlo: un span para el número y dos botones. Añade un let count = 0. Conecta escuchadores de eventos de clic en cada botón para aumentar o disminuir el contador, y luego actualiza el textContent del span. Reto extra: un botón de reinicio y un límite mínimo en cero.

2. Calculadora de propinas

Qué es: introduces el importe de la cuenta y un porcentaje de propina, y ves la propina y el total.

Por qué es útil: te introduce a los inputs de formulario y a parseFloat, algo con lo que casi todo el mundo se tropieza la primera vez. También te darás cuenta de lo fácil que es romper tus cálculos matemáticos si te olvidas de NaN.

Cómo crearlo: dos inputs numéricos (cuenta, porcentaje de propina), un botón y dos spans de salida. Al hacer clic, procesa ambos inputs, calcula, redondea a dos decimales con .toFixed(2) y muestra el resultado. Reto extra: una opción para dividir la cuenta entre varias personas.

3. Generador de paletas de colores

Qué es: haces clic en un botón y obtienes un color aleatorio que se muestra como una muestra de color junto con su código hexadecimal.

Por qué es útil: números aleatorios, template literals (plantillas de cadena) y estilos en línea en una sola aplicación diminuta. El resultado es muy visual, lo que lo hace divertido.

Cómo crearlo: una función que devuelva un número entero aleatorio entre 0 y 255 tres veces, y luego una cadena como rgb(${r}, ${g}, ${b}). Aplica eso como color de fondo de la muestra. Reto extra: una paleta completa de cinco colores en lugar de una sola muestra.

4. Generador de frases aleatorias

Qué es: un botón que cambia la frase mostrada por una aleatoria de tu array.

Por qué es útil: practicas con arrays y Math.random, además de conseguir un logro rápido que puedes compartir de verdad.

Cómo crearlo: define un array de objetos de frases con text y author. Al hacer clic, elige un índice aleatorio y actualiza dos elementos. Reto extra: un enlace para "tuitear esta frase" que abra un tuit ya redactado.

5. Reloj digital

Qué es: la hora actual en pantalla, actualizándose cada segundo.

Por qué es útil: aquí es donde conoces setInterval y el objeto Date, que usarás constantemente. Rellenar los minutos y segundos de un solo dígito con un cero a la izquierda es un pequeño rompecabezas en sí mismo.

Cómo crearlo: una función que lea new Date(), dé formato a las horas, minutos y segundos, y los escriba en un span. Envuélvela en setInterval(updateClock, 1000). Reto extra: un interruptor para cambiar entre formato de 12 y 24 horas.

6. Calculadora de IMC (Índice de Masa Corporal)

Qué es: introduces altura y peso, y obtienes el valor del IMC y su categoría correspondiente.

Por qué es útil: un caso real de condicionales que eligen qué etiqueta mostrar. También es una oportunidad para practicar el diseño limpio de formularios, lo cual nunca viene mal.

Cómo crearlo: inputs numéricos para la altura (cm) y el peso (kg). Al enviar el formulario, calcula el IMC con la fórmula estándar, ejecuta una cadena if/else para elegir la categoría y muestra ambos valores. Reto extra: unidades imperiales con un interruptor.

Proyectos intermedios: más piezas en movimiento

Una vez que hayas hecho un puñado de proyectos, notarás que los patrones se repiten. El clic de un botón cambia una variable, una función actualiza la interfaz de usuario basándose en esa variable, y vuelta a empezar. En eso consiste la mayor parte del desarrollo frontend. Estos proyectos te pedirán gestionar un poco más de estado a la vez.

7. Lista de tareas (To-do List)

Qué es: escribes una tarea, pulsas Enter y aparece en una lista. Haces clic en un elemento para marcarlo como completado. Haces clic en la X para eliminarlo.

Por qué es útil: es el "hola mundo" de los frameworks de frontend por una buena razón. Gestionarás un array, lo renderizarás en el DOM y manejarás dos o tres eventos. Si puedes crear una lista de tareas desde cero, habrás dejado de ser un principiante absoluto.

Cómo crearlo: mantén un array de objetos de tareas con id, text y done. Vuelve a renderizarlo como un <ul> después de cada cambio. Al pulsar Enter, añade (push) una nueva tarea. Al hacer clic, alterna el estado de completado o usa splice en el array. Reto extra: persistencia con localStorage para que las tareas sobrevivan al recargar la página.

8. Cronómetro con tiempos de vuelta

Qué es: un cronómetro con botones de inicio, parada, reinicio y vuelta.

Por qué es útil: es más complicado que el reloj, porque gestionas tu propia variable de tiempo transcurrido en lugar de preguntárselo al sistema. Trabajarás con Date.now(), intervalos y lógica de pausa.

Cómo crearlo: almacena un startTime y un acumulador elapsed. Al iniciar, establece startTime = Date.now() y ejecuta un intervalo. Al detener, haz elapsed += Date.now() - startTime. Al marcar una vuelta, añade la lectura actual a un array y renderízala. Reto extra: dar un formato elegante a los milisegundos.

9. Temporizador Pomodoro

Qué es: 25 minutos de trabajo, 5 minutos de descanso, y repetir. Un pitido avisa cuando toca cambiar.

Por qué es útil: máquinas de estado para principiantes. Estás en modo "trabajo", "descanso" o "pausado", y la interfaz cambia según el modo activo.

Cómo crearlo: el mismo patrón de intervalo que el cronómetro, pero en cuenta regresiva. Haz un seguimiento del modo en el que estás. Cuando el temporizador llegue a cero, cambia de modo y reproduce un sonido corto con new Audio('beep.mp3').play(). Reto extra: un contador de sesiones de trabajo completadas en el día.

10. Aplicación de cuestionarios (Quiz App)

Qué es: un cuestionario de opción múltiple que te da una puntuación al final.

Por qué es útil: combina iteración de arrays, condicionales y el concepto de "estado de pantalla" (pregunta actual, pantalla de resultados).

Cómo crearlo: define un array de objetos de preguntas con text, options y correctIndex. Muestra una pregunta a la vez. Al hacer clic en una respuesta, compárala con correctIndex, aumenta la puntuación y avanza el índice. Cuando se acaben las preguntas, muestra una pantalla de resultados. Reto extra: un temporizador por pregunta.

11. Generador de contraseñas

Qué es: eliges una longitud y qué tipos de caracteres incluir, y obtienes una contraseña aleatoria.

Por qué es útil: manipulación de cadenas, aleatoriedad e inputs de tipo checkbox, todo en uno. Además, es realmente útil, algo poco común en proyectos de práctica.

Cómo crearlo: crea cuatro conjuntos de caracteres (minúsculas, mayúsculas, números, símbolos). Concatena los conjuntos activos según las casillas marcadas. Haz un bucle n veces eligiendo un carácter aleatorio del conjunto combinado. Reto extra: un indicador de seguridad que califique el resultado.

12. Validador de formularios

Qué es: un formulario de registro que resalta los campos no válidos en rojo y muestra un mensaje de error debajo de cada uno.

Por qué es útil: el JS del mundo real hace mucho de esto. Expresiones regulares (regex), eventos de foco y manipulación del DOM, todo aplicado a un diseño de formulario familiar.

Cómo crearlo: pequeñas funciones de validación para cada campo (patrón de correo, longitud de contraseña, contraseñas coincidentes). En el evento blur (pérdida de foco), ejecuta el validador, añade o quita una clase en el input y actualiza su span de error. Al enviar, continúa solo si todos los validadores son correctos. Reto extra: validación en tiempo real tras perder el foco por primera vez.

Minijuegos: donde empieza la diversión

Los juegos llevan tus habilidades al siguiente nivel porque implican un estado continuo, sincronización e interacción. La primera vez que logras mover píxeles en un canvas, algo hace clic en tu cabeza sobre lo que realmente es JavaScript.

13. Piedra, papel o tijera

Qué es: eliges piedra, papel o tijera. El ordenador también elige. Mira quién gana.

Por qué es útil: un ejercicio limpio de condicionales y aleatoriedad, con un momento de victoria/derrota muy satisfactorio.

Cómo crearlo: tres botones para la elección del jugador. Al hacer clic, el ordenador elige al azar entre las mismas tres opciones. Usa una pequeña tabla de búsqueda (o if/else anidados) para decidir el resultado. Lleva la cuenta de victorias y derrotas a lo largo de las rondas. Reto extra: partida al mejor de cinco con pantalla de victoria.

14. Tres en raya (Tic-Tac-Toe)

Qué es: el clásico juego de cuadrícula de 3x3, donde dos jugadores se turnan en la misma pantalla.

Por qué es útil: te introduce a usar un array de longitud 9 como una cuadrícula bidimensional plana y al concepto de comprobar condiciones de victoria. Es genial terminar algo tan icónico.

Cómo crearlo: renderiza nueve celdas. Haz un seguimiento de a quién le toca. Al hacer clic en una celda, coloca la marca del jugador actual y comprueba las ocho líneas ganadoras posibles. Muestra un banner de ganador cuando alguien venza. Reto extra: una IA básica que elija cualquier celda libre al azar.

15. Juego de memoria (Memory Match)

Qué es: una cuadrícula de cartas boca abajo. Haces clic en dos. Si coinciden, se quedan boca arriba. Si no, se vuelven a dar la vuelta.

Por qué es útil: mezcla de arrays, temporizadores y una condición de victoria clara. La primera vez que programes la lógica de "dar la vuelta después de un segundo", entenderás de verdad cómo funciona setTimeout.

Cómo crearlo: duplica un array de valores para crear parejas y mézclalos con el algoritmo Fisher-Yates. Renderízalos boca abajo. Al hacer clic, revela la carta. Cuando se revelen dos, compáralas; si coinciden, bloquéalas; si no, vuelve a darles la vuelta tras un breve retraso. Termina el juego cuando coincidan todas las parejas. Reto extra: un contador de movimientos y un registro de la mejor puntuación en localStorage.

16. Juego de adivinar el número

Qué es: el ordenador elige un número entre 1 and 100. Tú intentas adivinarlo y el sistema te dice "más alto" o "más bajo" hasta que aciertas.

Por qué es útil: es sencillo, pero enseña el manejo de inputs, comparaciones y un patrón de "bucle hasta acertar" que se usa en todas partes.

Cómo crearlo: genera un número objetivo una sola vez. Lleva la cuenta de los intentos. En cada intento, compáralo con el objetivo y updatea el mensaje de respuesta. Deja de aceptar inputs una vez que se acierte. Reto extra: limita al jugador a siete intentos, con una pantalla de fin de juego si se queda sin ellos.

17. El ahorcado

Qué es: el ordenador elige una palabra. Adivinas las letras una a una. Los fallos van dibujando el muñeco del ahorcado.

Por qué es útil: es el proyecto con el que perderás el miedo a la manipulación de cadenas. Crear la visualización de las "letras adivinadas" te enseña split, map y join de una sola vez.

Cómo crearlo: elige una palabra de un array. Muestra un guion bajo por cada letra. A medida que el jugador elija una letra, revela las posiciones coincidentes o registra un fallo. Dibuja el ahorcado por fases (normalmente se permiten seis fallos) usando CSS o canvas. Reto extra: cargar palabras desde una API de diccionario pública.

18. El juego de la serpiente (Snake)

Qué es: el clásico juego de la serpiente: come la comida, crece, y muere si te chocas contra ti mismo o contra la pared.

Por qué es útil: este es el proyecto final para un principiante. Trabajarás con una cuadrícula (canvas o CSS), eventos de teclado, un bucle de juego (game loop), detección de colisiones y mecánicas de crecimiento.

Cómo crearlo: renderiza una cuadrícula con CSS o un <canvas>. Almacena la serpiente como un array de objetos de coordenadas. En cada "tick" (intervalo de tiempo), desplaza la serpiente una celda en la dirección actual. Si la nueva cabeza coincide con la posición de la comida, haz crecer la serpiente y genera nueva comida. Si la cabeza choca con una pared o con otra parte de su cuerpo, fin de la partida. Escucha las teclas de dirección para cambiar el rumbo. Reto extra: aumentar la velocidad del juego a medida que aumenta la puntuación.

Extra: Una aplicación del clima

Qué es: introduces una ciudad y obtienes la temperatura actual y una descripción del clima.

Por qué es útil: tu primer contacto real con una API pública y código asíncrono. Cualquier API del clima gratuita te dará lo suficiente para jugar.

Cómo crearlo: consigue una clave de API gratuita. Al enviar el formulario, usa fetch incluyendo la ciudad en la URL. Espera la respuesta, procesa el JSON y actualiza el DOM con los campos relevantes. Envuélvelo todo en un bloque try/catch para que los nombres de ciudades incorrectos no rompan la interfaz. Reto extra: una vista con el pronóstico para cinco días.

Cómo terminar los proyectos que empiezas

La lista anterior no sirve de nada si creas la mitad y abandonas el resto. Aquí tienes algunos patrones que te ayudarán:

• Elige el más pequeño que te entusiasme. El entusiasmo te ayuda a empezar. Que sea pequeño te ayuda a terminar. Luego, repite.
• Limita el tiempo, no el alcance (Time-boxing). Dedícale una o dos horas de máxima concentración a un proyecto inicial. Si no lo terminas, tómalo como información sobre dónde te has atascado, no como un fracaso.
• Primero programa, luego pule. Termina la versión fea pero funcional antes de tocar el CSS. Algo pulido pero roto es peor que algo feo pero que funciona.
• No saltes de tutorial en tutorial. Ver tres tutoriales diferentes para el mismo proyecto significa que has perdido el tiempo sin escribir una sola línea de código. Crea algo imperfecto y luego busca las partes específicas que no sepas resolver.
• Practica las bases los días que no puedas programar. Cinco minutos de Coddy en el autobús cuentan como una sesión real. Las rachas se van acumulando.

Este último punto le da sentido a todo. Los proyectos hacen que lo aprendido se sienta real, pero dependen de las bases. Las lecciones diarias cortas son las que evitan que los proyectos parezcan inalcanzables.

Dónde encaja Coddy

Esto no es publicidad para que uses una herramienta específica para crear tus proyectos. Usa el editor que prefieras, ejecuta las cosas en el navegador y alójalas donde quieras.

La parte de la que se encarga Coddy es la que viene antes: conseguir que tus bases de JavaScript sean lo bastante sólidas para que "crear una app de cuestionarios" no signifique "pasar dos horas buscando en Google qué hace .map".

Coddy ha enseñado JavaScript a millones de estudiantes en web, iOS y Android. Las mismas lecciones, el mismo progreso y el mismo Bugsy dondequiera que lo abras.

El plan gratuito cubre todas las lecciones de JS sin necesidad de configuración. Solo estás limitado por un sistema de energía que se recarga tras unas horas.

¿Quieres sesiones ilimitadas y a Bugsy en cada consulta? Los planes de pago cuestan aproximadamente la mitad que otras plataformas similares. De cualquier forma: primero las bases, luego los proyectos.