Uno de los objetivos de este blog es enseñarte las mejores prácticas de programación y que te conviertas en un o una Full-stack JavaScript Developer. Por eso, te iré dejando enlaces para que puedas estudiar desde ya.
La guía está pensada para aprender a programar en unas 16 semanas a partir de una una intensidad de 20 horas semanales. Esto va a depender mucho de tu disciplina y capacidad de auto-aprendizaje. Siempre te voy a recomendar el acompañamiento de un mentor.
Quiero aclarar que la guía solo te hará mostrará las herramientas y conceptos para aprender a programar. Pero, es necesaria la experiencia en proyectos reales y tus habilidades blandas (comunicación, trabajo en equipo, etc) lo que determinará si lo puedes hacer de manera profesional ó no.
Guía de emojis
- 🧳 Fuente externa
- 🎈 Fuente interna
- 🇪🇸 Español
- 🇬🇧 Inglés
- 💰 Recurso de pago
- 📺 Video
- 📰 Lectura
- 🏆 Juego
- 📻 Podcast
Semana 1
Configuración del ambiente de desarrollo
- 🧳 🇪🇸 📰 Instalando Ubuntu en Windows 10
- 🧳 🇪🇸 📰 Instalación de Git
- 🧳 🇪🇸 📰 Configuración de las llaves SSH
- 🧳 🇪🇸 📰 Creando una cuenta de GitHub
- 🧳 🇪🇸 📰 Instalación de NVM, Node y Yarn (Windows: Node.js, Yarn y NVM)
- 🧳 🇪🇸 📺 Primeros pasos con VS Code
El mundo del Markdown
- 🧳 🇪🇸 📺 Sintaxis básica de Markdown
- 🧳 🇬🇧 📰 Sintaxis saborizada en GitHub
Uso básico de la Terminal
- 🎈 🇪🇸 📰 ️Conociendo la terminal
- 🎈 🇪🇸 📰 ️Comandos alias para la terminal
Git: Control de versiones
- 🧳 🇪🇸 📺 Cómo crear un repositorio local y hacer tu primer commit
- 🧳 🇪🇸 📰 Las ramas y el uso de merge en git
- 🧳 🇪🇸 📰 Entendiendo cómo funciona git rebase
- 🧳 🇪🇸 📰 Git y los repositorios remotos
Introducción a HTML
Introducción a CSS
- 🧳 🇬🇧 📰 Las hojas de estilos, propiedades y unidades en CSS
- 🧳 🇪🇸 📰 Modelo de caja en CSS
- 🧳 🇪🇸 📰 Cómo funcionan los selectores en CSS
- 🧳 🇪🇸 🏆 Práctica de selectores en CSS
- 🧳 🇪🇸 📰 Cómo funciona el layout en CSS
- 🧳 🇪🇸 📰 Cascada y especificidad en CSS
Semana 2
Introducción a la programación
- 🧳 🇪🇸 📺 ¿Qué es el código y los algoritmos?
- 🧳 🇪🇸 📺 Sentencias y Expresiones en los lenguajes
- 🧳 🇪🇸 📰 ¿Qué son los operadores en programación?
- 🧳 🇪🇸 📰 Valores y tipos en el código
- 🧳 🇬🇧 📰 Lenguajes interpretados y Compilados
JavaScript 101
- 🧳 🇪🇸 📺 Tipos y valores en JavaScript
- 🧳 🇪🇸 📺 JavaScript y sus variables var, let y const
- 🧳 🇪🇸 📰 Igualdades en JavaScript
- 🧳 🇬🇧 📰 Falsy, Truthy y Nullish en JavaScript
- 🧳 🇪🇸 📰 Objetos y sus propiedades en JavaScript
- 🧳 🇬🇧 📰 Funciones puras y mutación en JavaScript
- 🧳 🇪🇸 📰 Los operadores lógicos en JavaScript
- 🧳 🇪🇸 📰 Condicionales y ciclos en JavaScript
- 🧳 🇬🇧 📰 El alcance en JavaScript
HTML Semántico
- 🧳 🇪🇸 📰 El esquema del documento en HTML
- 🧳 🇬🇧 📰 Artículos y secciones ¿Cuál usar y porque?
- 🧳 🇬🇧 📰 nav, header, footer y aside en HTML
- 🧳 🇬🇧 📰 ¿Para qué usar divs en HTML?
- 🧳 🇬🇧 📰 time y address en HTML
- 🧳 🇬🇧 📰 Los tags figure, figcaption, picture e img
Formularios con HTML
- 🧳 🇪🇸 📰 Los forms clásicos en HTML
- 🧳 🇬🇧 📰 inputs en los formularios de HTML
- 🧳 🇪🇸 📰 Estilos para formularios en HTML
- 🧳 🇬🇧 📰 Diferencia entre enlaces y botones
- 🧳 🇬🇧 📰 Estilos para tus botones de HTML
- 🧳 🇪🇸 📰 Controles modernos para formularios
JSON, DOM y CSSOM
- 🧳 🇪🇸 📰 El formato JSON
- 🧳 🇪🇸 📰 ¿Qué es el DOM?
- 🧳 🇬🇧 📰 ¿Qué es el CSSOM?
Semana 3
Flexbox y CSS Responsive
- 🧳 🇪🇸 🏆 ¿Cómo funciona Flexbox?
- 🧳 🇪🇸 🏆 ¿Como funciona CSS Grid?
- 🧳 🇬🇧 📰 Cómo usar Flexbox y CSS Grid en conjunto
- 🧳 🇬🇧 📺 Layouts modernas con Flexbox y CSS Grid
- 🧳 🇬🇧 📰 Posicionamiento con CSS
- 🧳 🇬🇧 📰 ¿Qué es el Responsive Design?
- 🧳 🇬🇧 📰 Cómo hacer imágenes responsive
Estructura básica de un proyecto
- 🧳 🇪🇸 📰 Proyectos en tiempo récord con Parcel
- 🧳 🇪🇸 📺 Webpack y cómo cambió el modo de desarrollar
- 🧳 🇬🇧 📰 Rollup la alternativa de Webpack
Frameworks de UI
- 🧳 🇬🇧 📰 Introducción a Bootstrap 5
- 🧳 🇬🇧 📰 Introducción a Tailwind CSS
Semana 4
Librerías de Javascript
- 🧳 🇬🇧 📰 Introducción a Lodash
- 🧳 🇬🇧 📰 Introducción a Day.js
- JavaScript Vanilla: sin Lodash o Day.js
CSS en la practica
- Extendiendo CSS mediante SASS
- Evolución de las Arquitecturas de CSS
- Design Tokens con CSS Custom properties
Semana 5
JavaScript Avanzado
- Aprende a usar Regex en tu día a día
- Herencia clásica versus herencia de prototipos
- Programación funcional en JavaScript
- Closures y el significado de "this"
Programación asincrona
- Callbacks y el infierno de los callbacks
- Las promesas de JavaScript
- Los generadores en Javascript
- Async / Await en JavaScript
ES2015 y más alla
- Template literals y la interpolación de Strings
- Diferencia de Rest parameters y Spread operator
- El ABC del destructuring en JavaScript
- La verdad sobre las arrow functions
- Map, Set, WeakMap y Weak Set
- Los for y el protocolo de Iteración
- Metódos en Array, Number, Object, Boolean, String y Math
- Encadenamiento opcional y operador nullish coalescing
Semana 6
JavaScript en producción
- ¿Qué son los Shim y Polyfills?
- Cómo usar correctamente Babel
- Minificación del código para producción
- Uso efectivo de los Source maps
- Code Splitting y eliminación del código no usado
Introducción a React
- Introducción a React: JSX, Props Children y Estado
- Ciclo de vida moderno en React
- Eventos y Formularios en React
React avanzado
- Componentes de orden alto en React
- Patrón Render Props
- Todo sobres Hooks en React
Semana 7
Manejo de estado con Redux
- Redux: Acciones, Reducers, Store y Flujo de datos
- Acciones asíncronas y middlewares en Redux
- Mejora tu arquitectura con React Redux
- useRedux al rescate
Creando apps con React
- Creando un dashboard con Create React App
- Creando un dashboard con Next.js
Semana 8
Introducción a Node.js
Introducción a Express.js
Bases de datos NoSQL
- Introducción a MongoDB
- ¿Cómo conectarse a MongoDB desde Node.js?
- Las ventajas de usar Mongoose
Semana 9
Bases de datos SQL
- ¿Qué es el diagrama entidad-relación?
- ¿Cómo conectarse a MySQL desde Node.js?
- Consultas esenciales en MySQL
Semana 10
Creando una API
- Creando una API con Express.js
- Creando una API con Hapi.js
- Creando una API con Sails.js
- Usando Firebase cómo API
Semana 11
Autenticación y usuarios
Semana 12
Introducción a la seguridad Web
- ¿Que es injection y cómo evitarlo?
- ¿Cómo implementar autenticación de manera correcta?
- ¿Cómo evitar exponer datos sensibles en tus apps?
- Acceso, permisos y correcta configuración en un servidor
Semana 13
Introducción a los servidores
- Permisos de usuarios y sistema de archivos
- Conexión SSH a un servidor remoto
- Manejo esencial de VIM
Servidores como servicio
- Mi primer servidor en Digital Ocean
- Cómo despliego mi app en Heroku
- Despliega más rápido con Vercel
Semana 14
CSS Avanzado
- Todo sobre tipografía en CSS
- Transiciones y Animaciones en CSS
- Sistemas de Diseño con CSS
Semana 15
El mundo del testing
- Los principios del testing
- Unit testing en nuestras apps
- Snapshot testing en React
- Cómo hacer buen mocking con los tests
- ¿Qué son los tests funcionales o de integración?
- Tests de integración completa (E2E)
Semana 16
Contenedores
- Introducción a los contenedores
- Instalando y configurando Docker
- Introducción a Kubernetes
- Usando Kubernetes con Google Cloud Platform
Integración Continua
- Integración continua y despliegue continuo
- Configura tu ambiente de Integración continua
Sobre la guía
Esta guía está basada en la experiencia de un Bootcamp de JavaScript que dicté en 9 semanas y una serie de recursos que he consumido a lo largo de mi carrera.
- https://glrz.me/aprende-frontend
- https://github.com/kamranahmedse/developer-roadmap
- https://andreasbm.github.io/web-skills/
- https://frontendmasters.com/books/front-end-handbook/2019/
- https://www.internetingishard.com/html-and-css/
Si tienes una referencia de un recurso que haga falta, o que consideres que es mejor no dudes en escribirme directamente en Twitter para incluirlo.