¿Quieres aprender #frontend y no sabes ni por donde empezar?
Ruta (2021) para aprender las bases del Front-end
#HTML #CSS #Javascript
🧵Abro hilo.
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
Esta tabla periódica explica las etiquetas que existen en español (ampliando información pulsando en cada una):
⬇ lenguajehtml.com
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
Puedes descargarlo desde aquí:
💾code.visualstudio.com
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
➡lenguajehtml.com
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:
➡youtu.be
➡youtu.be
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
¡También tenemos cheatsheet!
lenguajecss.com
Puedes apoyarte en la Guía «telefónica» de propiedades CSS:
⬇ lenguajecss.com
¡También tenemos cheatsheet!
lenguajecss.com
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.
➡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
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.
¿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
De esta forma, será mucho más fácil gestionar e instalar paquetes.
➡lenguajejs.com
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
Con esto, puedes tener un subsistema de Linux dentro de Windows, que será muuuuuuuy cómodo para desarrollar.
Lo explico aquí:
⬇terminaldelinux.com
Volvamos al servidor local de desarrollo. Existen muchos:
1️⃣ live-server github.com
2️⃣ web dev server github.com
Pero uno de mis preferidos es servor:
3️⃣ servor github.com
No tiene dependencias, es rápido, simple y tiene autoreload.
1️⃣ live-server github.com
2️⃣ web dev server github.com
Pero uno de mis preferidos es servor:
3️⃣ servor github.com
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
Entre los más populares hoy en día: Webpack, Gulp y Parcel.
Mi preferido: Vite lenguajejs.com
➡lenguajejs.com
Entre los más populares hoy en día: Webpack, Gulp y Parcel.
Mi preferido: Vite lenguajejs.com
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
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
Una vez llegamos aquí, toca meterse en el complejo mundo de #Javascript. Antes de empezar, descárgate la cheatsheet de Javascript:
➡lenguajejs.com
Luego, echa un ojo a mi documentación donde puedes aprender desde lo básico a más avanzado:
⬇lenguajejs.com
➡lenguajejs.com
Luego, echa un ojo a mi documentación donde puedes aprender desde lo básico a más avanzado:
⬇lenguajejs.com
lenguajejs.com/javascript/
Lenguaje Javascript - Javascript en español
Lenguaje de programación interpretado utilizado en el lado del cliente (front-end) para dotar de mej...
lenguajejs.com/cheatsheets/
Javascript Cheatsheets - Javascript en español
Hoja de referencia o CheatSheet del lenguaje Javascript y del framework progresivo VueJS.
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
⬇lenguajejs.com
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
Hoy en día, el más utilizado es Sass. Sin embargo, yo suelo optar por PostCSS:
lenguajecss.com
Ya dominamos todo lo anterior. ¿Por donde seguimos?
¿Mi recomendación? Aprender WebComponents.
➡lenguajejs.com
WebComponents es una forma estándar de crear estructuras de código formadas por HTML, CSS y Javascript, utilizando el modelo de componentes.
¿Mi recomendación? Aprender WebComponents.
➡lenguajejs.com
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
También tienes una cheatsheet donde tienes los detalles importantes de WebComponents y como funciona el núcleo de Lit:
⬇lenguajejs.com
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
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)
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
Y otra cheatsheet más:
⬇ lenguajejs.com
Documentación sobre Vue:
➡lenguajejs.com
Y otra cheatsheet más:
⬇ lenguajejs.com
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 )!
¡Hacemos cosas entretenidas mientras aprendemos!
➡ manz.dev
Si te interesa este mundo, ¡vente a mis directos de Twitch ( twitch.tv )!
¡Hacemos cosas entretenidas mientras aprendemos!
➡ manz.dev
manz.dev/streams
Contenido creado en los streams - Manz.dev
En esta página encontrarás enlaces a los contenidos realizados en los directos de Twitch: Dibujos de...
twitch.tv/ManzDev
ManzDev - Twitch
Les enseño el inminente rediseño de LenguajeJS.com y aprendemos JAMPack | !cartas !robot !discord !s...
Loading suggestions...