Todo lo que necesita saber para convertirse en desarrollador front-end

¡Todo lo que necesita saber para convertirse en un desarrollador web front-end!

Si desea aprender a codificar con el objetivo de ser un desarrollador front-end, hay muchas cosas que necesita saber para tener éxito y conseguir un trabajo. Debe comenzar adquiriendo una comprensión firme de los conceptos básicos del desarrollo web y luego aumentar sus habilidades con herramientas y recursos adicionales que utilizan la mayoría de los desarrolladores web.

Si ha realizado la investigación y está seguro de que el desarrollo front-end es el camino a seguir, consulte estas herramientas que también necesita dominar. Conocer estas herramientas y recursos no solo lo ayudará con el proceso de desarrollo web, sino que también lo ayudará a derrotar a la competencia cuando solicite un empleo.

Por último, si no está 100% seguro de si aprender a codificar es algo que quiera probar, aquí hay 10 razones por las que debería aprender a codificar.

Qué hace un desarrollador front-end

Primero necesita saber exactamente qué es un desarrollador web front-end. En general, el desarrollo web se compone de tres tipos de trabajos segmentados:

1. Desarrollador Front-End. Esta persona (también llamada desarrollador web front-end o ingeniero front-end) es un desarrollador web que trabaja con el front-end de sitios web y aplicaciones web, que incluye todo lo que ve y usa el usuario en el navegador de la página web.. Los desarrolladores front-end suelen centrarse en el diseño.
2. Desarrollador back-end. Esta persona es responsable del back-end o del lado del servidor de los sitios web y las aplicaciones web. El back-end es donde se manipulan y actualizan todos los datos. Los desarrolladores de back-end suelen ser pensadores lógicos.
3. Desarrollador Full-Stack. Esta persona es un ninja especial que tiene habilidades tanto en la parte delantera como en la trasera. Si te gusta trabajar con las "cosas bonitas" así como con las cosas "súper tecnológicas", este trabajo puede ser para ti…

Además, hace mucho tiempo en una galaxia muy, muy lejana… había un título conocido como Diseñador web. El diseñador web realmente no tuvo que lidiar con aprender a codificar, y se centró únicamente en los aspectos de diseño de las páginas web.

En estos días, debido a que los sitios web y las aplicaciones web se han vuelto mucho más funcionales e interactivas, el mercado laboral exige los servicios de personas que sepan diseñar y programar.

Todavía hay algunos trabajos disponibles para diseñadores web, pero la mayoría de los diseñadores web están tratando de aprender a codificar para obtener mejores oportunidades, salarios y seguridad laboral. En muchos sentidos, el trabajo de un desarrollador front-end puede considerarse como un diseñador web que domina un lenguaje de programación, probablemente JavaScript.

HTML es el esqueleto de las páginas web, CSS es la piel y JavaScript es el cerebro.

Domina los conceptos básicos

Es absolutamente necesario tener un conocimiento firme de las tres tecnologías básicas utilizadas en el desarrollo web, que son:

• HTML: este es el primer bloque de construcción básico de todas las páginas web, le da estructura a las páginas web. HTML es un lenguaje de codificación, pero no es un lenguaje de programación completo, sino que es un lenguaje de marcado. Los lenguajes de marcado le permiten "marcar" texto para fines de procesamiento.
• CSS: este es el segundo bloque de construcción básico de todas las páginas web, es responsable de la "apariencia" de las páginas web. CSS tampoco es un lenguaje de programación.
• JavaScript: es el tercer bloque de construcción y el primer lenguaje de programación real que la mayoría de los desarrolladores web aprenden. JavaScript se ejecuta en el navegador de la computadora y permite la funcionalidad de una página web.

Si imagina los tres bloques de construcción del desarrollo web de la forma en que imagina a una persona, podría pensar en ello de esta manera: HTML es el hueso y el esqueleto de las páginas web, CSS proporciona la piel y JavaScript es el cerebro.

Puede intentar aprender a codificar en este momento tomando el curso intensivo de HTML de Brad Traversy, quien es un WHIZ en la enseñanza de tecnologías de desarrollo web:

Herramientas básicas de desarrollo web

• Editor de texto: escribimos código usando un editor de texto, y debes elegir uno y familiarizarte con todas sus capacidades. Algunos de los editores de texto más populares en la actualidad incluyen: Atom, Sublime Text, Brackets, Visual Studio Code y el antiguo Bloc de notas de MS y Mac Text Edit.
• Herramientas de desarrollo del navegador: Google Chrome y Mozilla Firefox están equipados con herramientas de desarrollo internas que le permiten ver y manipular el código de cualquier sitio web en su navegador.
• Estas herramientas son buenas para depurar, y por supuesto… usted es el único que puede ver los cambios que realiza en el sitio web con herramientas de desarrollador, porque solo está manipulando el sitio tal como aparece dentro de su propio navegador.
• Sistemas de control de versiones: los sistemas de control de versiones le permiten administrar los cambios en sus proyectos web. Esto le permite volver a diferentes versiones de un proyecto sin interferir con el proyecto implementado hasta que haya perfeccionado el que está trabajando. Hay varios sistemas de control de versiones en uso, pero Git es, con mucho, el más dominante.
• Línea de comando (terminal): se requiere un dominio completo de la línea de comando para el desarrollo web profesional. La línea de comando parece aterradora, pero facilita la carga de nuevos paquetes de software, y también hace que sea muy fácil navegar a través de archivos y carpetas. Puede aprender a dominar la línea de comandos en un día.

Tecnologías básicas de apoyo al desarrollo web

• Preprocesador CSS: esta tecnología hace que escribir y mantener CSS sea muy sencillo. De lejos, el preprocesador CSS más común es SASS, y se puede aprender en un día
• Marcos CSS: cuando se trata de hacer que las tareas CSS complejas requieran menos tiempo de creación, el marco CSS que necesitará saber es Twitter Bootstrap.
• CSS Flexbox y CSS Grid: ambos son diseños de modelos web CSS que ayudan significativamente a hacer que sus páginas web sean móviles.
• Herramientas de agrupación: Webpack y Browserify con Gulp se utilizan para ayudar a cargar su página más rápido en el navegador. Estas herramientas sirven para minimizar o adelgazar su contenido para tiempos de carga más rápidos.
• Bibliotecas y marcos de JavaScript: las bibliotecas y los marcos le permiten agregar interacciones de JavaScript a las páginas web de forma rápida, más fácil y más eficiente. También ayudan a simplificar aspectos más complejos de JavaScript. Algunas de las bibliotecas y marcos populares incluyen: JQuery, React y Angular.

Como puede ver, hay mucho que necesita aprender para convertirse en un desarrollador web front-end. La buena noticia es que TODAS estas herramientas, recursos y tecnologías se pueden aprender de forma gratuita. Ya puedes ver que hay toneladas de recursos gratuitos solo en YouTube…

Si necesita un aprendizaje más completo, todas estas herramientas se pueden aprender por casi nada utilizando recursos de aprendizaje en línea como Team Treehouse. También hay cursos individuales disponibles, como el curso The Complete Front-End Development o Modern React en Udemy.