¿Qué tengo que saber para buscar trabajo como jr frontend developer? | CourseIt Blog
logo courseit

¿Qué tengo que saber para buscar trabajo como jr frontend developer?

24

Cuando se empieza el camino de aprender algo nuevo siempre es difícil entender qué es lo importante y que se puede dejar para después sin algún tipo de guía.

Esto es particularmente cierto cuando uno aprende programación porque los roadmaps que se recomiendan suelen ser bastante generales. Cuando alguien pregunta qué debería saber para empezar a trabajar la respuesta general es HTML, CSS, JS y algún framework.

Pero la realidad, es que cada uno de estos tecnologías en sí misma es enorme y puede llevar años aprender a fondo todas sus características.

Es difícil para una persona que está empezando entender que parte de todo el contenido en cada tema es necesario para aprender, y obviamente absorberlo completamente puede llevar una eternidad y eso obviamente es muy frustrante para quien está buscando dar el salto.

Asi que, a modo de recomendación personal les voy a dejar un roadmap que yo creo puede ayudar a enfocar mejor el estudio y la práctica:

Empecemos por repasar las tecnologías que se necesita aprender para trabajar en desarrollo web: HTML para darle estructura a las páginas, CSS para darles estilo, posicionar, agregar colores y todo lo que sea visual y Javascript para todo lo que sea interacción y lógica.

HTML y CSS son dos tecnologías a las que muchos programadores no suelen darle la importancia que merecen. Particularmente CSS, que con los años evolucionó muchísimo y hoy en día nos permite realizar muchísimas acciones dentro de los estilos que antes requerían si o si intervención de Javascript.

Por eso, aunque parezca tentador correr a aprender Javascript de primera, es importante tomarse el tiempo para aprender HTML y CSS y entender sus conceptos generales

Veamos entonces cuales son los temas de HTML y CSS necesarios para un primer trabajo

HTML:

  • Diferencias entre HEAD y BODY
  • Donde se cargan los recursos externos y por qué (Render blocking)
  • HTML semántico

CSS

  • Cómo funciona el flujo de posición default
  • Especificidad
  • Propiedades básicas para manipular colores, textos, bordes y tamaños
  • Box-model
  • Position
  • Flex
  • Pseudo elementos, pseudo clases y selectores
  • Transiciones básicas (Ej: hacer más suave el mover de un elemento)
  • Media queries
  • Conceptos básicos de algún pre-procesador de CSS como SASS

Con HTML el roadmap es bastante simple, pero con CSS mi recomendación es que se tomen el trabajo de entender cómo funciona el flow default, porque eso les va a dar todas las herramientas para entender y aplicar position y flex de forma simple y escalable.

Con respecto a las propiedades, nadie se las sabe todas. Lo importante es tener una referencia mental de qué cosas puede hacer CSS, y la capacidad de buscar los nombres específicos cuando las necesiten, por ejemplo ‘’uy yo se que hay una propiedad que me permite poner un filtro sobre el fondo de los elementos que están atrás’. Si van a google y buscan se van a encontrar backdrop-filter. Con esto ya estamos para HTML y CSS, vamos ahora con…

Javascript

Este es quizás el punto más complejo de la cuestión. Javascript es un lenguaje de programación, y para quienes están comenzando en este mundo eso implica aprender dos cosas separadas. Por un lado aprender la herramienta, el lenguaje, sus métodos y particularidades, su manejo de memoria y sus temas de performance. Por otro lado tenemos que aprender pensamiento lógico y resolución de algoritmos, para escribir instrucciones que la máquina pueda comprender.

Vamos entonces a segmentar el conocimiento necesario en dos categorías

Lógica y algoritmos

  • Variables
  • Operadores matemáticos y de comparación
  • Operadores lógicos
  • Condicionales
  • Concepto de bucles e iteración

Javascript

  • Tipos de variables
  • Tipos de datos
  • Estructuras de datos (Objecto y Array)
  • Sintaxis de operadores y condicionales en Javascript
  • Sintaxis de bucles en Javascript
  • Funciones en Javascript
  • Scope
  • Métodos de los tipos de dato y estructuras de objeto
  • Diferencia entre asignaciones por valor y referencia en javascript
  • Spread operator*
  • Math()
  • Eventos del DOM
  • Interacciones con el DOM
  • Propagación de eventos
  • Callbacks
  • Fetch (o alguna librería para hacer requests HTTP)
  • Cómo funcionan los métodos HTTP, diferencia entre params, query y body
  • Async / Await
  • Promises*
  • Clases*

Esta es una lista de lo que yo considero mínimo para trabajar en un proyecto productivo como jr frontend developer. No significa que tengan que saber todo sobre cada tema, pero sería ideal que sepan de qué va cada cosa con un pantallazo y puedan profundizar de ser necesario cuando se encuentren con un problema particular.

Todos estos conceptos se pueden ir profundizando a medida que uno trabajo, no hace falta saberlos a la perfección desde el día uno.

Los puntos que están marcados con * especialmente, creo que son temas bastante complejos en sí mismos, pero que se pueden tomar de a poco y por partes. Por ejemplo, está bien si en una primera instancia solo aprenden spread operator para hacer copias de objetos y nada más, si solo usan clases porque aprendieron react o si el único método que conocen de promise es promise.all.

Lo importante es que una vez que tengan esta base no tengan miedo en profundizar más, y ya teniendo un trabajo probablemente se encuentren con una guía más clara de lo que tienen que aprender (que probablemente sea muy personal y pensada para el proyecto en el que trabajen o para lo que les despierte el interés). Y de ahí se pueden ir metiendo no solo en la profundidad de estos temas sino en otros conceptos como animaciones, librerías de estilos, testing, patrones de diseño, temas de performance y más.

Con respecto a los frameworks, no voy a agregarlos a esta guía porque va a depender del que decidan utilizar, pero sepan que entendiendo los conceptos de Javascript que están arriba deberían poder tomar cualquier framework o librería de front sin problemas, en especial Vue y React que son a mi parecer las más amigables.

Dicho eso, les dejo el resumen todo junto:

HTML

  • Diferencias entre HEAD y BODY
  • Donde se cargan los recursos externos y por qué (Render blocking)
  • HTML semántico

CSS

  • Cómo funciona el flujo de posición default
  • Especificidad
  • Propiedades básicas para manipular colores, textos, bordes y tamaños
  • Box-model
  • Position
  • Flex
  • Pseudo elementos, pseudo clases y selectores
  • Transiciones básicas (Ej: hacer más suave el mover de un elemento)
  • Media queries
  • Conceptos básicos de algún pre-procesador de CSS como SASS

Lógica y algoritmos

  • Variables
  • Operadores matemáticos y de comparación
  • Operadores lógicos
  • Condicionales
  • Concepto de bucles e iteración

Javascript

  • Tipos de variables
  • Tipos de datos
  • Estructuras de datos (Objecto y Array)
  • Sintaxis de operadores y condicionales en Javascript
  • Sintaxis de bucles en Javascript
  • Funciones en Javascript
  • Scope
  • Métodos de los tipos de dato y estructuras de objeto
  • Diferencia entre asignaciones por valor y referencia en javascript
  • Spread operator*
  • Math()
  • Eventos del DOM
  • Interacciones con el DOM
  • Propagación de eventos
  • Callbacks
  • Fetch (o alguna librería para hacer requests HTTP)
  • Cómo funcionan los métodos HTTP, diferencia entre params, query y body
  • Async / Await
  • Promises*
  • Clases*

Espero que les sirva este pequeño roadmap no oficial, si tienen dudas no tengan miedo en escribirme @iamdoomling

Bel Rey

@doomling