Desde cero hasta programador front-end

Empiezo esta publicación con la siguiente cita:

"Fernanda y Gustavo se conocieron en una conferencia. Fernanda le dijo a Gustavo que ella era programadora de front-end. Gustavo dijo que quería empezar esta carrera y no sabía por dónde empezar ".

A pesar de que esta cita nunca haya existido, Gustavo personifica a los que quieren empezar a aprender pero no saben por dónde.

Paso 1: HTML5 y CSS3

HTML es un lenguaje de marcado responsable de la estructura de las páginas web, dando sentido a cada parte que la compone, mientras que CSS es esa tecnología que aplica un atractivo estético a la estructura de la página creada.

Aprender HTML5 y CSS3 creando una página de barbería es un buen comienzo, porque además de aprender lo básico, tendrás algo práctico ya creado.

Después de consolidar sus conocimientos, puede avanzar y aplicar nuevas técnicas para perfeccionar aún más esta parte.

Además de lo que vimos, saber crear un sitio web responsivo, el que tiene páginas que se adaptan del móvil al desktop, es una práctica de mercado, ya no es una ventaja.

¿Listo para el siguiente paso?

Paso 2: lógica de programación y JavaScript

La profesión de programador front-end además de involucrar el conocimiento de HTML5 y CSS3, también requiere conocimiento del lenguaje JavaScript.

Es el único lenguaje de programación efectivo (podemos declarar variables, loops, funciones...) soportado por los navegadores del mercado, incluso, esta es una de las razones por las que la mayoría de los programadores, ya sean front-end o no, tienen algún conocimiento de este lenguaje.

Sin embargo, al ser JavaScript un lenguaje de programación, es necesario un conocimiento de la lógica de programación, que una vez aprendido se puede aplicar en los más diversos lenguajes del mercado.

Para aquellos que nunca han programado en su vida, aprender y practicar la lógica de programación de lo fundamental hasta la creación de animaciones y un juego, te prepara aún mejor para el lenguaje JavaScript.

Con la parte lógica de programación actualizada, el aprendizaje el lenguaje JavaScript completa la tríada de tecnologías mínimas que un programador front-end necesita. Sin embargo, el viaje no se detiene aquí. ¡Debemos ir más lejos!

Paso 3: bibliotecas

Al mercado laboral le encanta la estandarización y nosotros, los desarrolladores, queremos escribir cada vez menos.

En este sentido, tener contacto con bibliotecas y frameworks populares en el mercado aumentará tu índice de empleabilidad, además de brindarte subsidios para crear aplicaciones con mayor facilidad. En este caso, me centraré en las bibliotecas por ahora.

Bootstrap es sin duda, el framework HTML, CSS y JavaScript más popular para crear proyectos mobile first, en el que primero pensamos en nuestras páginas en dispositivos móviles y luego las adaptamos a dispositivos más grandes, como computadoras de escritorio o incluso televisores inteligentes gigantes.

Crear un sitio con Bootstrap desde un diseño existente es una práctica muy común en el mercado. Sin embargo, hace uso de otra biblioteca que está en el colectivo imaginario de los desarrolladores, jQuery.

JQuery es una biblioteca que permite al programador de interfaz realizar cambios en la página más fácilmente a través de las acciones del usuario, como el clic de un botón que oculta una barra lateral o incluso ese hermoso banner giratorio que da vida a tu página.

Hay varias formas de aprender jQuery, incluso la creación de juegos haciendo que el aprendizaje sea aún más divertido. Independientemente de su uso por Bootstrap, hay mucho código escrito en el mercado con esta biblioteca.

Paso 4: más JavaScript

Hoy vivimos en el reino encantado de JavaScript. La versión ES2015 (ES6) de JavaScript se hizo popular rápidamente debido a la introducción de nuevas funciones de lenguaje que tienen como objetivo ayudar al desarrollador a resolver problemas cotidianos.

Crear un proyecto desde cero y aplicar gradualmente las nuevas funciones del lenguaje es una forma de absorber el cambio. De hecho, ES2015 es un requisito previo para aprender algunos de los frameworks más famosos del mercado.

Paso 5: frameworks

Una biblioteca resuelve un problema muy específico, mientras que un framework puede considerarse un conjunto de bibliotecas que tienen como objetivo resolver un problema mayor.

Hoy en el mercado hay una explosión de Single Page Applications, páginas que no se recargan durante el uso (parecen aplicaciones nativas como las que se ejecutan en tu smartphone) y que hacen un uso intensivo de JavaScript.

Frameworks como Angular 1, Angular 2 (¡hoy se llama Angular!) y React son los que invaden el imaginario colectivo de desarrolladores y empresas

Paso 6: (deseable): preprocesador

Aprenda a usar preprocesadores CSS como SASS o LESS.

Un preprocesador no es más que un compilador que traduce una sintaxis refinada que puede trabajar con variables y funciones en código CSS, el que entiende el navegador. En resumen, la idea es darle a CSS un poder similar a los lenguajes de programación como el propio JavaScript que vimos.

Dependiendo del alcance del proyecto y la cultura del equipo, los preprocesadores pueden usarse para hacer el trabajo más productivo.

Paso 7: (deseable): herramienta de build

Por ejemplo, sabemos que un sitio web una vez terminado debe pasar por una serie de optimizaciones. En ese sentido, dominar alguna herramienta de construcción como Gulp puede ser un diferencial a la hora de postularse a una pasantía o un trabajo. La buena noticia es que estas herramientas utilizan el lenguaje JavaScript, de hecho, un lenguaje muy ubicuo en el universo del desarrollo.

Paso 8: (deseable): noción de cómo funciona un back-end

Tener una idea de cómo funciona un backend y cómo el trabajo de su programador de front-end se integra con él le ayudará a tener más confianza cuando trabaje dentro de un equipo. En este sentido, comenzando por PHP creando un proyecto web que se integra con la base de datos es un buen comienzo.

Conclusión

Conocer los elementos esenciales que son HTML5, CSS3 y JavaScript abre oportunidades tanto para pasantías como para puestos vacantes. Además, nada te impide trabajar por tu cuenta como autónomo.

Sin embargo, complementar tu conocimiento con bibliotecas y marcos populares en el mercado amplía aún más estas oportunidades.

Por fin, según Rogers, el proceso de aprendizaje ocurre de manera particular en cada individuo y el rol de los educadores es facilitar el aprendizaje de los estudiantes.

La secuencia de pasos que se presenta aquí es solo una propuesta que puede facilitar tu aprendizaje, pero no dudes en adaptarla a tu modus operandi de aprendizaje.

Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.