Original article: How to Become a Front End Developer – Front End Web Dev Skills
Algunos de los profesionales mejores pagados del mundo son los desarrolladores front-end. Ellos usan sus conocimientos y talento para diseñar sitios web atractivos y amigables para el usuario.
Los desarrolladores front-end no necesitan un título de grado para trabajar. Solo deben comprender los conceptos fundamentales del desarrollo front-end, de los lenguajes de programación, y de entornos de desarrollo front-end.
En esta guía, aprenderás a cómo convertirte en un desarrollador front-end, primero entendiendo de qué trata el desarrollo front-end, las habilidades técnicas y blandas que se necesitan, los lenguajes y entornos de programación existentes, y los primeros pasos necesarios para empezar.
En Estados Unidos, un desarrollador front-end puede ganar en promedio USD 86.178 al año, de acuerdo con Glassdoor. De acuerdo con Payscale, un desarollador front-end "típico" puede ganar un ingreso anual de USD 71.350.
Si recién incursionas en el mundo de la tecnología, quizás no sabes qué significa front-end u otros términos del mundo del desarrollo web como back-end y full-stack. Por eso, vamos a empezar explicándolos.
¿Qué es el front-end?
Todos los sitios web que navegamos, los sitios de comercio electrónico de donde compramos productos, los blogs que leemos, y demás sitios son sitios amigables con el usuario y estéticamente agradables realizados por desarrolladores front-end.
Existen dos grandes áreas del desarrollo web que hay que tener en cuenta cuando se diseñan sitios web y aplicaciones web: el front-end y el back-end.
El desarrollo front-end está relacionado con la cara visible por el usuario de cualquier aplicación web. Es lo que el usuario ve y con lo que interactúa al hacer clic sobre un botón, desplazarse por la página, completar un formulario, etc. Esto es la funcionalidad del lado del cliente de una aplicación web.
El back-end se refiere a todos los eventos que ocurren por detrás de escena, como la infraestructura, la conexión y comunicación con la base de datos, etc. Full stack se refiere a la combinación de las áreas de front-end y back-end.
¿Qué es lo que hace un Desarrollador Front-end?
Recién hablábamos de las distintas áreas del desarrollo web: front, back-end y full stack. Así también tenemos distintos desarrolladores, especializados en las distintas áreas del desarrollo web. Por lo que tenemos desarrolladores front-end, desarrolladores back-end y desarrolladores full-stack.
Un desarrollador front-end es un profesional que tiene a su cargo la tarea de crear la interfaz y la experiencia de usuario (UI/UX) con la que los usuarios interactúan para acceder a la aplicación. Son los que resuelven problemas a través de los lenguajes de programación, herramientas, creatividad y la experiencia para crear un sitio web o aplicación que no solo resuelva el problema del usuario y además tiene un buen diseño.
Un desarrollador back-end, como dijimos anteriormente, es responsable por todo lo relacionado con la lógica, la comunicación de la base de datos, entre otras cosas.
Por último, un desarrollador full-stack son los que entienden tanto de desarrollo front-end como de back-end. Esto les permite poder comenzar y terminar un proyecto por sí mismos.
En un ambiente profesional o de empresa, usualmente hay un diseñador UI/UX quién se encarga de diseñar la interfaz y la experiencia del usuario.
Ellos después le pasan el diseño a los desarrolladores front-end y back-end, quienes se encargan en la implementación para que la aplicación diseñada funcione en la web.
El desarrollador front-end va a recrear el diseño al escribir el código en HTML, CSS y JavaScript.
Cómo convertirse en Desarrollador Front-end
Hasta ahora hablamos sobre qué significa front-end y quién es un desarrollador front-end. Ahora, veamos cuáles son los requisitos o habilidades necesarias para poder ser un desarrollador front-end.
Es importante entender que no es necesario saber todo antes de empezar a trabajar como desarrollador front-end, pero hay saberes fundamentales como HTML, CSS, y JavasScript que siempre van a ser esenciales.
1. Aprende HTML, CSS, y JavaScript
Cuando miramos un sitio en la web, las tres cosas más importantes que componen lo que vemos en la web son HTML, CSS, y JavaScript. Estas son las tres cosas que primero tienes que aprender como base para convertirte un desarrollador front-end.
Son las bases de los sitios web y aplicaciones, por lo que debes aprenderlos si quieren dedicarte al desarrollo web. Por suerte, hay muchos recursos en línea disponibles para ayudarte en aprender y practicar.
¿Qué es HTML?
HTML significa, por sus siglas en inglés, Lenguaje de Marcado de HyperTexto. Es el esqueleto de todas las páginas web y aplicaciones. Es el bloque para construir más básico de todos. El HTML se usa para estructurar tu página en elementos como párrafos, secciones, encabezados, barras de navegación, etcétera.
El HTML provee de estructura al contenido que aparece en el sitio web, como imágenes, texto o videos. Una página con solo HTML es muy básica y nada atractiva, por lo que se necesitará usar estilos CSS para hacerla más presentable.
HTML es frecuentemente el primer lenguaje que los desarrolladores aprenden, ya que es esencial para el trabajo de desarrollo web. ¿Quieres aprender más sobre HTML? Puedes empezar con la certificación en Diseño Web Responsive de freeCodeCamp y el nuevo curso completo de HTML de Beau Carnes (en inglés)
¿Qué es CSS?
CSS es la abreviatura, en inglés, para Hojas de Estilo en Cascada, y lo usas para mejorar la apareciencia de una página web con estilos CSS. Estos estilos hacen que tu sitio web sea más atractivo y agradable a la vista para el usuario final.
¿Quieres aprender más sobre CSS? Para empezar, puedas darle un vistazo a la segunda parte de la certificación de Diseño Web Responsive de freeCodeCamp.
¿Qué es JavaScript?
HTML es un lenguaje de marcado, CSS es una hoja de estilo, y después tenemos a JavaScript, el tercer bloque básico de construcción. JavaScript es un lenguaje de programación que te permite hacer tus páginas web más interactivas. Esto puede incluir animaciones, estilos dinámicos, efectos cuando se les hacen clic a los botones, game motion, etcétera.
Si quieres aprender JavaScript, puedes darle un vistazo a la certificación en Algoritmos de Javascript y Estructura de Datos. Puedes complementar tu aprendizaje con este excelente curso introductorio a JavaScript.
2. Práctica con ejercicios de programación
Hay una frase que dice "la práctica hace al maestro". Esto significa que si haces algo con frecuencia, cada vez irás mejorando.
Si quieres convertirte en un desarrollador front-end profesional, tienes que practicar constantemente. Esto te ayudará a aprender los conceptos más profundamente (y no solo lo superficial). Cuanto más practiques, mejor entenderás los conceptos.
3. Mejora tus habilidades
"Aprende constantemente, siempre hay algo más por aprender", decía Steve Jobs. Esto es verdad para todos los aspectos de la vida, incluidos la programación y el desarrollo front-end.
Mientras nuevas tecnologías, herramientas, sintaxis y maneras de resolver problemas sigan apareciendo, siempre es mejor estar al tanto de las nuevas tendencias en tecnología para no quedarnos atrás.
Esto te ayudará a que tus habilidades como desarrollador front-end crezcan. Siempre puedes estar al tanto de todo lo nuevo uniéndote e interactuando con comunidades activas de desarrolladores.
Existen muchas comunidades como la comunidad de desarrolladores de freeCodeCamp y todas las comunidades locales que existen alrededor nuestro.
4. Aprende la Línea de Comandos y Control de Versiones
Como desarrollador front-end, debes entender como funciona la línea de comandos porque te permite acceder a funciones del sistema operativo a través de una interfaz de texto.
Muchos desarrolladores profesionales prefieren las CLIs (Command Line Interface, por sus siglas en inglés) por su velocidad y rendimiento al instalar librerías y frameworks.
Los desarrolladores front-end también deben estar familiarizados con sistemas de control de versiones como Git, que es el más usado. Al programar, frecuentemente vas a querer hacer seguimiento de los que vas programando y otras informaciones.
El control de versiones lo hace mucho más fácil porque te permite a ti y a tu equipo comunicarte y seguir todos los cambios al código original de manera eficiente.
También te proporciona información sobre quién hizo el cambio y qué cambio hizo.
5. Entendiendo las Interfaces de Programación de Aplicaciones (APIs)
Como desarrollador front-end profesional, tienes que estar familiarizado con las APIs, sobretodo en cómo usarlas. Esto es importante para poder comunicarte con la lógica del back-end y las bases de datos.
Para interactuar con APIs usando JavaScript, mayormente vas a usar la Fetch API de tu navegador o la librería Axios. Este artículo explica cómo usar Fetch API con JavaScript.
6. Aprende cómo funcionan las librerías de JavaScript/CSS
Actualmente, hay muchas librerías de JavaScript, todas ellas apuntan a hacer el desarrollo de un aplicación web más fácil. Todas son scripts de JavaScript que hacen que el desarrollo de aplicaciones basadas en JavaScript sea más fácil.
Hay muchas librerías como React, Vue, o Angular (tres de las más populares), por lo cual es mejor elegir una y profundizar en su aprendizaje. Puedes darle una mirada al curso de certificación el librerías de desarrollo frontend de freeCodeCamp para aprender más.
También hay algunas librerías de estilo para darle estilo a tus páginas web de manera simple como Bootstrap, Sass/Scss, Tailwind, y otras.
7. Construye tu portfolio online
Construir tu portfolio es un manera fácil de mostrar tu habilidad como desarrollador front-end.
Si recién estás comenzando como desarrollador front-end, no es necesario que cada proyecto que muestres en tu portfolio pertenezca a un cliente. Podes tomar la iniciativa y ser creativo.
Usa nuevas herramientas y librerías para crear algo espectacular. Mientras vayas avanzando en tu carrera, podrás incluir los proyectos en los que vayas trabajando.
También podes darle una mirada los portfolios de otros desarrolladores front-end para inspirarte y ver qué es lo que te gusta o no. Entonces, al saber que es lo que quieres mostrar al mundo, ya puedes crear tu propio sitio web.
Aquí tienes un curso entretenido que te ayudará a construir tu propio portfolio con HTML, CSS y JavaScript- para que puedas practicar esas habilidades de desarrollo web.
Puedes hacer que tus amigos y miembros de la comunidad te den feedback sobre tu sitio para asegurarte de que todo se ve y funciona bien. No debes olvidarte que todas las palabras que uses en tu sitio web deberían ayudarte a conseguir un buen trabajo. No vas a querer que los textos que incluyas sean demasiados largos o aburridos.
Aquí tienes algunos tips que te ayudarán a que tu portfolio desarrollador realmente destaque.
8. Cultiva tus habilidades blandas
Los desarrolladores front-end deben ser comunicadores eficaces, tanto en lo escrito como lo oral, porque interactúan con el equipo técnico y con el cliente.
También deben ser excelentes comunicadores a través de su código, por lo que es crucial que se tomen el tiempo para comentar dentro del código y escribir la documentación apropiada así tanto tu como otros desarrolladores pueden entenderlo, aún cuando haya pasado tiempo.
Los desarrolladores front-end también deben prestar atención a los detalles y ser meticulosos en todos los aspectos relacionados con su trabajo. Tienen que tener un buen ojo y ser capaces de darse cuenta de pequeños errores o inconsistencias que pueden existir al momento de crear una página web.
Y los desarrolladores front-end deben también ser también capaces de seguir aprendiendo durante toda su vida, porque los sitios web siempre están evolucionando y las expectativas en cuanto a accesibilidad y apariencia siempre están cambiando. Los ingenieros front-end deben estar en constante actualización, ya que seguramente necesitarán aprender nuevos lenguajes de programación o librerías, a lo largo del tiempo.
9. Empieza a postularte a las pasantías o puestos de trabajo que quieras
Una vez que tengas el conocimiento de frontend necesario a través del aprendizaje de las habilidades necesarios y de la creación de un curriculum vitae simple, puedes empezar a buscar ofertas de trabajo relacionadas con el front-end.
Chequea los requisitos de las ofertas para ver en que otras áreas necesitas mejorar como desarrollador front-end.
Finalmente, siempre postúlate a trabajos y nunca tengas miedo de hacerlo. Esto te dará experiencia para ayudarte a comprender cómo son los procesos de contratación de las empresas y qué es lo que se necesita para ser contratados.
Conclusión
En este artículo, hemos aprendido qué es un desarrollador front-end y qué es lo que se necesita para convertirse en uno.
También hemos aprendido que convertirse en un desarrollador front-end sin título no solo es posible, sino que hasta alcanzable.
Una pregunta final que las personas se hacen mucho es cuánto se tarda para convertirse en desarrollador front-end. Bueno, el tiempo depende totalmente de tu ritmo de aprendizaje y conocimientos previos que tengas.
Solo recuerda que no debes compararte a ti o tu ritmo de aprendizaje con el de otros mientras estás aprendiendo. Resérvate un momento cada semana o día para aprender, apégate a ese hábito lo mejor que puedas y luego disfruta.