🚀 El camino del Frontend Developer 🚀

Lista de recursos para ayudarte en tu camino a ser Frontend Developer o aprender nuevas cosas

Hola 👋, soy MrCodeDev y quiero ayudaros en vuestro camino como Frontend Developer.

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é ☕️" te estaré muy agradecido. Me ayudarás a crear más contenido y mejorar a la hora de la realización de cualquier contenido. Puedes hacerlo a través de este enlace:

👉☕️ https://ko-fi.com/mrcodedev

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.

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

👉❓ ¿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://platzi.com/blog/que-son-los-ides-y-los-editores-de-texto/

☝ Volver al Indice

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

🔗 🏳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

☝ Volver al Indice

🛹 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

☝ Volver al Indice

♿️ 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

☝ Volver al Indice

📘 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

☝ Volver al Indice

🛹 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

☝ Volver al Indice

📒 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://platzi.com/tutoriales/1339-fundamentos-javascript/1487-que-es-vanilla-js-o-javascript-puro/

👉❓ 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

☝ Volver al Indice

🛹 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

👉🖊 JavaScript Tutorial

Tutorial de JavaScript de Scaler Topics. Aprende JavaScript desde cero con este completo tutorial.

🔗 🏳URL: https://www.scaler.com/topics/javascript/

☝ Volver al Indice

🛂 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/Inicio---Sobre-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/Inicio---Sobre-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)

☝ Volver al Indice

🛹 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/

☝ Volver al Indice

🔒 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/

☝ Volver al Indice

📦 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

☝ Volver al Indice

🛹 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

☝ Volver al Indice

🏛 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

☝ Volver al Indice

🤖 PREPOCESADORES CSS Y POSTCSS

🧠 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/

☝ Volver al Indice

🛹 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

☝ Volver al Indice

🛠 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

☝ Volver al Indice

🛹 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

☝ Volver al Indice

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