Empezando con el desarrollo web Front-end

Después de algún tiempo en la universidad escribiendo códigos y programas que funcionaban a través de la terminal, siempre tuve la impresión de que faltaba algo. Comencé a escribir programas donde el usuario respondía a través de la terminal, pero mientras tanto el mundo ya usa el navegador y los sitios web para interactuar con los sistemas. Esta capa final de interacción con el usuario es la puerta principal de los programas en la web, por eso la llamamos de Front-end.

Suponiendo que prácticamente todas las empresas están en la web hoy. Es cada vez más importante la creación de interfaces amigables y accesibles para todas las personas, y el rol del desarrollador Front-end se vuelve cada vez más importante en estos escenarios.

Entonces, ¿cuáles son los pasos para aprender Front-end y conseguir un trabajo en el mercado laboral?

La base del desarrollo web

Para crear las páginas que quería, comencé con los Conceptos básicos de HTML5 y CSS3, con estas tecnologías podemos indicarle al navegador qué mostrar y cómo mostrar.

Después de algunas semanas estudiando, aprendí a estructurar las páginas de forma semántica, para que los buscadores y lectores de pantalla pudieran hacer nuestro contenido más accesible al usuario final. Aprendí los conceptos básicos sobre posicionamiento y también sobre importancia de escribir código CSS limpio, flexible y reutilizable.

El siguiente paso fue profundizarme más en mis estudios, aprender sobre algunos temas más avanzados como seudoclases, seudoelementos, transiciones, animaciones, cómo crear formularios y tablas semánticas y cómo usar algunos selectores más avanzados.

Después de algunas semanas más de estudio, llegó el momento de aprender sobre la diferencia entre la medida relativa y absoluta, y dónde y cómo deberíamos usar cada unidad de medida, como em, rem y el famoso pixel y cómo organizar mi código CSS.

Por último, estudié las ventajas y desventajas de usarframworks CSS, como el famoso BootStrap. Fue entonces cuando me di cuenta de que el CSS ya había dejado de ser sencillon y se podría usar para realizar muchas otras funciones, no solo para diseñar texto.

Ahora que podemos diseñar nuestras páginas y estructurar nuestro HTML, aprenderemos a darle vida a nuestra página, dejándola con un comportamiento dinámico e interactivo.

Haciendo nuestras páginas dinámicas

Hoy en día uno de los lenguajes más populares y comentados del mundo es JavaScript y es con su ayuda que optimizaremos y crearemos interactividad en nuestras páginas.

Mi plan para encontrarnos el reino encantado de JavaScript fue centrarse en temas básicos del lenguaje como variables, operadores, arrays, bucles y estilos. Para practicar esta parte hice varios ejercicios de lógica.

Después de un tiempo comencé a estudiar temas relacionados con la interacción con el usuario como la creación de eventos, manipulación de elementos, creación de filtros, validación de formularios, incluso cómo utilizar AJAX para completar automáticamente formularios HTML.

Como ya estaba escribiendo mucho código, me di cuenta de que era hora de aprender cómo organizar mi código JavaScript de forma más sencilla.

Después de estudiar JavaScript puro, llegó el momento de aprender un poco sobre JQuery, una de las bibliotecas más conocidas en el mundo front-end. Además de tener varias funciones y plugins creadas para ayudar a nuestro desarrollo diario, durante mis estudios aprendí que JQuery facilita nuestro trabajo con AJAX y cómo hacer solicitudes HTTP como GET y POST y animaciones.

Por fin aprendí a usar otras técnicas con JavaScript para sortear la difícil tarea de complacer las distintas versiones y tipos de navegadores, mientras se utilizan los recursos más modernos de HTML5 y CSS3.

Como hemos aprendido mucho sobre la base del front-end, es hora de estudiar técnicas más avanzadas para refinar nuestro desarrollo.

Evolucionando nuestro Front-end UI

Ahora que hemos creado una buena base en los fundamentos de la web, es hora de estudiar temas más avanzados en desarrollo front-end.

Empecé entendiendo qué son preprocesadores y cómo simplificar el CSS. También aprendí qué son y qué 10 mixins en Saas debería utilizar en mis proyectos.

Una de mis mayores dificultades durante mi aprendizaje fue posicionarme y aprender sobre Flexbox hizo este proceso mucho más fácil. Al igual que estudiar CSS Grid Layout me ayudó a crear diseños de manera más rápida y eficiente. Un consejo que dejo para escapar de la sobrescrita de estilos es crear componentes CSS utilizando el estándar BEM.

Por fin, estudiaremos algunos de los temas más importantes de hoy, cómo desarrollar páginas que se adaptan a cualquier tipo de dispositivo, cómo nos ocupamos con los límites de resolución en sitios web responsivos y por qué usar 'em' en CSS.

Ahora que hemos simplificado nuestro CSS con la ayuda de preprocesadores y ya sabemos cómo hacer que nuestra página sea responsiva, volvamos a JavaScript y veamos qué han aportado las nuevas especificaciones.

JavaScript Moderno

A lo largo de los años, nuestro lenguaje favorito ha sufrido varios cambios y, como ingenieros front-end, no podemos dejar de seguir la evolución y las especificaciones de JavaScript moderno.

La nueva especificación de JavaScript simplificó nuestro trabajo con programación orientada a objetos y trajo recursos como arrow functions, spread operator, template strings y funciones como map y reduce. Además de estudiar las nuevas funciones, también aprendí más sobre algunos estándares de diseños como Proxy y Factory.

Hasta ahora hemos aprendido a utilizar buenas prácticas durante el desarrollo de nuestras páginas, pero inevitablemente irán creciendo, por lo que necesitamos conocer algunas técnicas y herramientas que nos ayudarán a afrontar esta complejidad, sin afectar al usuario.

SPA y React

Una arquitectura muy famosa y usada hoy en día es Single Page Application, con ella creamos una sola página que le da al usuario la sensación de estar en una aplicación.

Tenemos algunas opciones de frameworks para crear SPA, como por ejemplo, Vue.js y Angular.js. Sin embargo, opté por elegir al React, ya sea por la facilidad que ofrece para al manipular y actualizar el estado de nuestra aplicación, como por su amplia adopción en el mercado de trabajo.

Para tener una mejor comprensión de este framework, primero estudiemos cómo React realiza la navegación y la comunicación entre los componentes, entonces, ¿cómo funciona la creación de los container components y el ciclo de vida de React, hasta que alcances la arquitectura flux, implementación de Redux y el server side rendering.

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.

Puedes leer también:

• La carrera de programador: ¿qué curso tomar primero?
• Comenzando con Front-end
• ¿Qué es front-end y back-end?