🚀 El camino del Frontend Developer 🚀
Lista de recursos para ayudarte en tu camino a ser Frontend Developer o aprender nuevas cosas
Hola
Os comparto recursos para quienes empiecen su camino para ser Frontend Developer, o para afianzar conocimientos que nunca vienen mal. Todos estos recursos son gratuitos para que todo el mundo pueda empezar sin ningún obstáculo como pudiera ser el económico. Siempre puedes después realizar distintos cursos, talleres o incluso bootcamps con gente profesional del sector.
Está dividido en distintos apartados, si encuentras un recurso que no esté aquí y lo ves interesante, puedes hacer una PR para seguir ampliando el catálogo de recursos o simplemente me buscas en Twitter como MrCodeDev y me lo dices para añadirlo.
Los recursos que puedas encontrar aquí, estarán en inglés y en español. Si tienes problemas con el idioma de Shakespeare, puedes traducir la página (Google Chrome tiene uno por defecto). Es muy importante que empieces a leer documentación en inglés y puedas entenderla, es algo muy habitual en nuestro día a día. Además, si buscas algún error o cualquier otra cosa, la mejor práctica es buscar lo que sea en inglés ya que siempre encontraremos más respuestas.
Acordaros: en este camino del developer, siempre se está en continuo aprendizaje y siempre nos va a tocar aprender nuevas tecnologías, es un mundo muy cambiante.
También quiero comentar (desde mi punto de vista), que los cursos de 0 a experto en 15 minutos, son una pérdida de tiempo. Podemos aprender ciertas cosas, pero no vamos a dominar esa tecnología con soltura. Tenemos que practicar y usarla muchas veces, además de afrontarnos a errores o bloqueos.
Podéis ver una charla que realicé hablando sobre el camino del Frontend Developer: https://youtu.be/Xu6C9MqJ2-A. Las diapositivas de la charla están aquí por si queréis echarle un vistazo: https://docs.google.com/presentation/d/1TSKzqBC_Xnp2BgK5HeILy-PQRSTUHT5S44owUzxPSgk
Quiero agradecer a todas las fuentes de los recursos por realizar todo el contenido para que todo el mundo, sea cual sea su situación económica, pueda empezar a dar sus pasos en la programación con JavaScript, y a todas las personas que me habéis facilitado recursos.
Aquí tenéis una leyenda, para saber qué es cada recurso, siempre aparecerá una mano señalando qué tipo de recurso es
Si te apetece ayudarme "invitándome a un café
| Emoji | ¿Qué significa? |
|---|---|
| Conocimientos que debemos de saber antes | |
| Contenido que es un artículo o documentación | |
| Contenido en vídeo | |
| Libro | |
| Charla o Conferencia | |
| Curso o tutorial | |
| Repositorio | |
| Prácticas en vivo | |
| Apuntes o cheatsheets | |
| Idioma en español | |
| Idioma en inglés |
Si queréis apoyar con una aportación, siempre se agradece, igual que siempre se puede hacer una aportación a todas las fuentes recopiladas en este documento.
Indice
📓 Conocimientos básicos informática📕 HTML♿️ Accesibilidad📘 CSS📒 JavaScript🛂 Control de versiones🔒 Seguridad📦 Administrador de paquetes🏛 Arquitecturas CSS🤖 Preprocesadores CSS y PostCSS🛠 Build Tools🧰 Frameworks JavaScript🖼 Frameworks CSS✅ Testing📱 Progressive Web Apps (PWA)🖥 Creación aplicaciones de escritorio📲 Creación aplicaciones para móviles- ♺ Generadores de páginas estáticas
📚 Cursos/Minibootcamps🗡 Katas🤔 Sitios de interés o recursos de interés
📓 CONOCIMIENTOS BÁSICOS INFORMÁTICA
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es la informática?
Vamos a empezar con lo principal, cómo empezó esto de los ordenadores.
👉 ❓ ¿Qué es Internet y cómo nació?
El origen de Internet, cómo nació y su funcionamiento.
👉 ❓ El verdadero origen de Internet
Artículo interesante donde nos cuenta la verdadera historia que hay detrás del nacimiento de Internet.
👉 ❓ ¿Qué es HTTP?
Se dice mucho la palabra HTTP pero, ¿realmente qué quiere decir?.
👉 ❓ Códigos de estado HTTP
Los códigos de estado de respuesta HTTP indican si se ha completado satisfactoriamente una solicitud HTTP específica.
👉 ❓ Cómo funcionan los navegadores
Cómo funcionan los navegadores: lo que hay detrás de los navegadores web actuales
👉 ❓ ¿Qué son las DNS?
Tenemos normalizado los nombres de dominio, pero no realmente lo que es una DNS, aquí vemos una explicación.
👉 ❓ ¿Qué es una dirección IP?
Hablamos de IPs siempre, pero si queremos saber realmente cómo se conforman, tenemos este artículo de la Wikipedia donde se explica muy bien.
👉 ❓ ¿Qué es un hosting?
Realmente cuando tenemos una app o una web necesitamos alojarlo en un lugar, aquí interviene el hosting.
👉 ❓ ¿Qué es Cloud?
Qué es este paradigma que está de moda.
👉 ❓ ¿Qué es una API?
Para nuestros desarrollos lo más seguro es que tengamos que usar APIs, tendremos que saber realmente lo que son.
👉 ❓ ¿Qué es un IDE?
Trabajamos en nuestro día a día con nuestro IDE favorito, pero a lo mejor escuchas esta palabra y te suena a chino, aquí tienes una breve explicación de lo que realmente es un IDE.
📕 HTML
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es HTML?
Hemos escuchado alguna vez la palabra HTML, pero no sabemos realmente lo que es, aquí podrás ver que signfica.
👉 ❓ ¿Qué es el DOM?
Hemos escuchado alguna vez la palabra DOM, pero no sabemos realmente lo que es, aquí podrás ver que signfica.
👉 ❓ ¿Qué es la W3C y a qué se dedica?
Hay un consorcio que se ocupa de que todo lo que hacemos tenga un estándard.
👉 ❓ ¿Qué es HTML5?
Si no sabes que es realmente HTML5, aquí tienes un artículo donde te lo explican.
🛹 CONTENIDOS
👉 🖊 📚 Empezando con la web
Nuestros primeros pasos para prepararnos para escribir páginas web en HTML.
👉 🖊 📚 Empezando con las bases del HTML
Breve introducción al HTML.
👉 🖊 📚 Metadata en el head del HTML
Es un elemento que no vemos en las páginas web pero es muy importante que las tengamos en cuenta.
👉 🖊 📚 Texto en HTML
Fundamentos para introducir texto en HTML.
👉 🖊 📚 Hipervínculos en HTML
Cómo introducir enlaces dentro de HTML y seguir los estándares.
👉 🖊 📚 Texto avanzado en HTML
En un capítulo anterior hemos visto como introducir texto, pero ahora de una manera más avanzada.
👉 🖊 📚 Estructura básica de un documento HTML
Ya hemos visto las principales etiquetas de HTML, pero nos falta ver otras etiquetas para las estructuras de nuestro sitio web.
👉 🖊 📚 Debuggear un documento HTML
Tenemos ya hecha la estructura de nuestra web y sabemos qué etiquetas podemos utilizar. Ahora es el momento de saber debuggear nuestro código HTML.
👉 🖊 📚 Estructurar una página de contenido HTML
En qué estructuras podemos dividir una página.
👉 🖊 📚 Formulario en HTML5
Una de las tareas más rutinarias será realizar formularios.
👉 🖊 📚 Imágenes adaptables en HTML5
Cómo adaptar imágenes en HTML para que se vean bien en todos los dispositivos.
👉 📚 🕹 Introducción a HTML básico y HTML5
Curso donde vas a aprender, en base a la práctica, las bases de HTML y HTML5.
👉 📚 Tutorial HTML de W3Schools
HTML es el lenguaje de marcado estándar para páginas web. Con HTML puede crear su propio sitio web. HTML es fácil de aprender y podrás seguir tutoriales prácticos para ir practicando.
👉 🎥 Tutorial de cómo construir una página web
Aprende los conceptos básicos de HTML5 y desarrollo web en este curso para principiantes.
👉 🖊 Listado elementos HTML
Listado de elementos HTML con ejemplos y ejercicios.
♿️ ACCESIBILIDAD
🛹 CONTENIDOS
Página web de la comunidad "The a11y project" donde tiene artículos muy interesantes sobre accesibilidad.
Blog de Lindsey que se dedica a todo el tema de la accesibilidad, siempre tiene artículos muy pero que muy interesantes.
Deque University tiene cursos sobre accesibilidad, y aquí tienen un listado sobre que cosa tenemos que tener en cuenta a la hora de hacer nuestra aplicación o web, de forma accesible.
Gracias a Alena Nikolaeva, tenemos unos apuntos sobre accesibilidad que podemos utilizar en nuestro día a día.
Newsletter para recibir toda la actualidad sobre accesibilidad.
👉 🖊 Testeando Accesibilidad Web
La accesibilidad web no se trata solo de navegación por teclado, contraste de color, o lectores de pantalla. La accesibilidad es un indicador perfecto de la calidad de un sitio web. Cuando un sitio web es accesible, generalmente significa que es inclusivo, usable, ofrece una excelente experiencia de usuario para todos, y además es rápido.
Blog de Adrián donde suele subir artículos sobre accesibilidad web
📘 CSS
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es CSS y CSS3?
Definición de qué es CSS y ver que estamos actualmente en la versión 3.
🛹 CONTENIDOS
👉 🖊 📚 ¿Qué es CSS?
Nos resuelve la pregunta qué es CSS y qué requisitos necesitamos para aprenderlo (principalmente saber HTML).
👉 🖊 📚 Introducción a CSS
Vamos a empezar a dar nuestros primeros pasos en CSS.
👉 🖊 📚 Cómo se estructura el CSS
Profundizamos un poco más en la estructura del lenguaje.
👉 🖊 📚 Cómo funciona CSS
Sabemos ya cómo funciona el lenguaje, ahora falta saber cómo lo utiliza el navegador.
👉 🖊 📚 A poner en práctica todo lo aprendido
Después de ver un poco por encima el lenguaje CSS, ponemos en práctica lo aprendido.
👉 🖊 📚 CSS Media queries
Actualmente tenemos muchos dispositivos y con diferentes tamaños, ¿has pensado alguna vez como adaptar el diseño de nuestra web en todos ellos?.
👉 🖊 📚 Tipos de medios media queries
Tipos de medios para especificar las media queries
👉 🖊 📚 Cómo usar media queries en nuestro código
En CSS sabemos como utilizar media queries, pero ¿y en nuestro código JS?.
👉 🖊 Estándar de dispositivos para media queries
Listado de los tamaños de dispositivos que podemos tener como referencia para realizar media queries.
👉 🖊 📚 Unidades en CSS
Tenemos distintas unidades de medida en CSS, en este artículo te lo explica con ejemplos, con los cuales puedes prácticar tú también.
👉 📚 CSS básico práctico
Curso donde podremos aprender sobre CSS básico y de forma 100% práctica.
👉 📚 🕹 🐸 Flexfrog (Flexbox)
Flexbox Froggy, un juego donde ayudarás a Froggy y a sus amigos escribiendo código CSS. El objetivo de esta página es que aprendas a utilizar Flexbox.
👉 📚 🕹 🪴 Grid Garden (CSS Grid)
Grid Garden, aprenderás CSS Grid cultivando tu jardín de zanahorias. El objetivo de esta página es que aprendas a utilizar CSS Grid.
👉 📚 🕹 🍽 CSS Diner
Con CSS Diner aprenderemos a utilizar los selectores de CSS a través de un minijuego.
👉 🖊 📚 Creación de animaciones en CSS
En CSS podemos hacer muchas cosas, hasta podemos realizar animaciones, aquí tienes un recurso para poder realizar animaciones con textos, imágenes, etc.
👉 🖊 📚 Resumen sobre animaciones CSS
Resumen sobre animaciones con CSS.
👉 🖊 Performance con animaciones CSS
Artículos que hablan sobre performance al realizar animaciones CSS.
👉 🖊 Animaciones web en el trabajo
Artículo interesante donde nos habla una experta de animaciones web con CSS, qué cosas tenemos que tener en cuenta para hacer nuestras animaciones
👉 🖊 Animaciones sin usar flash**
Otro artículo interesante donde nos explica paso a paso, en qué debemos fijarnos a la hora de realizar una animación.
👉 🖊 Cinco formas de animar de forma responsable
En esta ocasión este artículo nos habla sobre qué debemos de realizar para tener una animación responsable (de forma correcta).
👉 🖊 Trucos al realizar animaciones con CSS
Trucos que podemos realizar a la hora de hacer nuestras animaciones con CSS.
👉 🖊 Empezando con CSS nivel intermedio
Excelente artículo donde nos explica cómo realizar una animación con coches.
👉 📚 Animaciones con CSS de W3Schools
Apartado de cómo realizar animaciones en CSS de W3Schools.
👉 🖊 Crear un cubo 3D sólo con CSS
Gran artículo de cómo crear un cubo 3D con CSS y JQuery.
👉 🖊 Animación cubo 3D con CSS
Creación de una animación 3D de un cubo, con sólo CSS.
👉 🖊 Aprender a pensar en cubos en lugar de cajas
Muestra de cómo podemos hacer objetos en 3D solo con CSS, piensa en cubos y acertarás.
👉 🖊 20 impresionantes ejemplos de transformaciones CSS 3D
20 ejemplos impresionantes de transformaciones en 3D solo usando CSS.
👉 🖊 10 efectos en 3D con CSS impresionantes
Más ejemplos de efectos en 3D con CSS. Muchas veces podemos ver ejemplos y aprender del cómo se hacen.
👉 🖊 Animaciones y transformaciones de 2D a 3D
¿Cómo pasamos nuestros CSS en 2D a 3D?. En este artículo podemos ver cómo se hace.
👉 📚 Draft sobre animaciones CSS W3C
Draft sobre la especificación de la W3C para realizar animaciones con CSS.
👉 📚 Tutorial CSS de W3Schools
CSS es el lenguaje que usamos para diseñar un documento HTML. CSS describe cómo se deben mostrar los elementos HTML. Este tutorial te enseñará CSS de básico a avanzado.
👉 📑 Apuntes CSS básico/intermedio
Apuntes de CSS realizados por Majo Ledesma, que son muy buenos y tienen un estilo único.
👉 🖊 Evita utilizar media queries
Artículo muy interesante donde se plantean utilizar lo mínimo las media queries
👉 📦 Pantallas retina y unidades
Vamos a darle un repaso a las pantallas de alta densidad de píxeles y cuándo usar unas unidades u otras. Realizado por One eyed man.
👉 🎥 🗣 Taller CSS Grid Layout
Taller impartido por Diana Aceves, una referente en nuestro sector, que nos enseña cómo usar CSS Grid Layout
👉 🎥 🗣 Rock N'Grid
Otro taller impartido por Diana Aceves, que recrea ilustraciones usando CSS Grid Layout
👉 🎥 🗣 Taller Flexbox
Otro taller impartido por Diana Aceves, que nos introduce al uso de Flexbox.
👉 🖊 📑 Guía de Flexbox
Guía de todas las propiedades que tiene flexbox, por si en algún momento no te acuerdas que hacía cada una, lo puedes visualizar en un momento
👉 🖊 📑 Guía de CSS Grid
Guía de todas las propiedades que tiene CSS Grid, por si en algún momento no te acuerdas que hacía cada una, lo puedes visualizar en un momento
👉 🖊 📚 Listado elementos CSS
Listado de elementos CSS con ejemplos y hasta con ejercicios.
📒 JAVASCRIPT
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ Qué es JavaScript y un poco de historia
Empezamos a introducirnos con JavaScript sabiendo que es y como fueron sus inicios.
👉 ❓ ¿Es lo mismo JAVA que JavaScript?
Mucha gente puede confundir estos dos términos, pero son dos lenguajes totalmente diferentes.
👉 ❓ ¿Qué es Vanilla JS?
Habrás escuchado a lo mejor Vanilla JS, te adelanto que no es un helado. En este artículo te explican qué es.
👉 ❓ ECMAScript
Vamos a escuchar mucho la palabra ECMAScript o ESX, pues realmente es una especificación del lenguaje. .
👉 ❓ ECMAScript cambios introducidos
Lista de los cambios introducidos en cada versión de ECMAScript. Hay que tener cuidado porque los números que ponemos detrás de ES, no coincide con el año. A partir del 2016 se hizo estándar poner el año, así no nos hacemos un lío.
👉 ❓ ¿Qué es la programación funcional?
Muchas veces escucharemos que es la programación funcional, pero no sabremos lo que significa. En estos artículos nos podremos hacer una idea de que es.
🛹 CONTENIDOS
👉 🖊 📚 Primeros pasos con JavaScript
Repaso de JavaScript visto desde un alto nivel, así podrás tener una idea rápida del lenguaje.
👉 🖊 📚 Fundamentos de JavaScript
JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web.
👉 🖊 📚 Primer contacto con JavaScript
Después de la teoría viene la práctica, vamos a empezar a escribir código.
👉 🖊 📚 ¿Qué ha salido mal?
Hemos realizado el primer contacto con JavaScript pero da un error, ¿qué ha sucedido? y ¿qué podemos hacer para que funcione?.
👉 📹 Tipos de datos primitivos en JavaScript
Para saber usar profundamente JavaScript, debemos saber que tipos de datos primitivos tenemos. De la mano de la cocina del código, haremos un repaso de los tipos primitivos.
👉 🖊 📚 Las variables en JS
Vamos a descubrir las variables en JavaScript y que tipos hay.
👉 📹 var, let o const: ¿cuál debería de usar?
¿Por qué existen let y const?, ¿con vr no era suficiente?. del código te explica como debemos de utilizar cada uno.
👉 📹 var vs let vs const: diferencias de cada una de ellas
La cocina del código nos va a enseñar a ver 7 características que tiene cada una de las variables (var, let y const). Veremos sus diferencias y sabremos qué variables tenemos que declarar en JavaScript.
👉 📹 Scope en JavaScript
El scope en JavaScript es algo bastante de asimilar en un principio. La cocina del código nos enseñará qué es y como afectan a nuestras variables.
👉 🖊 📚 Operaciones y operadores en JS
Ahora es el momento de dar operaciones con números y operadores.
👉 🖊 📚 Cadenas en JS
Vamos a jugar con cadenas y ver como podemos concatenar todo tipo de variables.
👉 🖊 📚 Métodos para cadenas en JS
Ya sabemos concatenar cadenas, pues en el siguiente artículo, vamos a utilizar métodos para manipular cadenas.
👉 🖊 📚 Arrays en JS
Proseguimos ahora con los arrays, qué es una cosa con la que vamos a tener que estar muy familarizados y saber usar bien sus métodos.
👉 📹 map, filter y reduce en JavaScript*
map, filter y reduce son tres métodos de los más usados que tienen los arrays en JavaScript. La cocina del código nos trae otra entrega donde vamos a ver qué hace cada uno.
👉 🖊 📚 Generador de historias absurdas
Con todo lo aprendido anteriormente, vamos a relizar un generador de historias absurdas.
👉 🖊 📚 Condicionales en JS
Vamos a ver ya estructuras de código más complejo, ahora le toca el turno a los condicionales.
👉 🖊 📚 Bucles en JS
Una vez visto los condicionales, ahora vamos a ver los bucles, ¡debemos de no caer en un bucle infinito!.
👉 🖊 📚 Funciones y métodos en JS
Para que tú código pueda ser reusable se utilizan funciones o métodos, en este artículo veremos como se utilizan.
👉 🖊 📚 Creando nuestra propia función en JS
Hemos visto como se hacen funciones o métodos, ¿por qué no creamos ahora uno nosotres mismes?.
👉 🖊 📚 Función que devuelve valores en JS
Ya tenemos una función creada, pero ahora podemos llevarlo a un siguiente nivel, ¿qué te parece si nuestra función nos retorna algo?.
👉 🖊 📚 Eventos en JS
Los eventos son una cosa que vamos a estar usando siempre, y tenemos que saber usarlos junto controlarlos.
👉 🖊 📚 Crear nuestra galería de imágenes en JS
Para finalizar crearemos una galería de imágenes funcional.
👉 🖊 📚 Empezando a trabajar con objetos en JS
Nos falta ver una última estructura que vamos a utilizar muchísimo junto a los arrays, y son los objetos.
👉 🖊 📚 Programación Orientada a Objetos en JS
La programación orientada a objetos (POO ó OOP) en JavaScript es un poco peculiar, vamos a ver como JavaScript emula las Clases y cómo podemos utilizarlas.
👉 🖊 📚 Prototipos de objetos en JS
Esto puede ser un tema muy denso, pero si lo entiendes y lo controlas, tienes todo el poder en tus manos.
👉 🖊 📚 Herencia en JS
Después de los prototipos vamos a ver lo que es una herencia y como utilizarla a nuestro favor.
👉 🖊 📚 Trabajando con JSON en JS
Esto no significa que tengas un compañero llamado JSON, es una estructura de datos que utilizamos con frecuencia. En este artículo vas a ver qué es y como usarlo.
👉 🖊 📚 Conceptos de la asincronía en JS
Junto todo lo anterior, ahora vamos a ver la asincronía, algo muy importante a la hora de poder consumir APIs u otros recursos asíncronos. Deberemos de dominar muy bien la asincronía.
👉 📦 📑 Dominio de JS asíncrono
Esta es una hoja de referencia que contiene un resumen del curso de Dominio de JavaScript asíncrono en Frontend Armory. Tenemos como podemos realizar promesas de manera correcta.
👉 🖊 📚 Introducción a la asincronía en JS
Una vez tenemos el concepto de asincronía en nuestra cabeza, vamos a ver casos prácticos.
👉 🖊 📚 Timeouts e intervalos en JS
Vamos a ver en detalle los timeouts y los intervalos junto a su uso.
👉 🖊 📚 Promesas en JS
Todo código asíncrono devuelve una promesa, así que es el momento de ver que es una promesa.
👉 🖊 📚 Async/Await en JS
Gracias a esta introducción en la ES7, podemos utilizar nuestro código asíncrono de una manera más fácil.
👉 🖊 📚 Elegir el enfoque correcto de la asincronía en JS
No todo va a ser coser y cantar, a veces tenemos que ver la compatibilidad con otros navegadores.
👉 🖊 📚 Introducción a las APIs en JS
Vamos a echar un vistazo a las APIS desde un nivel superior ¿qué son, cómo funcionan, cómo usarlas en el código, y cómo están estructuradas?.
👉 🖊 📚 Manipulando documentos con JS
Al escribir páginas web y aplicaciones, una de las cosas más comunes que querrá hacer es manipular la estructura del documento de alguna manera.
👉 🖊 📚 Obteniendo datos del servidor
Otra tarea muy común en páginas web y en aplicaciones es tomar elementos individuales de datos desde el servidor para actualizar secciones de la página web sin tener que cargar toda una nueva página.
👉 🖊 📚 API de terceros
Las API que hemos cubierto hasta ahora están integradas en el navegador, pero no todas las API lo están. Ahora vamos a ver como utilizar de terceros.
👉 🖊 📚 Dibujando gráficos (opcional)
El navegador tiene algunas herramientas de programación de gráficos muy poderosas, desde el lenguaje Scalable Vector Graphics (SVG), hasta API para dibujar en elementos HTML canvas.
👉 🖊 📚 Vídeo y audio (opcional)
HTML5 viene con elementos para incrustar medios enriquecidos en documentos de video y audio.
👉 🖊 📚 Almacenamiento del lado cliente
Los navegadores web modernos admiten varias formas para que que las páginas web almacenen datos en el ordenador del usuario, con el permiso del usuario, y luego los recuperen cuando sea necesario.
👉 🖊 📚 Formularios web
Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.
Tiene distintos artículos, debes de ir siguiéndolos uno a uno si quieres dominar esta parte. No los he puesto separados o ocuparía mucho en el documento.
👉 🖊 📚 Cómo crear widgets de formularios personalizados
Hay muchos casos donde los widgets de formularios HTML disponibles simplemente no son suficientes. si deseas establecer un estilo avanzado en algunos widgets como el elemento <select> o si deseas proporcionar comportamientos personalizados, no tienes más opción que crear tus propios widgets.
👉 🖊 📚 Envío de formularios a través de JavaScript
Los formularios HTML pueden enviar una solicitud HTTP de forma declarativa. Pero los formularios también pueden preparar una solicitud HTTP para enviarse a través de JavaScript, por ejemplo, a través de XMLHttpRequest.
👉 🖊 📚 JavaScript Moderno
Curso que contiene 2 partes que cubren JavaScript como lenguaje de programación y el trabajo con un navegador. También hay series adicionales de artículos temáticos muy interesantes.
👉 📖 JavaScript Inspírate
Libro de Ulises Gascón, es un libro de programación sencillo y divertido que nos muestra como programar en JavaScript desde cero.
👉 📖 JavaScript Elocuente
Este es un libro sobre JavaScript, programación y las maravillas de lo digital. Puedes leerlo en línea de forma totalmente gratuita o obtener una copia de bolsillo.
👉 🖊 📚 Tutorial JavaScript W3Schools
JavaScript es el lenguaje de programación más popular del mundo. JavaScript es el lenguaje de programación de la Web. JavaScript es fácil de aprender. Este tutorial te enseñará JavaScript de básico a avanzado.
👉 📦 🖊 📑 ES6 para humanos
Repaso a las funcionalidades añadidas en ES6 como: let, const, arrow functions, etc.
👉 📦 🖊 📹 33 Conceptos que todo desarrollador de JavaScript debería saber
Este repositorio fue creado con la intención de ayudar a los desarrolladores a dominar sus conceptos en JavaScript. No es un requisito, sino una guía para futuros estudios. Está basado en un artículo escrito por Stephen Curtis y puedes leerlo aquí.
👉 📦 🖊 📑 JavaScript moderno
Este documento es una hoja de trucos para JavaScript que encontrarás con frecuencia en proyectos modernos y en la mayoría de los códigos de muestra contemporáneos.
👉 📑 Apuntes JavaScript básico
Apuntes de JavaScript básico realizados por Majo Ledesma, que son muy buenos y tienen un estilo único.
👉 📦 🖊 📑 Código limpio en JS
Principios de ingeniería de software, del libro Clean Code de Robert C. Martin, adaptado para JavaScript. Esta no es una guía de estilo. Es una guía para producir software legible, reutilizable y refactorizable en JavaScript.
👉 📦 🖊 📑 Principios y patrones la programación
Todo programador se beneficia al comprender los principios y patrones de programación. Este resumen es una referencia para el autor, y lo puso en Github. Tal vez te resulte útil durante el diseño, la discusión o la revisión. Ten en cuenta que está lejos de ser completo y que a menudo se debe hacer concesiones entre principios en conflicto.
👉 📦 🖊 📑 📹 📖 🗣 📚 Impresionante JavaScript
Recopilación de links de guías, artículos, tutoriales, vídeos, charlas, conferencias, podscasts, cursos y libros en español sobre JavaScript. Puede que algún link no funcione o no esté el contenido, pero hay muchas cosas interesantes aquí.
👉 📚 🕹 Reto 30 días porgramando en Vanilla JS
Recopilación de links de guías, artículos, tutoriales, vídeos, charlas, conferencias, podscasts, cursos y libros en español sobre JavaScript. Puede que algún link no funcione o no esté el contenido, pero hay muchas cosas interesantes aquí.
👉 🖊 JavaScript Garden
JavaScript Garden es una creciente colección de documentos sobre las partes más extravagantes del lenguaje de programación JavaScript. Brinda consejos para evitar errores comunes y errores sutiles, así como problemas de rendimiento y malas prácticas, que los programadores de JavaScript no expertos pueden encontrar en sus esfuerzos en las profundidades del lenguaje.
👉 📖 Aprende JavaScript
Este libro te enseñará los conceptos básicos de programación y Javascript. Tanto si eres un programador experimentado como si no, este libro está dirigido a todos aquellos que desean aprender JavaScript.
👉 📦 📖 No sabes JavaScript
Esta es una serie de libros que profundizan en los mecanismos centrales del lenguaje JavaScript. La primera edición de la serie ya está completa. Además, estos libros de la primera edición ahora están agotados y ya no se pueden comprar. Solo se pueden leer gratis en línea aquí.
👉 🖊 📑 Listado de métodos y muchas cosas más de JS
Listado de métodos y muchas cosas más de JS con ejemplos y hasta con ejercicios.
👉 📦 Algoritmos de JS
Listado de ejemplos de algorítmos realizados en JavaScript. Tienes desde Sorts, Strings, o hasta de algebra lineal.
👉 📦 Algoritmos y Estructuras de Datos en JavaScript
Repositorio que contiene ejemplos basados en JavaScript de muchos algoritmos y estructuras de datos populares.
👉 📦 Aprende JavaScript
Este libro te enseñará los conceptos básicos de programación y Javascript. Tanto si es un programador experimentado como si no, este libro está dirigido a todos aquellos que desean aprender el lenguaje de programación JavaScript.
👉 📦 Algoritmos de JavaScript
Ejercicios de algoritmos que podrás realizar. El autor dice que hay implementaciones más eficientes, que esto hay que tomarlo como fines educativos.
👉 📦 Lista de preguntas avanzadas de JavaScript
Este es un gran recurso ya que te proponen una pregunta y debajo tienes la respuesta. Os puede venir muy bien para las entrevistas técnicas, 100% recomendable.
👉 📦 Awesome JavaScript
Colección de librerías de JavaScript, recursos y cosas muy interesantes.
👉 📦 Awesome JavaScript
Colección de librerías de JavaScript, recursos y cosas muy interesantes.
👉 📦 Patrones de JavaScript
Recurso donde alojan una colección de patrones que podemos utilizar en JavaScript.
👉 📦 Computer Science en JavaScript
Colección de paradigmas, algoritmos y enfoques clásicos de la informática escritos en JavaScript.
👉 📦 JavaScript: mejores prácticas
Libro totalmente gratuito donde te promete escribir JavaScript potente, limpio y fácil de mantener con lecciones prácticas y claras en arquitectura de aplicaciones, administración de paquetes, herramientas, atajos, devoluciones de llamada, clases, control de flujo y mucho más.
👉 🖊 JavaScript Tutorial
Tutorial de JavaScript de Scaler Topics. Aprende JavaScript desde cero con este completo tutorial.
🛂 CONTROL DE VERSIONES
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ Control de versiones
La primera pregunta que nos vamos a hacer es, ¿qué es un control de versiones y para qué sirve?
👉 ❓ Git
¿Qué es git?. Podremos usar distintos repositorios como son: Github, GitLab, Bitbucket, etc. Pero siempre utilizaremos git para poder usar nuestro control de versiones favorito.
👉 ❓ ¿Qué es un repositorio?
Después de saber que es un control de versiones y git la siguiente pregunta es: ¿qué es un repositorio?.
🛹 CONTENIDOS
👉 🖊 📚 Guía para principiantes para instalación y uso de git
Vamos a dar los primeros pasos en git con este tutorial básico y muy conciso.
👉 📚 🕹 Aprende git branching
Lecciones interactivas del uso de Git, donde podremos utilizar los comandos más usados.
👉 📖 Git Like a Pro
Libro en inglés donde nos enseñará como usar git de una manera mucho más avanzada.
👉 🕹 Git katas
Katas de git, parece increible pero es un recurso bastante bueno para realizar ejercicios que podemos utilizar en nuestro día a día.
👉 📑 Cheatsheet git
Cheatsheet con los comandos de git.
👉 🖊 📑 Guía de GitHub
Guía oficial de uso de GitHub. Una vez aprendido como funciona GitHub, vas a saber utilizar GitLab, Bitbucket, etc.
🔒 SEGURIDAD
🛹 CONTENIDOS
👉 🖊 📚 Seguridad en sitios web
Un breve resumen de varios tipos de fallos de seguridad más comunes en nuestro día a día.
👉 🖊 Tips seguridad Frontend
Artículo sobre tips en seguridad si eres Frontend Developer.
👉 🖊 Recomendaciones de seguridad para aplicaciones front-end
Artículo que habla un poco sobre la seguridad web y que cosas debes de no realizar.
👉 🖊 .htaccess
Nunca sabemos si vamos a tener que añadir un .htaccess a nuestra web, pero es bueno tener el conocimiento de qué es, y que podemos hacer.
👉 🖊 Política CORS
Aquí tenemos un artículo que nos habla que es el CORS.
📦 ADMINISTRADOR DE PAQUETES
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es un administrador de paquetes?
Si no sabes lo que es un administrador de paquetes (o sistema de gestión de paquetes), primero tendrás que leerte este artículo.
👉 ❓ ¿Qué es NPM?
Ya sabemos que es un administrador de paquetes, ahora vamos hablar de NPM que es uno de ellos.
👉 ❓ ¿Qué es Yarn?
Hemos hablado de Npm, pero no es el único gestor de dependencias, ahora hablaremos de yarn.
👉 ❓ ¿Qué es NodeJS?
Aunque no estemos desarrollando en NodeJS, tenemos qué saber que es y qué hace.
🛹 CONTENIDOS
👉 🖊 📚 ¿Cómo instalar NodeJS?
Es recomendable tener instalado NodeJS, además que a través de él, tendremos acceso a npm o npx.
👉 🖊 📚 Primeros pasos con Npm
Hemos hablado de Npm, pero no es el único gestor de dependencias, ahora hablaremos de yarn.
👉 🖊 📚 Introducción a Npm hasta avanzado
Artículos interesantes sobre Npm desde empezar con él, hasta hacer cosas más avanzadas.
👉 🖊 📚 ¿Cómo instalar Yarn?
Vamos a instalar Yarn, nunca está de más tener npm y yarn instalados a la vez.
👉 🖊 📚 Introducción a Npm hasta avanzado
Artículos interesantes sobre Npm desde empezar con él, hasta hacer cosas más avanzadas.
👉 🖊 📚 Introducción a Yarn
Documentación de Yarn sobre su uso (si ya lo tenemos instalado podemos obviar la instalación). Una vez sabemos usar Npm siempre va a ser casi igual usar Yarn.
🏛 ARQUITECTURAS CSS
🛹 CONTENIDOS
👉 🖊 Metodologías y arquitecturas CSS
Artículo que da un repaso a las arquitecturas o metodologías que existen para CSS.
👉 🖊 Cómo debería de ser tú código CSS
Artículo que nos explica como debería de ser nuestro código CSS.
👉 📹 🗣 Buenas prácticas en arquitectura CSS
Carmen Ansio e Ignacio Villanueva, dan una charla sobre las "Buenas practicas en arquitecturas CSS", en la Codemotion de Madrid en 2017.
🤖 PREPOCESADORES CSS Y POSTCSS
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué son los prepocesadores CSS?
Una breve descripción de que es un preprocesador CSS.
🛹 CONTENIDOS
👉 🖊 Tutorial SASS
Excelente artículo que nos habla un poco de que es SASS y como instalarlo.
👉 📚 🖊 Documentación SASS
Muchas veces nos volvemos loques buscando recursos, pero la documentación cualquier cosa que consumamos, suele estar completa. En este caso SASS, tiene una buena documentación de la cual podemos aprender qué cosas podemos realizar.
👉 📚 🖊 Documentación LESS
En la página oficial podemos ver como se utiliza (se parece mucho a SASS), y también tenemos una guía de qué cosas podemos realizar.
👉 🖊 Intalación Stylus
Artículo sencillo de como instalar Stylus CSS
👉 🖊 Intalación Stylus
Artículo de cómo usar Stylus.
👉 🏴 🖊 Documentación oficial Stylus
Documentación de Stylus bastante completa.
👉 📦 🖊 Documentación oficial instalación PostCSS
Documentación oficial de instalación de PostCSS.
👉 📦 🖊 Documentación oficial de uso de PostCSS
Documentación oficial de uso de PostCSS.
👉 📹 🗣 PostCSS el Babel CSS
Vídeo de la conferencia de JS Day Canarias que imparte Joan León, que nos dice como instalarlo y como utilizarlo por encima.
👉 🖊 Yo prefiero CSS
Artículo de Joan León sobre PostCSS, desde su punto de vista. Hace un repaso sobre este preprocesador de CSS.
🛠 BUILD TOOLS
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ Herramientas de compilación de JS: ¿por qué las necesitamos?
Este artículo nos resolverá las dudas por qué necesitamos herramientas para la compilación de nuestor código.
👉 ❓ ¿Cuál es el propósito de las herramientas de compilación de JavaScript?
Pregunta de StackOverflow sobre cual es el propósito de las build tools.
🛹 CONTENIDOS
👉 🖊 Elige una build tool de JS: configurar o no configurar
Artículo sobre las herramientas de construcción. Se han convertido en un componente necesario en el flujo de trabajo de las aplicaciones web modernas. Aquí tienes un breve repaso, una comparación de cada una y una breve explicación para configurarlas.
👉 🖊 Herramientas de creación de JavaScript y sistemas de automatización
Otro artículo que hace un repaso a las principales Build Tools que tenemos ahora mismo. También nos explica un poco como configurarlas.
👉 🖊 Elige una build tool de JS: configurar o no configurar
Más recursos en forma de artículo donde hace otro repaso a las diferentes herramientas que tenemos y como debemos de configurarlas.
👉 🖊 5 herramientas de JavaScript a tener en cuenta en 2021
El ecosistema de JavaScript evoluciona a un ritmo rápido, aquí tienes 5 herramientas a tener en cuenta este año.
👉 🖊 📹 📚 Cómo combinar JavaScript con Rollup - Tutorial paso a paso
Aprende a usar Rollup como una alternativa más pequeña y eficiente al paquete web y Browserify para agrupar archivos JavaScript en esta serie de tutoriales paso a paso.
🧰 FRAMEWORKS JAVASCRIPT
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ Entendiendo los frameworks de JS del lado del cliente
Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, los cuales proveen a los desarrolladores herramientas probadas y testeadas para la creación de aplicaciones web interactivas y escalables.
👉 ❓ Diferencia entre librería y framework
Aquí nos explican de una manera muy breve, cual es la diferencia entre una librería y un framework.
👉 ❓ Introducción a los frameworks del lado del cliente
Comenzamos nuestra mirada a los frameworks con una descripción general, analizando una breve historia de JavaScript y sus frameworks, por qué existen los frameworks y qué nos brindan, cómo empezar a pensar en la elección de un framework para aprender y qué alternativas hay de frameworks del lado del cliente.
👉 ❓ Características principales de los frameworks
Cada framework de JS tiene un enfoque diferente para actualizar el DOM, manejar los eventos del navegador y brindar una experiencia de desarrollador agradable. Este artículo explorará las características principales de los frameworks de “los 4 grandes” (React, Ember, Vue y Angular), observando cómo los frameworks tienden a funcionar desde un alto nivel y las diferencias entre ellos.
👉 ❓ Frameworks más usados en el 2020
Podemos ver cuales son los frameworks de JS más utilizados en el 2020. Esto no significa que sean unos mejores que otros, ni que estudiando la más usada vas a encontrar trabajo más rápido. Debes de aprender como funcionan varios y después saber utilizar si te ponen uno que es nuevo para ti.
👉 ❓ Frameworks más usados en el 2020
Redux es una herramienta para la gestión de estado en apps Javascript que nació en 2015 de la mano de Dan Abramov. Aunque suele asociarse a React, lo cierto es que es una librería framework agnostic, que vale la pena conocer aunque no vayas a trabajar con React.
👉 ❓ ¿Qué es TypeScript?
Breve introducción a TypeScript de la mano de Software Crafters, donde veremos un poco por encima de que va TypeScript.
👉 ❓ Aprende los tipos de datos en TypeScript
Artículo donde nos enseñarán a tipar bien nuestros datos en TypeScript.
👉 ❓ ¿Qué es RxJS?, y usos
El título del artículo es Rxjs de 0 a experto en 15 minutos, pero es un poco ambicioso conseguir eso en tan poco tiempo. Veremos una introducción un repaso de su uso de RxJS.
🛹 CONTENIDOS
👉 🖊 📚 Introducción a React
De la página oficial de React, encontraremos este tutorial, se va a construir un pequeño juego. Deberás estar tentado a obviarlo porque tú no estás construyendo juegos en el día a día, pero dale una oportunidad. Las técnicas que aprenderás en el tutorial son fundamentales para construir cualquier aplicación de React, y dominarlo te dará un entendimiento profundo de React.
👉 🖊 📹 📚 Aprendiendo React desde cero
Midudev tiene muchos recursos interesantes, aquí te traemos un vídeo donde nos enseñará React desde cero.
👉 🖊 📹 📚 Primeros pasos con React
Artículos donde nos enseñarán nuestros primeros pasos con React.
👉 🖊 📚 Cómo crear una aplicación con React usando Hooks
Artículos donde nos enseñarán nuestros primeros pasos con React.
👉 🖊 📚 React para principiantes
Manual de React para principiantes de la mano de FreeCodeCamp.
👉 🖊 📚 Manual de React
Manual de React de la mano de FreeCodeCamp.
👉 🖊 📚 Guía Vue
Desde la página oficial de Vue, tenemos una guía que nos enseña como utilizar Vue.
👉 🖊 📚 Introducción a Vue 3
En este tutorial aprenderás a crear una aplicación desde cero usando Vue. Veremos primero los conceptos fundamentales de Vue, así como la anatomía de las aplicaciones creadas con este framework.
👉 🖊 📹 📚 Primeros pasos con Vue 2
Da tus primeros paso con Vue 2 de la mano de Carlos Azaustre.
👉 🖊 📹 📚 Primeros pasos con Vue 2
En este caso, da tus primeros pasos de la mano de Mozilla.
👉 🖊 📚 Primeros pasos con Vue 2
En este caso, da tus primeros pasos de la mano de Mozilla.
👉 📹 📚 Vue JS Crash Course 2021
Curso intensivo en inglés de Vue 3 con un enfoque practico.
👉 🖊 📚 Angular Tour of Heroes
Aunque esté en Inglés, el tutorial de "Tour of Heroes" de Angular es un clásico en la introducción en este framework.
👉 🖊 📚 Angular
Aunque esté en Inglés, el tutorial de "Tour of Heroes" de Angular es un clásico en la introducción en este framework.
👉 🖊 📚 Haz tu primera App con Angular
En este tutorial vamos a aprender como realizar una calculadora, así repasamos como funciona Angular.
👉 🖊 Angular para principiantes
Tutorial muy básico para introducirse con Angular.
👉 📹 📚 Curso de Angular
Curso de YouTube donde aprenderemos a utilizar Angular.
👉 🖊 📚 Desarrolloweb LitElement
Curso de LitElement de desarrollo web, donde daremos un repaso a la librería para realizar WebComponents.
👉 🖊 📚 ¿Qué son los WebComponents?. Y cómo utilizar LitElement
Repaso a los WebComponents nativos y realizados con LitElement.
👉 🖊 📚 Desarrolloweb LitElement
Artículo muy completo para realizar WebComponents nativos.
👉 🖊 📚 Introduccion a SvelteJS
Tutorial muy completo de Svelte de su página oficial, además es interactivo y nos puede recordar a FreeCodeCamp.
👉 🖊 📚 Manual de SvelteJS
Manual muy completo de este Framework de la mano de FreeCodeCamp
👉 🖊 📚 Documentación oficial StencilJS
Documentación oficial de la página oficial de StencilJS, donde vamos a ver como utilizarlo y dar nuestros primeros pasos.
👉 🖊 Introducción a StencilJS
Breve introducción a este framework que realiza WebComponents.
🖼 FRAMEWORKS CSS
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es un framework de CSS?
Breve introducción a este framework que realiza WebComponents.
👉 ❓ Ventajas e inconvenientes de un framework CSS
Un breve artículo donde se expone que ventajas y que inconvenientes hay en el uso de Frameworks CSS.
👉 ❓ Pros y contras entre frameworks CSS
Listado de 9 frameworks css, donde nos dan sus pros y sus contras desde su punto de vista.
🛹 CONTENIDOS
Tendremos que hacer una breve búsqueda del tipo: "Framework CSS Framework JS".
Un ejemplo: "Bootstrap React".
Hago un listado de los más utilizados actualmente, para que así podáis leer su documentación o buscar más información sobre ellos. Cualquier consulta, me la podéis realizar sin ningún problema.
Recomiendo encarecidamente, si vamos a usar un framework CSS, que os miréis la documentación, porque ahí es donde vamos a ver cómo utilizarlo y cómo customizarlo.
👉 🖊 Introducción a Bootstrap 4
Introducción a Bootstrap 4, desde la página oficial del framework. Aquí veremos como lo podemos instalar. También añado otro artículo de cómo instalarlo con npm.
👉 🖊 Componentes Bootstrap
Introducción a Bootstrap 4, desde la página oficial del framework. Aquí veremos como lo podemos instalar. También añado otro artículo de cómo instalarlo con npm o yarn.
👉 🖊 Documentación de Bootstrap
Documentación de Bootstrap, donde encontraremos componentes y otros tipos de usos.
👉 🖊 Instalación Foundation
Lo que tiene Foundation es que tiene muchos tutoriales para iniciarse. En este caso, vamos a ver como instalar este Framework CSS.
👉 🖊 Tutoriales de Foundation
En la propia web del Framework CSS, encontramos estos tutoriales sobre casos de uso.
👉 🖊 Documentación de Foundation
Documentación de Foundation, donde encontraremos componentes y otros tipos de usos.
👉 🖊 Instalación de Bulma
Aquí tenemos otro framework de CSS llamado Bulma, donde tendrémos una documentación correcta y podrémos ver su uso. En este caso vamos a ver como instalarlo.
👉 🖊 Documentación de Bulma
Documentación de Bulma, donde encontraremos componentes y otros tipos de usos.
👉 🖊 Instalación de Tailwind
Cómo instalar este framework de CSS que tiene muy buena pinta.
👉 🖊 Documentación de Tailwind
Documentación de Tailwind, donde encontraremos componentes y otros tipos de usos.
👉 🖊 Material Design primeros pasos y documentación
Cómo empezar a instalar Material Design. Muchos frameworks como React, ya tienen dependencias preparadas para su uso, os recomiendo realizar una búsqueda como pone arriba de la sección en "NOTA".
✅ TESTING
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es un test?
Artículo dónde explicándonos un poco por encima que es un test, y nos enseña un poco por encima unos ejemplos de tests.
👉 ❓ Testing con JavaScript
Esta documentación es muy completa para introducirnos en el mundo del testing y hacernos una idea de que son los tests.
👉 ❓ Testing en el Front
Sabemos de sobra que todo aquello que desarrollamos debe funcionar correctamente independiente de la resolución o sistema operativo que esté utilizando el usuario final. Por ello, resulta algo cada vez más importante que aquello que desarrollamos no tenga errores o si los tiene, sean errores controlados.
👉 ❓ ¿Qué es TDD?
Habremos escuchado alguna vez esta palabra, y no, no es un hechizo de Harry Potter o una frase arcana para invocar al grandioso Cthulhu. En este artículo nos introducirá un poco al TDD.
👉 ❓ ¿Qué es DDD?
Vamos a ver que es DDD, para saber que es y poder tener esa posibilidad de utilizarlo.
👉 ❓ ¿Qué son los tests E2E?
Aquí vemos que son los tests E2E y que tipos de tests existen.
👉 ❓ ¿Qué es un mock, stub, fake o dummy?
En este artículo del libro, veremos que significa cada uno.
👉 ❓ Listado de frameworks testing
Listado de Frameworks de Testing en JavaScript. Aquí se nombran los más usados. Una vez utilizado uno, vas a saber utilizar los demás sin ningún problema.
🛹 CONTENIDOS
Tendremos que hacer una breve búsqueda del tipo: "Framework Testing Framework JS".
Un ejemplo: "Jest React".
Hago un listado de los más utilizados actualmente, para que así podáis leer su documentación o buscar más información sobre ellos. Cualquier consulta, me la podéis realizar sin ningún problema.
Recomiendo encarecidamente, si vamos a usar una herramienta, que os miréis la documentación, porque ahí es donde vamos a ver cómo utilizarla.
👉 🖊 Documentación Jest
Empezamos con Jest, esta es la documentación oficial, empezaremos a ver como se instala.
👉 🖊 Da potencia y flexibilidad a tus tests con Jest
Breve artículo introductorio de como empezar con Jest, y da un repaso rápido a su uso.
👉 🖊 Probando componentes en React usando Jest: lo básico
Artículo donde veremos como se testea un simple componente con React.
👉 🖊 Karma: instalación
Vemos como instalar karma desde npm.
👉 🖊 Karma: configuración
Después de instalar Karma, vamos a ver como lo podemos configurar de una manera muy sencilla.
👉 🖊 Karma: ejemplo de uso con Angular
Vamos a utilizar Karma con una prueba unitaria en Angular. Si lo analizamos, es muy parecido a Jest.
👉 🖊 Mocha: instalación
Ahora tenemos la oportunidad de ver como instalar mocha, de una manera muy sencilla.
👉 🖊 Mocha: uso junto a Chai
Vamos a ver como utilizar Mocha junto a Chai, que es una librería de aserciones.
👉 🖊 Mocha: testing de API REST junto a Chai-HTTP
Otro ejemplo de como usar Mocha junto a Chai, en este casi Chai-HTTP.
👉 🖊 ¿Cómo instalar Jasmine?
Vamos a ver como instalar Jasmine y poder utilizarlo.
👉 🖊 Primera suite con Jasmine
Después de instalar Jasmine nos ponemos manos a la obra para hacer nuestros primeros tests.
👉 🖊 Testing con Jasmine y Angular
Los tests son una pieza fundamental en los proyectos de hoy en día. Si tienes un proyecto grande es esencial tener una buena suite de tests para poder probar la aplicación sin tener que hacerlo manualmente. Además si lo combinas con la integración continua puedes minimizar el riesgo y los bugs futuros.
👉 🖊 Tests unitarios en JavaScript con Jasmine
En JavaScript, Jasmine es un framework de test que permite crear tests fáciles de leer de forma que sirven también de documentación para el código.
👉 🖊 Documentación de EnzYME
Otra herramienta de testing, en este caso es una herramienta de testing para React. Aquí tenemos como instarlo y como ejecutar nuestros primeros tests.
👉 🖊 Herramientas de tests Testing Library
Testing library es un paquete que nos ayuda a testear nuestros componentes gráficos con una semántica mucho más clara. Aquí vamos a ver cómo empezar. A la derecha en Frameworks, tendremos todo el listado de Frameworks donde nos dirán como instalarlo.
👉 🖊 Cypress creando tests E2E
Llegamos a los tests E2E, donde vamos a usar Cypress. Os dejo varios recursos para instalarlo.
👉 🖊 Tutorial de Cypress para principiantes
Buen tutorial donde vamos a ver como empezar a utilizar Cypress, y realizando nuestros primeros tests.
👉 🖊 Escribiendo nuestro primer test con Cypress
Documentación oficial de Cypress, donde nos enseña a realizar nuestro primer test de forma sencilla
👉 🖊 Lista de asserts de Cypress
En la documentación oficial, tenemos la lista de asserts que podemos utilizar con Cypress.
👉 📦 🖊 Mejores prácticas de Testing
Esta es una guía completa para JavaScript y Node.js de la A a la Z. Resume y selecciona docenas de los mejores post de blogs, libros, y herramientas ofrecidas en el mercado.
👉 📹 Introducción al testing con JavaScript
Vídeo donde podemos ver una breve introduccióin al testing, de una manera sencilla y paso a paso.
👉 📹 Testing en frontend: ¿por qué está roto?. Usando Testing Library
Los tests que se rompen pero el código funciona, código que se rompe pero los tests pasan… ¿Qué pasa con el testing en frontend? Vamos a ver cómo escribir tests robustos, mantenibles y que nos den confianza con la ayuda de Testing Library
👉 📹 Escribe tests, no demasiados y sobre todo unitarios
Este vídeo de Codely nos promueve que escribamos tests, no demasiados pero que sean unitarios.
📱 PROGESSIVE WEB APPS (PWA)
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué son las Progressive Web Apps (PWA)?
Cada vez es más habitual escuchar que una empresa tiene una Progressive Web App, pero… ¿realmente sabemos qué es? En este post veremos qué es, cuáles son sus características, las tecnologías que emplea, sus ventajas y desventajas y, en definitiva, todo lo que convierte una PWA en una opción muy interesante para desarrollar un proyecto.
🛹 CONTENIDOS
👉 🖊 PWA ¿qué pasos tenemos que aprender para hacer nuestra app?
Desde la fundación Mozilla tenemos unos tutoriales interesantes para introducirnos en este mundo de las PWA. Tendrémos que ir por secciones para ir aprendiendo poco a poco sobre ello.
👉 🖊 Crea tu primera PWA paso a paso
Las denominadas “Progressive Web Apps” son un tipo de aplicación móvil pero construidas con tecnologías web, es decir, utilizando HTML, CSS y Javascript y funcionan en cualquier plataforma que contenga un browser donde ejecutarla
👉 🖊 📚 Manual de Progressive Web Apps
Manual de Progressive Web Apps, vamos a abordar una de las novedades más destacadas para la realización de sitios web de los últimos años, que está revolucionando el mundo del desarrollo, pero sobre todo el modo en el que los usuarios consumen los sitios y aplicaciones web.
👉 🖊 Creando nuestra primera PWA con Vanilla JS
Vamos a ver como empezar con la creación de una aplicación web progresiva (PWA) que aprovecha la API Web Push y la programación cron. En este artículo, cubriremos los conceptos básicos: el front-end, el manifiesto de la aplicación web y el aspecto de Service Worker de la aplicación, y solo usaremos JavaScript puro para lograrlo. Al final de esta publicación, tendremos una PWA en funcionamiento que está almacenada en caché para que se pueda acceder a ella sin conexión.
🖥 CREACIÓN APLICACIONES DE ESCRITORIO
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es una aplicación de escritorio?
Antes de ver las herramientas sobre creación de aplicaciones de escritorio, ¿realmente sabemos qué es una aplicación de escritorio?.
🛹 CONTENIDOS
👉 🖊 ¿Qué es Electron y quién lo utiliza?
Vamos a ver una breve introducción a Electron para ver que podemos hacer con esta herramienta.
👉 🖊 📚 Electron: guía de inicio rápido
Con esta herramienta podremos crear aplicaciones de escritorio de manera muy fácil. Aquí vamos a empezar como instalar Electron.
👉 🖊 📚 Documentación de Electron
La documentación de Electron es bastante completa, vamos a poder como realizar nuestra app de manera sencilla.
👉 🖊 📚 Desarrollando aplicaciones de escritorio con Electron.js
Aquí tenemos una breve introducción como funciona Electron. El contenido puede estar algo desfasado pero podemos quedarnos con la manera de funcionar.
📲 CREACIÓN APLICACIONES PARA MÓVILES
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es una aplicación nativa y qué es una aplicación híbrida?
Antes de meternos en harina, debemos de saber que diferencias tiene una y otra.
🛹 CONTENIDOS
👉 🖊 ¿Qué es React Native?
Esta herramienta nos va a permitir a realizar apps híbridas para móviles. Vamos a ver un poco quién está detrás y que podemos realizar.
👉 🖊 Primeros pasos con React Native: instalación
Vamos a dar nuestros primeros pasos con React Native, en esta ocasión empezamos a instalar esta herramienta
👉 🖊 Primeros pasos con React Native: introducción de uso
La documentación de React Native es muy extensa y vamos a encontrar muchos ejemplos para hacer nuestras apps híbridas. Podemos seguir el tutorial de la propia página de React Native.
👉 🖊 ¿Qué es Ionic?
Tenemos varias opciones de realizar aplicaciones híbridas, Ionic es otra opción. Vamos a ver que hace Ionic.
👉 🖊 Primeros pasos con Ionic: instalación
Vamos a dar nuestros primeros pasos con Ionic, en esta ocasión empezamos a instalar esta herramienta
👉 🖊 Primeros pasos con Ionic: instalando CLI
El CLI de Ionic nos va a ahorrar mucho tiempo a la hora de realizar nuestras estructuras en nuestra app.
👉 🖊 Primeros pasos con Ionic: empezando a desarrollar
Después de instalar Ionic y su CLI, vamos a empezar a crear nuestra primera app sencilla de la mano del propio equipo de Ionic.
👉 🖊 ¿Qué es NativeScript?
Ahora vamos a abarcar otra herramienta para hacer aplicaciones híbridas con NativeScript.
👉 🖊 Primeros pasos con NativeScript: instalación
Vamos a dar nuestros primeros pasos con NativeScript, en esta ocasión empezamos a instalar esta herramienta.
👉 🖊 🕹 Primeros pasos con NativeScript: instalación
Lo bueno que tiene NativeScript es que tiene un playground donde vamos a poder realizar pruebas en vivo con bastantes elementos para realizar nuestra aplicación.
👉 🖊 Documentación oficial NativeScript
Muchas veces una de las mejores maneras para ver que hace una herramienta es ver su documentación. Aquí tenemos la documentación de NativeScript.
👉 🖊 ¿Qué es Flutter?
Esta herramienta nos permite realizar apps Nativas a través de un lenguaje llamado Dart.
👉 🖊 Primeros pasos con Flutter: instalación
Aquí veremos como instalar Flutter. Tendremos que ver que sistema operativo tenemos y seguir las indicaciones.
👉 🖊 Primeros pasos con Flutter: configurar nuestro IDE
Una vez instalado tendrémos que configurar nuestor IDE para poder trabajar con Flutter.
👉 🖊 Primeros pasos con Flutter: test inicial
En este apartado vamos a ver como crear una app con Flutter desde una plantilla, la podremos ejecutar y ver el "hot reload".
👉 🖊 Primeros pasos con Flutter: escribe tu primera app
Después de todos los anteriores pasos vamos con lo más interesante: crear nuestra primera app.
👉 🖊 Primeros pasos con Flutter: aprender más
Ya hemos acabado con todos los tutoriales desde la página oficial, pero ¿ahora qué hacemos?. Nos ofrecen distintas fuentes para poder seguir.
👉 🖊 Documentación de Flutter
Una vez acabado todo, tenemos también la documentación de Flutter.
♺ GENERADOR DE PÁGINAS ESTÁTICAS
🧠 CONOCIMIENTOS PREVIOS
👉 ❓ ¿Qué es una página web estática?
Primero vamos a ver que es "una página web estática".
🛹 CONTENIDOS
👉 🖊 ¿Qué es NextJS?
Breve introducción sobre NextJS para saber que es y que tecnologías tiene detrás
👉 🖊 Breve introducción con NextJS
Artículo donde nos va a explicar como empezar con NextJS
👉 🖊 Documentación NextJS
Documentación de esta herramienta donde empezaremos a instalarla y adentrarnos más profundamente en ella.
👉 🖊 ¿Qué es Gatsby?
Herramienta para generar webs con contenido estático de una manera fácil.
👉 🖊 Documentación de Gatsby
En la documentación de Gatsby empezaremos nuestros primeros pasos instalando esta herramienta.
👉 🖊 Tutorial Gatsby
La propia documentación de Gatsby tiene un tutorial para poder empezar a usar esta herramienta.
👉 🖊 ¿Qué es NuxtJS?
Herramienta para creación de herramientas estáticas.
👉 🖊 Instalación de NuxtJS
Desde su documentación oficial podremos ver como instalar esta herramienta. También aprenderemos un poco más sobre enrutamiento y estructura de directorios.
👉 🖊 Ejemplos hechos con NuxtJS
Ejemplos para poder ver como se implementan ciertas cosas, desde un hola mundo, hasta SEO.
👉 🖊 ¿Qué es Jekyll?
Otra herramienta para poder realizar páginas web estáticas.
👉 🖊 Documentación Jekyll
Documentación oficial de Jekyll donde veremos como instalarlo y algunos recursos para empezar.
👉 🖊 ¿Qué es Hugo?
Herramienta para la creación de páginas web estáticas.
👉 🖊 Instalación de Hugo y primeros pasos
En la documentación oficial tendremos nuestros primeros pasos de como instalar esta herramienta y como seguir con ella.
📚 CURSOS/MINIBOOTCAMPS
👉 📚 🕹 FreeCodeCamp
Es una organización sin ánimo de lucro consistente en una una plataforma web de enseñanza interactiva accesible para todo el mundo. Al final puedes conseguir un certíficado de que has realizado todos los ejercicios de esta plataforma. Es totalmente gratuito.
👉 📚 Fullstackopen
Este curso sirve como una introducción al desarrollo de aplicaciones web modernas con JavaScript. El objetivo principal es crear aplicaciones SPA con ReactJS que utilizan API REST creadas con Node.js. El curso también contiene una sección sobre GraphQL, una alternativa moderna a las API REST.
👉 📚 The Odin Project
Es uno de esos recursos gratuitos de "lo que desearía tener cuando estoy aprendiendo". Proyecto interesante y que podemos seguir aprendiendo, y que tiene un Path de Full Stack JavaScript.
👉 📚 Dash General Assembly
Dash es un curso en línea divertido y gratuito que te enseña los conceptos básicos del desarrollo web a través de proyectos que puedes realizar en tu navegador.
👉 📚 Khan Academy
Organización sin ánimo de lucro cuya misión es la de brindar una educación gratuita de clase mundial para cualquier persona, en cualquier lugar. En nuestro campo, hay distintos cursos de programación 100% grauitos.
👉 📚 Exercism
Mejora tus habilidades de programación con 3450 ejercicios en 52 idiomas y con un equipo dedicado de mentores. Los ejercicios son 100% gratis por siempre.
👉 📚 Sololearn
Plataforma para ayudar a les usuaries a aprender los conceptos básicos de los principales lenguajes de programación mediante la explicación de teoría y una serie de ejercicios prácticos con los que demostrar que, de verdad, hemos entendido el concepto.
👉 📚 Microsoft Frontent Bootcamp
Es un taller de dos días, aprenderás los conceptos básicos del desarrollo frontend mientras creas una aplicación web que funciona.
👉 🖊 📚 📑 Material Adalab
Adalab es una escuela especializada en formación digital para mujeres. Trabajan para formar y acompañar a mujeres que buscan un giro profesional adaptado a las nuevas necesidades de las empresas. Aquí tenemos el material que utilizan y que podemos seguir perfectamente.
👉 📦 🖊 📚 📑 📹 📖 Material Fictizia
Fictizia es una de las mejores escuelas para poder estudiar desarrollo en Madrid. Aquí tenemos todos los repositorios de todos los cursos que se han impartido hasta ahora. Tenemos todo el material que tienen les alumnes.
👉 📹 📚 Bootcamp realizado por midudev de Fullstackopen
Bootcamp realizado por @midudev, donde vas a realizar con él, el bootcamp de Fullstackopen desde el principio.
👉 📹 📚 Programando en vivo con Leónidas Esteban
Leónidas nos propone realizar junto a él distintos proyectos que te ayudaran a poner tus conociminetos de HTML5, CSS3 y JS a prueba.
🗡 KATAS
👉 🕹 Codewars
Ponte a prueba con katas, creado por la comunidad para fortalecer diferentes habilidades. Domina el idioma que prefieras o amplía tu comprensión de uno nuevo.
👉 🕹 Dev Challenges
Retos desde: responsive web developer, frontend-developer, fullstack developer, etc. Tenemos muchos recuros para poner a prueba nuestros conocimientos.
🤔 SITIOS DE INTERÉS O RECURSOS DE INTERÉS
👉 ❓ Google/Duckduckgo
Dirás, ¿este se le ha ido la cabeza?, pues no. Un buscador siempre nos va a salvar en muchas ocasiones, y tenemos que saber buscar. Os doy el consejo de buscar siempre lo que queráis en inglés.
👉 ❓ Stackoverflow
Es la biblia para les programadores, aquí la gente pone su duda y la gente le ayuda a buscar una solución.
👉 ❓ Can I use?
Podemos ver si una característica de HTML o CSS es compatible con todos los navegadores.
👉 📚 MDN Mozilla
Hemos utilizado este recurso en este documento, pero tiene más secciones las cuales puedes explorar. Tiene un montón de artículos y siempre es bueno tenerlos a mano o echarles un vistazo.
👉 📚 Cómo se hace de W3Schools
Desde la w3schools tenemos distintos ejemplos de como realizar desde una cabecera con vídeo o un botón animado.
👉 📦 📑 APIs públicas
APIs para usar en tus pet projects o en proyectos de pruebas.
👉 📦 🖊 Mejores prácticas para Node
Documento donde nos ponen las mejores prácticas para utilizar NodeJS.
👉 📦 🖊 📑 Frontend check-list
La lista de verificación de front-end es una lista exhaustiva de todos los elementos que necesita tener / probar antes de lanzar tu sitio web / página HTML a producción.
👉 🖊 Manual de Docker
Manual muy completo para utilizar docker, desde la instalación hasta como utilizarlo.
👉 🖊 📚 Tutoriales NeoGuias
Tutoriales de Neoguias, encontraréis de Vue, React, JavaScript... Muy recomendables.
👉 🖊 📚 Tutoriales LenguajeJS
En esta página encontraréis mucho material en todo lo relacionado con JavaScript (también de HTML, CSS o Terminal).
👉 🖊 Manual Terminal Linux
Interesante artículo de freeCodeCamp, sobre comandos de consola para Linux (también vale para macOS). Es una lista bastante extensa, la veo bastante completa.
👉 🖊 Manual Terminal Windows/Linux/OSX
Tutorial de linea de comandos de la mano de DjangoGirls, en este caso tenemos incluida la terminal de Windows.