Thread by @Manz

¿Quieres aprender #frontend y no sabes ni por donde empezar?
Ruta (2021) para aprender las bases del Front-end

#HTML #CSS #Javascript

🧵Abro hilo.

CUALQUIER web está construida con HTML. Un buen primer paso sería aprender todas las etiquetas HTML que existen (o al menos, la mayoría).

Esta tabla periódica explica las etiquetas que existen en español (ampliando información pulsando en cada una):

⬇ lenguajehtml.com/html/introducc…

Hay que elegir un buen editor de código. Existen muchos (Sublime Text, ATOM, etc...) o incluso IDEs más potentes (WebStorm, etc...), pero el editor más popular hoy en día para frontend es Visual Studio Code (VSCode):

Puedes descargarlo desde aquí:
💾code.visualstudio.com

VSCode es muy personalizable. Puedes añadir extensiones para añadir funcionalidades especificas. Aquí tienes las extensiones que más uso:
manz.dev/software/vscod…

Además, si quieres tunear la config de VSCode, crear snippets para ir más rápido, etc:

Una vez vas aprendiendo todas las etiquetas que hay en #HTML, una buena referencia de ayuda puede ser descargar mi HTML cheatsheet. Está en formato PDF (bajo donación opcional), pero se puede descargar de forma gratuita desde aquí:

➡lenguajehtml.com/cheatsheets/

Por cierto, si lo prefieres, y te gusta más consumir la información de la tabla periódica en formato video, aquí tienes un directo donde hablo de cada una de esas etiquetas:

➡

Una vez conoces bien HTML, sería bueno profundizar en #CSS, para dar estilo a nuestras páginas y dotarlas de una buena apariencia visual.

Puedes apoyarte en la Guía «telefónica» de propiedades CSS:

⬇ lenguajecss.com/css/introducci…

¡También tenemos cheatsheet!
lenguajecss.com/cheatsheets/

Para empezar (ejercicios sencillos, demos o practicar) suelo recomendar la plataforma @Codepen:

➡codepen.io

Básicamente, es como Youtube, pero en lugar de subir videos, subes fragmentos de código, ejemplos, etc... que puedes guardar y compartir posteriormente.

Aunque mucha gente le suele tener miedo/respeto, creo que un buen frontend debe saber moverse bien en una terminal.

Muchas herramientas de front se usan desde una linea de comandos, por lo que es fundamental conocerla.

Aquí tienes unos primeros pasos:
⬇terminaldelinux.com

Para que nuestra experiencia de desarrollador sea cómoda y agradable, necesitamos un servidor local de desarrollo (con reload).

¿Qué es esto? Básicamente, un sistema que vigila la carpeta que estás creando y cuando haces algún cambio, actualiza automáticamente (F5) el navegador.

Antes de comenzar con todo esto, debemos prepararnos para entrar en el mundo de #Javascript, por lo que un buen primer paso sería instalar NodeJS y NPM (su gestor de paquetes):

➡lenguajejs.com/npm/introducci…

De esta forma, será mucho más fácil gestionar e instalar paquetes.

Por cierto, si usas Windows 10+, te recomiendo fuertemente utilizar WSL (Windows Subsystem for Linux).

Con esto, puedes tener un subsistema de Linux dentro de Windows, que será muuuuuuuy cómodo para desarrollar.

Lo explico aquí:
⬇terminaldelinux.com/terminal/wsl/i…

Volvamos al servidor local de desarrollo. Existen muchos:

1️⃣ live-server github.com/tapio/live-ser…
2️⃣ web dev server github.com/modernweb-dev/…

Pero uno de mis preferidos es servor:
3️⃣ servor github.com/lukejacksonn/s…

No tiene dependencias, es rápido, simple y tiene autoreload.

Sin embargo, en este mundo de Javascript de hoy en día, lo habitual suele ser utilizar un automatizador, empaquetador o «build tool».

➡lenguajejs.com/automatizadore…

Entre los más populares hoy en día: Webpack, Gulp y Parcel.

Mi preferido: Vite lenguajejs.com/automatizadore…

Sin embargo, si estás empezando en todo este mundo, el tema de los automatizadores comprendo que sea complejo y lioso.

En mis directos de Twitch he creado un script que lo hace más sencillo (usa Vite), y la curva de aprendizaje no resulta tan dura:
➡manz.dev/software/mkweb/

Una vez llegamos aquí, toca meterse en el complejo mundo de #Javascript. Antes de empezar, descárgate la cheatsheet de Javascript:
➡lenguajejs.com/cheatsheets/

Luego, echa un ojo a mi documentación donde puedes aprender desde lo básico a más avanzado:
⬇lenguajejs.com/javascript/

Tienes desde conceptos básicos de aprendizaje (comentarios, estructuras, bucles, condicionales, etc...) hasta cosas más avanzadas (DOM, asincronía, promesas, peticiones, etc...)

⬇lenguajejs.com/javascript/dom…

Ahora que sabemos un poco de Javascript y automatizadores, creo que podría ser un buen momento para aprender preprocesadores o automatizadores de CSS.

Hoy en día, el más utilizado es Sass. Sin embargo, yo suelo optar por PostCSS:
lenguajecss.com/postcss/introd…

Ya dominamos todo lo anterior. ¿Por donde seguimos?

¿Mi recomendación? Aprender WebComponents.
➡lenguajejs.com/webcomponents/…

WebComponents es una forma estándar de crear estructuras de código formadas por HTML, CSS y Javascript, utilizando el modelo de componentes.

No recomiendo empezar con WebComponents si no dominas Javascript vanilla antes.

También tienes una cheatsheet donde tienes los detalles importantes de WebComponents y como funciona el núcleo de Lit:

⬇lenguajejs.com/cheatsheets/we…

Una vez aprendes los conceptos agnósticos de los componentes, llega el momento de entrar en el mundo de los frameworks de #Javascript, donde hay 4 caminos (entre otros):

1️⃣ React
2️⃣ Angular
3️⃣ Vue
4️⃣ Svelte

Puedes elegir cualquiera, pero aconsejo echar un vistazo a cada uno antes.

Mi consejo:

- Empieza por Vue (curva de aprendizaje sencilla)
- Luego, ojo a React (más demanda de empleo)
- Angular (más complicado, muy usado en empresas)
- Svelte (nuevo aún, pero prometedor)

Si empiezas por Vue, tengo otra ayuda más en la chistera:

Documentación sobre Vue:
➡lenguajejs.com/vuejs/

Y otra cheatsheet más:
⬇ lenguajejs.com/cheatsheets/vu…

Obviamente, esto no es todo lo que hay que aprender, pero es una buena ruta para empezar.

Si te interesa este mundo, ¡vente a mis directos de Twitch ( twitch.tv/ManzDev )!

¡Hacemos cosas entretenidas mientras aprendemos!
➡ manz.dev/streams

https://twitter.com/Manz/status/1457347947973197824

🔴 EN DIRECTO 🔴

De hecho, si tienes ganas de curiosear, pasártelo bien y aprender... Esta tarde estamos en Twitch, intentando hacer una NES sólo con código (sin imágenes)...

¡Vente y participa! ➡ twitch.tv/ManzDev

https://twitter.com/Manz/status/1459555465625575430