HTML: Lo básico para todo frontend, deberás aprender a manejar muy bien HTML5 con las nuevas API's (geolocalización, canvas, etc). Si bien muchas webs tienen un html minimalizaste y en un sólo div montan toda la página, es bueno que lo entiendas para luego poder manipular el DOM.
CSS: Desde lo básico, hasta las media queries para crear responsive design.
Con CSS3 se incorporan animación, y todo el mundo de Grid y Flexbox que mejoran
mucho el resposive design. Existen muchos frameworks CSS que podrías aprender
(pero siempre recomiendo aprender las bases del leanguaje) como Bootstrap,
Materialize, AnimateCSS (sólo para animaciones). Aunque también
existen preprocesadores y postprocesadores CSS como Less, Sass,
PostCSS, que vienen perdieron terreno a causa de los frameworks, pero
que se pueden combinar perfectamente. Estos últimos procesadores hacen que uses
el CSS como un lenguaje de programación (donde puedas usar condicionales,
bucles, etc) que luego lo transpila a CSS puro.
Javascript: Desde la aparición de Nodejs, este lenguaje ha crecido muchisimo, y podríamos
considerar que es un "lenguaje para todo", esto quiere decir que no
sólo puedes aplicar funcionalidad al navegador, sino que ahora se convirtió en
un lenguaje de Backend, para crear aplicaciones de escritorio, aplicaciones
móviles nativas, hasta manipular hardware.
Aprender Javascript desde las bases es fundamental, recorrer arrays y objetos,
manipular el DOM, hacer peticiones AJAX y Fetch API (esencial si vas a consumir
una API ya diseñada), distintos aradigmas como programación orientada a
objetos, programación funcional, etc. Todo esto llevado a la sintaxis
EcmaScript 6 que te permite hacer un lenguaje mucho más moderno.
Una vez que domines estos topicos, podrías pasar a un
framework/liberería. Los 3 más populares son React, Angular y Vue. No
me voy a centrar mucho en ellos, pero puedo decirte que con estos
frameworks/librerías ya tienes todas las herramientas necesarias para crear una
SPA (Single Page Application) con un estilo profesional. De hecho React fue
creada por Facebook y Angular por Google. La filosofía de estos frameworks es
que todo es un componente, que puede ser reutilizado una y otra vez (por
ejemplo, las distitas entradas de un blog pueden ser consideradas como un
componente que se repite con distintos "estados"). En fin, cada
framework es un mundo en sí, con su propia ruta de aprendizaje.
Con Nodejs puedes montar un servidor
y conectarlo a una Base de Datos con Javascript (antes era impensado). Como la
ruta del backend es un tópico que excede esta respuesta, siempre es bueno que
todo front aprenda como mínimo las nociones básicas de Nodejs, con
su framework Express y su manejador de paquetes como es npm.
Los paquetes son módulos que te permiten hacer tu trabajo más fácil para evitar
que escribas javascript puro una y otra vez (¿Para qué volver a inventar la
rueda?). Algunos ejemplos intersantes son mongoose(para conectar a
MongoDB), mysql(para conectarla a MySQL), Electron (para
hacer aplicaciones de escritorio), SocketIO(para crear servidores
en tiempo real).
A su vez, es esencial que sepas
usar GIT/GITHUB, ya que es el controlador de versiones y
repositorio más usado. Desde el proyecto más pequeño hasta el más grande puedes
manejarlo y subirlo a la página de Github.
Te dejo algunos herramientas de JavaScript para que
tengas una noción de que se tratan:
·
Babel: Es un transpilador. No todos los navegadores
entienden JS moderno, es decir de ES6 en adelante, por lo que necesitara de
esta herramienta para que el JS en desarrollo sea transpilado en producción y
sea compatible con todos los navegadores.
·
Webpack: Es un "module-bundler", esto es, permite que
todo tu código moderno sea compactado, minificado ( se eliminan los espacios,
tabs, comentarios, etc) para que el navegador lo pueda leer. Es muy poderoso,
porque permite que en desarrollo puedas importar CSS y HTML dentro de un para
que crees una single page application y luego en producción cada archivo será
leido por separado. Su configuración inicial puede ser muy compleja, pero te
permite utilizar muchisimas herramientas modernas de entrada que luego en
salida sólo será html, css y js compatible con los navegadores.
Para no seguir extendiendo, JavaScript también te da
la posibilidad de crear Progressive Web Applications (PWA), o aplicaciones
móviles nativas a través de React Native, aplicaciones de
escritorio con Electron, también está TypeScript que
es un lenguaje basado en javascript que permite escalarlo, esto es útil para
proyectos grandes.