Cómo pasar de cero a convertirse en un programador front-end

¿Alguna vez te has detenido a pensar cómo funciona la parte visible de internet? Es decir, la capa aparente de los sitios y las aplicaciones.

En cualquier momento en internet, ya sea cuando vas a leer una noticia, publicar una foto en redes sociales, hacer una compra en línea o en cualquier otra situación, hay un trabajo minucioso que intermedia tu experiencia con la tecnología: el desarrollo en front-end.

Ahora, piensa en las siguientes situaciones: estás en un sitio y la página tarda en cargar o las acciones no son tan intuitivas. ¿Qué harías probablemente?

La verdad es que, ante esos escenarios, gran parte de las personas simplemente abandonaría la página.

Es por eso que las responsabilidades del front-end son tan grandes: el cuidado y la funcionalidad son la puerta de entrada y la invitación para que las personas conozcan el contenido de los sitios.

Con eso en mente, el objetivo de este artículo es explorar las complejidades del área de front-end, especialmente para comprender qué está detrás de cada botón e imagen de las páginas.

Si quieres conocer un poco más sobre este universo, ¡escribí este artículo pensando en ti :)

¿Qué es el front-end?

¿Alguna vez has notado la sensación de entrar en un edificio y encontrarte con un hermoso hall de entrada?

La metáfora es simplista, pero ese es el fundamento principal del papel que desempeña el front-end en el mundo digital.

En general, el front-end representa la parte visible de las aplicaciones y los sitios. En términos más simples, se trata del área de las páginas con las que interactúas.

Imagina que un sitio web es como un hogar. El front-end equivale al diseño de interiores, los muebles, las tonalidades de las paredes y todo aquello con lo que entras en contacto.

¿Cómo es la estructura del front-end?

Cuando nos enfrentamos a cualquier construcción, ya sea una obra de arte o una casa, siempre hay una base fundamental que proporciona forma, estructura y funcionalidad.

En el universo del front-end, esta base comprende lenguajes, frameworks, bibliotecas y herramientas.

Pero antes de adentrarnos en cada uno de estos pilares, es necesario que comprendas qué son los lenguajes de programación.

Al fin y al cabo, son ellos los que dictan cómo deben aparecer y comportarse los sitios y las aplicaciones frente a nuestros ojos y nuestras interacciones.

Cómo se hacen las cosas: la web bajo el capó

Antes de adentrarnos en los otros pilares del front-end, hablemos sobre algo que es esencial: los lenguajes.

Si alguien te ha dicho alguna vez que aprender a programar es como aprender un nuevo idioma, esa persona tiene razón. Pero, tranquilo. No estamos hablando de francés o mandarín.

En resumen, los lenguajes de programación son las herramientas que permiten que la persona desarrolladora se comunique con la computadora.

Es decir, es a través de las reglas estructurales de cada lenguaje de programación que las personas pueden poner soluciones en práctica.

Cada lenguaje tiene sus propias reglas y características. Aquí están los principales lenguajes de programación de front-end:

• HTML: Piensa en HTML como la base de tu casa favorita. ¿Sabes las paredes que dan protección, las ventanas por donde observamos el mundo y las puertas que nos invitan a entrar? Es exactamente eso. HTML da forma y estructura a lo que vemos en las páginas web, como un esqueleto que mantiene todo en pie.

• CSS: Ahora, imagina entrar en esta casa y encontrarte con colores armoniosos, muebles bien posicionados y una sensación de comodidad. Ahí es donde entra CSS. Es responsable de garantizar que todo tenga una apariencia hermosa y acogedora, decidiendo desde el color de las paredes hasta el estilo de los muebles.

• JavaScript: Y para hacer que esta casa sea realmente especial, imagina que al entrar, las luces se encienden automáticamente, comienza a sonar música suave y las cortinas se abren lentamente. Ese toque, que aporta movimiento e interactividad, es el trabajo de JavaScript. Es ese detalle que marca la diferencia, dando vida al ambiente y proporcionando una experiencia única.

Herramientas

En el mundo digital, también hay una caja de herramientas que ayuda a construir y crear armonía en las páginas.

Editores de texto

Los editores de texto son esenciales para quienes programan, porque a través de ellos las personas desarrolladoras ensamblan el "rompecabezas" digital.

Un ejemplo bastante popular es Visual Studio Code. Pero hay muchos otros editores de texto disponibles.

En general, los editores de texto ayudan a organizar y visualizar el código, lo que facilita mucho la vida de las personas desarrolladoras.

Herramientas de diseño

Como su nombre sugiere, las herramientas de diseño son responsables de crear páginas hermosas y armoniosas.

Para ello, existen profesiones increíbles como personas diseñadoras de UX (experiencia del usuario) y UI (interfaz de usuario) que definen la organización y caracterización de las páginas.

¡Pero espera un momento! No te confundas: quienes trabajan en front-end no necesariamente son personas diseñadoras.

En realidad, es un trabajo colaborativo: las personas diseñadoras usan las herramientas para crear y mostrar cómo deben ser las páginas. Y luego, entra el equipo de front-end para poner el plan en práctica.

La persona diseñadora imagina y dibuja, mientras que la persona desarrolladora front-end se pone manos a la obra para que todo salga según lo planeado.

¿Para qué sirve el front-end?

Imaginemos que las páginas web son como un establecimiento comercial de múltiples sectores. Entras y te encuentras con una variedad de secciones: ropa, electrónicos, juguetes, alimentos.

Sin embargo, imagina que todo está desorganizado, sin señalizaciones, luces parpadeando por todas partes y, para empeorar las cosas, suena una alarma irritante sin parar.

No serías el único en salir corriendo de esa tienda. Entonces, el front-end se encarga de asegurar que la experiencia en los sitios web sea agradable, organizada y funcional.

¿Qué problemas resuelve el front-end?

Una forma de entender mejor qué es y para qué sirve el front-end es a través de la aplicación práctica en ejemplos.

Por eso, aquí hay algunos ejemplos de problemas que el front-end puede resolver:

Facilitar la interacción entre usuario y computadora

El otro día, estaba en un aeropuerto internacional por primera vez. Era uno de esos enormes, con terminales que parecían extenderse por kilómetros.

Al principio, sentí ese nerviosismo típico de no saber a dónde ir, con el ruido de las maletas y el murmullo constante de la gente.

Pero a medida que avanzaba, me di cuenta de la importancia de algunas cosas simples: las señales de señalización. Estaban por todas partes: check-in, embarque, salidas, restaurantes. Cada flecha, cada señal, estaba estratégicamente ubicada para guiarme.

Esta función tiene una relación directa con mi trabajo como persona desarrolladora front-end: al igual que esas señales en el aeropuerto, mi trabajo es asegurar que, en el vasto universo de Internet, siempre sepas hacia dónde ir, sin confusión y sin perderte.

Un sitio web bien diseñado es como ese aeropuerto bien señalizado: cada paso del viaje es claro e intuitivo.

Hacer que la información compleja sea accesible y comprensible

Como ya sabes, el papel del front-end es evitar el sentimiento de confusión en el mundo digital.

Es como si, al entrar en un sitio web o aplicación, fueras recibido por una persona súper atenta que te presenta todo de manera simple y directa, muestra las mejores opciones y explica todos los términos que desconoces.

Como personas desarrolladoras front-end, nuestro trabajo es garantizar que la información sea clara para todas las personas, independientemente de su familiaridad con el tema. Queremos que cada persona se sienta cómoda y acogida, sin importar su experiencia previa con la tecnología.

Adaptabilidad a diferentes tamaños de pantalla (Responsividad)

¿Alguna vez has comparado la experiencia de ver una película en la pantalla del cine y luego en el celular?

La diferencia entre las dos experiencias es muy grande. Las pantallas de diferentes tamaños proporcionan experiencias distintas.

En el mundo digital, es como si tuviéramos cines, televisores, tabletas y celulares. Todos mostrando la misma película.

Por eso, necesitamos ajustar las imágenes para que nada quede fuera o distorsionado. El front-end es la directora de escena que garantiza que, independientemente del tamaño de la pantalla, todo se vea de la mejor manera posible.

En otras palabras, adapta nuestra "película" para que sea perfecta en cualquier "pantalla".

¿Cuáles son los beneficios del front-end?

Voy a contarte una historia sobre María. Acaba de abrir su propia tienda de ropa en línea, un sueño que ha cultivado durante años.

María invirtió en piezas de calidad, eligió un nombre para la marca y estaba lista para conquistar el mundo virtual. Pero su trayectoria es una excelente manera de entender los beneficios del front-end. En los primeros días, María se dio cuenta de que, a pesar de tener productos increíbles, las personas que visitaban su sitio salían sin comprar.

Pronto, María se dio cuenta de detalles sobre la experiencia de su sitio: todo era bastante lento, las imágenes no se cargaban correctamente y la navegación era confusa.

Entonces, buscó la ayuda de una persona desarrolladora front-end, que rediseñó su comercio electrónico. El resultado de este trabajo fue claro: la página se volvió más rápida, intuitiva y con una apariencia limpia.

Ahora, las personas podían encontrar fácilmente lo que querían y disfrutar navegando por el sitio.

Con los cambios, las ventas de María se dispararon. Antes, las personas se frustraban y no completaban la compra.

Ahora, seguían el proceso de manera sencilla: desde la elección del producto hasta la finalización del pago.

El sitio eficiente y amigable de María convirtió a los indecisos en clientes leales. Ahora, la tienda en línea de María no es solo un negocio: es una (¡buena!) experiencia.

Gracias al poder del front-end, su visión se convirtió en realidad. El resultado del trabajo de front-end no solo se refleja en el número de ventas, sino en la construcción de una conexión genuina con sus clientes.

Y así, María no solo realizó su sueño, sino que también creó un espacio digital que las personas adoran visitar. Y eso es lo que puede hacer el front-end: convertir los sueños en experiencias digitales increíbles.

La tríada: HTML, CSS y JavaScript

Después de asimilar todos los conceptos básicos, es hora de profundizar un poco más.

Vamos a sumergirnos un poco más en el universo del desarrollo front-end y descubrir los tesoros que la tríada HTML, CSS y JavaScript tiene para ofrecer.

Pilar Fundacional: HTML

Imagina una ciudad: con casas, edificios, parques y calles. En términos de sitios web, el HTML (HyperText Markup Language) es responsable de crear esta estructura fundacional.

En términos más simples, funciona como los cimientos y la base de las construcciones.

Los términos técnicos que podrás encontrar mientras aprendes HTML incluyen "etiquetas", "elementos" y "atributos". Pero puedes pensar en ellos como ladrillos y cemento, unidos para construir algo sólido.

Artista: CSS

Ahora, con la ciudad construida, necesitamos color, estética y estilo. El CSS (Cascading Style Sheets) es nuestro diseñador de interiores. Define colores, espaciados y la apariencia general de la página.

A través del CSS, es posible dar vida y belleza a la estructura que el HTML construyó. Algunas palabras clave que puedes encontrar al estudiar CSS son "selectores", "propiedades" y "valores". Son las herramientas que nos ayudan a pintar y decorar nuestra ciudad digital.

La Magia: JavaScript

Tenemos una ciudad hermosa, pero aún estática. Para que cobre vida, tenemos a JavaScript.

Es como el electricista y la ingeniera juntos, permitiendo que las luces se enciendan, los ascensores se muevan y los parques tengan fuentes danzantes.

Funciones, variables y eventos son términos con los que te familiarizarás al aprender JavaScript. Son los componentes que aportan interactividad a nuestro mundo digital.

Yendo más allá: Bibliotecas y Frameworks

A medida que nos sumergimos en este universo, encontramos las bibliotecas y los frameworks, que son como kits de herramientas listas para usar que nos ayudan a acelerar nuestro trabajo.

• Bootstrap: Una biblioteca CSS que viene con estilos y componentes listos para usar, ayudando a crear sitios web responsivos rápidamente.
• React, Vue y Angular: son frameworks JavaScript avanzados que nos permiten construir aplicaciones web interactivas de manera más eficiente y organizada.

¿Cómo comenzar en el mundo del front-end?

Ya te he contado algunas historias, ahora déjame guiarte en este primer paso en el universo del front-end. ¡Dale!

Como en cualquier viaje, para empezar en el mundo del front-end, necesitas un plan y, sobre todo, determinación y esfuerzo.

Comenzando desde cero en el front-end

Entrar en el mundo del front-end es como prepararse para una maratón. No tiene sentido salir corriendo sin un calentamiento en el recorrido, ¿verdad?

Antes de empezar, repasemos algunos conceptos:

• HTML: Es el fundamento, el comienzo de todo. Piensa en él como el esqueleto de tu página.

• CSS: Una vez que tienes una estructura, CSS entra para dar color, forma y estilo. Será como pintar y decorar tu casa.

• JavaScript: Ahora que tenemos una casa bonita, vamos a hacerla interactiva, con puertas que se abren y luces que se encienden.

Aquí están los primeros pasos de tu plan de estudios:

Con una base sólida, es hora de ir más allá. Hay innumerables cursos que te ayudarán a profundizar en cada lenguaje.

El Tech Guide de Alura es una excelente fuente para eso. Allí encontrarás un camino estructurado para cada lenguaje.

Recuerdo una entrevista de Denzel Washington, un actor estadounidense, que encaja perfectamente aquí y dice algo así en traducción libre:

Los sueños sin objetivos son solo sueños.

Y eventualmente nos frustramos porque nunca los alcanzamos.

En tu viaje, para alcanzar tus sueños, necesitas disciplina.

Pero sobre todo, necesitas consistencia.

Porque sin compromiso, nunca comienzas.

Pero sin consistencia, nunca terminas.

Sé que puede parecer un desafío ahora, pero la verdad es que cada paso que das en el aprendizaje es una victoria.

No se trata de cuán rápido aprendas, sino sobre el viaje y el progreso continuo. Comprométete con tu crecimiento, sé constante en tus estudios y prácticas.

¿Cuáles son los próximos pasos?

Ahora que ya has dado los primeros pasos en el universo del front-end, puedes comenzar tu viaje. Si puedo darte un consejo en este momento, es: fortalece tu base.

Antes de sumergirte en React o cualquier otro framework, fortalece tus bases en JavaScript. Aquí en el blog de Alura puedes encontrar muchos artículos sobre temas específicos de front-end.

¡Toma notas! ¡Practica! Desarrolla tus propias páginas y aprende de tus errores y aciertos. Crea el hábito de participar en foros; responder preguntas es una valiosa fuente de investigación y desarrollo.

Si te gusta ver videos, échale un vistazo a nuestro canal en YouTube para escuchar a un montón de gente genial conversando sobre cómo es trabajar en front-end. De hecho, en este episodio, Jose Gonzalez, Gui Lima y Gabriela Aguiar nos brindan con más detalles sobre qué aprender y por donde empezar para ser Dev Frontend.

¡Buenos estudios! :)

Vinicios Neves

Vinicios es un ingeniero de software, involucrado en la arquitectura, diseño e implementación de microservicios, micro frontends y sistemas distribuidos. Tiene una experiencia significativa en aplicaciones, integración y arquitectura empresarial. Es Ingeniero de Software por la UNESA y Arquitecto de Software por la PUC Minas.

Traducido por Eric Monné