Herramientas de aprendizaje interactivas para desarrolladores front-end

 

 

 

  • Anuncie en la revista Smashing
  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

  • Índice
    1. Herramientas para aprender Flexbox#
      1. Aventura de caja flexible#
      2. Caballeros de la mesa Flexbox#
      3. Rana Flexbox#
      4. Zombis de caja flexible#
      5. Defensa Flexbox#
      6. Cajas flexibles#
    2. Herramientas para aprender el diseño de cuadrícula CSS#
      1. Jardín de rejilla#
      2. Hoja de trucos de cuadrícula CSS#
      3. Ataque a la red#
      4. Criaturas de la cuadrícula#
    3. Herramientas para aprender más habilidades CSS#
      1. Hoja de referencia de selectores CSS#
      2. Animaciones CSS#
      3. Regla CSS#
      4. Mezcla de filtro#
      5. CSSBatalla#
      6. Restaurante CSS#
    4. Herramientas para aprender JavaScript#
      1. Ejercicios mecanografiados#
      2. Juego de patrones de diseño#
      3. Tutorial de reacción#
      4. Saga del ascensor#
      5. pantallas#
      6. no confiable#
      7. Prometidos#
      8. JSchallenger#
      9. JSRobot#
      10. Trabajos de servicio#
    5. Herramientas para aprender diversas habilidades de desarrollo web#
      1. Aprenda la ramificación de Git#
      2. Seleccione Estrella SQL#
      3. expresión regular101#
      4. Departamento de policía de SQL#
      5. CodificaciónJuego#
      6. AbrirVim#
      7. Crucigrama de expresiones regulares#
      8. Guerras de códigos#
      9. Ataque de pila#
      10. RegexOne#
      11. SQLBolt#
    6. ¿Cuáles son tus herramientas interactivas favoritas?#
    7. Sumario rápido#

    Aprendemos mejor jugando. Por eso, hemos recopilado herramientas y juegos de codificación interactivos para ayudarte a aprender CSS, JavaScript, SQL, React, Vim, expresiones regulares, Jamstack y prácticamente todo lo demás.

     

    Debido a que esta industria avanza tan rápido, aprender nuevas habilidades es algo habitual para la mayoría de nosotros. En los últimos tiempos, he podido recopilar enlaces a varias herramientas y aplicaciones de codificación interactivas que pueden ayudarle a complementar sus habilidades en diferentes áreas del desarrollo web.

    Independientemente de lo que desee aprender de CSS a SQL, esta lista categorizada debería cubrirlo. Desplácese hacia abajo para obtener una descripción general u omita la tabla de contenido .

    • Caja flexible CSS
    • Diseño de cuadrícula CSS
    • Hoja de referencia de selectores CSS
    • Animaciones CSS
    • Regla CSS
    • Filtros CSS
    • Juego CSS: CSSBattle
    • Juego CSS: Cena CSS
    • Ramificación de Git
    • pila de mermelada
    • Patrones de diseño JS
    • Juego JS: Ascensor
    • Juego JS: pantallazos
    • Juego JS: no confiable
    • Promesas de JS
    • Juego JS: JSCallenger
    • Juego JS: JSRobot
    • Lenguajes de programación , Codewars
    • Reaccionar
    • Expresiones regulares
    • Crucigrama de expresiones regulares
    • RegexOne
    • Trabajadores de servicios
    • SQL
    • SQL: SQLBolt
    • Departamento de policía de SQL
    • Mecanografiado
    • Empuje

    Si está interesado en más herramientas como estas, eche un vistazo al boletín semanal por correo electrónico de SmashingMag , para que pueda recibir consejos como estos directamente en su bandeja de entrada.

    Herramientas para aprender Flexbox#

    Aventura de caja flexible#

    Flex Box Adventure es un juego de aventuras interactivo que te permite usar tus habilidades de flexbox para ayudar al personaje del juego a resolver 24 desafíos.

    (Fuente de la imagen: Flex Box Adventure )

    Caballeros de la mesa Flexbox#

    Knights of the Flexbox Table es otro curso interactivo bien diseñado para ayudarlo a aprender los diferentes aspectos de la especificación flexbox. Este incluye 18 “mazmorras” para enseñarte flexbox. Este curso es único porque no estás escribiendo CSS puro, sino que estás usando clases de Tailwind CSS, lo que significa que aprenderás flexbox junto con la sintaxis de las clases de utilidad Tailwind.

    (Fuente de la imagen: Caballeros de la mesa Flexbox )

    Rana Flexbox#

    Flexbox Froggy existe desde hace bastante tiempo y sigue siendo una opción popular para aprender la sintaxis de Flexbox. Utilice las diferentes partes de la especificación flexbox para organizar las ranas según sea necesario para pasar los diferentes niveles.

    (Fuente de la imagen: Flexbox Froggy )

    Zombis de caja flexible#

    Flexbox Zombies es otro juego educativo para aprender la sintaxis de Flexbox. Cada sección avanza una trama relacionada con los zombis y al mismo tiempo te brinda experiencia en un nuevo concepto de flexbox, junto con desafíos de supervivencia que te ayudarán a utilizar tus nuevas habilidades de flexbox.

    (Fuente de la imagen: Flexbox Zombies )

    Defensa Flexbox#

    Flexbox Defense es un juego del género de juegos de estrategia de 'defensa de torres' que te enseña flexbox a través de 12 desafíos en los que tienes que usar la sintaxis de flexbox para evitar que los enemigos entrantes superen tus defensas.

    (Fuente de la imagen: Flexbox Defense )

     

    Cajas flexibles#

    Si le resulta un poco más difícil trabajar con algunas de las otras herramientas de Flexbox, Flexy Boxes podría ser una buena opción. Este es un sencillo campo de juego de flexbox que también genera el código por usted. Al ser una herramienta más antigua, también proporciona código flexbox heredado y prefijos de proveedores, pero puede seleccionar "Vanilla CSS" para el código que usará en la mayoría de los casos.

    (Fuente de la imagen: Flexy Boxes )

    Herramientas para aprender el diseño de cuadrícula CSS#

    Jardín de rejilla#

    Grid Garden , de Codepip, los mismos creadores que Flexbox Froggy, incluye 28 niveles diferentes para enseñarle sobre las diferentes partes de la especificación CSS Grid Layout. Y si está interesado en saber más de estas personas, su plan Pro incluye otros juegos interactivos CSS y JS .

    (Fuente de la imagen: Grid Garden )

    Hoja de trucos de cuadrícula CSS#

    La hoja de trucos de CSS Grid es una guía visual e interactiva para comprender CSS Grid. Seleccione un cuadro en la cuadrícula, luego use las opciones y configuraciones en la barra lateral izquierda para jugar con las diferentes partes de la especificación de Diseño de cuadrícula.

    (Fuente de la imagen: Hoja de trucos de cuadrícula CSS )

    Ataque a la red#

    Grid Attack es de los mismos creadores que Flexbox Adventure, mencionado anteriormente. Este no es gratuito, pero incluye 80 desafíos interactivos que son similares a los problemas de diseño de cuadrículas del mundo real.

    (Fuente de la imagen: Grid Attack )

    Criaturas de la cuadrícula#

    Grid Critters es otra plataforma interactiva basada en desafíos para aprender las diferentes partes de la especificación Grid Layout en un entorno similar a un videojuego. El curso incluye 10 capítulos, cada uno dividido en varios niveles, algunos hasta 20-26 niveles. Relatos Cortos

    (Fuente de la imagen: Grid Critters )

    Herramientas para aprender más habilidades CSS#

    Hoja de referencia de selectores CSS#

    La hoja de referencia de selectores de CSS es un ejercicio interactivo para poner a prueba su comprensión de los selectores de CSS. Los primeros son bastante fáciles, pero la dificultad de los ejercicios aumenta a medida que accede a selectores más avanzados, como las pseudoclases menos utilizadas.

    (Fuente de la imagen: hoja de referencia de selectores CSS )

    Animaciones CSS#

    Si desea mejorar sus habilidades para realizar animaciones en la web, CSS Animations es una plataforma sólida y con todas las funciones para aprender y experimentar con las diferentes partes de la especificación de animaciones CSS. Este curso de 32 partes tiene muchos gráficos prediseñados que se utilizan en el curso como base para las animaciones. Esta es una forma divertida de aprender animaciones de fotogramas clave con CSS.

     

    (Fuente de la imagen: animaciones CSS )

    Regla CSS#

    CSS Ruler le ofrece una representación visual de tres categorías de unidades CSS con las que puede experimentar: fuente relativa (por ejemplo, rem, ch), porcentaje de ventana gráfica (por ejemplo, vh, vw) y absoluta (por ejemplo, px, in).

    (Fuente de la imagen: Regla CSS )

    Mezcla de filtro#

    Filter Blend es un sitio pequeño y compacto que te permite jugar con los diferentes valores utilizados para las propiedades CSS mix-blend-mode, background-blend-modey filter. Puedes agregar una o más imágenes propias en capas, junto con un color de fondo, y luego modificar la configuración para ver cómo se comportan los diferentes valores.

    (Fuente de la imagen: Mezcla de filtros )

    CSSBatalla#

    Es cierto que CSSBattle podría ser la única herramienta de aprendizaje interactivo en esta lista que tiene el potencial de convertirte en un peor desarrollador. Este te permite realizar desafíos interactivos donde el objetivo es usar CSS puro para replicar una imagen determinada con la menor cantidad de código (es decir, "code golf"). Definitivamente aprenderá mucho sobre HTML y CSS con estos ejercicios, pero las técnicas a menudo no serán útiles en un escenario del mundo real.

    (Fuente de la imagen: CSSBattle )

    Restaurante CSS#

    CSS Diner es ideal para principiantes en CSS o para aquellos que no están familiarizados con los selectores avanzados de CSS. Este juego te permite utilizar selectores CSS reales en alimentos con un útil visor HTML para que puedas ver la relación entre los gráficos y el código.

    (Fuente de la imagen: CSS Diner )

    Herramientas para aprender JavaScript#

    Ejercicios mecanografiados#

    TypeScript Ejercicios es un campo de juego interactivo para jugar con diferentes características de TypeScript, el popular superconjunto de JavaScript que ha ganado popularidad en los últimos años. Si tiene un conocimiento rudimentario de TypeScript y desea ampliarlo, esta aplicación podría funcionar bien para usted.

    (Fuente de la imagen: Ejercicios de TypeScript )

    Juego de patrones de diseño#

    Design Patterns Game es único y no es para principiantes en JavaScript. Si tiene una cantidad considerable de experiencia en programación o es bastante hábil con JavaScript en general, pero nunca ha estudiado realmente los patrones de diseño de JavaScript, este podría ser un buen lugar para comenzar.

    (Fuente de la imagen: Juego de patrones de diseño )

    Tutorial de reacción#

    Hay muchos lugares para aprender React hoy en día y React Tutorial es otra buena opción. Lo que me gusta de este es cómo comienza con algunos conceptos de JavaScript que es importante comprender para ser más efectivo con React. Además, el editor en la página le brinda sugerencias de autocompletar y sugerencias para resolver los desafíos. No todas las lecciones son gratuitas, pero aquí hay suficientes para profundizar en los fundamentos de React antes de pagar.

     

    (Fuente de la imagen: Tutorial de React )

    Saga del ascensor#

    Elevator Saga es bastante diferente de muchas de las herramientas interactivas de esta lista. Éste te permite utilizar JavaScript para programar el movimiento de los ascensores mediante una API integrada diseñada para el propio juego. Así que no sólo repasarás tu JavaScript sino también el uso de una API extranjera.

    (Fuente de la imagen: Elevator Saga )

    pantallas#

    Screeps es un juego de estrategia en tiempo real multijugador masivo en línea de código abierto que te permite usar código JavaScript real para construir una colonia, extraer recursos, conquistar territorios y más. Este es bastante avanzado en su jugabilidad y está altamente recomendado por varios desarrolladores y equipos.

    (Fuente de la imagen: pantallazos )

    no confiable#

    Untrusted es un juego de aventuras de JavaScript en el que debes guiar a un personaje llamado Dr. Eval a través de diferentes laberintos. Para ello, cambie y vuelva a ejecutar el código utilizado para el desafío actual para permitir que el Dr. Eval escape al siguiente.

    (Fuente de la imagen: no confiable )

    Prometidos#

    Promisees le ayuda a aprender una parte específica de la especificación ECMAScript: JavaScript Promises, una característica que se agregó al lenguaje en ES6. Puede utilizar esta pequeña aplicación para visualizar cómo funcionan las promesas y cómo podrían usarse en una base de código real.

    (Fuente de la imagen: Promisees )

    JSchallenger#

    JSchallenger es una plataforma sencilla que te permite aprender JavaScript resolviendo diferentes desafíos de codificación. Es útil que este incluya una lista rápida de los desafíos “más populares” y “más fallidos”, por lo que podrían ser buenos lugares para comenzar.

    (Fuente de la imagen: JSchallenger )

    JSRobot#

    JSRobot es un juego interactivo en el que usas JavaScript junto con una API con temática de robot para controlar un robot para recolectar monedas, evitar obstáculos y alcanzar la bandera al final del nivel asignado.

    (Fuente de la imagen: JSRobot )

    Trabajos de servicio#

    Service Workies es un juego de aventuras interactivo para aprender varias funciones para desarrollar aplicaciones web progresivas (PWA). Este entorno similar a un videojuego recorre el ciclo de vida del trabajador del servicio, intercepta solicitudes, trabaja con cachés y más.

    (Fuente de la imagen: Service Workies )

    Herramientas para aprender diversas habilidades de desarrollo web#

    Aprenda la ramificación de Git#

    A menudo faltan elementos visuales al aprender herramientas de línea de comandos como Git. Learn Git Branching tiene como objetivo resolver ese problema con un recorrido visual e interactivo de las diferentes características de Git utilizando un visualizador de repositorio de Git, una zona de pruebas y una serie de tutoriales y desafíos educativos.

     

    (Fuente de la imagen: Aprenda la ramificación de Git )

    Seleccione Estrella SQL#

    Select Star SQL le permite aprender conceptos de SQL. Esto se hace siguiendo instrucciones que ejecutan consultas SQL en un conjunto de datos real, pasando por 5 capítulos que tardan aproximadamente 30 minutos en completarse.

    (Fuente de la imagen: seleccione Star SQL )

    expresión regular101#

    Regex101 es algo así como JSFiddle para expresiones regulares, pero con algunas características adicionales para ayudarte a aprender a crear expresiones regulares. Incluye un editor de expresiones regulares, una biblioteca de expresiones regulares escritas por la comunidad, una referencia rápida para la sintaxis e incluso un cuestionario interactivo.

    (Fuente de la imagen: Regex101 )

    Departamento de policía de SQL#

    El Departamento de Policía de SQL le permite aprender la sintaxis de SQL resolviendo delitos. Las tareas llamadas "resúmenes" se utilizan como base para cada delito a resolver y la aplicación también incluye una guía para ayudarle con la sintaxis si se queda atascado.

    (Fuente de la imagen: Departamento de Policía de SQL )

    CodificaciónJuego#

    CodinGame es una plataforma de aprendizaje con todas las funciones que te permite estudiar más de 25 lenguajes de programación mientras resuelves desafíos divertidos.

    (Fuente de la imagen: CodinGame )

    AbrirVim#

    OpenVim es un tutorial interactivo que le enseña cómo utilizar Vim, el editor de texto multiplataforma popular entre los usuarios de Unix. Si quieres más Vim, también puedes probar vim.so , aunque ese no es gratuito.

    (Fuente de la imagen: OpenVim )

    Crucigrama de expresiones regulares#

    Regex Crossword utiliza desafíos basados ​​en crucigramas para ayudarle a aprender la sintaxis de las expresiones regulares. Para cada desafío, debes ingresar una cadena que coincida con todas las expresiones "cruzadas".

    (Fuente de la imagen: Crucigrama Regex )

    Guerras de códigos#

    Codewars es otra plataforma más que te ayuda a mejorar tus habilidades resolviendo tareas de programación de múltiples niveles de dificultad y para una gran variedad de lenguajes, incluidos JavaScript, TypeScript, Python, Ruby, Go y más.

    (Fuente de la imagen: Codewars )

    Ataque de pila#

    Jamstack Attack es una serie de minijuegos para practicar diferentes aspectos del desarrollo front-end.

    (Fuente de la imagen: Jamstack Attack )

    RegexOne#

    RegexOne utiliza una serie de aproximadamente 25 ejercicios y problemas interactivos para enseñar la sintaxis de las expresiones regulares. También incluye guías de expresiones regulares para 5 lenguajes de programación diferentes.

    (Fuente de la imagen: RegexOne )

    SQLBolt#

    SQLBolt (los mismos creadores que RegexOne) incluye 19 ejercicios interactivos simples para enseñarle gradualmente cómo usar SQL.

    (Fuente de la imagen: SQLBolt )

    ¿Cuáles son tus herramientas interactivas favoritas?#

    Hay muchas otras herramientas de aprendizaje interactivo disponibles y estoy seguro de que muchos de ustedes han encontrado algunas que les han resultado útiles. No dudes en publicar tus favoritos en los comentarios a continuación.

    Sumario rápido#

    Hay muchas formas interactivas de aprender nuevas habilidades de desarrollo web. Louis comparte una lista completa y categorizada de dichas herramientas que cubren una variedad de diferentes tecnologías de desarrollo.

    (vf, il)Explora más en

    • CSS
    • javascript
    • Redondeos





    Tal vez te puede interesar:

    1. 50 herramientas útiles de JavaScript
    2. 50 nuevas herramientas de JavaScript que mejorarán su flujo de trabajo
    3. Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
    4. Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

    Herramientas de aprendizaje interactivas para desarrolladores front-end

    Herramientas de aprendizaje interactivas para desarrolladores front-end

    Anuncie en la revista Smashing Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-herramientas-de-aprendizaje-interactivas-para-desarrolladores-front-end-1120-0.jpg

    2024-04-04

     

    Herramientas de aprendizaje interactivas para desarrolladores front-end
    Herramientas de aprendizaje interactivas para desarrolladores front-end

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20