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
| 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.
- 📓 Conocimientos básicos informática
- 📕 HTML
- ♿️ Accesibilidad
- 📘 CSS
- 📒 JavaScript
- 🛂 Control de versiones
- 🔒 Seguridad
- 📦 Administrador de paquetes
- 🏛 Arquitecturas CSS
- 🤖 Preprocesadores CSS y PostCSS
- 🛠 Build Tools
- 🧰 Frameworks JavaScript
- 🖼 Frameworks CSS
- ✅ Testing
- 📱 Progressive Web Apps (PWA)
- 🖥 Creación aplicaciones de escritorio
- 📲 Creación aplicaciones para móviles
- ♺ Generadores de páginas estáticas
- 📚 Cursos/Minibootcamps
- 🗡 Katas
- 🤔 Sitios de interés o recursos de interés
Vamos a empezar con lo principal, cómo empezó esto de los ordenadores.
🔗 🏳URL: https://www.wikiwand.com/es/Inform%C3%A1tica
El origen de Internet, cómo nació y su funcionamiento.
🔗 🏳URL: https://www.wikiwand.com/es/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
Se dice mucho la palabra HTTP pero, ¿realmente qué quiere decir?.
🔗 🏳URL: https://www.wikiwand.com/es/Protocolo_de_transferencia_de_hipertexto
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: lo que hay detrás de los navegadores web actuales
🔗 🏳URL: https://www.html5rocks.com/es/tutorials/internals/howbrowserswork/
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
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
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 este paradigma que está de moda.
🔗 🏳URL: https://www.wikiwand.com/es/Computaci%C3%B3n_en_la_nube
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/
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/
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
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
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
Si no sabes que es realmente HTML5, aquí tienes un artículo donde te lo explican.
🔗 🏳URL: https://www.wikiwand.com/es/HTML5
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
Breve introducción al HTML.
🔗 🏳URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar
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
Fundamentos para introducir texto en HTML.
🔗 🏳URL: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/texto
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
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
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
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
En qué estructuras podemos dividir una página.
Una de las tareas más rutinarias será realizar formularios.
🔗 🏳URL: https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_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
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/
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
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 de elementos HTML con ejemplos y ejercicios.
🔗 🏴URL: https://www.w3schools.com/html/default.asp
👉🖊 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/
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
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
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
Vamos a empezar a dar nuestros primeros pasos en CSS.
🔗 🏳URL: https://developer.mozilla.org/es/docs/Learn/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
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
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
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 para especificar las media queries
🔗 🏳URL: https://developer.mozilla.org/es/docs/Web/CSS/@media
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
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/
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
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/
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, 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
Con CSS Diner aprenderemos a utilizar los selectores de CSS a través de un minijuego.
🔗 🏴URL: https://flukeout.github.io/
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 con CSS.
🔗 🏳URL: https://developer.mozilla.org/es/docs/Web/CSS/animation
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/
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/
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/
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 que podemos realizar a la hora de hacer nuestras animaciones con CSS.
🔗 🏴URL: https://css-tricks.com/css-animation-tricks/
Excelente artículo donde nos explica cómo realizar una animación con coches.
🔗 🏴URL: https://css-tricks.com/starting-css-animations-mid-way/
Apartado de cómo realizar animaciones en CSS de W3Schools.
🔗 🏴URL: https://www.w3schools.com/css/css3_animations.asp
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/
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
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 ejemplos impresionantes de transformaciones en 3D solo usando CSS.
🔗 🏴URL: https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759
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/
¿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 la especificación de la W3C para realizar animaciones con CSS.
🔗 🏴URL: https://drafts.csswg.org/css-animations-1/
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 de CSS realizados por Majo Ledesma, que son muy buenos y tienen un estilo único.
🔗 🏳URL: https://losapuntesdemajo.now.sh/
Artículo muy interesante donde se plantean utilizar lo mínimo las media queries
🔗 🏳URL: https://goiblas.com/evitar-utilizar-css-media-queries/
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 impartido por Diana Aceves, una referente en nuestro sector, que nos enseña cómo usar CSS Grid Layout
🔗 🏳URL: https://youtu.be/AxVXpS6PyRE
Otro taller impartido por Diana Aceves, que recrea ilustraciones usando CSS Grid Layout
🔗 🏳URL: https://youtu.be/p7oXrr9yjXY
Otro taller impartido por Diana Aceves, que nos introduce al uso de Flexbox.
🔗 🏳URL: https://youtu.be/job5SOuS7Ko
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 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 de elementos CSS con ejemplos y hasta con ejercicios.
🔗 🏴URL: https://www.w3schools.com/css/default.asp
Empezamos a introducirnos con JavaScript sabiendo que es y como fueron sus inicios.
🔗 🏳URL: https://www.wikiwand.com/es/JavaScript
Mucha gente puede confundir estos dos términos, pero son dos lenguajes totalmente diferentes.
🔗 🏳URL: https://desarrolloweb.com/articulos/492.php
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/
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
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/
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://softwarecrafters.io/javascript/introduccion-programacion-funcional-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
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
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
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
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
Vamos a descubrir las variables en JavaScript y que tipos hay.
🔗 🏳URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables
¿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
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
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
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
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
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
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 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
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
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
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
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
Hemos visto como se hacen funciones o métodos, ¿por qué no creamos ahora uno nosotres mismes?.
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
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
Para finalizar crearemos una galería de imágenes funcional.
🔗 🏳URL: https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Galeria_de_imagenes
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
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
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
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
Hay muchos casos donde los widgets de formularios HTML disponibles simplemente no son suficientes. si deseas establecer un estilo avanzado en algunos widgets como el elemento <select> o si deseas proporcionar comportamientos personalizados, no tienes más opción que crear tus propios widgets.
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
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/
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
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/
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
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
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
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 de JavaScript básico realizados por Majo Ledesma, que son muy buenos y tienen un estilo único.
🔗 🏳URL: https://losapuntesdemajo.now.sh/
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
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
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
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 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/
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/
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 con ejemplos y hasta con ejercicios.
🔗 🏴URL: https://www.w3schools.com/js/default.asp
Listado de ejemplos de algorítmos realizados en JavaScript. Tienes desde Sorts, Strings, o hasta de algebra lineal.
🔗 🏴URL: https://github.com/TheAlgorithms/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
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
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
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
Colección de librerías de JavaScript, recursos y cosas muy interesantes.
🔗 🏴URL: https://github.com/sorrycc/awesome-javascript
Colección de librerías de JavaScript, recursos y cosas muy interesantes.
🔗 🏴URL: https://github.com/sorrycc/awesome-javascript
Recurso donde alojan una colección de patrones que podemos utilizar en JavaScript.
🔗 🏴URL: https://github.com/shichuan/javascript-patterns
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
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.
Tutorial de JavaScript de Scaler Topics. Aprende JavaScript desde cero con este completo tutorial.
🔗 🏳URL: https://www.scaler.com/topics/javascript/
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://www.atlassian.com/es/git/tutorials/what-is-version-control
¿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
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)
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
Lecciones interactivas del uso de Git, donde podremos utilizar los comandos más usados.
🔗 🏳URL: https://learngitbranching.js.org/?locale=es_ES
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
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 con los comandos de git.
🔗 🏴URL: https://education.github.com/git-cheat-sheet-education.pdf
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/
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
Artículo sobre tips en seguridad si eres Frontend Developer.
🔗 🏳URL: https://www.glajumedia.com/tips-seguridad-frondend/
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
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/
Aquí tenemos un artículo que nos habla que es el CORS.
🔗 🏳URL: https://lenguajejs.com/javascript/peticiones-http/cors/
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
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
Hemos hablado de Npm, pero no es el único gestor de dependencias, ahora hablaremos de yarn.
🔗 🏳URL: https://www.wikiwand.com/es/Yarn\_(Facebook)
Aunque no estemos desarrollando en NodeJS, tenemos qué saber que es y qué hace.
🔗 🏳URL: https://www.wikiwand.com/es/Node.js
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/
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/
Artículos interesantes sobre Npm desde empezar con él, hasta hacer cosas más avanzadas.
🔗 🏳URL: https://lenguajejs.com/npm/introduccion/que-es/
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
Artículos interesantes sobre Npm desde empezar con él, hasta hacer cosas más avanzadas.
🔗 🏳URL: https://lenguajejs.com/npm/introduccion/que-es/
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
Artículo que da un repaso a las arquitecturas o metodologías que existen para 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/
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
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/
Excelente artículo que nos habla un poco de que es SASS y como instalarlo.
🔗 🏳URL: https://codingpotions.com/tutorial-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
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/
Artículo sencillo de como instalar Stylus CSS
🔗 🏳URL: https://devcode.la/tutoriales/instalacion-de-stylus/
Artículo de cómo usar Stylus.
🔗 🏳URL: https://devcode.la/tutoriales/que-es-stylus-preprocesador-de-css/
Documentación de Stylus bastante completa.
🔗 URL: https://stylus-lang.com/
Documentación oficial de instalación de PostCSS.
🔗 🏴URL: https://github.com/postcss/postcss#usage
Documentación oficial de uso de PostCSS.
🔗 🏴URL: https://github.com/postcss/postcss/tree/main/docs
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
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
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
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
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
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
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/
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/
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
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.
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
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.
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.
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/
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
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
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/
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
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
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/
Artículos donde nos enseñarán nuestros primeros pasos con React.
Artículos donde nos enseñarán nuestros primeros pasos con React.
🔗 🏳URL: https://www.neoguias.com/tutorial-react-hooks/
Manual de React para principiantes de la mano de FreeCodeCamp.
🔗 🏴URL: https://www.freecodecamp.org/news/react-beginner-handbook/
Manual de React de la mano de FreeCodeCamp.
🔗 🏴URL: https://www.freecodecamp.org/news/the-react-handbook-b71c27b0a795/
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/
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/
Da tus primeros paso con Vue 2 de la mano de Carlos Azaustre.
🔗 🏳URL: https://carlosazaustre.es/primeros-pasos-en-vue
En este caso, da tus primeros pasos de la mano de Mozilla.
En este caso, da tus primeros pasos de la mano de Mozilla.
Curso intensivo en inglés de Vue 3 con un enfoque practico.
🔗 🏴URL: https://www.youtube.com/watch?v=qZXt1Aom3Cs&ab_channel=TraversyMedia
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
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
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/
Tutorial muy básico para introducirse con Angular.
🔗 🏳URL: https://betabeers.com/blog/angular-principiantes-390/
Curso de YouTube donde aprenderemos a utilizar Angular.
🔗 🏳URL: https://www.youtube.com/watch?v=SZtxwDAqEok&list=PLezsbUDiwcpmhNiMzVPYJXV0Rqn71G4PU&index=1
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
Repaso a los WebComponents nativos y realizados con LitElement.
🔗 🏳URL: https://lenguajejs.com/webcomponents/introduccion/que-son-webcomponents/
Artículo muy completo para realizar WebComponents nativos.
🔗 🏴URL: https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85
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 muy completo de este Framework de la mano de FreeCodeCamp
🔗 🏴URL: https://www.freecodecamp.org/news/the-svelte-handbook/
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
Breve introducción a este framework que realiza WebComponents.
🔗 🏴URL: https://gabrieltanner.org/blog/stencil-js-introduction
Breve introducción a este framework que realiza WebComponents.
🔗 🏳URL: https://www.wikiwand.com/es/Framework_de_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
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/
❗️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, 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/
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, donde encontraremos componentes y otros tipos de usos.
🔗 🏴URL: https://getbootstrap.com/docs/4.0/getting-started/introduction/
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
En la propia web del Framework CSS, encontramos estos tutoriales sobre casos de uso.
🔗 🏴URL: https://get.foundation/index.html
Documentación de Foundation, donde encontraremos componentes y otros tipos de usos.
🔗 🏴URL: https://get.foundation/sites/docs/
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, donde encontraremos componentes y otros tipos de usos.
🔗 🏴URL: https://bulma.io/documentation/overview/start/
Cómo instalar este framework de CSS que tiene muy buena pinta.
🔗 🏴URL: https://tailwindcss.com/docs/installation
Documentación de Tailwind, donde encontraremos componentes y otros tipos de usos.
🔗 🏴URL: https://tailwindcss.com/docs
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
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
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
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/
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
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
Aquí vemos que son los tests E2E y que tipos de tests existen.
🔗 🏳URL: https://blog.irontec.com/introduccion-automatizacion-tests-e2e-cypress-io/
En este artículo del libro, veremos que significa cada uno.
🔗 🏳URL: https://uniwebsidad.com/libros/tdd/capitulo-6
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
❗️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.
Empezamos con Jest, esta es la documentación oficial, empezaremos a ver como se instala.
🔗 🏳URL: https://jestjs.io/docs/es-ES/getting-started
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
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
Vemos como instalar karma desde npm.
🔗 🏴URL: https://karma-runner.github.io/6.1/intro/installation.html
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
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/
Ahora tenemos la oportunidad de ver como instalar mocha, de una manera muy sencilla.
🔗 🏴URL: https://mochajs.org/#installation
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/
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/
Vamos a ver como instalar Jasmine y poder utilizarlo.
🔗 🏴URL: https://jasmine.github.io/setup/nodejs.html
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
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
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
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/
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/
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/
Buen tutorial donde vamos a ver como empezar a utilizar Cypress, y realizando nuestros primeros tests.
🔗 🏴URL: https://www.valentinog.com/blog/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
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
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
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/
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
Este vídeo de Codely nos promueve que escribamos tests, no demasiados pero que sean unitarios.
🔗 🏳URL: https://www.youtube.com/watch?v=QdqIqGPsLW0
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/
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
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, 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
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
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
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/
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
La documentación de Electron es bastante completa, vamos a poder como realizar nuestra app de manera sencilla.
🔗 🏳URL: https://www.electronjs.org/docs
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/
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/
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/
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
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
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
Vamos a dar nuestros primeros pasos con Ionic, en esta ocasión empezamos a instalar esta herramienta
🔗 🏴URL: https://ionicframework.com/getting-started
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
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
Ahora vamos a abarcar otra herramienta para hacer aplicaciones híbridas con NativeScript.
🔗 🏳URL: https://www.wikiwand.com/es/NativeScript
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
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/
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
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/
Aquí veremos como instalar Flutter. Tendremos que ver que sistema operativo tenemos y seguir las indicaciones.
🔗 🏳URL: https://esflutter.dev/docs/get-started/install
Una vez instalado tendrémos que configurar nuestor IDE para poder trabajar con Flutter.
🔗 🏳URL: https://esflutter.dev/docs/get-started/editor
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
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
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
Una vez acabado todo, tenemos también la documentación de Flutter.
🔗 🏳URL: https://esflutter.dev/docs
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
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/
Artículo donde nos va a explicar como empezar con NextJS
🔗 🏳URL: https://dev.to/efrenmartinez/primeros-pasos-con-next-js-1i28
Documentación de esta herramienta donde empezaremos a instalarla y adentrarnos más profundamente en ella.
🔗 🏴URL: https://nextjs.org/docs/getting-started
Herramienta para generar webs con contenido estático de una manera fácil.
En la documentación de Gatsby empezaremos nuestros primeros pasos instalando esta herramienta.
🔗 🏴URL: https://www.gatsbyjs.com/docs/quick-start/
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/
Herramienta para creación de herramientas estáticas.
🔗 🏳URL: https://medium.com/@ianaya89/crea-tu-sitio-web-con-github-pages-y-nuxt-js-6a90fd0a0dc4
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 para poder ver como se implementan ciertas cosas, desde un hola mundo, hasta SEO.
🔗 🏳URL: https://es.nuxtjs.org/examples
Otra herramienta para poder realizar páginas web estáticas.
🔗 🏳URL: http://www.arquitectoit.com/jekyll/que-es-jekyll/
Documentación oficial de Jekyll donde veremos como instalarlo y algunos recursos para empezar.
🔗 🏴URL: https://jekyllrb.com/docs/
Herramienta para la creación de páginas web estáticas.
🔗 🏳URL: https://gutl.jovenclub.cu/hugo-generador-sitios-web-estaticos/
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/
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/
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/
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 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/
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
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/
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/
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
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/
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, 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
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
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/
Retos desde: responsive web developer, frontend-developer, fullstack developer, etc. Tenemos muchos recuros para poner a prueba nuestros conocimientos.
🔗 🏴URL: https://devchallenges.io/
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/
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/
Podemos ver si una característica de HTML o CSS es compatible con todos los navegadores.
🔗 🏴URL: https://caniuse.com/
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
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 para usar en tus pet projects o en proyectos de pruebas.
🔗 🏴URL: https://github.com/public-apis/public-apis
Documento donde nos ponen las mejores prácticas para utilizar NodeJS.
🔗 URL: https://github.com/goldbergyoni/nodebestpractices/blob/spanish-translation/README.spanish.md
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 muy completo para utilizar docker, desde la instalación hasta como utilizarlo.
🔗 🏴URL: https://www.freecodecamp.org/news/the-docker-handbook/
Tutoriales de Neoguias, encontraréis de Vue, React, JavaScript... Muy recomendables.
🔗 🏳URL: https://www.neoguias.com/tutoriales/
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/
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/
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/