Conoce el camino a seguir para ser Front-End Developer. Quizás te interesas por primera vez en el desarrollo de sitios web, o quizás ya has avanzado un trecho; ya sea buscando en Google, viendo videos en Youtube o leyendo foros de programación.
Independientemente de los conocimientos que tengas en desarrollo web, es importante que conozcas la ruta de un desarrollador Front-End, por que esto le dará orden a tu proceso de aprendizaje y te ayudará a no dejar nada fundamental en el tintero.
Si bien la ruta es larga, y tiene muchos desvíos y especializaciones en el camino que dependerán de tu enfoque, para efectos de este artículo nos concentraremos en los puntos más relevantes. Por lo que si quieres ampliar en esta ruta, puedes visitar el mapa completo aquí.
1 – Qué es la internet
El internet es el que hace posible la World Wide Web (WWW). El internet es un sistema global de dispositivos, routers y módems conectados.
La gente a menudo piensa que el internet y la WWW son cosas separadas, pero el internet son las capas de redes que existen para hacer posible la conexión de dispositivos. Exactamente por eso, nadie, ni ninguna empresa, organización o gobierno es dueño de la internet.
Hay varios elementos de la internet que serán relevantes para nuestro aprendizaje y en los que te recomendamos ahondar, tales como, HTTP, DNS, buscadores web, y Hosting.
2 – Fundamentos de HTML, CSS y JS
Estos tres conceptos son la trilogía básica del Front-End, sin ellos es imposible continuar.
HTML es el acrónimo para HyperText Markup Language. Es usado en el Front-End y da estructura a la página web, a la cual luego le puedes asignar un estilo usando CSS y hacer interactiva usando Javascript.
CSS o Cascading Style Sheets es el lenguaje usado para dar estilo a cualquier sitio. Es una tecnología de la World Wide Web, al igual que el HTML y Javascript.
JavaScript te permite añadir interacción a tus páginas. Ejemplos comunes que probablemente hayas visto son los banners que se deslizan, interacciones por clic, secciones pop-up, entre otros.
Es importante manejar la teoría y práctica de estos tres elementos para ir avanzando en el camino de front-end.
3 – CSS Y JS a Nivel Avanzado
Una vez entiendas y sepas manejar de manera básica tanto el CSS como el Javascript, es necesario avanzar en esta materia.
Para avanzar en CSS se recomienda obviamente hacer diseños. Float, grid, flexbox, display y modelos de caja son algunos de los puntos clave para crear diseños.
Una vez domines el desarrollo de diseños básicos, debes pasar a crear diseños responsivos para que tus páginas se vean bien en todas las pantallas. Hay ciertas técnicas usadas para lograrlo; CSS media queries, % de anchos, alturas y anchos mínimos o máximos, etc.
Por otro lado, en Javascript puedes pasar de lo básico a la manipulación de DOM (Document Object Model), implementar API’s, y aprender sobre Javascript moderno (actualización ECMAScript 2015).
4 – NPM y Builders (Webpack, Vite, etc)
Los NPM son las entradas en el campo de script del archivo package.json
Los campos de script son los espacios donde puedes especificar varios comandos y scripts que quieras exponer.
Los builders y task runners ejecutan comandos y realizan procesos detrás de escena. Ayudan a automatizar tu flujo de trabajo haciendo tareas repetitivas y ahorrándote tiempo. Usos comunes incluyen: compilar código, poner en marcha servidores de desarrollo, usar linters, servir archivos desde un puerto local a tu computador, y mucho más.
Tanto Webpack como Vite son Module Bundlers, es decir, son herramientas que toman piezas de Javascript y las empaqueta en un solo archivo, usualmente para usarlo en un buscador.
5 – Frameworks
Los frameworks son colecciones de librerías que ayudan en el desarrollo de un software o una web. Estos varían en sus capacidades y funciones, dependiendo de las tareas que se necesiten. Los frameworks definen la estructura, establecen las reglas, y proveen herramientas requeridas para el desarrollo.
En Lata Digital recomendamos React.
6 – Y seguir estudiando
El desarrollo Front-End, además de ser un área de conocimiento muy amplio, siempre se encuentra avanzando, asi que deberás mantenerte activo para tener conocimientos vigentes en el mercado.
En nuestro blog tenemos otros artículo de desarrollo web y tecnologías que seguramente aportarán a tu formación.
¡Éxito!