Thread by @iamdoomling

🔥 ¿Te gusta el desarrollo web? ¿Querés trabajar como frontend pero no sabés que estudiar? Te dejo este roadmap para empezar de cero y lograr el cambio de carrera que estás buscando #MartesDeHilitos 👇🏻🧵

En este hilo no te voy a decir DONDE estudiar, para eso tenés este otro →

https://twitter.com/iamdoomling/status/1412394347463651331

La idea acá es tener un orden para seguir y googlear el próximo tema para seguir avanzando ➡️🚧

¡Empecemos! 👇

Primero aprendé
→ HTML
→ CSS básico

Estos lenguajes son la base estructural de cualquier página web, y aunque no son programación los vas a necesitar constantemente. No importa si al principio no sale todo perfecto, lo importante es entender la estructura 🙆‍♀️

Hacé un par de proyectos con estas tecnologías. Ideas: Una página estática que muestre un perfil de usuario. Una galería de fotos de tu gato. Un clon estático de twitter. Lo que quieras.

¿Ya le agarraste la mano? Buenisimo, es hora de explorar un poco más. Aprendé a fondo:

→ HTML semántico
→ CSS:
- Qué es y cómo funciona el box model
- Cómo funciona el flow normal
- Cómo modificar el flow normal con position
- Flexbox 🐸
- Media queries 📱

¡A practicar! Mejorá tus proyectos anteriores o hacé algunos nuevos. Cloná el diseño de instagram o de alguna página que te guste. Hacé que se vea bien en varias resoluciones. No te preocupes por la funcionalidad, por ahora practicá todo lo que aprendiste.

Es hora de meter ✨ funcionalidad ✨, ahora si, toca aprender Javascript. Al principio puede costar y en comparación a los anteriores parecer demasiado abstracto, pero vamos de a poco:

Primero lo primero:

→ Variables (let / const)
→ Tipos de datos
→ Estructuras de datos (objectos / arrays)
→ Operadores matemáticos
→ Operadores lógicos
→ Estructuras de control (if / else)
→ Bucles (for / while)
→ Funciones (y su scope)

Practicá resolver ejercicios usando estos temas. Los famosos algoritmos. Hay diferentes páginas con algoritmos para practicar como hackerank o los desafios de @courseitok:

courseit.io/desafios

Si te trabás resolviendo un ejercicio intentá desmenuzarlo en problemas más pequeños. Esa es la base de la programación, pensar las cosas de a una a la vez y darle instrucciones claras a la computadora para que llegue al resultado deseado.

¿Te quedó más o menos claro? Vamos a profundizar algunas cosas:

→ ¿Qué son los métodos?
→ Métodos más comunes de String, Number, Array y Object

Volvé sobre tus ejercicios anteriores ¿Podés mejorarlos usando métodos? Probablemente si ¡Hacelo!

¿Ya practicaste suficiente? ¿Estás con ganas de seguir? PRACTICÁ UN POCO MÁS, te aseguro que no fue suficiente.

Ahora si, sigamos. Vas a necesitar aprender sobre control de versiones asi que cuando te canses de Javascript y tengas ganas de ver otra cosa te recomiendo que aprendas

→ Git y sus comandos básicos
→ ¿Qué es Github?
→ Cómo crear y compartir tus repositorios

Yo creo fervientemente que nadie aprender BIEN git hasta que no lo usa en un trabajo real, pero es SUPER importante conocer que es y entender al menos como funciona conceptualmente y sus comandos básicos

Ahora si, volvamos a javascript:

Si ya entendiste como funciona la lógica es hora de conocer al DOM. (látigos, DOM, no, te juro que no se puso BDSM la cosa)

El DOM representa la estructura de nuestra web y javascript puede modificarla, es decir cambiar, añadir o eliminar elementos para darle dinamismo. Entonces:

→ Leé sobre el DOM
→ El objeto Document y sus propiedades de manipulación
→ Eventos del DOM

En este momento puede que manipular el DOM se sienta desconectado de los ejercicios de algoritmia que venías haciendo, pero en el fondo la lógica es la misma. Las propiedades de Document se pueden asignar a variables, iterar y muchas cosas más.

Practicá algunos ejercicios simples como realizar una calculadora (¡con estilos y todo!). También podés crear tu propia lista de tareas, que vaya agregando o borrando lo que el usuario ingrese. ¿Hiciste el clon de instagram? ¡Ahora podés pintar el corazón con cada click! 💖

Vas a sentir que no entendés nada. Tenés que seguir practicando hasta que todo esto se vuelve relativamente natural ¿Cuanto te va a llevar? Depende de tu facilidad, constancia, el tiempo que puedas dedicarle y suerte. Lo importante es reforzar cada concepto teórico CON PRÁCTICA.

En este punto, antes de seguir con cuestiones más avanzadas de Javascript quizás quieras hacer un parate y aprender

→ Animaciones / transiciones en CSS
→ Preprocesadores de CSS

Ahora si, volvimos. Teniendo todo lo anterior claro es hora de meterse en dos conceptos claves de la web 1) el código asíncrono y 2) los protocolos de comunicación

Para esto vas a tener que aprender:
→ Callbacks
→ Promesas
→ Async / Await
→ HTTP y sus verbos
→ JSON

Para practicar estos temas lo mejor es utilizar una API pública. Un gran ejemplo es pokeapi.co. ¡Podés construir tu propio pokedex!

Y de paso:
→ ¿Qué es una API?
→ Códigos de estado HTTP

Entender cómo funciona el código asíncrono te va a llevar un tiempo y mucha práctica. En este punto quizás quieras adentrarte en otros conceptos como

→ Módulos
→ clases / prototype en Javascript
→ Cómo funciona el callstack
→ Hoisting
→ Persistir datos con local storage

También te pueden servir algunos conceptos más generales de programación como

→ Closures
→ POO

Eventualmente te vas a tener que amigar con node y NPM para instalar paquetes por lo que primero que nada te recomiendo que aprendas:

→ uso de la terminal (o consola) y sus comandos básicos
→ que es NPM
→ ¿Qué es el package.json y para que sirve?

Ahora que más o menos estamos con todo esto lo siguiente sería aprender un framework o librería de javascript para front. Pueden ser:

→ Vue
→ React
→ Svelte

Yo personalmente iría por React, con Vue en segundo lugar. Creo que actualmente tiene un poco más de salida laboral para una primera experiencia, pero eso puede cambiar en cualquier momento.

El roadmap a partir de acá va a variar un poco dependiendo que elijan, hay guías excelentes sobre ambos a una googleada de distancia.

Obviamente todo lo detallado en este hilo no se aprende de la noche a la mañana, puede ser un proceso de meses (incluso años) dependiendo de la cantidad de tiempo que puedas dedicarle.

Y probablemente haya otras cosas que se puedan aprender en el camino que sumen a tu perfil. Intenté mantener el roadmap lo más genérico y agnóstico a librerías y frameworks específicos.

Dejé afuera las librerías populares como Chakra o frameworks como Tailwind porque considero que NO hacen falta para una primera experiencia. En todo caso si el puesto indica que son necesarias se pueden aprender si uno tiene bases sólidas en las tecnologías mencionadas arriba.

La idea de este hilo es darles un camino conductor si no tienen ni idea por donde seguir, pero no está escrito en piedra y el orden de las cosas puede variar de persona a persona.

Lo importante es tomarse el tiempo de digerir cada tema, comprender los conceptos base y practicar cada cosa hasta que se fije el conocimiento

Eso es todo por hoy ¡Es un montón! Sugerencias y comentarios son bienvenidos <3 Si te gustó este hilo podés invitarme un cafecito en cafecito.app/iamdoomling ¡Nos vemos la próxima en otro #MartesDeHilitos! 🧵