La guía práctica para convertirse en un desarrollador web profesional

Este artículo está destinado a servir como una guía práctica para convertirse en un desarrollador web profesional. He pasado más de 20 años escribiendo código para la web. Trabajo y ayudo a los desarrolladores a diario. En este artículo, le diré lo que debe aprender, cuándo debe aprenderlo y de dónde puede aprenderlo (generalmente de forma gratuita ). Luego te daré consejos sobre cómo obtener experiencia en el mundo real y, lo más importante, cómo ganar dinero por escribir código.

Nota del autor: Debido a la demanda popular, este artículo ahora está disponible como un libro electrónico ampliado que incluye un apéndice especial que incluye todos los enlaces de este artículo en una lista fácil de seguir. Puede obtener la versión del libro electrónico aquí.

No obtengo una compensación directa por mencionar cualquiera de los sitios enumerados aquí. Solo quiero brindarle los mejores recursos posibles para ayudarlo a llegar a su destino.

Dos cosas a tener en cuenta ...

1. Está bien saltar hacia adelante.

Esta guía le ayudará sin importar dónde se encuentre en su camino para convertirse en un desarrollador profesional. Después de leer esta introducción, desplácese hasta el título que mejor describa su situación y comience a leer desde allí. Si recién está comenzando, o simplemente está pensando en comenzar, siga el consejo del Rey de Alicia en el país de las maravillas ...

“Empiece por el principio y continúe hasta llegar al final; luego se detiene."

2. Primero pruebe todo rápidamente y luego especialícese.

El dinero no es lo más importante. ¡Necesitas ❤ AMAR ❤ lo que haces! Pero no sabrás lo que amas hasta que lo pruebes.

Esta guía tiene como objetivo ayudarlo a familiarizarse con tantas áreas del desarrollo web como sea posible, lo más rápido posible, y luego ayudarlo a especializarse en el que ama. Al principio, no dominará nada, solo aprenderá los conceptos básicos y pasará a lo siguiente. Una vez que encuentre su pasión, le mostraré cómo profundizar.

Decidí aprender a codificar. Me gusta la web No sé por dónde empezar.

¡Felicidades! Este es un gran primer paso y el comienzo de algo muy emocionante. También puede ser totalmente abrumador. No se preocupe, estoy aquí para ayudar.

Su primer objetivo debe ser ponerse al día muy rápidamente con los conceptos básicos de todas las áreas del desarrollo web (a menudo llamado "la pila completa"). Irás muy amplio en tu aprendizaje, pero no muy profundo. Se trata solo de ayudarlo a encontrar el área que más le gusta y desarrollar algunas habilidades generales en todos los ámbitos para que pueda apreciar y manejar una amplia gama de desafíos, independientemente de dónde termine especializándose.

Aprenda HTML básico

El lenguaje de marcado de hipertexto (HTML) es lo que controla el contenido y el diseño de lo que ve en su navegador web. Al comenzar allí, obtendrá una interfaz de usuario que puede usar para interactuar y ver los resultados de su código. A medida que aborde idiomas más avanzados, esto será cada vez más importante. No querrás codificar en la oscuridad.

Aquí está el HTML que necesita aprender primero (haga clic en los enlaces para obtener un tutorial gratuito):

  • Empezando
  • Etiquetas, atributos y elementos
  • Títulos de página
  • Párrafos
  • Encabezados
  • Liza
  • Enlaces
  • Imagenes
  • Mesas
  • Formularios
  • Poniendolo todo junto

Sé algo de HTML básico

¡Increíble! Ese es un primer paso importante. Ahora necesitas algo de JavaScript básico.

Aprenda JavaScript básico

JavaScript es el lenguaje de la web, todos los principales navegadores web (Chrome, Firefox, Safari, IE y muchos más) tienen soporte JavaScript integrado. Cada sitio web o aplicación web que haya usado probablemente tenga montones de código JavaScript Detrás de eso. Sin mencionar que JavaScript también se está volviendo popular en otras plataformas, incluidos servidores, computadoras de escritorio y dispositivos.

Por ahora, solo necesita lo básico, estos enlaces lo ayudarán:

  • Hacer que las cosas sucedan
  • Variables y datos
  • Haciendo matemáticas
  • Lógica
  • Condicional
  • Bucle
  • Funciones
  • Objetos
  • Matrices
  • El DOM
  • Eventos y devoluciones de llamada
  • AJAX
  • JSON
  • Alcance

Sé algo de JavaScript y HTML básicos

¡Fantástico! Consigamos algo de CSS en su haber.

Aprenda CSS

CSS son las siglas de Cascading Style Sheets. Se utiliza para personalizar la apariencia de los elementos HTML en su página. Siga este tutorial gratuito de Mozilla para obtener los conceptos básicos y luego consulte con frecuencia Trucos CSS para resolver los problemas de CSS más difíciles (use la función de búsqueda en la parte superior derecha).

Mover al "Back End"

En este punto, ha estado expuesto a lo que se llama "desarrollo web front-end". Es decir, conoce los principales idiomas que se ejecutan en un navegador web. Es hora de pasar al "back-end". Que es un código que se ejecuta en un servidor. No se preocupe, no necesita un servidor para aprender esto, su propia computadora funcionará bien.

Hay muchos lenguajes de backend, pero como ya está familiarizado con JavaScript, le recomendaré que aprenda a usar Node JS. Node JS le permite ejecutar código JavaScript en un servidor (en lugar de en un navegador).

Además de Node JS, debe aprender sobre Express y Mongo DB.

Rápido

Express es una biblioteca que facilita que Node JS actúe como un servidor web (es decir, escuchar "solicitudes" de sus páginas web y enviar "respuestas" a sus páginas web).

Mongo DB

Mongo DB es una base de datos. Le permite almacenar y recuperar información.

Puede aprender sobre Node JS, Express y Mongo DB, de este excelente tutorial gratuito y su secuela.

Necesito elegir entre ser un desarrollador "Front End", "Back End" o "Full Stack".

Si ha estado expuesto a ambos extremos, es hora de tomar una decisión. De lo contrario, siga los consejos de la sección anterior para llenar cualquier laguna en su conocimiento.

A estas alturas, ha escrito dos tipos de código. Un tipo tiene que ver con la interacción del usuario. El otro tipo tiene que ver con la interacción de datos. ¿Qué tipo prefieres?

¿La interacción del usuario? ¡Felicitaciones, eres un desarrollador front-end!

Interacción de datos? ¡Felicitaciones, eres un desarrollador de back-end!

¿Ambos? ¡Felicitaciones, eres un desarrollador completo!

¿Odiaste todo? Felicitaciones, convertirse en desarrollador web no es para usted. Alégrate de haber descubierto esto ahora en lugar de perder más tiempo y dinero. ¿Aún no estás listo para rendirte? ¿Quizás aún no has encontrado un idioma que te guste? Pruebe algunos de los otros lenguajes que se describen en "Quiero ser un desarrollador de backend".

Quiero ser un desarrollador Full Stack

Frio. Necesita leer y hacer todo lo que se indica a continuación Quiero ser un desarrollador front-end y quiero ser un desarrollador back-end a continuación .

Quiero ser un desarrollador front-end y sé algo de JavaScript, HTML y CSS básicos.

Para ser eficaz como desarrollador front-end, necesita dominar HTML, CSS y JavaScript del lado del cliente. También deberá dominar algunos marcos importantes. Esto le brindará las habilidades que los empleadores y los clientes esperan de los desarrolladores front-end.

A estas alturas, debería saber algo de HTML básico. De lo contrario, vuelva a Aprender HTML básico.

Aprenda HTML intermedio y avanzado

Siga este tutorial de HTML intermedio y luego este tutorial de HTML avanzado para adquirir habilidades.

Aprenda JavaScript avanzado del lado del cliente

Para mejorar su JavaScript, le recomiendo encarecidamente la serie de libros You Don't Know JS de Kyle Simpson. El autor ha hecho que la serie completa esté disponible en línea de forma gratuita en estos enlaces:

  1. "Up & Going"
  2. "Alcance y cierres"
  3. "Esto y prototipos de objetos",
  4. "Tipos y gramática"
  5. "Asíncrono y rendimiento"
  6. "ES6 y más allá"

Junto con esos libros, MDN JavaScript Reference debería convertirse en su mejor amigo.

Conocer el HTML, CSS y JavaScript de “front-end trifecta” es genial. Pero para comenzar a ganar dinero, deberá familiarizarse con algunos marcos.

Aprenda jQuery

jQuery es la biblioteca de JavaScript más popular de todos los tiempos. Aunque algunos marcos más nuevos hacen que jQuery sea menos relevante, si está buscando empleo, es probable que jQuery sea parte de la descripción del trabajo (y la entrevista) durante muchos años.

Recomiendo seguir la ruta de jQuery en FreeCodeCamp para comenzar a aprender jQuery de manera rápida y efectiva. Después de eso, vaya al sitio de aprendizaje oficial de jQuery para obtener más instrucciones.

También querrá tener a mano los documentos de la API de jQuery.

Aprenda un marco JS popular

Los marcos facilitan el trabajo con un lenguaje o tecnología en particular al abordar y resolver algunos de los mayores problemas con esa tecnología. JavaScript ha visto una gran ayuda en el desarrollo y popularización de marcos.

Parece que cada semana hay un nuevo marco de JavaScript que se promociona como el próximo estándar de facto. Tendrá que consultar las bolsas de trabajo o buscar en Google para averiguar cuál es el más popular para su mercado. Un buen lugar para consultar es la herramienta de tendencias de contratación de Hacker News.

Esto es lo que parece estar en demanda en el momento de escribir este artículo:

Reaccionar JS

React fue creado por Facebook para trabajar con su arquitectura Flux. Es una biblioteca de JavaScript para construir interfaces. Ha subido al primer lugar recientemente, superando a Angular. Así que empieza con React. Hay un buen curso gratuito que presenta React aquí.

Angular 1 y 2

Angular JS fue creado por Google y realmente despegó tan pronto como se presentó. Muchas empresas invirtieron mucho en el marco y, como puede ver en el gráfico anterior, sigue siendo muy popular. Desafortunadamente, Google sintió la necesidad de reescribir completamente Angular cuando construyó la versión 2. Entonces Angular 1 y Angular 2 son casi como dos marcos completamente diferentes. Si desea llamarse a sí mismo un experto en Angular, a partir de ahora, necesita aprender ambos para ser realmente comercializable. Probablemente todavía haya una ventana de tiempo, en la que solo conocer Angular 1 es suficiente. Pero esa ventana se está cerrando. La mayor parte del trabajo de Angular consistirá en la transición de las bases de código de Angular 1 a Angular 2. Code School tiene un curso gratuito y divertido para Angular 1. Para Angular 2, consulte esta serie de videos gratuitos para aprender los conceptos básicos.

Ember JS

Todavía hay bastantes trabajos para personas con experiencia en Ember JS, pero como puede ver en el gráfico, está comenzando a ser plano. No tiene el apoyo de un gigante como Google o Facebook detrás de él, y tendrás las manos ocupadas con React y Angular. Aún así, si tiene curiosidad, puede seguir la guía oficial de Ember JS.

Una vez que haya elegido el marco que más le guste y esté razonablemente familiarizado con él, puede valer la pena explorar un marco CSS adjunto. Los dos jugadores dominantes en CSS en este momento son Bootstrap y Material Design.

Oreja

Bootstrap fue creado por Twitter y es bastante maduro y popular. Hay versiones de Bootstrap para Angular, Angular 2 y React.

Material

El material es una guía de diseño publicada por Google que está ganando terreno. También hay versiones Angular y React. Dado que Angular también es publicado por Google, encontrará que hay un ajuste natural allí.

Aquí hay algunos enlaces para comenzar.

  • Reaccionar Bootstrap
  • Bootstrap angular
  • Bootstrap de Angular 2
  • Interfaz de usuario de material (Reaccionar)
  • Material angular
  • Material angular 2

¡Felicidades! ¡Ahora tiene las habilidades clave necesarias para ser un desarrollador front-end!

Quiero ser un desarrollador back-end

¡Excelente! El primer paso es elegir un idioma. En el back-end, hay muchos idiomas que funcionan, todos tienen sus fortalezas y debilidades. Eche un vistazo al siguiente gráfico, clasifica los lenguajes de programación en términos de popularidad. Todos estos han estado en el top 10 durante una década. Los que están en verde son lenguajes web que se han vuelto más populares a lo largo de los años.

Los idiomas en verde son donde debe enfocarse. Si aún no conoce ninguno de estos, comience por la parte superior y continúe hacia abajo. ¡Detente cuando encuentres uno que te guste y profundiza!

Si ya está familiarizado con un lenguaje verde en particular y le gusta, concéntrese en ese.

Java

Java es un lenguaje extremadamente popular y puede ejecutarse (casi) en cualquier lugar. Fue desarrollado por Sun Microsystems (ahora propiedad de Oracle ). Java es el lenguaje utilizado para crear aplicaciones de Android. También se puede utilizar para crear aplicaciones de escritorio y, por supuesto, se puede utilizar para crear aplicaciones web (ya sea como backend independiente o junto con JSP). Es maduro, estable y hay un montón de recursos para aprender Java. También es uno de los lenguajes de programación orientada a objetos más enseñados en colegios y universidades de todo el mundo. Aquí hay un curso de Java gratuito para principiantes, eso es bastante bueno.

C#

C # es un lenguaje creado por Microsoft para competir directamente con Java. Hasta hace poco, no era compatible con sistemas que no eran de Microsoft, pero eso está cambiando rápidamente. Al igual que Java, está orientado a objetos y se puede utilizar para crear no solo aplicaciones web (ya sea como backend independiente o junto con ASP.Net) sino también para aplicaciones de escritorio. Si es un usuario de Windows y desea un ecosistema un poco más contenido para programar, C # podría ser el camino a seguir. Consulte este curso gratuito de Microsoft Virtual Academy.

Pitón

Aunque no tiene una empresa de renombre detrás como Java o C #, Python es un gran lenguaje para hacer las cosas rápidamente. Es relativamente fácil de aprender y cada año se vuelve más popular. Si no ama a los demás, este es un buen lenguaje para hundir sus dientes. El mejor lugar para comenzar es aquí mismo.

JavaScript

Si lo ha estado siguiendo desde el principio, ya hemos cubierto JavaScript. Con la llegada de Node JS y la popularidad de npm (Node Package Manager), JavaScript en el servidor solo se volverá más popular en los próximos años. Vale la pena aprender.

Si no lo hizo antes, ahora es un buen momento para aprender sobre Node JS, Express y Mongo DB, de este excelente tutorial gratuito y su secuela.

Rubí

Ruby es un pájaro extraño. A las personas que les encanta, de verdad, de verdad, les encanta. Está en el top 10, pero parece estar desacelerando su crecimiento. El lenguaje en sí es una mezcla entre programación funcional y programación imperativa. Recomiendo probarlo, tal vez te conviertas en uno de sus fanáticos acérrimos. Habrá mucho trabajo de Ruby en los próximos años. Pero es posible que desee volver a verificar los listados en su área particular para asegurarse de que al menos algunas empresas hayan sido picadas por el error Ruby.

El mejor lugar para aprender Ruby es RubyMonk

¿Y PHP?

Hay mucho PHP en el mercado pero, al menos según este conjunto de datos, parece que se está volviendo menos popular. Lo hice amarillo porque creo que, en este momento, todavía es una opción viable para construir una carrera. Además, en aras de la divulgación completa, no soy un fanático de PHP, por lo que tal vez también se haya introducido algún sesgo personal, pero no puedo imaginar que en los próximos 5 a 10 años PHP será más valioso que JavaScript. , a pesar de que ocupa un lugar más alto en este momento y probablemente todavía habrá trabajos para los desarrolladores de PHP.

He aprendido mucho, pero no tengo experiencia en el mundo real.

Es extremadamente difícil conseguir un trabajo sin experiencia.

El primer paso es completar uno o dos proyectos personales, para sentirse cómodo construyendo cosas de punta a punta.

Cuando comienzas a crear proyectos personales, es útil tener una forma de administrar y publicar tu código. Para eso, necesitas GitHub.

GitHub

GitHub es un repositorio de código fuente en línea construido sobre la plataforma Git. Le permite almacenar, administrar y publicar su código. Si es desarrollador hoy, DEBE tener una cuenta de GitHub. Puede obtener más información sobre GitHub y cómo usar GitHub en esta guía "Hello World" y también, en este tutorial interactivo sobre el uso de la plataforma Git.

Proyectos personales

Ahora que está configurado con GitHub, aquí hay un par de ideas de proyectos personales.

  • Cree un blog simple (aquí hay un tutorial usando React y Node)
  • Cree un calendario simple (aquí hay un tutorial usando C # y .Net)

Free Code Camp también tiene una variedad de proyectos para probar, incluidos algunos solo de front-end. Estos son dos de mis favoritos:

  • Construye un reloj "pomodoro" (solo en la parte frontal)
  • Administrar un club de comercio de libros (proyecto de pila completa)

Experiencia real

A continuación, necesitas experiencia real . La experiencia real significa trabajar para otra persona. Los proyectos personales son útiles, pero no suficientes para hacerte competitivo en el mercado laboral. Hay algunas vías para adquirir experiencia real .

1. Contribuir a un proyecto de código abierto

Gracias a la popularidad de GitHub, existen millones de proyectos de código abierto con problemas abiertos (errores) que esperan ser solucionados por alguien como usted. Poner en su currículum que ha contribuido a algunos proyectos de código abierto populares y conocidos, es una excelente manera de establecer y aumentar su credibilidad. El mejor recurso para averiguar en qué proyectos contribuir es Code Triage. Code Triage le permite elegir su proyecto favorito y le enviará un número abierto diferente directamente a su bandeja de entrada todos los días.

2. Trabaje para un amigo o familiar

Encuentre un amigo o un miembro de la familia que tenga un negocio y cree una aplicación web o un sitio web, o mejore el que ya tiene. Solo asegúrese de elegir con mucho cuidado, debe elegir el proyecto del tamaño correcto y el miembro de la familia adecuado para evitar situaciones incómodas en el futuro. Idealmente, debería ser un proyecto que puedas completar en menos de 90 días y una persona con la que tengas una relación muy honesta. No debe tener miedo de admitir si / cuando las cosas no van según lo planeado y no debe tener miedo o preocuparse por tener que decir "no" o decirles que "retrocedan" en ciertas solicitudes o expectativas. Además, debe asegurarse de que si alguno de los dos termina abandonando por cualquier motivo, no dañará permanentemente su relación.

3. Trabajo para organizaciones benéficas / sin fines de lucro

Una forma muy gratificante de adquirir experiencia real es trabajar para organizaciones sin fines de lucro y organizaciones benéficas. Puede acercarse a una organización benéfica o sin fines de lucro local que le interese y ofrecer su ayuda. También puede utilizar el sitio Catch a Fire para encontrar un proyecto en el que pueda ayudar. Finalmente, si sigues el programa en Free Code Camp y obtienes todos sus certificados, obtendrás acceso a proyectos sin fines de lucro en los que podrás poner en práctica tus habilidades.

4. Trabajo de subsistencia

En mi experiencia, si toma esta ruta y luego consigue un trabajo o trabaja como autónomo, seguramente lo considerará como trabajo de subsistencia. Sitios como Upwork, Fiverr y PeoplePerHour le brindan la oportunidad de ganar negocios, pero tendrá que mantener sus tarifas muy bajas y aceptar que solo está haciendo esto por la experiencia.

Tengo una experiencia real, ayúdenme a encontrar empleo.

Regla n. ° 1: no se llame "desarrollador web"

Mira esto…

¿Cuál es la diferencia entre un "desarrollador web" y un desarrollador "front-end"? Bueno, aparentemente unos 7000 $ / año. En serio, cuando llegue el momento, un simple cambio en cómo te llamas a ti mismo puede marcar una gran diferencia.

Tener un currículum sólido

A pesar de todas las historias que lees sobre personas que hacen locuras y locuras para llamar la atención de un empleador, aún debes tener un buen currículum. Este artículo de Tech Republic te ayudará con eso.

Cree un sitio web de cartera

Más importante que tener un buen currículum es tener un sitio web de cartera sólido. Tome todos los proyectos reales que ha realizado y colóquelos en una página de inicio personal que los muestre. Este artículo de SitePoint ofrece buenos consejos sobre cómo crear un sitio de cartera. La otra cosa que quisiera enfatizar es que debe asegurarse de resaltar cómo cada uno de sus proyectos resolvió un problema comercial para su cliente (o empleador). Haga eso y el sitio de su cartera se destacará por encima del resto.

Prepárese para codificar entrevistas

Mi artículo anterior, Cómo ganar la entrevista de codificación, te ayudará con eso.

Refuerce sus habilidades generales para entrevistas

Debe estar preparado para algo más que la parte de codificación. Esta pieza de Life Hacker es una buena hoja de ruta hacia mucha información valiosa e importante.

Solo mete tu pie en la puerta

No se preocupe por conseguir un trabajo con el empleador de sus sueños con el salario de sus sueños de inmediato. Solo preocúpese de que le paguen por escribir código durante un tiempo. Una vez que tenga más experiencia en su haber, puede comenzar a considerar su próximo movimiento.

Quiero convertirme en autónomo.

Ser su propio jefe es algo asombroso, pero también conlleva mucha presión y complejidad adicionales. La mejor fuente de información sobre trabajo independiente que he visto es DoubleYourFreelancing.com de Brennan Dunn. Tiene una serie de artículos que te ayudarán a convertirte en autónomo mejor que cualquier otra cosa que pudiera escribir aquí. Entonces, échales un vistazo.

Otra opción para trabajar como autónomo, si crees que eres realmente bueno, es unirte a Toptal. Solo aceptan el 3% de los solicitantes y su proceso es notoriamente difícil, pero si ingresas, tendrás acceso a muchas oportunidades independientes bien pagadas donde puedes trabajar de forma remota.

Empecé por este camino, pero ahora me siento estancado.

Te escucho. No es fácil y cualquiera que te haya dicho que iba a ser fácil nunca lo ha hecho o está tratando de sacarte dinero. Si se siente atascado, esto es lo que puede hacer:

Redescubre tu intención original

Pregúntese y escriba por qué empezó por este camino en primer lugar. ¿Tu respuesta sigue siendo cierta? Si es así, ¿por qué detenerse ahora? ¡Vamonos!

Ser realistas

Ahora que sabe más sobre lo que realmente está involucrado y lo que es realmente posible, tiene una mejor idea del mejor escenario, el peor escenario y el escenario más probable de continuar. Anótelo todo, mírelo y comprenda que el “escenario más probable” es el que probablemente sucederá y que probablemente esté más cerca del “mejor caso” que del “peor caso”. No tienes por qué asustarte. Adelante. ¡Puedes hacerlo!

¡Lee esto!

Por favor, no renuncies: todos los expertos fueron principiantes

Si eres como yo, en algún momento de tus esfuerzos por aprender a programar, levantaste las manos y dijiste: "Necesito ... medium.freecodecamp.com

¡Feliz codificación!

Por favor ❤ y comparte

Quiero ayudar a tantas personas como sea posible. Puedes ayudarme presionando el pequeño verde ❤ y también compartiendo este artículo en las redes sociales.

Por último, no olvide obtener la versión ampliada del libro electrónico de este artículo con todos los enlaces en un apéndice fácil de seguir. Haga clic a continuación para obtenerlo.

Guía gratuita para convertirse en desarrollador web

Esta increíble guía gratuita lo guía, paso a paso, a través del proceso de aprendizaje para convertirse en un desarrollador web profesional freebies.devmastery.com