Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrcodedev/frontend-developer-resources
Recursos gratuitos para empezar a ser un Frontend Developer o ampliar conocimientos
https://github.com/mrcodedev/frontend-developer-resources
Last synced: about 2 months ago
JSON representation
Recursos gratuitos para empezar a ser un Frontend Developer o ampliar conocimientos
- Host: GitHub
- URL: https://github.com/mrcodedev/frontend-developer-resources
- Owner: mrcodedev
- License: mit
- Created: 2021-02-06T11:39:01.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T19:43:31.000Z (6 months ago)
- Last Synced: 2024-10-15T12:42:31.034Z (3 months ago)
- Homepage:
- Size: 2.98 MB
- Stars: 3,306
- Watchers: 180
- Forks: 461
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-lists - frontend-developer-resources
- awesomelist - frontend-developer-resources
- collection - frontend-developer-resources
- lists - frontend-developer-resources
- jimsghstars - mrcodedev/frontend-developer-resources - Recursos gratuitos para empezar a ser un Frontend Developer o ampliar conocimientos (Others)
README
# 🚀 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 "Buy me a Ko-Fi :D")
👉☕️ https://ko-fi.com/mrcodedev
| Emoji | ¿Qué significa? |
| ----- | -------------------------------------------- |
| ❓ | Conocimientos que debemos de saber antes |
| 🖊 | Contenido que es un artículo o documentación |
| 📹 | Contenido en vídeo |
| 📖 | Libro |
| 🗣 | Charla o Conferencia |
| 📚 | Curso o tutorial |
| 📦 | Repositorio |
| 🕹 | Prácticas en vivo |
| 📑 | Apuntes o cheatsheets |
| 🏳 | Idioma en español |
| 🏴 | Idioma en inglés |
Si queréis apoyar con una aportación, siempre se agradece, igual que siempre se puede hacer una aportación a todas las fuentes recopiladas en este documento.
---
## Indice
- 📓 [Conocimientos básicos informática](#-conocimientos-basicos-informatica)
- 📕 [HTML](#-html)
- ♿️ [Accesibilidad](#%EF%B8%8F-accesibilidad)
- 📘 [CSS](#-css)
- 📒 [JavaScript](#-javascript)
- 🛂 [Control de versiones](#-control-de-versiones)
- 🔒 [Seguridad](#-seguridad)
- 📦 [Administrador de paquetes](#-administrador-de-paquetes)
- 🏛 [Arquitecturas CSS](#-arquitecturas-css)
- 🤖 [Preprocesadores CSS y PostCSS](#-prepocesadores-css-y-postcss)
- 🛠 [Build Tools](#-build-tools)
- 🧰 [Frameworks JavaScript](#-frameworks-javascript)
- 🖼 [Frameworks CSS](#-frameworks-css)
- ✅ [Testing](#-testing)
- 📱 [Progressive Web Apps (PWA)](#-progessive-web-apps-pwa)
- 🖥 [Creación aplicaciones de escritorio](#-creación-aplicaciones-de-escritorio)
- 📲 [Creación aplicaciones para móviles](#-creación-aplicaciones-para-móviles)
- ♺ [Generadores de páginas estáticas](#-generador-de-páginas-estáticas)
- 📚 [Cursos/Minibootcamps](#-cursosminibootcamps)
- 🗡 [Katas](#-katas)
- 🤔 [Sitios de interés o recursos de interés](#-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](#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](#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](#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](#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](#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](#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](#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 `` 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
---
#### 👉🖊 **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](#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](#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](#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](#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](#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](#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](#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](#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](#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](#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](#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.
🔗 **🏴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/
---
#### 👉❓ **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
☝ [Volver al Indice](#indice)
---
### 🛹 **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, 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
☝ [Volver al Indice](#indice)
---
## 🖼 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/
☝ [Volver al Indice](#indice)
---
### 🛹 **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
☝ [Volver al Indice](#indice)
---
## ✅ 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
☝ [Volver al Indice](#indice)
---
### 🛹 **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
☝ [Volver al Indice](#indice)
---
## 📱 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/
☝ [Volver al Indice](#indice)
---
### 🛹 **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
☝ [Volver al Indice](#indice)
---
## 🖥 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
☝ [Volver al Indice](#indice)
---
### 🛹 **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://platzi.com/blog/aplicaciones-escritorio-electron-js/
☝ [Volver al Indice](#indice)
---
## 📲 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/
☝ [Volver al Indice](#indice)
---
### 🛹 **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
☝ [Volver al Indice](#indice)
---
## ♺ 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
☝ [Volver al Indice](#indice)
---
### 🛹 **CONTENIDOS**
---
#### 👉🖊 **¿Qué es NextJS?**
Breve introducción sobre NextJS para saber que es y que tecnologías tiene detrás
🔗 **🏳URL**: https://platzi.com/blog/nextjs-el-futuro-de-las-aplicaciones-con-react/
---
#### 👉🖊 **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/
☝ [Volver al Indice](#indice)
---
## 📚 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
☝ [Volver al Indice](#indice)
---
## 🗡 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/
☝ [Volver al Indice](#indice)
---
## 🤔 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/
---
☝ [Volver al Indice](#indice)