100JSProjects
AprenderProyectosExplorar todos los proyectos
ESPACIO_100JS/Crear · Aprender · Repetir
100JSProjects

Aprende JavaScript creando proyectos prácticos.

01Explorar

./Todos los proyectos./Guías de aprendizaje./Acerca de./Contacto./Privacidad

02Recursos

./Repositorio de GitHub./Apoyar el proyecto

© 2026 100 JS Projects. Creado para desarrolladores.

TérminosCookiesContacto
JSAprende JavaScript construyendo

Crea proyectos reales con JavaScript

Explora proyectos de JavaScript para principiantes con demostraciones en vivo y el código fuente completo en HTML, CSS y JavaScript.

</>Explorar proyectosComenzar un proyecto
  • Ideales para principiantes
  • Código fuente incluido
  • Acceso gratuito
HTMLCSSJavaScript
1
2
3
4
5
6
7
const proyecto = {
titulo: 'Tu próximo proyecto',
conceptos: ['DOM', 'Eventos'],
dificultad: 'Principiante',
codigoFuente: true
};
crear(proyecto);
Proyecto listo para crear
JSExplora todos los proyectos de JavaScriptExplora por dificultad o concepto.Explorar proyectos

Elige lo que quieres practicar

Explora proyectos por dificultad o concéntrate en un concepto específico de JavaScript.

JS//

Proyectos para principiantes

Comienza con proyectos accesibles que desarrollan bases sólidas de JavaScript.

Ver todos proyectos para principiantes
Calculadora de propinas project preview
PrincipianteSelección del DOM

Calculadora de propinas

Calcula el total final a partir del importe de la cuenta y el porcentaje de propina.

Crear una calculadora de propinas →
Conversor de temperatura project preview
PrincipianteSelección del DOM

Conversor de temperatura

Convierte valores introducidos por el usuario y muestra el resultado al instante.

Crear un conversor de temperatura →
Carrusel de testimonios project preview
PrincipiantesetTimeout

Carrusel de testimonios

Mueve los elementos mientras mantienes sincronizado el contenido activo.

Crear un carrusel de testimonios →
Calculadora de propinas vista previa del proyecto
PrincipianteCalculadoras

Calculadora de propinas

Calcula el total final a partir del importe de la cuenta y el porcentaje de propina.

Cálculos de porcentajesValores de entrada
Crear una calculadora de propinas
Conversor de temperatura vista previa del proyecto
PrincipianteConversores

Conversor de temperatura

Convierte valores introducidos por el usuario y muestra el resultado al instante.

Cálculos numéricosValores de entrada
Crear un conversor de temperatura
Carrusel de testimonios vista previa del proyecto
PrincipianteInterfaz y animación

Carrusel de testimonios

Mueve los elementos mientras mantienes sincronizado el contenido activo.

setTimeoutCálculos numéricos
Crear un carrusel de testimonios
Temporizador Pomodoro vista previa del proyecto
PrincipianteTiempo y productividad

Temporizador Pomodoro

Crea controles prácticos para iniciar, detener y reiniciar un temporizador.

timers set intervalCálculos numéricos
Crear un temporizador Pomodoro
Ver todos proyectos para principiantes→
JS//

Proyectos intermedios

Trabaja con proyectos que incluyen lógica e interacciones más avanzadas.

Ver todos proyectos intermedios
Calculadora de edad project preview
IntermedioEventos de clic

Calculadora de edad

Calcula la edad exacta de una persona a partir de su fecha de nacimiento.

Crear una calculadora de edad →
Aplicación de recetas project preview
IntermedioFetch API

Aplicación de recetas

Convierte datos de recetas en tarjetas de recetas útiles y dinámicas.

Crear una aplicación de recetas →
Simulador de lanzamiento de dados project preview
IntermediosetTimeout

Simulador de lanzamiento de dados

Genera resultados aleatorios y muestra un nuevo lanzamiento de dados en cada acción.

Crear un simulador de lanzamiento de dados →
Calculadora de edad vista previa del proyecto
IntermedioCalculadoras

Calculadora de edad

Calcula la edad exacta de una persona a partir de su fecha de nacimiento.

Objeto DateValores de entrada
Crear una calculadora de edad
Aplicación de recetas vista previa del proyecto
IntermedioProyecto con API

Aplicación de recetas

Convierte datos de recetas en tarjetas de recetas útiles y dinámicas.

api fetcharrays methods
Crear una aplicación de recetas
Simulador de lanzamiento de dados vista previa del proyecto
IntermedioJuegos

Simulador de lanzamiento de dados

Genera resultados aleatorios y muestra un nuevo lanzamiento de dados en cada acción.

setTimeoutnumbers random
Crear un simulador de lanzamiento de dados
Piedra, papel o tijera vista previa del proyecto
IntermedioJuegos

Piedra, papel o tijera

Gestiona las elecciones del jugador, calcula el resultado y actualiza la puntuación.

Lógica condicionalnumbers random
Crear un juego de piedra, papel o tijera
Ver todos proyectos intermedios→
JS//

Practica eventos de clic

Crea interfaces que respondan claramente a las acciones del usuario.

Ver todos practica eventos de clic
Cronómetro simple project preview
Eventos de clicPrincipiante

Cronómetro simple

Controla el tiempo transcurrido con controles para iniciar, detener y reiniciar el cronómetro.

Crear un cronómetro simple →
Ventana emergente de tráiler de vídeo project preview
Eventos de clicPrincipiante

Ventana emergente de tráiler de vídeo

Cree una ventana emergente de avance de video con HTML, CSS y JavaScript mientras practica eventos de clic y selección de DOM.

Crear ventana emergente de tráiler de vídeo →
Sección de pestañas project preview
Eventos de clicPrincipiante

Sección de pestañas

Cree una sección de pestañas con HTML, CSS y JavaScript mientras practica eventos de clic y selección de DOM.

Crear sección de pestañas →
Cronómetro simple vista previa del proyecto
Eventos de clicPrincipiante

Cronómetro simple

Controla el tiempo transcurrido con controles para iniciar, detener y reiniciar el cronómetro.

Objeto Datetimers set interval
Crear un cronómetro simple
Ventana emergente de tráiler de vídeo vista previa del proyecto
Eventos de clicPrincipianteComponente de interfaz

Ventana emergente de tráiler de vídeo

Cree una ventana emergente de avance de video con HTML, CSS y JavaScript mientras practica eventos de clic y selección de DOM.

media audioCálculos numéricos
Crear ventana emergente de tráiler de vídeo
Sección de pestañas vista previa del proyecto
Eventos de clicPrincipiante

Sección de pestañas

Cree una sección de pestañas con HTML, CSS y JavaScript mientras practica eventos de clic y selección de DOM.

arrays methodsCálculos numéricos
Crear sección de pestañas
Barra de progreso de pasos vista previa del proyecto
Eventos de clicIntermedio

Barra de progreso de pasos

Cree una barra de progreso de pasos con HTML, CSS y JavaScript mientras practica eventos de clic y selección de DOM.

arrays methodsCálculos numéricos
Crear barra de progreso de pasos
Ver todos practica eventos de clic→
JS//

Practica temporizadores de JavaScript

Trabaja con comportamientos temporizados mediante setTimeout y setInterval.

Ver todos practica temporizadores de javascript
Convertidor de peso project preview
Temporizadores de JavaScriptIntermedio

Convertidor de peso

Crea un conversor de unidades de peso con HTML, CSS y JavaScript mientras practicas setTimeout y los eventos de entrada.

Crear un conversor de peso →
Generador de contraseñas aleatorias project preview
Temporizadores de JavaScriptIntermedio

Generador de contraseñas aleatorias

Cree un generador de contraseñas aleatorias con HTML, CSS y JavaScript mientras practica setTimeout y eventos de clic.

Crear generador de contraseñas aleatorias →
Estadísticas de perfil project preview
Temporizadores de JavaScriptPrincipiante

Estadísticas de perfil

Cree estadísticas de perfil con HTML, CSS y JavaScript mientras practica la selección de setTimeout y DOM.

Crear estadísticas de perfil →
Convertidor de peso vista previa del proyecto
Temporizadores de JavaScriptIntermedioConversores

Convertidor de peso

Crea un conversor de unidades de peso con HTML, CSS y JavaScript mientras practicas setTimeout y los eventos de entrada.

Cálculos numéricossetTimeout
Crear un conversor de peso
Generador de contraseñas aleatorias vista previa del proyecto
Temporizadores de JavaScriptIntermedio

Generador de contraseñas aleatorias

Cree un generador de contraseñas aleatorias con HTML, CSS y JavaScript mientras practica setTimeout y eventos de clic.

setTimeoutnumbers random
Crear generador de contraseñas aleatorias
Estadísticas de perfil vista previa del proyecto
Temporizadores de JavaScriptPrincipiante

Estadísticas de perfil

Cree estadísticas de perfil con HTML, CSS y JavaScript mientras practica la selección de setTimeout y DOM.

setTimeoutarrays methods
Crear estadísticas de perfil
Barra de carga vista previa del proyecto
Temporizadores de JavaScriptPrincipiante

Barra de carga

Cree una barra de carga con HTML, CSS y JavaScript mientras practica la selección de setTimeout y DOM.

setTimeoutCálculos numéricos
Crear barra de carga
Ver todos practica temporizadores de javascript→