Seamos sinceros desde el principio. No importa cuántos libros sobre programación leas, vídeos veas o podcasts escuches, si quieres convertirte en un mejor desarrollador, tienes que practicar continuamente.

En el espacio del front-end, existen un montón de frameworks: React, Angular, Vue, sólo por nombrar algunos. Cada uno de ellos es impresionante y sin ellos, el desarrollo front-end no estaría en su estado actual. Pero lo que esos frameworks, además de todas sus diferencias, tienen en común es que todos están basados en JavaScript. Sí, ¡el viejo JS!

JavaScript es lo que hace funcionar la web hoy en día, sin duda. Y para todo desarrollador front-end, no importa si ya tiene experiencia o está al principio de su carrera, es obligatorio conocer los fundamentos de JavaScript, HTML y CSS.

Los frameworks van y vienen, ¡pero JavaScript permanecerá! Pero, ¿cuál es la mejor manera de practicar JavaScript? La mejor respuesta que puedo darte es ¡construir proyectos!

Proyectos de JavaScript

Los proyectos de JavaScript son tutoriales guiados o ideas de proyectos de JavaScript que te ayudan a afinar tus habilidades construyendo aplicaciones reales, sitios web, juegos, componentes, etc. A veces encontrarás ideas de proyectos que sólo contienen un título y unas pocas frases de lo que debes construir.

Ejemplo: Construye un contador con JavaScript que cuente las horas que faltan para que termine el año.

Este formato es bueno si ya tienes algo de experiencia y sólo buscas alguna aportación.

Proyectos de JavaScript para principiantes

Sin embargo, si eres nuevo en el desarrollo web, suele ser mejor que busques ejemplos de proyectos de JavaScript con código fuente o proyectos específicos de JavaScript para principiantes. Estos suelen contener una aplicación de demostración en funcionamiento, un repositorio de GitHub con el código fuente y una guía paso a paso sobre cómo construir el proyecto.

Proyectos de práctica de JavaScript

Así que para que ganes práctica, he enumerado nueve ideas de proyectos de JavaScript impresionantes que puedes hacer para refrescar tus habilidades, aprender cosas nuevas sobre JS y seguir siendo relevante en el futuro. Todos ellos se basan en JavaScript puro, algo de HTML y algo de CSS. Puedes añadirlos a tu portafolio, mostrarlos a reclutadores o potenciales empleadores, o mantenerlos en tu GitHub como referencias para futuros trabajos. Para ser claros: Esto no pretende enseñarte todo sobre JavaScript. Hay cursos perfectos para ti que cubren JS de la A a la Z. Esto es para construir cosas. Para ensuciarse las manos. Trabajar en tu memoria muscular.

Resumen de proyectos JavaScript

• Construye un proyecto JavaScript de aplicación de meditación
• Construye un proyecto JavaScript de teclado virtual
• Construye un proyecto JavaScript de carrito de la compra de comercio electrónico
• Construye un proyecto JavaScript de aplicación del tiempo
• .
• Construye un Proyecto JavaScript de Seguimiento de Problemas
• Construye un Proyecto JavaScript de PIN Pad
• Construye un Proyecto JavaScript de Página de Aterrizaje
• Construye un Proyecto JavaScript de Juego de Piedra, Papel y Tijeras
• Construye un Proyecto JavaScript de Juego de Tic Tac
• Bonus: Construye 9 en 1 Mini Proyectos JavaScript
• Bonus: Ideas de Proyectos JavaScript para Principiantes
• Bonus: Ideas de Proyectos JavaScript para Intermedios
• Bonus: Ideas de Proyectos JavaScript para Avanzados

Para darte una ventaja, he calificado esos proyectos tutoriales para ti. Pero es sólo mi opinión, así que te recomiendo encarecidamente que los pruebes por ti mismo porque tú sabes cómo aprender mejor y en qué nivel te encuentras actualmente.

Construye una App de Meditación

Qué vas a construir

Vas a construir una aplicación que proporcione sonido ambiente para la meditación. Los usuarios pueden elegir entre diferentes temporizadores y sonidos.

Calificación

Este tutorial hace uso de Vanilla JavaScript, precisamente lo que pretendemos. La voz del instructor, así como sus instrucciones, son claras y buenas de entender. Además, aprenderás a manipular el sonido y el vídeo con JS. Este es un proyecto de javascript divertido que realmente disfruto.

5/5 Estrellas

Construye un teclado virtual

Lo que construirás

¡Vas a construir un teclado virtual desde cero con Vanilla JS, HTML y CSS que puede ser utilizado en el navegador y será responsivo y listo para ser tocado!

Valoración

Me gusta la originalidad de este proyecto, es una gran idea de proyecto javascript. No he creado un teclado virtual antes, así que hacer esto con sólo JavaScript, HTML y CSS fue realmente una gran experiencia para mí. La voz del instructor es clara y explica las cosas bastante bien.

5/5 Estrellas

Construir un carrito de la compra de comercio electrónico

Lo que vas a construir

Vas a construir un carrito de la compra que se puede utilizar en las tiendas en línea y sitios de comercio electrónico con Vanilla JS, HTML y CSS. El instructor hace uso de Contentful, que es un CMS sin cabeza para almacenar la información del producto. Aprender a manejar Contentful o un CMS headless, en general, no es el objetivo principal de esta pieza, pero es un gran servicio, así que no te arrepentirás de verlo en acción.

Calificación

La grabación de este tutorial es realmente larga. Por un lado, eso es impresionante pero por otro lado también un poco laborioso. La voz del instructor es clara y buena de entender. A veces es un poco difícil de seguir, pero eso es probablemente debido a la complejidad de este proyecto. Así que este es más bien un proyecto de js intermedio.

4/5 Estrellas

Construye una aplicación meteorológica

Qué construirás

Este proyecto te va a enseñar a construir una aplicación meteorológica con Vanilla JS, HTML y CSS. El instructor utiliza la API de Dark Sky para obtener información meteorológica, lo que es una gran oportunidad para que aprendas a interactuar con las API, otra gran cosa que puedes hacer con javascript.

Calificación

Esto podría ser una buena opción para tu portafolio. Si ya hiciste el proyecto 1., ya conoces al instructor, y te puedo decir que vuelve a entregar alta calidad. Parece que realmente sabe cómo enseñar de una manera comprensible y entretenida.

5/5 Estrellas

Construir un Issue Tracker

Lo que construirás

En este tutorial, vas a construir un issue tracker que se puede utilizar en cualquier sitio web para crear problemas (por ejemplo con productos de software) con Vanilla JS, HTML y CSS. Esto también puede ser una buena adición a su cartera y un excelente proyecto de javascript para los principiantes!

Valoración

El instructor tiene un concepto claro de lo que quiere construir con usted. Su voz es clara y buena para entender, y este proyecto es un proyecto para principiantes de javascript.

4/5 Estrellas

Construir un PIN Pad

En este proyecto de javascript, vas a construir un PIN Pad que se ejecuta en el navegador y tiene la funcionalidad de comprobar los códigos PIN para su corrección. El instructor utiliza sólo Vanilla JS, HTML y CSS para este tutorial. Esta es una idea de proyecto de javascript impresionante para los principiantes por lo que definitivamente quieres comprobarlo!

Calificación

Me parece un proyecto tutorial muy creativo para mostrar lo que Vanilla JavaScript es capaz de hacer. El instructor hace un buen trabajo de explicar todo claramente y de una manera fácil de seguir. Este es un proyecto de javascript genial y me divertí mucho haciéndolo.

4/5 Estrellas

Construir una página de aterrizaje

Lo que construirás

Brad va a mostrarte cómo construir una página de aterrizaje interactiva que muestra la hora y el nombre del usuario. La aplicación utiliza el almacenamiento local para almacenar el nombre, por lo que es bueno que lo observes.

Calificación

Brad es bien conocido por sus completos y destacados tutoriales. Este es más bien corto y diría que simplista, pero utiliza sólo JavaScript, HTML y CSS y por lo tanto es un excelente proyecto de práctica de javascript para principiantes.

4/5 Estrellas

Construye un juego de piedra, papel o tijera

Lo que construirás

Construir juegos puede ser una forma divertida de aprender cosas nuevas. JavaScript ofrece grandes posibilidades para crear juegos basados en el navegador. En este proyecto tutorial, vas a hacer el clásico juego de piedra, papel o tijera con JavaScript.

Calificación

Al igual que en el proyecto 1., el instructor hace un buen trabajo con este tutorial. Es entretenido y uno puede seguirlo bien. Y de nuevo, este proyecto está basado en Vanilla JavaScript y es un buen proyecto de javascript para principiantes!

4/5 Estrellas

Construye un juego de tres en raya

Qué construirás

En este proyecto, vas a construir un juego de tres en raya que es un ejercicio divertido, pero también complejo, porque utiliza IA y algoritmos básicos. Pero aparte de eso, todo está hecho con sólo Vanilla JS, HTML y CSS.

Valoración

Este proyecto tiene un buen tamaño, una estructura clara y es divertido de construir. La voz del instructor es clara y es fácil seguirlo. Las explicaciones son realmente buenas, y deberías sentirte bastante bien al final.

5/5 Estrellas

Bonus: Construye 9 miniproyectos en 1

Lo que construirás

Este es un pequeño bonus que quería presentarte: una sola grabación que contiene nueve pequeños proyectos javascript independientes para que practiques tus habilidades en JavaScript, HTML y CSS. Tal vez puedas usar algunos de esos fragmentos para tu propio sitio?

Calificación

Me gusta la idea de tener varios fragmentos pequeños en una sola grabación. La voz del instructor podría ser más clara, y a veces es un poco difícil seguirle.

3/5 Estrellas

Más ideas de proyectos de JavaScript

Sin duda, estos son unos grandes proyectos para seguir. Si quieres crear algo por tu cuenta sin seguir un tutorial paso a paso, tengo algunas ideas más de proyectos de javascript que puedes construir:

Proyectos de JavaScript para principiantes

1. Aplicación de base de datos con JavaScript
   Tarea: Crear una app sencilla que utilice el IndexedDB de los navegadores modernos para almacenar datos.

2. Convertidor de JSON a CSV con JavaScript
   Tarea: Construir una app sencilla donde los usuarios puedan pegar una cadena JSON o subir un archivo JSON. La aplicación debe convertir la entrada en CSV y mostrarla al usuario.

3. Temporizador de cuenta atrás con JavaScript
   Tarea: Construir una función sencilla en la que los usuarios puedan introducir un número de segundos y la función inicie una cuenta atrás.

4. Aplicación de cuestionario con JavaScript
   Tarea: Construir una sencilla aplicación de cuestionario donde los usuarios pueden marcar casillas para las soluciones correctas.

5. Aplicación de cronómetro con JavaScript
   Tarea: Construir una sencilla función de cronómetro donde los usuarios puedan iniciar y detener un temporizador.

6. Aposturas con JavaScript
   Tarea: Crear una aplicación donde los usuarios puedan tomar y gestionar notas.

7. Conversor de dólares a céntimos con JavaScript
   Tarea: Los usuarios deben poder introducir un número de dólares y la app les presenta el valor en centavos.

8. Reloj Pomodoro con JavaScript
   Tarea: Crear una app donde los usuarios puedan crear temporizadores de trabajo (25min), temporizadores de descanso (5min), y funciones para iniciar/detener/reiniciar estos temporizadores.

9. App de recetas con JavaScript
   Tarea: Crear una app donde los usuarios puedan encontrar recetas de diferentes categorías. Bonus: Integrar una API de recetas.

10. Generador de Lorem Ipsum con JavaScript
    Tarea: Crear una app o componente que genere texto Lorem Ipsum según la longitud que desee el usuario.

Proyectos intermedios de JavaScript

1. Conversor de divisas con JavaScript
   Tarea: Construir una app para convertir una moneda en otra.

2. Aplicación de dibujo con JavaScript
   Tarea: Los usuarios deben ser capaces de dibujar formas simples y pinturas en la ventana de su navegador.

3. Aplicación de Emoji con JavaScript
   Tarea: Construir una app donde los usuarios puedan buscar emojis y copiarlos en el portapapeles.

4. Generador de memes con JavaScript
   Tarea: Construir una app donde los usuarios puedan subir imágenes, añadirles texto y guardar & descargarlas.

5. Generador de contraseñas con JavaScript
   Tarea: Los usuarios deben ser capaces de crear contraseñas aleatorias con diferentes conjuntos de reglas como longitud, dificultad, caracteres, etc.

6. Escáner de imágenes con JavaScript
   Tarea: Construir una app que lea y visualice los metadatos de las imágenes subidas.

7. App de Tareas con JavaScript
   Tarea: Crear una app para gestionar las tareas pendientes.

8. App de votación con JavaScript
   Tarea: Crear una app donde los usuarios puedan crear encuestas para que otros voten.

9. App de tarjetas flash con JavaScript
   Tarea: Crear una app donde los usuarios puedan crear flashcards para que otros aprendan cosas nuevas.

10. App de buscador de libros con JavaScript
    Tarea: Crear una app donde los usuarios puedan buscar libros con diferentes criterios como el autor, el año, el contenido, las recomendaciones, etc. Bonus: Integrar una API de libros.

Proyectos avanzados de JavaScript

1. App de películas con JavaScript
   Tarea: Los usuarios deben ser capaces de navegar por las películas, ver las calificaciones, encontrar actores, obtener recomendaciones. Bonus: Integrar una API de películas.

2. Aplicación de encuestas con JavaScript
   Tarea: Los usuarios deben ser capaces de crear encuestas para otros que luego pueden tomarlas.

3. Aplicación de chat con JavaScript
   Tarea: El usuario debe ser capaz de chatear con los demás en tiempo real.

4. Clon de Instagram con JavaScript
   Tarea: Los usuarios deben ser capaces de experimentar características similares a las que tiene Instagram. Por ejemplo subir imágenes, etiquetar, likes, etc.

5. Clon de Twitter con JavaScript
   Tarea: Los usuarios deben ser capaces de experimentar características similares a las que tiene Twitter. Por ejemplo subir imágenes, etiquetar, likes, etc.

6. Clon de Pinterest con JavaScript
   Tarea: Los usuarios deben ser capaces de experimentar características similares a las que tiene Pinterest. Por ejemplo subida de imágenes, colecciones, likes, etc.

7. Aplicación de comercio de acciones con JavaScript
   Tarea: Los usuarios deben poder ver gráficos y comprar acciones (pueden ser simuladas por supuesto). Bonus: Integrar una API de acciones.

8. Aplicación de análisis con JavaScript
   Tarea: Crear una app para hacer un seguimiento del comportamiento de los usuarios en una web, como visitas, tasa de rebote, etc.

9. Aplicación de vídeo con JavaScript
   Tarea: Crear una app donde los usuarios puedan subir y ver vídeos.

10. App para compartir archivos con JavaScript
    Tarea: El usuario debe poder subir archivos con o sin registro.

Una buena idea sería que lo documentaras cuando construyeras un proyecto y lo compartieras con la comunidad!

De acuerdo, eso es todo por ahora. Y estoy bastante seguro de que no puedes esperar para empezar con esos magníficos tutoriales. Pero déjame decirte una cosa más. Ver los videos y codificar a lo largo es una buena manera de aprender cosas y obtener práctica. Sin embargo, sacarás el máximo provecho de ellos si añades tus propios sabores a los proyectos: mejóralos, cámbialos, combínalos, mejóralos. O incluso mejor: Haz tu propio proyecto y documenta su elaboración. Aprenderás mucho y otros te lo agradecerán!

Si te gusta lo que escribo y quieres apoyarme a mí y a mi trabajo, por favor sígueme en Twitter para aprender más sobre programación, creación, escritura & carreras🥰

.