¿Cómo le gustaría trabajar en empresas líderes en el mundo mientras genera un impacto a través de un 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 de 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 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 pensarlo de esta manera, cada sitio web que navega, incluido este, ha sido creado de alguna manera por un desarrollador de front-end. Al menos del lado del cliente.
Si bien 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 ser tedioso para un principiante, pero mejora después de uno o dos años de práctica de desarrollo sólido.
¿Puedes aprender a desarrollar front-end de forma gratuita?
¡Absolutamente puedes!
Se está volviendo mucho más fácil aprender sobre 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 marcarlo como favorito!
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 que atienden a un público determinado, y destacaremos algunas plataformas de cursos increíbles que incluso le otorgará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 junior pueden llevarse a casa en cualquier lugar desde $ 60,000 y superior.
Y los salarios en Europa también parecen bastante razonables; Alemania tiene un promedio de $ 50,000 por año.
Vale la pena señalar que es la popularidad del trabajo remoto se ha disparado en los últimos años, lo que significa que los desarrolladores buscan igualar su salario en todos los ámbitos a los estándares internacionales. ¡Esta es más la razón para considerar convertirse en 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, debe acumular las habilidades y luego pensar en oportunidades potenciales. Pero, dado que esta publicación está estructurada como una guía, siempre puede volver y consultar esta sección como referencia.
A continuación, se muestra una lista de las bolsas de trabajo más populares para desarrolladores front-end:
- Empleos auténticos
- Empleos en GitHub
- Tablero de trabajos CSS-Tricks
- Trabajos de desbordamiento de pila
- RemoteOK
- Startups amigables a distancia
- Nómadas de trabajo
- Trabajospresso
- Contratación de Hacker News
Esta es una lista algo condensada de sitios que brindan recomendaciones para encontrar su próximo trabajo de front-end. Otras alternativas que tienes es trabajar en un proyecto personal con la esperanza de rentabilizarlo o dedicar tu tiempo a hacer conciertos independientes.
Resources: Where to start.
Los siguientes recursos tratan sobre cómo empezar. Estamos adoptando un enfoque razonablemente lineal en este sentido. Y por la sencilla razón de que existe una enorme cantidad de recursos.
Para que pueda comenzar rápidamente, nuestro enfoque está en las plataformas y herramientas de front-end que se integran en el flujo de trabajo moderno. Como resultado, puede aprender la sintaxis de codificación básica a intermedia mientras comprende las herramientas que gobiernan el flujo de trabajo del desarrollador moderno.
Es muy recomendable 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
Si dedica unos minutos a buscar recursos para aprender a codificar, entonces Codecademy será sin duda uno de sus primeros éxitos. Esta plataforma de aprendizaje de código es bien conocida y ha prestado servicios 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, nada menos.
Todo el tiempo, hay el argumento de que Codecademy no es suficiente.
Desde el punto de vista de un desarrollador experimentado, seguro, tal vez esta plataforma sea demasiado simple. Pero, si solo está aprendiendo sobre el desarrollo de front-end, entonces no hay nada más satisfactorio que seguir las instrucciones paso a paso con resultados en tiempo real.
Codecademy ofrece clases sobre HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL y Java.
Aprenda el diseño CSS
Como desarrollador front-end, pasará una cantidad de tiempo razonable 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 un fila, que forma parte de un envase.
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 rana flexbox es Flexbox fundamentos y Jardín de cuadrícula es Cuadrícula fundamentales, respectivamente.
El diseño es un tema bastante importante de entender, así que dedique unas horas a profundizar en su experiencia de diseño. La mejor forma de aprender es mediante la práctica.
Bootstrap
Una vez que entienda cómo funcionan los diseños, es hora de hacer algunos experimentos concretos. Claro, puede seguir adelante e intentar desarrollar una interfaz de usuario personalizada como su primer proyecto, pero eso podría asustarlo más que alentarlo a continuar.
Entonces, necesita aprender sobre un marco o dos. Un marco es una forma sencilla de comenzar con cualquier tipo de desarrollo web. Se le brindan 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.
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 visita a diario utilizan alguna funcionalidad de Bootstrap.
Una de las cosas fantásticas de Bootstrap es qué tan rápido puede comenzar. 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 diseño Bootstraps está diseñado con un diseño receptivo en mente. Entonces, sus sitios basados en Bootstrap son automáticamente móvil fácil.
Y si le gusta lo que Bootstrap tiene para ofrecer, aquí hay recursos adicionales sobre frameworks populares de front-end:
- 10 mejores marcos de JavaScript que debe conocer
- 10 mejores marcos CSS para desarrolladores front-end
Lista de verificación de front-end
A pesar de la tecnología que está utilizando para construir sus sitios web, aún debe seguir ciertas reglas y regulaciones. Por supuesto, se puede optar por ignorar dichos requisitos, pero a costa de la experiencia del usuario y la compatibilidad digital.
La lista de verificación de front-end es una herramienta excelente 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 comprobar si tiene optimizó sus imágenes o si está siguiendo las mejores prácticas de SEO.
Debe intentar usar esta aplicación durante el tiempo que sea necesario para comprender cuáles son los requisitos modernos para sitios web y aplicaciones profesionales. Además, es un placer trabajar con la interfaz de usuario fluida y no intrusiva.
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 conquistado a la comunidad de front-end.
Este marco progresivo ayuda a los desarrolladores a crear increíbles interfaces de usuario utilizando HTML y JavaScript.
El marco cuenta con el apoyo total de la comunidad, tanto en el aspecto financiero como del 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 de código abierto y por qué es importante.
Aquí hay algunas lecturas muy recomendadas en Vue.js:
- Tutorial de Vue.js para principiantes
- Una lista curada de cosas increíbles relacionadas con Vue.js
- Vue JS - La guía completa
Y por último, pero no menos importante, consulte los diferentes proyectos creados con Vue.js en el Escaparate de Vue.js Página Web.
Fundamentos de front-end
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 de front-end, ¡y debería estarlo! Leer tutoriales y documentación del marco es solo la mitad de la batalla.
El aprendizaje real ocurre en su editor de texto y en el navegador. El único inconveniente de este enfoque es que no es del todo sistemático. Está operando en el modo de todos contra todos y los resultados pueden variar en su capacidad para disciplinarse.
A menos que decida invertir, y por invertir, me refiero a gastar una suma simbólica para comprar cualquiera de los libros de front-end de Un libro aparte. Estos chicos son algunos de los mejores de la industria y los desarrolladores de front-end veteranos recomiendan repetidamente sus libros.
La sección de fundamentos del front-end tiene un libro sobre SVG, CSS, HTML, JavaScript y Sass, que es el punto de partida perfecto para el front-end moderno. workflows.
GitHub
GitHub es su oficina digital para todo lo relacionado con la codificación y el desarrollo. 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 puede enviar contribuciones usted mismo a otros proyectos.
También puede explorar GitHub y todo lo que tiene para ofrecer. Por ejemplo, GitHub alberga 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 que incluye información actualizada sobre lo último que debe saber sobre el front-end y hacia dónde se dirige.
desbordamiento de pila
Stack Overflow tiene una notoria reputación por ser el sitio de programación de preguntas y respuestas más estricto del mundo. Y realmente es tan.
Los usuarios de Stack Overflow no toman a la ligera las preguntas que no se han investigado o analizado 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, obtiene varias respuestas 'verificadas' que responden a fondo a las preguntas de los usuarios. Como resultado, la jerarquía del sitio permanece clara y consistente.
Como desarrollador front-end principiante, querrá 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ía poder encontrar respuestas concisas en segundos.
Tutorials & Courses: Getting a grip on the ecosystem.
La primera sección se dedicó por completo a los recursos y plataformas que lo ayudarán a comenzar. Debe dedicar una cantidad de tiempo razonable 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 centrar su atención en 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 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 estar en el camino de establecer una carrera con todo su aprendizaje.
MDN Web Docs
MDN (Mozilla Developer Network) lo hará conocido de una forma u otra. Esta plataforma de documentación web está totalmente dedicada a promover el funcionamiento de la web. Aquí puede obtener información sobre herramientas para desarrolladores, tecnologías web y el desarrollo web en sí.
Cuando busca algunos detalles en 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 e información general están estructuradas de una manera que tiene sentido para los desarrolladores de aplicaciones para el usuario.
Cursos edX Front-End
Como se indicó anteriormente 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, debe comprobar qué Edx tiene que 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, tendrá que hacer una inversión modesta de $ 500, pero esto también le brinda acceso directo a los instructores del curso y más. Numerosas empresas han utilizado edX para inscribir a sus empleados en este programa específico.
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 de Bootcamp real.
Como usuario registrado, puede seguir su progreso en el Aprende página. Esta página rastrea 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, la finalización de un curso de Frontend Masters en su currículum no pasará desapercibida para su empleador.
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 marcos, bibliotecas, lenguajes, herramientas y plataformas. ¿Quiere aprender sobre el desarrollo móvil? No hay 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. ¡Vale la pena la inversión!
Trucos CSS
chris coyier es una leyenda absoluta en la comunidad CSS. No solo se ha mantenido al día con CSS-Tricks durante más de una década, sino que también es el cofundador de CodePen - una plataforma de intercambio de código popular para desarrolladores web.
Una cosa con la que puede contar acerca de CSS-Tricks es que se actualiza constantemente y las historias se publican en función de los temas y tecnologías de tendencia actual. 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 para mantener en sus marcadores y revisar una vez al día. Obtendrá un valor inmenso de los tutoriales en sí, pero también de las recomendaciones que los acompañan.
escoces
Scotch es tanto un recurso de aprendizaje como un lugar para los últimos acontecimientos en el desarrollo web. Habiendo existido desde 2014, el sitio ha acumulado un gran número de seguidores junto con miles de tutoriales de desarrollo web gratuitos.
Los autores escoceses se centran principalmente en tecnologías como Vue, React, Laravel, Angular, JavaScript, Node.js y similares. Y no crea que estos son también tutoriales de imitación.
En su mayor parte, creará aplicaciones reales y tangibles. Por ejemplo, ¿le gustaría aprender a crear un clon de Twitter Vue y Adonis? No hay problema, simplemente inscríbase en el curso gratuito y estará listo.
¡Un sitio maravilloso y no puedo recomendarlo lo suficiente para cualquier desarrollador de front-end nuevo y existente!
Tips: If there is no struggle, there is no progress.
Dado que ha llegado hasta aquí, también puede disfrutar de algunos de los siguientes consejos. Si bien el front-end es una elecció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, puedes atraer, ¡vale la pena la batalla cuesta arriba!
Aprenda dentro de lo razonable.
¿Por qué estás aprendiendo a programar? ¿Quieres conseguir un trabajo mejor? ¿Le gustaría crear sitios web creativos? Descubre tu razón, porque te será útil. Será útil en esos días, incluso semanas, en los que 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 fui a pedir prestado un libro de Pascal a un profesor de informática en mi antigua escuela, 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 de aprender cuando alguien señala con el dedo dónde debe mirar.
Evite aprender todo.
No ponga la carga de tener que saberlo todo sobre usted mismo. Cuando se trata de la interfaz, 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 guinda que obtienes porque ¡podrías hincharte! Una vez que se sienta cómodo con los conceptos básicos, explore nuevas áreas, temas y marcos. Los bocados de aprendizaje pequeños y compactos son la clave aquí.
Si desea obtener más información, lea esta publicación de Ali Spittel donde comparte más de 25 consejos para nuevos desarrolladores.
Get out there
¿Que estas esperando? Sal ahí fuera y comienza a aprender! Asegúrese de consultar esta guía de desarrollo de aplicaciones para el usuario cada pocos meses para obtener nuevas actualizaciones y sugerencias.
¡Buena suerte!
