¿Cómo convertirse en un desarrollador front-end (edición 2020)?

¿Cómo le gustaría trabajar en empresas líderes a nivel mundial y tener un impacto a través del hermoso desarrollo front-end??


Existe una gran demanda de artistas excepcionales de la web moderna, y esta guía le mostrará cómo comenzar.

Y dado que las personas que trabajan en el software son algunas de las personas mejor recompensadas, vale la pena considerar adquirir esta nueva habilidad. Nunca se sabe, eventualmente podría convertirse en una carrera para ti.

La primera sección de esta guía está dedicada a responder preguntas urgentes sobre el desarrollo front-end. Si conoce las responsabilidades, los salarios y otros aspectos de ser un desarrollador front-end, puede omitir 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 usar 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 de esta manera, cada sitio web que navega, incluido este, ha sido construido de alguna manera por un desarrollador front-end. Al menos en el lado del cliente.

Cómo el nuevo CSS está cambiando todo sobre el diseño gráfico en la plataforma de altavoces webLo que antes requería herramientas y marcos extensos ahora se puede hacer usando especificaciones nativas.

Si bien el front-end es una de las rutas 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 siempre está cambiando, lo que significa que los desarrolladores tienen que adaptar sus habilidades a las últimas prácticas con regularidad. Puede ser agotador para un principiante, pero mejora después de un año o dos de práctica sólida de desarrollo..

¿Puedes aprender desarrollo front-end gratis??

Absolutamente puedes!

Se está volviendo mucho más fácil aprender el desarrollo web, principalmente gracias a la gran 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 interesantes no solo sobre el front-end sino también sobre otros aspectos del desarrollo web. Vale la pena marcar!

ejemplo de sintaxis de código¿Parece complicado? Se hace más fácil con la práctica.!

Si bien la premisa de esta guía es ayudarlo a aprender de forma gratuita, no podemos pasar por alto los beneficios de los cursos pagos.

Hay muchas nuevas empresas por ahí que atienden a la multitud determinada, y destacaremos algunas plataformas de cursos increíbles que incluso le darán un certificado al final de todo.

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

Un desarrollador front-end con experiencia previa puede esperar llevarse a casa más de $ 100,000 por año si vive dentro de los Estados Unidos.

Ese no es un mal número!

Los desarrolladores juniors pueden esperar llevarse a casa en cualquier lugar $ 60,000 y más.

Promedio de salarios de desarrolladores front-end en los Estados Unidos

Y los salarios en Europa también parecen ser bastante razonables; Alemania tiene un promedio de $ 50,000 por año.

Vale la pena señalar que es la popularidad del trabajo remoto ha explotado en los últimos años, lo que significa que los desarrolladores buscan igualar su paga en todos los ámbitos a los estándares internacionales. Esta es más la razón para considerar convertirse en un desarrollador front-end!

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

Técnicamente, un trabajo debería ser lo último de lo que hablar. Primero, debes acumular las habilidades y luego pensar en las oportunidades potenciales. Pero, dado que esta publicación está estructurada como una guía, siempre puede volver y consultar esta sección como referencia..

Trabajos remotos Desarrollador Diseño Escritura Atención al cliente MásLos trabajos remotos están creciendo a un ritmo sin precedentes. Después de todo, ¿a quién no le gusta la idea de trabajar desde casa, o incluso mejor, directamente desde la playa??

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

Esta es una lista un tanto condensada de sitios que ofrecen recomendaciones para encontrar su próximo trabajo inicial. Otras alternativas que tiene es trabajar en un proyecto personal con la esperanza de que sea rentable o pasar su tiempo haciendo conciertos independientes..

Recursos: por dónde empezar.

Los siguientes recursos tienen que ver con comenzar. Estamos tomando un enfoque razonablemente lineal a este respecto. Y por la sencilla razón de que existe una enorme cantidad de recursos.

Para comenzar rápidamente, nuestro enfoque está en las plataformas y las herramientas de front-end que se entrelazan en el flujo de trabajo moderno. Como resultado, puede aprender la sintaxis de codificación básica a intermedia mientras comprende las herramientas que rigen el flujo de trabajo del desarrollador moderno.

Se recomienda encarecidamente que se tome su tiempo con estos recursos, ya que lo prepararán para los cursos y tutoriales que se encuentran en la segunda parte de esta guía..

Codecademy

Codecademy

Si pasas incluso unos minutos buscando recursos para aprender a codificar, Codecademy es, sin duda, uno de tus primeros éxitos. Esta plataforma de aprendizaje de código es conocida y ha servido a más de 100 millones de personas durante siete años..

En ese momento, Codecademy era bastante revolucionario con su interfaz de codificación dinámica e interactiva. Y aunque muchos siguieron el mismo camino, Codecademy ha mantenido un historial constante.

En estos días, puede obtener un certificado al finalizar, y muchos han utilizado dicho certificado para conseguir un trabajo en un inicio de nivel superior; como desarrollador junior, no menos.

Todo el tiempo, hay el argumento de que Codecademy no es suficiente.

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

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

Aprender diseño CSS

Aprender diseño CSS

Como desarrollador front-end, pasará una cantidad razonable de tiempo trabajando con el diseño. El diseño es el lienzo sobre el que estructura un sitio web. El texto de este blog se coloca dentro de una fila, que forma parte de un contenedor más grande..

Y eso se aplica a todos los diseños de páginas web. Con Learn CSS Layout, puede obtener una comprensión fundamental de cómo funcionan los contenedores y las filas, y también cómo puede colocar el contenido exactamente donde lo desea.

Las herramientas adicionales que puede explorar son Flexbox Froggy para Flexbox fundamentos y Jardín de rejilla para Cuadrícula fundamentos, respectivamente.

El diseño es un tema bastante importante para comprender, así que pasa unas buenas horas profundizando en tu experiencia de diseño. La mejor manera de aprender es a través de la práctica..

Oreja

Plantilla de blog · Bootstrap

Una vez que tenga sentido cómo funcionan los diseños, es hora de hacer algunos experimentos concretos. Claro, puedes seguir adelante y tratar de desarrollar una interfaz de usuario personalizada como tu primer proyecto, pero eso podría asustarte más que alentarte a continuar.

Por lo tanto, debe aprender sobre un marco o dos. Un marco es una forma sencilla de comenzar con cualquier tipo de desarrollo web. Te dan las herramientas y la documentación para comenzar a crear sitios web interactivos desde el primer día. Y uno de los mejores para hacerlo es Bootstrap.

kit de estructura metálica de arranqueCree proyectos receptivos para dispositivos móviles en la web con la biblioteca de componentes front-end más popular del mundo. Bootstrap es un kit de herramientas de código abierto para desarrollar con HTML, CSS y JS.

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

Diablos, un buen porcentaje de los sitios que visitas a diario utilizan alguna funcionalidad de Bootstrap.

Una de las cosas fantásticas de Bootstrap es qué tan rápido puedes comenzar. Las páginas de documentación están llenas de ejemplos y casos de uso. Y lo mejor de todo, el sistema de diseño Bootstraps está diseñado con un diseño receptivo en mente. Por lo tanto, sus sitios basados ​​en Bootstrap son automáticamente aptos para dispositivos móviles.

Y si le gusta lo que Bootstrap tiene para ofrecer, aquí hay recursos adicionales sobre marcos front-end populares:

  • 10 mejores marcos JavaScript que debes saber
  • 10 mejores marcos CSS para desarrolladores front-end

Lista de verificación de front-end

La lista de verificación de front-end

A pesar de la tecnología que está utilizando para crear sus sitios web, aún debe seguir ciertas reglas y regulaciones. Por supuesto, uno puede elegir ignorar tales requisitos, pero a costa de la experiencia del usuario y la compatibilidad digital.

La Lista de verificación de front-end es una excelente herramienta en la que puede proporcionar la URL de su sitio web, y la plataforma audita su sitio para conocer las mejores prácticas en el desarrollo de front-end. Esto incluye verificar si ha optimizado sus imágenes o si está siguiendo las mejores prácticas de SEO.

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

Vue.js

The Vue js

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

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

El marco está totalmente respaldado por la comunidad, tanto en el lado financiero como en el 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ías estudiar más sobre de código abierto y por qué es importante.

Aquí hay algunas lecturas muy recomendadas en Vue.js:

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

Fundamentos de front-end

FUNDAMENTOS DELANTEROS

Todo lo que hemos visto hasta ahora ha sido gratuito y de código abierto en su mayor parte. Todo lo que necesitas es agarrarte Texto sublime, y puede estar bien encaminado hacia la experimentación inicial, ¡y absolutamente debería estarlo! Leer tutoriales y documentación del marco es solo la mitad de la batalla.

El verdadero aprendizaje ocurre en su editor de texto y el navegador. El único inconveniente de este enfoque es que no es del todo sistemático. Estás operando en el modo gratuito, y los resultados pueden variar según tu capacidad de disciplinarte.

A menos que decida invertir, y al invertir, me refiero a gastar una suma simbólica para comprar cualquiera de los libros frontales Un libro aparte. Estos tipos son algunos de los mejores en la industria, y los desarrolladores veteranos de front-end recomiendan repetidamente sus libros..

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

GitHub

github

GitHub es su oficina digital para la codificación y el desarrollo de todo. Es la plataforma de código abierto más grande del mundo, hogar de la mayoría de los marcos 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 puedes enviar contribuciones tú mismo a otros proyectos.

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

P.ej., Impresionante lista de front-end eso incluye información actualizada sobre las últimas cosas que debe saber sobre el front-end y hacia dónde se dirige.

Desbordamiento de pila

logotipo de desbordamiento de pila

Stack Overflow tiene una reputación notoria por ser la Q más estricta&Un sitio de programación en el mundo.. Y realmente es así.

Los usuarios de Stack Overflow no toman a la ligera preguntas que no han sido investigadas o analizadas adecuadamente. Y aunque esto puede 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 presentarse y votar esa respuesta. Al final, obtienes varias respuestas “verificadas” que responden a fondo las preguntas de los usuarios. Como resultado, la jerarquía del sitio permanece clara y consistente.

Como desarrollador front-end principiante, querrás usar Stack Overflow para comprender ciertos temas, pero también para hacer preguntas si es necesario. Sin embargo, para la mayoría de las cosas para principiantes, deberías poder encontrar respuestas concisas en segundos.

Tutoriales & Cursos: dominar el ecosistema.

La primera sección se dedicó por completo a recursos y plataformas que lo ayudarán a comenzar. Debe dedicar una cantidad razonable de tiempo a cada recurso que enumeramos para que pueda tener 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 tutoriales y cursos. Estos son recursos más estrictamente organizados con un fuerte énfasis en el aprendizaje..

El espectro frontalEl desarrollo front-end es una colección de herramientas, marcos, bibliotecas, software de prueba y mucho más. Sin embargo, no dejes que su alcance te asuste!

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 lo pondrán al día con todas las tecnologías utilizadas en las startups más exitosas del mundo..

El objetivo de esta publicación no es promover el desarrollo front-end como un pasatiempo, sino brindarle recursos palpables para que pueda establecer una carrera de todo su aprendizaje..

MDN Web Docs

MDN Web Docs

MDN (Mozilla Developer Network) te hará conocer de una forma u otra. Esta plataforma de documentación web se dedica por completo a promover el funcionamiento de la web. Aquí puede aprender sobre herramientas de desarrollo, tecnologías web y el desarrollo web en sí.

Cuando busca algunos detalles sobre CSS o HTML, a menudo aparece MDN como primer resultado en Google y otros motores de búsqueda. Las guías, especificaciones y conocimientos generales están estructurados de una manera que tiene sentido para los desarrolladores front-end..

Cursos front-end edX

Desarrollo web front-end edX

Como se indicó anteriormente en esta guía, seguir un plan de estudios estricto es una forma muy lineal de aprender y adaptarse. Y para comenzar con los cursos, debe verificar lo que edX tiene para ofrecer. No solo puede obtener certificados al finalizar, sino que también puede aprender a su ritmo preferido.

Los cursos de edX están completamente 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 más..

Si desea obtener el certificado de front-end completo, deberá realizar una inversión modesta de $ 500, pero esto también le brinda acceso directo a los instructores del curso y más. Numerosas compañías han usado edX para inscribir a sus empleados en este programa específico.

Maestros frontend

Maestros frontend

Frontend Masters es similar a una experiencia de bootcamp. Los cursos que puede encontrar en esta plataforma son extremadamente completos, con énfasis en contenido de formato largo y aprendizaje orientado a proyectos..

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

Como usuario registrado, puede seguir su progreso en el Aprender página. 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 mantenerte motivado.

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

Intelectual

Intelectual

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

Egghead ofrece tutoriales y cursos sobre frameworks, bibliotecas, idiomas, herramientas y plataformas. ¿Quieres aprender sobre desarrollo móvil? No es un problema, Egghead tiene material de curso para iOS, Android y otras plataformas..

El precio anual es de $ 250 modestos, pero esto le otorga acceso a todos los cursos y tutoriales que se encuentran en el sitio. También puede discutir cada lección con otros miembros de la comunidad. Bien vale la pena la inversión.!

CSS-Tricks

CSS-Tricks

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

Una cosa con la que puede contar acerca de CSS-Tricks es que se mantiene constantemente actualizada, y las historias se publican en base a temas y tecnologías actuales. Como resultado, puede aumentar rápidamente su conjunto de habilidades utilizando los tutoriales proporcionados por muchos de los autores del sitio..

En resumen, es un sitio útil para guardar en sus marcadores y verificar una vez al día. Obtendrá un inmenso valor de los tutoriales, pero también de las recomendaciones que vienen junto a ellos..

escocés

Capacitación sobre desarrollo web de primer nivel - Scotch io

Scotch es tanto un recurso de aprendizaje como un lugar para los últimos acontecimientos en el desarrollo web. Desde 2014, el sitio ha acumulado una gran cantidad de seguidores junto con miles de tutoriales gratuitos de desarrollo web..

Los autores escoceses se centran principalmente en tecnologías como Vue, React, Laravel, Angular, JavaScript, Node.js y similares. Y tampoco creas que estos son algunos tutoriales de imitación.

En su mayor parte, vas a construir aplicaciones reales y tangibles. P.ej. ¿Te gustaría aprender a construir un clon de Twitter Vue y Adonis? No es un problema, solo inscríbase en el curso gratuito y estará listo.

Sitio maravilloso y no puedo recomendarlo lo suficiente para los desarrolladores front-end nuevos y existentes!

Consejos: si no hay lucha, no hay progreso.

Dado que ha llegado hasta aquí, también podría disfrutar de algunos de los siguientes consejos. Si bien el front-end es una opción de carrera lucrativa, implica una curva de aprendizaje bastante empinada y un poco de dolor de cabeza mientras se concentra en la línea de tiempo actual.

Sin embargo, por el nivel de oportunidades que puede atraer, vale la pena la batalla cuesta arriba!

Aprende dentro de lo razonable.

¿Por qué estás aprendiendo a programar? ¿Quieres conseguir un mejor trabajo? ¿Te gustaría construir sitios web creativos? Descubre tu razón, porque será útil. Será útil en esos días, incluso semanas, cuando te golpees la cabeza contra la pared y te preguntes si algo de esto vale la pena..

Encuentra tu tribu.

Querrá hacer al menos algunas conexiones con personas de ideas afines, e incluso mentores si es posible. Cuando pedí prestado un libro de Pascal a un maestro de informática en mi antigua escuela, él fue muy amable y abierto a la idea de ayudarme con cualquier problema que pudiera tener. Considere una ruta similar, ya sea encontrando una comunidad local o encontrando otros desarrolladores en comunidades en línea. Es mucho más fácil aprender cuando alguien señala con el dedo hacia donde necesita mirar.

Evita aprender todo.

No pongas la carga de tener que saber todo sobre ti. Cuando se trata de front-end, comenzar con HTML5 y CSS3 es más que suficiente. JavaScript es como la guinda del pastel, así que ten cuidado con la cantidad de hielo que obtienes porque podrías hincharte. Después de que se sienta cómodo con lo básico, explore nuevas áreas, temas y marcos. Las picaduras de aprendizaje pequeñas y compactas son la clave aquí.

Si desea obtener más información, lea este post de Ali Spittel donde comparte más de 25 consejos para nuevos desarrolladores.

Sal afuera

¿Que estas esperando? ¡Sal y comienza a aprender! Asegúrese de consultar esta guía de desarrollo front-end cada pocos meses para obtener nuevas actualizaciones y consejos..

Buena suerte!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map