Cómo convertirse en desarrollador front-end: Habilidades y recursos [2023]

¿Le gustaría trabajar en empresas líderes mundiales al tiempo que causa un impacto a través de un hermoso desarrollo front-end?

Hay una gran demanda de artistas excepcionales de la web moderna, y esta guía le va a mostrar cómo empezar.

Y puesto que las personas que trabajan en el software son algunas de las mejor recompensadas, merece la pena que considere la posibilidad de adquirir esta nueva habilidad. Nunca se sabe, con el tiempo podría convertirse en una carrera para usted.

La primera sección de esta guía está dedicada a responder preguntas apremiantes sobre el desarrollo front-end. Si conoce las responsabilidades, los salarios y otros aspectos de ser un desarrollador front-end, entonces puede saltarse la segunda parte. La segunda sección de esta guía está dedicada a recursos, tutoriales y consejos.

¿Qué es el desarrollo front-end?

El desarrollo web front-end es la práctica de utilizar HTML, CSS y JavaScript para crear aplicaciones web únicas. Aplicaciones como sitios web, sitios web móviles, pero también aplicaciones móviles y aplicaciones web progresivas.

También puede pensar en ello de esta manera, cada sitio web que usted navega, incluyendo éste, ha sido de alguna manera construido por un desarrollador front-end. Al menos en el lado del cliente.

Aunque el front-end es uno de los caminos más accesibles en el desarrollo de sitios web, también puede ser uno de los más desafiantes.

La tecnología para crear sitios web cambia constantemente, lo que significa que los desarrolladores tienen que adaptar sus habilidades a las últimas prácticas con regularidad. Puede resultar pesado para un principiante, pero mejora tras uno o dos años de práctica sólida en el desarrollo.

¿Se puede aprender desarrollo front-end gratis?

Desde luego que puede

Cada vez es mucho más fácil aprender desarrollo web, sobre todo gracias a la enorme afluencia de nuevos recursos, tutoriales y proyectos de código abierto.

Proyectos como freeCodeCamp están ayudando a millones de personas a escribir código para sus primeros programas. Y el blog de freeCodeCamp está lleno de artículos apasionantes no sólo sobre front-end, sino también sobre otros aspectos del desarrollo web. ¡Merece la pena marcarlo como favorito!

Aunque la premisa de esta guía es ayudarle a aprender de forma gratuita, no podemos pasar por alto las ventajas de los cursos de pago.

Hay un montón de empresas por ahí que se dirigen a la gente decidida, y vamos a destacar algunas plataformas de cursos increíbles que incluso le darán un certificado al final de todo.

¿Cuál es el salario medio de un desarrollador front-end?

Un desarrollador front-end con experiencia previa puede esperar llevarse a casa más de 100.000 dólares al año si vive en Estados Unidos.

¡No es una mala cifra!

Los desarrolladores junior pueden esperar llevarse a casa a partir de 60.000 dólares.

Y los salarios en Europa también parecen bastante razonables; Alemania tiene una media de 50.000 dólares al año.

Vale la pena señalar que la popularidad del trabajo a distancia se ha disparado en los últimos años, lo que significa que los desarrolladores buscan equiparar su salario en todos los ámbitos a los estándares internacionales. ¡Esta es una razón más para plantearse convertirse en desarrollador front-end!

¿Cómo encontrar trabajo como desarrollador front-end?

Técnicamente, un empleo debería ser lo último de lo que hablar. En primer lugar, debe acumular las habilidades y después pensar en las oportunidades potenciales. Pero, dado que este post está estructurado como una guía, siempre puede volver y consultar esta sección como referencia.

He aquí una lista de las bolsas de trabajo más populares para desarrolladores front-end:

• Authentic Jobs
• GitHub Jobs
• CSS-Tricks Jobs Board
• Stack Overflow Jobs
• RemoteOK
• Startups remotas
• Nómadas trabajadores
• Jobspresso
• Hacker News Contratación

Esta es una lista algo condensada de sitios que ofrecen recomendaciones para encontrar su próximo trabajo de front-end. Otras alternativas que tiene es trabajar en un proyecto personal con la esperanza de rentabilizarlo o dedicar su tiempo a hacer trabajos como autónomo.

Recursos: Por dónde empezar.

Los siguientes recursos tratan sobre cómo empezar. Adoptamos un enfoque razonablemente lineal en este sentido. Y por la sencilla razón de que hay una enorme cantidad de recursos ahí fuera.

Para que pueda empezar rápidamente, nos centramos en plataformas y herramientas front-end que se integran en el flujo de trabajo moderno. Como resultado, usted puede aprender la sintaxis de codificación básica a intermedia, mientras que la comprensión de las herramientas que rigen el flujo de trabajo del desarrollador moderno.

Es muy recomendable que se tome su tiempo con estos recursos, ya que le prepararán para los cursos y tutoriales que encontrará en la segunda parte de esta guía.

Codecademy

Si dedica aunque sólo sea unos minutos a buscar recursos para aprender a codificar, Codecademy será sin duda uno de sus primeros aciertos. Esta plataforma para aprender a codificar es muy conocida y ha servido a más de 100M de personas a lo largo de siete años.

En su momento, Codecademy fue bastante revolucionaria con su interfaz de codificación dinámica e interactiva. Y aunque muchos siguieron el mismo camino, Codecademy ha mantenido una trayectoria coherente.

Hoy en día, se puede obtener un certificado al finalizar, y muchos han utilizado dicho certificado para conseguir un trabajo en una startup de alto nivel; como desarrollador junior, nada menos.

Sin embargo, existe el argumento de que Codecademy no es suficiente.

Desde el punto de vista de un desarrollador experimentado… claro, quizás esta plataforma sea demasiado simple. Pero, si sólo está aprendiendo sobre desarrollo front-end, entonces no hay nada más satisfactorio que seguir instrucciones paso a paso con resultados en tiempo real.

Codecademy ofrece clases sobre HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL y Java.

Aprenda maquetación CSS

Como desarrollador front-end, va a pasar una cantidad razonable de tiempo trabajando con la maquetación. La maquetación es el lienzo sobre el que se estructura un sitio web. El texto de este blog está colocado dentro de una fila, que forma parte de un contenedor mayor.

Y esto se aplica a todos los diseños de páginas web. Utilizando Aprenda Maquetación CSS, puede obtener una comprensión fundamental de cómo funcionan los contenedores y las filas, y también de cómo puede posicionar el contenido exactamente donde lo desee.

Otras herramientas que puede explorar son Flexbox Froggy para los fundamentos de Flexbox y Grid Garden para los fundamentos de Grid, respectivamente.

La maquetación es un tema bastante importante de comprender, así que dedique un buen puñado de horas a profundizar en su experiencia con la maquetación. La mejor forma de aprender es a través de la práctica.

Bootstrap

Una vez que tenga claro cómo funcionan las maquetaciones, es hora de hacer algunos experimentos concretos. Claro, usted puede seguir adelante y tratar de desarrollar una interfaz de usuario personalizada como su primer proyecto, pero eso podría asustarle más que animarle a continuar.

Por lo tanto, necesita aprender sobre un framework o dos. Un framework es una forma sencilla de iniciarse en cualquier tipo de desarrollo web. Le proporcionan las herramientas y la documentación para empezar a construir sitios web interactivos desde el primer día. Y uno de los mejores para hacerlo es Bootstrap.

Bootstrap se utiliza mucho en toda la Web y es, sin duda, uno de los frameworks front-end más populares del mundo.

Heck, un buen porcentaje de los sitios que visita a diario están utilizando alguna funcionalidad Bootstrap.

Una de las cosas fantásticas de Bootstrap es lo rápido que se puede empezar. Las páginas de documentación están llenas de ejemplos y casos de uso. Y lo mejor de todo es que el sistema de maquetación de Bootstraps está diseñado teniendo en cuenta el diseño responsivo. Por lo tanto, sus sitios basados en Bootstrap son automáticamente aptos para móviles.

Y si le gusta lo que Bootstrap puede ofrecerle, aquí tiene recursos adicionales sobre populares marcos de trabajo front-end:

• 10 Mejores Frameworks JavaScript que debe conocer
• los 10 mejores marcos CSS para desarrolladores front-end

Lista de comprobación de front-end

A pesar de la tecnología que esté utilizando para construir sus sitios web, todavía tiene que seguir ciertas reglas y normas. Por supuesto, se puede optar por ignorar tales requisitos, pero a costa de la experiencia del usuario y la compatibilidad digital.

Front-End Checklist es una herramienta excelente en la que puede proporcionar la URL de su sitio web, y la plataforma auditará su sitio en busca de las mejores prácticas en el desarrollo front-end. Esto incluye comprobar si ha optimizado sus imágenes o si está siguiendo las mejores prácticas de SEO.

Debería probar y utilizar esta aplicación durante el tiempo que le lleve comprender cuáles son los requisitos modernos de los sitios web y las aplicaciones profesionales. Además, la interfaz de usuario no intrusiva y suave es un placer absoluto trabajar con ella.

Vue.js

Vue.js es un gran ejemplo que muestra cómo una pequeña idea/concepto puede crecer hasta convertirse en una de las cosas más reconocidas del mundo. De hecho, Vue.js ha tomado a la comunidad front-end por asalto.

Este marco progresivo ayuda a los desarrolladores a construir interfaces de usuario asombrosas utilizando HTML y JavaScript.

El marco está totalmente respaldado por la comunidad, tanto en el aspecto financiero como en el de desarrollo.

Es el ejemplo perfecto de cómo el código abierto puede unirse y hacer que sucedan grandes cosas. Y, como desarrollador front-end, debería estudiar más sobre el código abierto y por qué es importante.

Aquí tiene algunas lecturas muy recomendables sobre Vue.js:

• Tutorial de Vue.js para principiantes
• Una lista curada de cosas impresionantes relacionadas con Vue.js
• Vue JS – La guía completa

Y por último, pero no menos importante, eche un vistazo a los diferentes proyectos construidos con Vue.js en el sitio web Vue.js Showcase.

Fundamentos del front-end

Todo lo que hemos visto hasta ahora ha sido gratuito y de código abierto en su mayor parte. Todo lo que necesita es hacerse con Sublime Text, y puede estar bien en su camino a la experimentación front-end, ¡y absolutamente debería estarlo! Leer tutoriales y documentación sobre marcos de trabajo es sólo la mitad de la batalla.

El verdadero aprendizaje ocurre en su editor de texto y en el navegador. El único inconveniente de este enfoque es que no es del todo sistemático. Usted está operando en el modo libre para todos, y los resultados pueden variar en su capacidad de disciplinarse.

A menos que decida invertir, y por invertir me refiero a gastar una suma simbólica en adquirir cualquiera de los libros de front-end de A Book Apart. Estos tipos son algunos de los mejores de la industria, y los desarrolladores front-end veteranos recomiendan sus libros repetidamente.

La sección de fundamentos front-end tiene un libro sobre SVG, CSS, HTML, JavaScript y Sass, que es el punto de partida perfecto para los flujos de trabajo front-end modernos.

GitHub

GitHub es su oficina digital para todo lo relacionado con la codificación y el desarrollo. Es la mayor plataforma de código abierto del mundo, hogar de la mayoría de los frameworks y herramientas más populares del mundo.

Con GitHub, puede alojar sus proyectos y dar la bienvenida a otras personas para que envíen sus contribuciones. Y usted mismo puede enviar contribuciones a otros proyectos.

También puede explorar GitHub y todo lo que ofrece. Por ejemplo, GitHub es el hogar de las famosas listas Awesome, que son colecciones masivas de tutoriales, recursos, herramientas y otras cosas para frameworks y tecnologías específicas.

Por ejemplo, Awesome Front-End List, que incluye información actualizada sobre lo último que hay que saber sobre front-end y hacia dónde se dirige.

Stack Overflow

Stack Overflow tiene fama de ser el sitio de preguntas y respuestas sobre programación más estricto del mundo. Y realmente es así.

Los usuarios de Stack Overflow no se toman a la ligera las preguntas que no han sido investigadas o analizadas adecuadamente. Y aunque esto pueda parecer desagradable, ayuda a crear un fuerte sentido de propósito.

Verá, cada vez que un usuario envía una respuesta a una pregunta, otros usuarios pueden acercarse y upvote esa respuesta. Al final, se obtienen varias respuestas “verificadas” que responden a fondo a las preguntas de los usuarios. Como resultado, la jerarquía del sitio permanece clara y coherente.

Como desarrollador front-end principiante, querrá utilizar Stack Overflow para entender ciertos temas, pero también para hacer preguntas si es necesario. Sin embargo, para la mayoría de los temas para principiantes, debería ser capaz de encontrar respuestas concisas en cuestión de segundos.

Tutoriales y cursos: Hacerse con el ecosistema.

La primera sección está dedicada íntegramente a recursos y plataformas que le ayudarán a empezar. Debería dedicar una cantidad de tiempo razonable a cada uno de los recursos que hemos enumerado para que pueda hacerse una idea real de lo que puede esperar del desarrollo front-end.

Una vez que haya hecho todo eso, puede dirigir su atención hacia los tutoriales y cursos. Estos son recursos más estrictamente organizados con un fuerte énfasis en el aprendizaje.

Vale la pena señalar que algunos de los siguientes cursos no están disponibles de forma gratuita. Sin embargo, le aseguramos que las siguientes recomendaciones son absolutamente de primera línea.

Además, plataformas como Frontend Masters le pondrán al día en todas las tecnologías utilizadas en las startups con más éxito del mundo.

El objetivo de este post no es promover el desarrollo front-end como un hobby, sino darle recursos palpables para que pueda estar en camino de establecer una carrera a partir de todo su aprendizaje.

Documentos web de MDN

MDN (Mozilla Developer Network) va a conocerle de una forma u otra. Esta plataforma de documentación web se dedica por completo a dar a conocer cómo funciona la web. Aquí podrá aprender sobre herramientas para desarrolladores, tecnologías web y el propio desarrollo web.

Cuando busca algún dato específico sobre CSS o HTML, a menudo es MDN el que aparece como primer resultado en Google y otros motores de búsqueda. Las guías, especificaciones y conocimientos generales están estructurados de forma que tengan sentido para los desarrolladores front-end.

cursos edX Front-End

Como se ha dicho antes en esta guía, seguir un plan de estudios estricto es una forma mucho más lineal de aprender y adaptarse. Y para empezar con los cursos, tiene que echar un vistazo a lo que edX tiene que ofrecer. No sólo puede obtener certificados al finalizar, sino que también puede aprender al ritmo que prefiera.

los cursos de edX están minuciosamente estructurados, con un claro énfasis en ayudar a los estudiantes a comprender los fundamentos de cada tema del curso. Por el momento, puede aprender tecnologías como JavaScript, HTML5, CSS3 y mucho más.

Si desea obtener el certificado completo de front-end, tendrá que hacer una modesta inversión de 500 dólares, pero esto también le da acceso directo a los instructores del curso y mucho más. Numerosas empresas han recurrido a edX para inscribir a sus empleados en este programa específico.

Frontend Masters

Frontend Masters es similar a una experiencia bootcamp. Los cursos que puede encontrar en esta plataforma son extremadamente completos, con énfasis en contenidos de larga duración y aprendizaje orientado a proyectos.

Aquí podrá aprender sobre tecnologías como React, Vue, Angular, Node.js y mucho más. La calidad de la producción es extremadamente alta para que pueda disfrutar de una experiencia similar a la de un curso Bootcamp real.

Como usuario registrado, puede realizar un seguimiento de su progreso en la página Aprender. Esta página realiza un seguimiento de su progreso de aprendizaje, mostrando porcentajes para cada tecnología individualmente, pero también porcentajes para pilas completas. Es una forma divertida de mantenerse motivado.

Por último, pero no menos importante, tener en su currículum la realización de un curso de Frontend Masters no pasará desapercibido para su empleador.

Egghead

Egghead es muy similar a la plataforma mencionada anteriormente, pero destaca por sus lecciones más firmes y condensadas. Por ejemplo, la lección “Creación de listas dinámicas en Flutter con ListViews” sólo dura 2 minutos, aunque le proporciona suficiente material didáctico para comprender realmente el concepto.

Egghead ofrece tutoriales y cursos sobre frameworks, bibliotecas, lenguajes, herramientas y plataformas. ¿Quiere aprender sobre desarrollo móvil? No hay problema, Egghead tiene material de cursos para iOS, Android y otras plataformas.

El precio anual es de unos modestos 250 dólares, pero esto le da acceso a todos y cada uno de los cursos y tutoriales que se encuentran en el sitio. También puede discutir cada lección con otros miembros de la comunidad. ¡Merece la pena la inversión!

CSS-Tricks

Chris Coyier es una leyenda absoluta en la comunidad CSS. No sólo ha mantenido CSS-Tricks durante más de una década, sino que también es el cofundador de CodePen, una popular plataforma de intercambio de código para desarrolladores web.

Una cosa con la que puede contar sobre CSS-Tricks es que se actualiza constantemente, y las historias se publican basándose en temas y tecnologías que son tendencia en la actualidad. Como resultado, puede mejorar rápidamente su conjunto de habilidades utilizando los tutoriales proporcionados por muchos de los autores del sitio.

En resumen, es un sitio útil que debe guardar en sus marcadores y consultar una vez al día. Obtendrá un inmenso valor de los propios tutoriales, pero también de las recomendaciones que los acompañan.

Escocés

Scotch es tanto un recurso de aprendizaje como un lugar para conocer los últimos acontecimientos en desarrollo web. En funcionamiento desde 2014, el sitio ha acumulado un enorme número de seguidores junto a miles de tutoriales gratuitos sobre desarrollo web.

Los autores escoceses se centran en gran medida en tecnologías como Vue, React, Laravel, Angular, JavaScript, Node.js y similares. Y tampoco crea que se trata de tutoriales de imitación.

En su mayor parte, va a construir aplicaciones reales y tangibles. Por ejemplo, ¿le gustaría aprender a construir un clon de Twitter Vue y Adonis? No hay problema, inscríbase en el curso gratuito y estará listo.

Es un sitio maravilloso y no puedo recomendarlo lo suficiente para cualquier desarrollador front-end nuevo o existente

Consejos: Si no hay lucha, no hay progreso.

Ya que ha llegado hasta aquí, puede permitirse algunos de los siguientes consejos. Aunque el front-end es una opción profesional lucrativa, implica una curva de aprendizaje bastante pronunciada, y bastantes quebraderos de cabeza mientras se hace a la idea de los plazos actuales.

No obstante, por el nivel de oportunidades que puede atraer, ¡vale la pena la ardua batalla!

Aprenda dentro de lo razonable.

¿Por qué está aprendiendo a programar? ¿Quiere conseguir un trabajo mejor? ¿Le gustaría construir sitios web creativos? Averigüe su razón, porque le resultará útil. Le resultará útil en esos días, semanas incluso, en los que se está dando cabezazos contra la pared… cuestionándose si todo esto merece la pena.

Encuentre su tribu.

Querrá establecer al menos algunas conexiones con personas de ideas afines, e incluso con mentores si es posible. Cuando fui a pedir prestado un libro de Pascal a un profesor de CS de mi antigua escuela, se mostró superamable y abierto a la idea de ayudarme con cualquier problema que pudiera tener. Considere una vía similar, ya sea buscando una comunidad local o encontrando a otros desarrolladores en comunidades en línea. Es mucho más fácil aprender cuando alguien te señala dónde tienes que mirar.

Evite aprenderlo todo.

No cargue con el peso de tener que saberlo todo. Cuando se trata del front-end, empezar con HTML5 y CSS3 es más que suficiente. JavaScript es como la guinda del pastel, así que tenga cuidado con la cantidad de guinda que le pone porque podría hincharse Una vez que se sienta cómodo con lo básico, explore nuevas áreas, temas y marcos de trabajo. La clave aquí son los bocados de aprendizaje pequeños y compactos.

Si desea saber más, lea este post de Ali Spittel en el que comparte más de 25 consejos para nuevos desarrolladores.

Salga ahí fuera

¿A qué espera? ¡Salga ahí fuera y empiece a aprender! Asegúrese de volver a consultar esta guía de desarrollo front-end cada pocos meses para ver nuevas actualizaciones y consejos.

Buena suerte