El camino del Frontend Developer, por MrCodeDev

En este repositorio de Github de MrCodeDev vas a encontrar una importante lista de recursos para ayudarte a emprender el camino de llegar a ser Frontend Developer.

El repositorio, ha sido creado por MrCodeDev y si deseas aportar algún contenido, puedes considerar el contactar con él; o bien, enviar un PR a través del repositorio de Github.

Por último, si lo deseas, puedes invitar a un cafelito al creador ?

A continuación, tienes una simbología del significado de los íconos que te vas a encontrar.

Simbología del Camino del Desarrollador Frontend

Emoji ¿Qué significa cada uno de los íconos?
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
Contenido ninja ?

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.

? Conocimientos Básicos de Informática

? Conocimientos Previos

?❓ ¿Qué es la informática?

Vamos a empezar con lo principal, cómo empezó esto de los ordenadores.

? ? URL: https://www.wikiwand.com/es/Inform%C3%A1tica

La Historia de las Computadoras

Personajes Históricos de la Historia de las Computadoras

?❓ ¿Qué es Internet y cómo nació?

El origen de Internet, cómo nació y su funcionamiento.

? ? URL: https://www.wikiwand.com/es/Internet

?❓ El verdadero origen de Internet

Artículo interesante donde nos cuenta la verdadera historia que hay detrás del nacimiento de Internet.

? ? URL: https://www.microsiervos.com/archivo/internet/el-verdadero-origen-de-internet.html

?❓ ¿Qué es HTTP?

Se dice mucho la palabra HTTP pero, ¿realmente qué quiere decir?.

? ? URL: https://www.wikiwand.com/es/Protocolo_de_transferencia_de_hipertexto

?❓ Códigos de estado HTTP

Los códigos de estado de respuesta HTTP indican si se ha completado satisfactoriamente una solicitud HTTP específica.

? ? URL: https://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP

? ? URL: https://developer.mozilla.org/es/docs/Web/HTTP/Status

?❓ Cómo funcionan los navegadores

Cómo funcionan los navegadores: lo que hay detrás de los navegadores web actuales

? ? URL: https://www.html5rocks.com/es/tutorials/internals/howbrowserswork/

?❓ ¿Qué son las DNS?

Tenemos normalizado los nombres de dominio, pero no realmente lo que es una DNS, aquí vemos una explicación.

? ? URL: http://wikiwand.com/es/Sistema_de_nombres_de_dominio

?❓ ¿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.

? ? URL: https://www.wikiwand.com/es/Direcci%C3%B3n_IP

?❓ ¿Qué es un hosting?

Realmente cuando tenemos una app o una web necesitamos alojarlo en un lugar, aquí interviene el hosting.

? ? URL: https://www.wikiwand.com/es/Alojamiento_web

?❓ ¿Qué es Cloud?

Qué es este paradigma que está de moda.

? ? URL: https://www.wikiwand.com/es/Computaci%C3%B3n_en_la_nube

?❓ ¿Qué es una API?

Para nuestros desarrollos lo más seguro es que tengamos que usar APIs, tendremos que saber realmente lo que son.

? ? URL: https://www.wrike.com/es/blog/que-es-una-api-necesitas-saber/

?❓ ¿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.

? ? URL: https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado

Los Mejores IDE

Los Mejores Editores Python

Los Mejores Editores PHP

Los Mejores Editores Java

? HTML

? Conocimientos Prrevios

?❓ ¿Qué es HTML?

Hemos escuchado alguna vez la palabra HTML, pero no sabemos realmente lo que es, aquí podrás ver que signfica.

? ? URL: https://developer.mozilla.org/es/docs/Web/HTML

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started

?❓ ¿Qué es el DOM?

Hemos escuchado alguna vez la palabra DOM, pero no sabemos realmente lo que es, aquí podrás ver que signfica.

? ? URL: https://desarrolloweb.com/articulos/que-es-el-dom.html

?❓ ¿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.

? ? URL: https://www.wikiwand.com/es/World_Wide_Web_Consortium

?❓ ¿Qué es HTML5?

Si no sabes que es realmente HTML5, aquí tienes un artículo donde te lo explican.

? ? URL: https://www.wikiwand.com/es/HTML5

? CONTENIDOS

??? Empezando con la web

Nuestros primeros pasos para prepararnos para escribir páginas web en HTML.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started

??? Empezando con las bases del HTML

Breve introducción al HTML.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Metados_en

??? Texto en HTML

Fundamentos para introducir texto en HTML.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/texto

??? Hipervínculos en HTML

Cómo introducir enlaces dentro de HTML y seguir los estándares.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks

??? Texto avanzado en HTML

En un capítulo anterior hemos visto como introducir texto, pero ahora de una manera más avanzada.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Debugging_HTML

??? Estructurar una página de contenido HTML

En qué estructuras podemos dividir una página.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Estructuraci%C3%B3n_de_una_p%C3%A1gina_de_contenido

??? Formulario en HTML5

Una de las tareas más rutinarias será realizar formularios.

? ? URL: https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_HTML5

??? Imágenes adaptables en HTML5

Cómo adaptar imágenes en HTML para que se vean bien en todos los dispositivos.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

??? 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.

? ?URL: https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-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.

? ?URL: https://www.w3schools.com/html/html_intro.asp

?? Tutorial de cómo construir una página web

Aprende los conceptos básicos de HTML5 y desarrollo web en este curso para principiantes.

? ?URL: https://www.youtube.com/watch?v=pQN-pnXPaVg

?? Listado elementos HTML

Listado de elementos HTML con ejemplos y ejercicios.

? ?URL: https://www.w3schools.com/html/default.asp

⚔ < a href=”https://ciberninjas.com/cursos-lenguajes-marcado/”>Los Mejores Cursos de Lenguajes de Marcado

♿️ ACCESIBILIDAD

? CONTENIDOS

?? The a11y project

Página web de la comunidad “The a11y project” donde tiene artículos muy interesantes sobre accesibilidad.

? ?URL: https://www.a11ywithlindsey.com/

?? Blog a11 with Lindsey

Blog de Lindsey que se dedica a todo el tema de la accesibilidad, siempre tiene artículos muy pero que muy interesantes.

? ?URL: https://www.a11ywithlindsey.com/

?? Listado de accesibilidad Deque University

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.

? ?URL: https://dequeuniversity.com/checklists/web/

??? Recopilatorio apuntes accesibilidad

Gracias a Alena Nikolaeva, tenemos unos apuntos sobre accesibilidad que podemos utilizar en nuestro día a día.

? ?URL: https://www.notion.so/Quick-wins-and-easy-checks-7efac3ef91c24e5fbfd184dc3e25d8e8

?? Newsletter a11

Newsletter para recibir toda la actualidad sobre accesibilidad.

? ?URL: https://a11yweekly.com/

?? 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.

? ? URL: https://octuweb.com/testeando-accesibilidad-web/

?? Blog de Adrián Bolonio

Blog de Adrián donde suele subir artículos sobre accesibilidad web

? ? URL: https://www.adrianbolonio.com/es/blog

Los Mejores cursos de Accesibilidad

? CSS

? Conocimientos Previos

?❓ ¿Qué es CSS y CSS3?

Definición de qué es CSS y ver que estamos actualmente en la versión 3.

? ? URL: https://www.wikiwand.com/es/Hoja_de_estilos_en_cascada

? CONTENIDOS

??? ¿Qué es CSS?

Nos resuelve la pregunta qué es CSS y qué requisitos necesitamos para aprenderlo (principalmente saber HTML).

? ? URL: https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS

??? Introducción a CSS

Vamos a empezar a dar nuestros primeros pasos en CSS.

? ? URL: https://developer.mozilla.org/es/docs/Learn/CSS

??? Cómo se estructura el CSS

Profundizamos un poco más en la estructura del lenguaje.

? ? URL: https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS

??? Cómo funciona CSS

Sabemos ya cómo funciona el lenguaje, ahora falta saber cómo lo utiliza el navegador.

? ? URL: https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Como_funciona_CSS

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento

??? 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?.

? ? URL: https://developer.mozilla.org/es/docs/CSS/Media_queries

??? Tipos de medios media queries

Tipos de medios para especificar las media queries

? ? URL: https://developer.mozilla.org/es/docs/Web/CSS/@media

??? Cómo usar media queries en nuestro código

En CSS sabemos como utilizar media queries, pero ¿y en nuestro código JS?.

? ? URL: https://developer.mozilla.org/es/docs/Web/Guide/CSS/probando_media_queries

?? Estándar de dispositivos para media queries

Listado de los tamaños de dispositivos que podemos tener como referencia para realizar media queries.

? ?URL: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS

?? CSS básico práctico

Curso donde podremos aprender sobre CSS básico y de forma 100% práctica.

? ?URL: https://www.freecodecamp.org/learn/responsive-web-design/basic-css/

??? ? 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.

? ? URL: https://flexboxfroggy.com/

??? ? 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.

? ? URL: https://cssgridgarden.com/#es

??? ? CSS Diner

Con CSS Diner aprenderemos a utilizar los selectores de CSS a través de un minijuego.

? ?URL: https://flukeout.github.io/

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS

??? Resumen sobre animaciones CSS

Resumen sobre animaciones con CSS.

? ? URL: https://developer.mozilla.org/es/docs/Web/CSS/animation

?? Performance con animaciones CSS

Artículos que hablan sobre performance al realizar animaciones CSS.

? ?URL: https://www.html5rocks.com/en/tutorials/speed/rendering/

? ?URL: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

?? 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

? ?URL: https://alistapart.com/article/web-animation-at-work/

?? 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.

? ?URL: https://24ways.org/2012/flashless-animation/

?? 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).

? ?URL: https://24ways.org/2014/five-ways-to-animate-responsibly/

?? Trucos al realizar animaciones con CSS

Trucos que podemos realizar a la hora de hacer nuestras animaciones con CSS.

? ?URL: https://css-tricks.com/css-animation-tricks/

?? Empezando con CSS nivel intermedio

Excelente artículo donde nos explica cómo realizar una animación con coches.

? ?URL: https://css-tricks.com/starting-css-animations-mid-way/

?? Animaciones con CSS de W3Schools

Apartado de cómo realizar animaciones en CSS de W3Schools.

? ?URL: https://www.w3schools.com/css/css3_animations.asp

?? Crear un cubo 3D sólo con CSS

Gran artículo de cómo crear un cubo 3D con CSS y JQuery.

? ? URL: https://devcode.la/tutoriales/crear-un-cubo-3d-con-css/

?? Animación cubo 3D con CSS

Creación de una animación 3D de un cubo, con sólo CSS.

? ? URL: http://abarcarodriguez.com/blog/entendiendo-la-transformacion-3d-con-css3

?? 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.

? ?URL: https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/

?? 20 impresionantes ejemplos de transformaciones CSS 3D

20 ejemplos impresionantes de transformaciones en 3D solo usando CSS.

? ?URL: https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759

?? 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.

? ?URL: https://redstapler.co/10-stunning-css-3d-effect-must-see/

?? 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.

? ? URL: https://picodotdev.github.io/blog-bitix/2020/04/animaciones-y-transformaciones-2d-y-3d-con-css/

?? Draft sobre animaciones CSS W3C

Draft sobre la especificación de la W3C para realizar animaciones con CSS.

? ?URL: https://drafts.csswg.org/css-animations-1/

?? 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.

? ?URL: https://www.w3schools.com/css/css_intro.asp

?? Apuntes CSS básico/intermedio

Apuntes de CSS realizados por Majo Ledesma, que son muy buenos y tienen un estilo único.

? ? URL: https://losapuntesdemajo.now.sh/

?? Evita utilizar media queries

Artículo muy interesante donde se plantean utilizar lo mínimo las media queries

? ? URL: https://goiblas.com/evitar-utilizar-css-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.

? ? URL: https://github.com/spacenomads/pantallas-retina-y-unidades

??? Taller CSS Grid Layout

Taller impartido por Diana Aceves, una referente en nuestro sector, que nos enseña cómo usar CSS Grid Layout

? ? URL: https://youtu.be/AxVXpS6PyRE

??? Rock N’Grid

Otro taller impartido por Diana Aceves, que recrea ilustraciones usando CSS Grid Layout

? ? URL: https://youtu.be/p7oXrr9yjXY

??? Taller Flexbox

Otro taller impartido por Diana Aceves, que nos introduce al uso de Flexbox.

? ? URL: https://youtu.be/job5SOuS7Ko

??? 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

? ?URL: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

??? 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

? ?URL: https://css-tricks.com/snippets/css/complete-guide-grid/

??? Listado elementos CSS

Listado de elementos CSS con ejemplos y hasta con ejercicios.

? ?URL: https://www.w3schools.com/css/default.asp

Los Mejores Cursos de CSS

? JAVASCRIPT

? Conocimientos Previos

?❓ Qué es JavaScript y un poco de historia

Empezamos a introducirnos con JavaScript sabiendo que es y como fueron sus inicios.

? ? URL: https://www.wikiwand.com/es/JavaScript

?❓ ¿Es lo mismo JAVA que JavaScript?

Mucha gente puede confundir estos dos términos, pero son dos lenguajes totalmente diferentes.

? ? URL: https://desarrolloweb.com/articulos/492.php

?❓ ¿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.

? ? URL: https://www.ardepizando.com/que-es-vanilla-js/

?❓ ECMAScript

Vamos a escuchar mucho la palabra ECMAScript o ESX, pues realmente es una especificación del lenguaje.
.

? ? URL: https://www.wikiwand.com/es/ECMAScript
? ? URL: https://desarrolloweb.com/articulos/494.php

?❓ 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.

? ?ES5(2009): https://www.wikiwand.com/es/ECMAScript

? ?ES6(2015): https://www.w3schools.com/js/js_es6.asp

? ?ES2016: https://www.w3schools.com/js/js_2016.asp

? ?ES2017: https://www.w3schools.com/js/js_2017.asp

? ?ES2018: https://www.w3schools.com/js/js_2018.asp

? ?ES2019: http://blog.enriqueoriol.com/2020/04/javascript-es2019-novedades.html

? ?ES2020: https://www.freecodecamp.org/news/javascript-new-features-es2020/

? ?ES2020: https://cosasdigitales.com/articulos-diseno-web/es2021-es12-novedades-de-la-ultima-version-de-javascript/

?❓ ¿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.

? ? URL: https://www.wikiwand.com/es/Programaci%C3%B3n_funcional

? ? URL: https://domingogallardo.github.io/apuntes-lpp/teoria/tema02-programacion-funcional/tema02-programacion-funcional.html

? ? URL: https://blog.softtek.com/es/programaci%C3%B3n-funcional-con-javascript-i#:~:text=La%20programaci%C3%B3n%20funcional%20es%20un,y%20no%20en%20c%C3%B3mo%20hacerlo.

? ? URL: https://janpierrsanchez.medium.com/introducci%C3%B3n-a-programaci%C3%B3n-funcional-con-javascript-9ef140319865

? ? URL: https://softwarecrafters.io/javascript/introduccion-programacion-funcional-javascript

? CONTENIDOS

??? Primeros pasos con JavaScript

Repaso de JavaScript visto desde un alto nivel, así podrás tener una idea rápida del lenguaje.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript

??? Fundamentos de JavaScript

JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web.

? ? URL: https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics

??? Primer contacto con JavaScript

Después de la teoría viene la práctica, vamos a empezar a escribir código.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/A_first_splash

??? ¿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?.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_went_wrong

?? 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.

? ? URL: https://www.youtube.com/watch?v=cC65D2q5f8I&ab_channel=LaCocinadelC%C3%B3digo

??? Las variables en JS

Vamos a descubrir las variables en JavaScript y que tipos hay.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables

?? 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.

? ? URL: https://www.youtube.com/watch?v=bvkY9ey83yY&ab_channel=LaCocinadelC%C3%B3digo

?? 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.

? ? URL: https://www.youtube.com/watch?v=ojrvxYcKeYg&ab_channel=LaCocinadelC%C3%B3digo

?? 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.

? ? URL: https://www.youtube.com/watch?v=s-7C09ymzK8&ab_channel=LaCocinadelC%C3%B3digo

??? Operaciones y operadores en JS

Ahora es el momento de dar operaciones con números y operadores.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math

??? Cadenas en JS

Vamos a jugar con cadenas y ver como podemos concatenar todo tipo de variables.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Strings

??? Métodos para cadenas en JS

Ya sabemos concatenar cadenas, pues en el siguiente artículo, vamos a utilizar métodos para manipular cadenas.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Arrays

?? **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.

? ? URL: https://www.youtube.com/watch?v=tP8JiVUiyDo&ab_channel=LaCocinadelC%C3%B3digo

??? Generador de historias absurdas

Con todo lo aprendido anteriormente, vamos a relizar un generador de historias absurdas.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator

??? Condicionales en JS

Vamos a ver ya estructuras de código más complejo, ahora le toca el turno a los condicionales.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals

??? Bucles en JS

Una vez visto los condicionales, ahora vamos a ver los bucles, ¡debemos de no caer en un bucle infinito!.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions

??? Creando nuestra propia función en JS

Hemos visto como se hacen funciones o métodos, ¿por qué no creamos ahora uno nosotres mismes?.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion

??? 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?.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Return_values

??? Eventos en JS

Los eventos son una cosa que vamos a estar usando siempre, y tenemos que saber usarlos junto controlarlos.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Eventos

??? Crear nuestra galería de imágenes en JS

Para finalizar crearemos una galería de imágenes funcional.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Galeria_de_imagenes

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Basics

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object-oriented_JS

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object_prototypes

??? Herencia en JS

Después de los prototipos vamos a ver lo que es una herencia y como utilizarla a nuestro favor.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Inheritance

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/JSON

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Asynchronous/Concepts

??? 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.

? ?URL: https://github.com/frontarm/async-javascript-cheatsheet

??? 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing

??? Timeouts e intervalos en JS

Vamos a ver en detalle los timeouts y los intervalos junto a su uso.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals

??? Promesas en JS

Todo código asíncrono devuelve una promesa, así que es el momento de ver que es una promesa.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises

??? 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

??? 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach

??? 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?.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Introducci%C3%B3n

??? 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

??? 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs

??? 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics

??? Vídeo y audio (opcional)

HTML5 viene con elementos para incrustar medios enriquecidos en documentos de video y audio.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Forms

??? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados

??? 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript

??? 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.

? ?URL: https://javascript.info/

?? 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.

? ? URL: https://github.com/UlisesGascon/javascript-inspirate

?? 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.

? ?URL: https://eloquentjavascript.net/

??? 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.

? ?URL: https://www.w3schools.com/js/js_intro.asp

???? ES6 para humanos

Repaso a las funcionalidades añadidas en ES6 como: let, const, arrow functions, etc.

? ? URL: https://github.com/metagrover/ES6-for-humans/tree/spanish-version

???? 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í.

? ?URL: https://github.com/adonismendozaperez/33-js-conceptos

???? 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.

? ?URL: https://github.com/mbeaudru/modern-js-cheatsheet

?? Apuntes JavaScript básico

Apuntes de JavaScript básico realizados por Majo Ledesma, que son muy buenos y tienen un estilo único.

? ? URL: https://losapuntesdemajo.now.sh/

???? 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.

? ?URL: https://github.com/ryanmcdermott/clean-code-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.

? ?URL: https://github.com/iluwatar/programming-principles

???????? 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í.

? ??URL: https://github.com/sergiodxa/impresionante-javascript

??? 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í.

? ?URL: https://github.com/wesbos/JavaScript30

?? 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.

? ?URL: http://bonsaiden.github.io/JavaScript-Garden/

?? 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.

? ?URL: https://gitbookio.gitbooks.io/javascript/content/

??? 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í.

? ?URL: https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md

??? 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.

? ?URL: https://www.w3schools.com/js/default.asp

?? Algoritmos de JS

Listado de ejemplos de algorítmos realizados en JavaScript. Tienes desde Sorts, Strings, o hasta de algebra lineal.

? ?URL: https://github.com/TheAlgorithms/Javascript

?? Algoritmos y Estructuras de Datos en JavaScript

Repositorio que contiene ejemplos basados en JavaScript de muchos algoritmos y estructuras de datos populares.

? ? URL: https://github.com/trekhleb/javascript-algorithms/blob/master/README.es-ES.md

?? 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.

? ?URL: https://github.com/GitbookIO/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.

? ?URL: https://github.com/TheAlgorithms/Javascript

?? 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.

? ? URL: https://github.com/lydiahallie/javascript-questions/blob/master/es-ES/README-ES.md

?? Awesome JavaScript

Colección de librerías de JavaScript, recursos y cosas muy interesantes.

? ?URL: https://github.com/sorrycc/awesome-javascript

?? Awesome JavaScript

Colección de librerías de JavaScript, recursos y cosas muy interesantes.

? ?URL: https://github.com/sorrycc/awesome-javascript

?? Patrones de JavaScript

Recurso donde alojan una colección de patrones que podemos utilizar en JavaScript.

? ?URL: https://github.com/shichuan/javascript-patterns

?? Computer Science en JavaScript

Colección de paradigmas, algoritmos y enfoques clásicos de la informática escritos en JavaScript.

? ?URL: https://github.com/humanwhocodes/computer-science-in-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.

? ?URL: https://www.sitepoint.com/premium/books/javascript-best-practice/read/1?fromBlog=true&campaign=js-best-practice-reader

¿Cómo Aprender Javascript?

? 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?

? ? URL: https://www.wikiwand.com/es/Control_de_versiones

? ? URL: https://git-scm.com/book/es/v2/InicioSobre-el-Control-de-Versiones-Acerca-del-Control-de-Versiones

? ?URL: https://www.atlassian.com/es/git/tutorials/what-is-version-control

?❓ 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.

? ? URL: https://www.wikiwand.com/es/Git

? ? URL: https://git-scm.com/book/es/v2/InicioSobre-el-Control-de-Versiones-Fundamentos-de-Git

?❓ ¿Qué es un repositorio?

Después de saber que es un control de versiones y git la siguiente pregunta es: ¿qué es un repositorio?.

? ? URL: https://www.wikiwand.com/es/Repositorio_(contenido_digital)

? 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.

? ? URL: https://rogerdudler.github.io/git-guide/index.es.html

??? Aprende git branching

Lecciones interactivas del uso de Git, donde podremos utilizar los comandos más usados.

? ? URL: https://learngitbranching.js.org/?locale=es_ES

?? Git Like a Pro

Libro en inglés donde nos enseñará como usar git de una manera mucho más avanzada.

? ?URL: http://book.git-scm.com/book/en/v2

? ? URL: https://uniwebsidad.com/libros/pro-git

?? 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.

? ?URL: https://github.com/eficode-academy/git-katas

?? Cheatsheet git

Cheatsheet con los comandos de git.

? ?URL: https://education.github.com/git-cheat-sheet-education.pdf

??? Guía de GitHub

Guía oficial de uso de GitHub. Una vez aprendido como funciona GitHub, vas a saber utilizar GitLab, Bitbucket, etc.

? ?URL: https://guides.github.com/

? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web

?? Tips seguridad Frontend

Artículo sobre tips en seguridad si eres Frontend Developer.

? ? URL: https://www.glajumedia.com/tips-seguridad-frondend/

?? Recomendaciones de seguridad para aplicaciones front-end

Artículo que habla un poco sobre la seguridad web y que cosas debes de no realizar.

? ? URL: https://www.purocodigo.net/articulo/recomendaciones-de-seguridad-para-aplicaciones-front-end

?? .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.

? ? URL: https://carrero.es/htaccess-tutorial/

?? Política CORS

Aquí tenemos un artículo que nos habla que es el CORS.

? ? URL: https://lenguajejs.com/javascript/peticiones-http/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.

? ? URL: https://www.wikiwand.com/es/Sistema_de_gesti%C3%B3n_de_paquetes

?❓ ¿Qué es NPM?

Ya sabemos que es un administrador de paquetes, ahora vamos hablar de NPM que es uno de ellos.

? ? URL: https://www.wikiwand.com/es/Npm

?❓ ¿Qué es Yarn?

Hemos hablado de Npm, pero no es el único gestor de dependencias, ahora hablaremos de yarn.

? ? URL: https://www.wikiwand.com/es/Yarn_(Facebook)

?❓ ¿Qué es NodeJS?

Aunque no estemos desarrollando en NodeJS, tenemos qué saber que es y qué hace.

? ? URL: https://www.wikiwand.com/es/Node.js

? CONTENIDOS

??? ¿Cómo instalar NodeJS?

Es recomendable tener instalado NodeJS, además que a través de él, tendremos acceso a npm o npx.

? ? URL: https://midu.dev/como-instalar-node-en-mac-y-windows/

??? Primeros pasos con Npm

Hemos hablado de Npm, pero no es el único gestor de dependencias, ahora hablaremos de yarn.

? ? URL: https://www.freecodecamp.org/espanol/news/node-js-npm-tutorial/

??? Introducción a Npm hasta avanzado

Artículos interesantes sobre Npm desde empezar con él, hasta hacer cosas más avanzadas.

? ? URL: https://lenguajejs.com/npm/introduccion/que-es/

??? ¿Cómo instalar Yarn?

Vamos a instalar Yarn, nunca está de más tener npm y yarn instalados a la vez.

? ? URL: https://elsolitario.org/post/instalacion-de-yarn/

? ?URL: https://classic.yarnpkg.com/en/docs/install

??? Introducción a Npm hasta avanzado

Artículos interesantes sobre Npm desde empezar con él, hasta hacer cosas más avanzadas.

? ? URL: https://lenguajejs.com/npm/introduccion/que-es/

??? 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.

? URL: https://yarnpkg.com/getting-started

? ARQUITECTURAS CSS

? CONTENIDOS

?? Metodologías y arquitecturas CSS

Artículo que da un repaso a las arquitecturas o metodologías que existen para CSS.

? ? URL: https://medium.com/williambastidasblog/metodolog%C3%ADas-o-arquitecturas-css-oocss-bem-smacss-itcss-atomic-design-a1a3cfbfa6c9

?? Cómo debería de ser tú código CSS

Artículo que nos explica como debería de ser nuestro código CSS.

? ? URL: https://cosasdigitales.com/articulos-diseno-web/arquitectura-css-como-deberia-ser-tu-codigo-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.

? ? URL: https://www.youtube.com/watch?v=B9Qwq_MKuqY

? Preprocesadores CSS y Post CSS

? Conocimientos Previos

?❓ ¿Qué son los prepocesadores CSS?

Una breve descripción de que es un preprocesador CSS.

? ? URL: https://developer.mozilla.org/es/docs/Glossary/Preprocesador_CSS

? ? URL: https://abalozz.es/que-es-un-preprocesador-de-css/

? ? URL: https://picodotdev.github.io/blog-bitix/2020/08/que-hace-y-ventajas-de-un-preprocesador-de-estilos-css/

? Contenidos

?? Tutorial SASS

Excelente artículo que nos habla un poco de que es SASS y como instalarlo.

? ? URL: https://codingpotions.com/tutorial-sass

??? 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.

? ?URL: https://sass-lang.com/guide

? ?URL: https://sass-lang.com/documentation

??? 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.

? ?URL: http://lesscss.org/usage/

? ?URL: http://lesscss.org/features/

?? Intalación Stylus

Artículo sencillo de como instalar Stylus CSS

? ? URL: https://devcode.la/tutoriales/instalacion-de-stylus/

?? Intalación Stylus

Artículo de cómo usar Stylus.

? ? URL: https://devcode.la/tutoriales/que-es-stylus-preprocesador-de-css/

??? Documentación oficial Stylus

Documentación de Stylus bastante completa.

? URL: https://stylus-lang.com/

??? Documentación oficial instalación PostCSS

Documentación oficial de instalación de PostCSS.

? ?URL: https://github.com/postcss/postcss#usage

??? Documentación oficial de uso de PostCSS

Documentación oficial de uso de PostCSS.

? ?URL: https://github.com/postcss/postcss/tree/main/docs

??? 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.

? ? URL: https://www.youtube.com/watch?v=ssAUyf0kpfo

?? Yo prefiero CSS

Artículo de Joan León sobre PostCSS, desde su punto de vista. Hace un repaso sobre este preprocesador de CSS.

? ? URL: https://joanleon.dev/postcss

? 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.

? ?URL: https://dev.to/netlify/choosing-a-javascript-build-tool-to-config-or-not-config-2ia8

?❓ ¿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.

? ?URL: https://stackoverflow.com/questions/28684041/what-is-the-purposes-of-javascript-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.

? ?URL: https://dev.to/netlify/choosing-a-javascript-build-tool-to-config-or-not-config-2ia8

?? 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.

? ?URL: https://hackernoon.com/javascript-build-tools-and-automation-systems-9589c5c91ebe

?? 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.

? ?URL: https://survivejs.com/webpack/appendices/comparison/

?? 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.

? ?URL: https://www.sitepoint.com/javascript-tools-to-look-out-for/

???? 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.

? ?URL: https://www.learnwithjason.dev/blog/learn-rollup-js

? 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.

? ? URL: https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks

?❓ 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.

? ? URL: http://notasjs.blogspot.com/2014/09/diferencia-entre-libreria-y-framework.html

?❓ 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction

?❓ 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.

? ?URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features

?❓ 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.

? ?URL: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

Estado de Javascript en 2020

?❓ 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.

? ? URL: http://blog.enriqueoriol.com/2018/08/que-es-redux.html

? ? URL: https://carlosazaustre.es/como-funciona-redux-conceptos-basicos

?❓ ¿Qué es TypeScript?

Breve introducción a TypeScript de la mano de Software Crafters, donde veremos un poco por encima de que va TypeScript.

? ? URL: https://softwarecrafters.io/typescript/typescript-tutorial-javascript-introduccion

?❓ Aprende los tipos de datos en TypeScript

Artículo donde nos enseñarán a tipar bien nuestros datos en TypeScript.

? ?URL: https://www.freecodecamp.org/news/learn-typescript-data-types-from-zero-to-hero/

?❓ ¿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.

? ? URL: https://medium.com/@osmancea/programaci%C3%B3n-reactiva-con-rxjs-bebc9432485f

? 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.

? ? URL: https://es.reactjs.org/tutorial/tutorial.html

???? Aprendiendo React desde cero

Midudev tiene muchos recursos interesantes, aquí te traemos un vídeo donde nos enseñará React desde cero.

? ? URL: https://midu.dev/curso-gratis-react-2020/

???? Primeros pasos con React

Artículos donde nos enseñarán nuestros primeros pasos con React.

? ? URL: https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started

??? Cómo crear una aplicación con React usando Hooks

Artículos donde nos enseñarán nuestros primeros pasos con React.

? ? URL: https://www.neoguias.com/tutorial-react-hooks/

??? React para principiantes

Manual de React para principiantes de la mano de FreeCodeCamp.

? ?URL: https://www.freecodecamp.org/news/react-beginner-handbook/

??? Manual de React

Manual de React de la mano de FreeCodeCamp.

? ?URL: https://www.freecodecamp.org/news/the-react-handbook-b71c27b0a795/

??? Guía Vue

Desde la página oficial de Vue, tenemos una guía que nos enseña como utilizar Vue.

? ?URL (v3): https://v3.vuejs.org/guide/introduction.html

? ? URL (v2): https://es.vuejs.org/v2/guide/

??? 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.

? ? URL: https://www.neoguias.com/tutorial-vue/

???? Primeros pasos con Vue 2

Da tus primeros paso con Vue 2 de la mano de Carlos Azaustre.

? ? URL: https://carlosazaustre.es/primeros-pasos-en-vue

???? Primeros pasos con Vue 2

En este caso, da tus primeros pasos de la mano de Mozilla.

? ? URL: https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos

??? Primeros pasos con Vue 2

En este caso, da tus primeros pasos de la mano de Mozilla.

? ? URL: https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos

??? Vue JS Crash Course 2021

Curso intensivo en inglés de Vue 3 con un enfoque practico.

? ?URL: https://www.youtube.com/watch?v=qZXt1Aom3Cs&ab_channel=TraversyMedia

??? 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.

? ?URL: https://angular.io/tutorial

??? 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.

? ?URL: https://angular.io/tutorial

??? Haz tu primera App con Angular

En este tutorial vamos a aprender como realizar una calculadora, así repasamos como funciona Angular.

? ?URL: https://www.techiediaries.com/angular/angular-9-tutorial-and-example/

?? Angular para principiantes

Tutorial muy básico para introducirse con Angular.

? ? URL: https://betabeers.com/blog/angular-principiantes-390/

??? Curso de Angular

Curso de YouTube donde aprenderemos a utilizar Angular.

? ? URL: https://www.youtube.com/watch?v=SZtxwDAqEok&list=PLezsbUDiwcpmhNiMzVPYJXV0Rqn71G4PU&index=1

??? Desarrolloweb LitElement

Curso de LitElement de desarrollo web, donde daremos un repaso a la librería para realizar WebComponents.

? ? URL: https://desarrolloweb.com/manuales/manual-litelement.html

??? ¿Qué son los WebComponents?. Y cómo utilizar LitElement

Repaso a los WebComponents nativos y realizados con LitElement.

? ? URL: https://lenguajejs.com/webcomponents/introduccion/que-son-webcomponents/

??? Desarrolloweb LitElement

Artículo muy completo para realizar WebComponents nativos.

? ?URL: https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85

??? Introduccion a SvelteJS

Tutorial muy completo de Svelte de su página oficial,Co además es interactivo y nos puede recordar a FreeCodeCamp.

? ?URL: https://svelte.dev/tutorial/basics

??? Manual de SvelteJS

Manual muy completo de este Framework de la mano de FreeCodeCamp

? ?URL: https://www.freecodecamp.org/news/the-svelte-handbook/

??? 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.

? ?URL: https://stenciljs.com/docs/introduction

?? Introducción a StencilJS

Breve introducción a este framework que realiza WebComponents.

? ?URL: https://gabrieltanner.org/blog/stencil-js-introduction

? Frameworks CSS

? Conocimientos Previos

?❓ ¿Qué es un framework de CSS?

Breve introducción a este framework que realiza WebComponents.

? ? URL: https://www.wikiwand.com/es/Framework_de_CSS

?❓ 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.

? ? URL: https://desarrolloweb.com/articulos/framework-css-ventajas-inconvenientes.html

?❓ Pros y contras entre frameworks CSS

Listado de 9 frameworks css, donde nos dan sus pros y sus contras desde su punto de vista.

? ? URL: https://athemes.com/collections/best-css-frameworks/

? CONTENIDOS

❗️NOTA: En un principio no puedo poner como se utiliza cada framework de CSS en cada framework de JS. Además que si lo váis a utilizar en un framework o librería, cada uno de ellos, lo gestiona de una manera, y además en ciertos frameworks como Vue, tenemos BootstrapVue o en React con React Bootstrap.

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.

? ?URL: https://getbootstrap.com/docs/5.0/getting-started/introduction/

? ?URL: https://getbootstrap.com/docs/4.0/getting-started/download/

?? 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.

? ?URL: https://getbootstrap.com/docs/4.0/components/alerts/

?? Documentación de Bootstrap

Documentación de Bootstrap, donde encontraremos componentes y otros tipos de usos.

? ?URL: https://getbootstrap.com/docs/4.0/getting-started/introduction/

?? 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.

? ?URL: https://get.foundation/sites/docs/installation.html

?? Tutoriales de Foundation

En la propia web del Framework CSS, encontramos estos tutoriales sobre casos de uso.

? ?URL: https://get.foundation/index.html

?? Documentación de Foundation

Documentación de Foundation, donde encontraremos componentes y otros tipos de usos.

? ?URL: https://get.foundation/sites/docs/

?? 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.

? ?URL: https://bulma.io/documentation/overview/start/

?? Documentación de Bulma

Documentación de Bulma, donde encontraremos componentes y otros tipos de usos.

? ?URL: https://bulma.io/documentation/overview/start/

?? Instalación de Tailwind

Cómo instalar este framework de CSS que tiene muy buena pinta.

? ?URL: https://tailwindcss.com/docs/installation

?? Documentación de Tailwind

Documentación de Tailwind, donde encontraremos componentes y otros tipos de usos.

? ?URL: https://tailwindcss.com/docs

?? 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”.

? ?URL: https://material.io/develop/web/getting-started

✅ 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.

? ? URL: https://yeisondaza.com/que-son-y-como-escribir-pruebas-en-javascript

?❓ 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.

? ? URL: https://books.adalab.es/materiales-front-end-e/sprint-3.-react/3_14_testing_js

?❓ 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.

? ? URL: https://octuweb.com/testing-front/

?❓ ¿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.

? ? URL: https://softwarecrafters.io/javascript/tdd-test-driven-development

? ? URL: https://medium.com/nursoft/implementar-tdd-facilmente-4d2cffaa9172

?❓ ¿Qué es DDD?

Vamos a ver que es DDD, para saber que es y poder tener esa posibilidad de utilizarlo.

? ? URL: https://www.wikiwand.com/es/Dise%C3%B1o_guiado_por_el_dominio

?❓ ¿Qué son los tests E2E?

Aquí vemos que son los tests E2E y que tipos de tests existen.

? ? URL: https://blog.irontec.com/introduccion-automatizacion-tests-e2e-cypress-io/

?❓ ¿Qué es un mock, stub, fake o dummy?

En este artículo del libro, veremos que significa cada uno.

? ? URL: https://uniwebsidad.com/libros/tdd/capitulo-6

?❓ 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.

? ?URL: https://medium.com/better-programming/8-awesome-javascript-testing-libraries-43e09141fdc2

? CONTENIDOS

❗️NOTA: En un principio no puedo poner como se utiliza cada herramienta de testing en cada framework de JS. Además que si lo váis a utilizar en un framework o librería, cada uno de ellos, lo gestiona de una manera.

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.

? ? URL: https://jestjs.io/docs/es-ES/getting-started

?? 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.

? ? URL: https://www.genbeta.com/desarrollo/da-potencia-flexibilidad-tus-tests-jest

?? Probando componentes en React usando Jest: lo básico

Artículo donde veremos como se testea un simple componente con React.

? ? URL: https://code.tutsplus.com/es/articles/testing-components-in-react-using-jest-the-basics–cms-28934

?? Karma: instalación

Vemos como instalar karma desde npm.

? ?URL: https://karma-runner.github.io/6.1/intro/installation.html

?? Karma: configuración

Después de instalar Karma, vamos a ver como lo podemos configurar de una manera muy sencilla.

? ?URL: https://karma-runner.github.io/6.1/intro/configuration.html

? ? URL: http://juanmirod.github.io/2016/04/29/configurando-karma-en-un-projecto-javascript.html

?? Karma: ejemplo de uso con Angular

Vamos a utilizar Karma con una prueba unitaria en Angular. Si lo analizamos, es muy parecido a Jest.

? ? URL: https://www.digital55.com/desarrollo-tecnologia/como-usar-testing-angular-jasmine-karma/

?? Mocha: instalación

Ahora tenemos la oportunidad de ver como instalar mocha, de una manera muy sencilla.

? ?URL: https://mochajs.org/#installation

?? Mocha: uso junto a Chai

Vamos a ver como utilizar Mocha junto a Chai, que es una librería de aserciones.

? ? URL: https://www.paradigmadigital.com/dev/testeando-javascript-mocha-chai/

?? Mocha: testing de API REST junto a Chai-HTTP

Otro ejemplo de como usar Mocha junto a Chai, en este casi Chai-HTTP.

? ? URL: https://www.paradigmadigital.com/dev/testeo-api-rest-mocha-chai-http/

?? ¿Cómo instalar Jasmine?

Vamos a ver como instalar Jasmine y poder utilizarlo.

? ?URL: https://jasmine.github.io/setup/nodejs.html

?? Primera suite con Jasmine

Después de instalar Jasmine nos ponemos manos a la obra para hacer nuestros primeros tests.

? ?URL: https://jasmine.github.io/tutorials/your_first_suite

?? 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.

? ? URL: https://codingpotions.com/angular-testing

?? 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.

? ? URL: https://dev.to/juanmirod/tests-unitarios-en-javascript-con-jasmine-118e

?? 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.

? ?URL: https://enzymejs.github.io/enzyme/

?? 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.

? ?URL: https://testing-library.com/docs/

?? Cypress creando tests E2E

Llegamos a los tests E2E, donde vamos a usar Cypress. Os dejo varios recursos para instalarlo.

? ?URL: https://enzymejs.github.io/enzyme/
https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements

? ? URL: https://www.paradigmadigital.com/dev/cypress-un-framework-de-pruebas-todo-en-uno/

?? Tutorial de Cypress para principiantes

Buen tutorial donde vamos a ver como empezar a utilizar Cypress, y realizando nuestros primeros tests.

? ?URL: https://www.valentinog.com/blog/cypress/

?? Escribiendo nuestro primer test con Cypress

Documentación oficial de Cypress, donde nos enseña a realizar nuestro primer test de forma sencilla

? ?URL: https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Write-your-first-test

?? Lista de asserts de Cypress

En la documentación oficial, tenemos la lista de asserts que podemos utilizar con Cypress.

? ?URL: https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions

??? 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.

? ?? URL: https://github.com/goldbergyoni/javascript-testing-best-practices/blob/master/readme-es.md

?? 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.

? ?URL: https://academind.com/tutorials/javascript-testing-introduction/

?? 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 ?

? ? URL: https://youtu.be/SH7JSlc36uA

?? Escribe tests, no demasiados y sobre todo unitarios

Este vídeo de Codely nos promueve que escribamos tests, no demasiados pero que sean unitarios.

? ? URL: https://www.youtube.com/watch?v=QdqIqGPsLW0

? 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.

? ? URL: https://www.digital55.com/desarrollo-tecnologia/que-es-pwa-ventajas-desventajas/

? 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.

? ??URL: https://developer.mozilla.org/es/docs/Web/Progressive_web_apps

?? 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

? ? URL: https://medium.com/samsung-internet-dev/crea-tu-primer-pwa-paso-a-paso-3bc584e3d084

??? 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.

? ? URL: https://desarrolloweb.com/manuales/manual-progressive-web-apps.html

?? 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.

? ?URL: https://www.digitalocean.com/community/tutorials/js-vanilla-pwa

? 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?.

? ? URL: https://www.wikiwand.com/es/Aplicaci%C3%B3n_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.

? ? URL: https://blog.nubecolectiva.com/que-es-electron-js-y-otros-detalles/

??? 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.

? ? URL: https://www.electronjs.org/docs/tutorial/quick-start

??? Documentación de Electron

La documentación de Electron es bastante completa, vamos a poder como realizar nuestra app de manera sencilla.

? ? URL: https://www.electronjs.org/docs

??? 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.

? ? URL: https://tuprogramas.com/electron-js-framework-para-crear-apps-de-escritorio/

? 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.

? ? URL: https://www.nextu.com/blog/apps-nativas-vs-apps-hibridas/

? 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.

? ? URL: https://cuatroochenta.com/que-es-react-native-el-modo-de-desarrollar-apps-esta-cambiando/

?? 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

? ?URL: https://reactnative.dev/docs/environment-setup

?? 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.

? ?URL: https://reactnative.dev/docs/getting-started

?? ¿Qué es Ionic?

Tenemos varias opciones de realizar aplicaciones híbridas, Ionic es otra opción. Vamos a ver que hace Ionic.

? ? URL: https://medium.com/biotec/qu%C3%A9-es-ionic-47e03c0d4b88

?? Primeros pasos con Ionic: instalación

Vamos a dar nuestros primeros pasos con Ionic, en esta ocasión empezamos a instalar esta herramienta

? ?URL: https://ionicframework.com/getting-started

?? 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.

? ?URL: https://ionicframework.com/docs/intro/cli

?? 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.

? ?URL: https://ionicframework.com/docs/developing/starting

?? ¿Qué es NativeScript?

Ahora vamos a abarcar otra herramienta para hacer aplicaciones híbridas con NativeScript.

? ? URL: https://www.wikiwand.com/es/NativeScript

?? Primeros pasos con NativeScript: instalación

Vamos a dar nuestros primeros pasos con NativeScript, en esta ocasión empezamos a instalar esta herramienta.

? ?URL: https://docs.nativescript.org/angular/start/quick-setup

??? 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.

? ?URL: https://play.nativescript.org/

?? 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.

? ?URL: https://docs.nativescript.org/start/introduction

?? ¿Qué es Flutter?

Esta herramienta nos permite realizar apps Nativas a través de un lenguaje llamado Dart.

? ? URL: https://www.paradigmadigital.com/dev/flutter-visto-con-gafas-programador-web/

?? Primeros pasos con Flutter: instalación

Aquí veremos como instalar Flutter. Tendremos que ver que sistema operativo tenemos y seguir las indicaciones.

? ? URL: https://esflutter.dev/docs/get-started/install

?? Primeros pasos con Flutter: configurar nuestro IDE

Una vez instalado tendrémos que configurar nuestor IDE para poder trabajar con Flutter.

? ? URL: https://esflutter.dev/docs/get-started/editor

?? 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”.

? ? URL: https://esflutter.dev/docs/get-started/test-drive

?? 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.

? ? URL: https://esflutter.dev/docs/get-started/codelab

?? 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.

? ? URL: https://esflutter.dev/docs/get-started/learn-more

?? Documentación de Flutter

Una vez acabado todo, tenemos también la documentación de Flutter.

? ? URL: https://esflutter.dev/docs

♺ 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”.

? ? URL: https://www.wikiwand.com/es/P%C3%A1gina_web_est%C3%A1tica

? CONTENIDOS

?? ¿Qué es NextJS?

Breve introducción sobre NextJS para saber que es y que tecnologías tiene detrás

? ? URL: https://openwebinars.net/blog/que-es-nextjs/

?? Breve introducción con NextJS

Artículo donde nos va a explicar como empezar con NextJS

? ? URL: https://dev.to/efrenmartinez/primeros-pasos-con-next-js-1i28

?? Documentación NextJS

Documentación de esta herramienta donde empezaremos a instalarla y adentrarnos más profundamente en ella.

? ?URL: https://nextjs.org/docs/getting-started

?? ¿Qué es Gatsby?

Herramienta para generar webs con contenido estático de una manera fácil.

? ? URL: https://gerswin.com/sitios-web-est%C3%A1ticos-qu%C3%A9-es-y-por-qu%C3%A9-deber%C3%ADas-usar-gatsby-3f90af778516

?? Documentación de Gatsby

En la documentación de Gatsby empezaremos nuestros primeros pasos instalando esta herramienta.

? ?URL: https://www.gatsbyjs.com/docs/quick-start/

?? Tutorial Gatsby

La propia documentación de Gatsby tiene un tutorial para poder empezar a usar esta herramienta.

? ?URL: https://www.gatsbyjs.com/docs/tutorial/part-zero/

?? ¿Qué es NuxtJS?

Herramienta para creación de herramientas estáticas.

? ? URL: https://medium.com/@ianaya89/crea-tu-sitio-web-con-github-pages-y-nuxt-js-6a90fd0a0dc4

?? 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.

? ? URL: https://es.nuxtjs.org/docs/2.x/get-started/installation

?? Ejemplos hechos con NuxtJS

Ejemplos para poder ver como se implementan ciertas cosas, desde un hola mundo, hasta SEO.

? ? URL: https://es.nuxtjs.org/examples

?? ¿Qué es Jekyll?

Otra herramienta para poder realizar páginas web estáticas.

? ? URL: http://www.arquitectoit.com/jekyll/que-es-jekyll/

?? Documentación Jekyll

Documentación oficial de Jekyll donde veremos como instalarlo y algunos recursos para empezar.

? ?URL: https://jekyllrb.com/docs/

?? ¿Qué es Hugo?

Herramienta para la creación de páginas web estáticas.

? ? URL: https://gutl.jovenclub.cu/hugo-generador-sitios-web-estaticos/

?? 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.

? ?URL: https://gohugo.io/getting-started/quick-start/

? 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.

? ?URL: https://www.freecodecamp.org/

?? 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.

? ?URL: https://fullstackopen.com/en/

?? 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.

? ?URL: https://www.theodinproject.com/home

?? 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.

? ?URL: https://dash.generalassemb.ly/

?? 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.

? ?URL: https://www.khanacademy.org/computing/computer-programming

?? 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.

? ?URL: https://exercism.io/

?? 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.

? ?URL: https://www.sololearn.com/

?? 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.

? ?URL: https://github.com/microsoft/frontend-bootcamp

???? 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.

? ? URL: https://books.adalab.es/materiales-front-end-d/

??????? 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.

? ? URL: https://github.com/Fictizia

??? Bootcamp realizado por midudev de Fullstackopen

Bootcamp realizado por @midudev, donde vas a realizar con él, el bootcamp de Fullstackopen desde el principio.

? ? URL: https://www.youtube.com/watch?v=wTpuKOhGfJE&list=PLV8x_i1fqBw0Kn_fBIZTa3wS_VZAqddX7

??? 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.

? ? URL: https://www.youtube.com/watch?v=ScSHSI7TzRw&list=PLHsJ3-ff9dpFtMoPYrfLq0J8wpeX33zQS

? 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.

? ?URL: https://www.codewars.com/

?? Dev Challenges

Retos desde: responsive web developer, frontend-developer, fullstack developer, etc. Tenemos muchos recuros para poner a prueba nuestros conocimientos.

? ?URL: https://devchallenges.io/

? 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.

? ? URL: https://www.google.com
? ? URL: https://duckduckgo.com/

?❓ Stackoverflow

Es la biblia para les programadores, aquí la gente pone su duda y la gente le ayuda a buscar una solución.

? ??URL: https://stackoverflow.com/

?❓ Can I use?

Podemos ver si una característica de HTML o CSS es compatible con todos los navegadores.

? ?URL: https://caniuse.com/

?? 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.

? ??URL: https://developer.mozilla.org/es/docs/Learn

?? 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.

? ?URL: https://www.w3schools.com/howto/default.asp

??? APIs públicas

APIs para usar en tus pet projects o en proyectos de pruebas.

? ?URL: https://github.com/public-apis/public-apis

??? Mejores prácticas para Node

Documento donde nos ponen las mejores prácticas para utilizar NodeJS.

? URL: https://github.com/goldbergyoni/nodebestpractices/blob/spanish-translation/README.spanish.md

???? 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.

? ?URL: https://github.com/thedaviddias/Front-End-Checklist

?? Manual de Docker

Manual muy completo para utilizar docker, desde la instalación hasta como utilizarlo.

? ?URL: https://www.freecodecamp.org/news/the-docker-handbook/

??? Tutoriales NeoGuias

Tutoriales de Neoguias, encontraréis de Vue, React, JavaScript… Muy recomendables.

? ? URL: https://www.neoguias.com/tutoriales/

??? Tutoriales LenguajeJS

En esta página encontraréis mucho material en todo lo relacionado con JavaScript (también de HTML, CSS o Terminal).

? ? URL: https://lenguajejs.com/

?? 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.

? ?URL: https://www.freecodecamp.org/news/the-linux-commands-handbook/

?? Manual Terminal Windows/Linux/OSX

Tutorial de linea de comandos de la mano de DjangoGirls, en este caso tenemos incluida la terminal de Windows.

? ? URL: https://tutorial.djangogirls.org/es/intro_to_command_line/

Relacionados