Saltar al contenido

Cómo aprender sobre desarrollo web en 2021: una hoja de ruta para desarrolladores web

Existen excelentes hojas de ruta para los desarrolladores web. Pero algunos te hacen resolver un “acertijo” incluso antes de comenzar, ya que hay varias opciones que debes tomar.

Cuando comencé a aprender Desarrollo Web, deseaba poder encontrar un desarrollador experimentado que me dijera qué habían hecho para convertirse en Desarrollador Web. Desafortunadamente, no pude encontrar a nadie.

Ahora que he trabajado en la industria durante 4 años, quiero compartir con ustedes cómo comenzaría a aprender Desarrollo web en 2021. En este artículo, le mostraré cada paso que puede dar desde un principiante hasta convertirse en un desarrollador.

Empezaré con algunos Herramientas esenciales que debe saber, luego cubra el Lenguajes de programación y Bibliotecas / Frameworks que necesita aprender para convertirse en un desarrollador front-end o full-stack.

También estaré hablando de algunos proyectos de ejemplo que puedes construir para practicar tus habilidades.

También puede encontrar una hoja de ruta actualizada en mi sitio web.

Asumiré que eres un principiante. En ese caso, hay algunas herramientas que necesita conocer antes de comenzar a programar.

VS Code (u otro editor de código)

Primero, debe aprender a usar, que es un editor de código fuente. Es una herramienta gratuita y poderosa.

Al principio, recomiendo aprender algunos de los atajos básicos e instalar algunas de las extensiones como ESlint, Prettier o Live Server.

Aquí tienes un curso completo y gratuito en el canal de YouTube freeCodeCamp para que comiences.

La línea de comandos

A continuación, debe conocer el Línea de comando. Debe aprender qué es y algunos de los comandos básicos, como cómo moverse por los directorios, cómo crear un nuevo directorio o cómo crear un nuevo archivo.

Aquí hay un gran artículo sobre cómo usar Bash, la línea de comandos de Linux. Y aquí hay uno que lo ayudará a usar la línea de comandos de manera más efectiva.

Control de versiones: Git y GitHub

No importa lo que haga, como desarrollador, necesita saber Git. Git es un sistema de control de versiones que se utiliza para realizar un seguimiento de los cambios. Suele utilizarse con GitHub, que es una plataforma de alojamiento de código.

Al principio, aprender Git puede ser abrumador, por lo tanto, solo necesita conocer algunos de los conceptos básicos, como cómo crear un nuevo Repositorio, cómo clon un proyecto, como hacer un nuevo cometery como jalar y empujar los nuevos cambios.

Una de las mejores formas de practicar Git es trabajando en equipo. Allí, necesita saber cómo crear un nuevo rama, Cómo hacer solicitudes de extraccióny como resolver conflictos.

Aquí hay un excelente curso intensivo de Git y GitHub en el canal de YouTube freeCodeCamp para que pueda comenzar con el control de versiones.

Herramientas de diseño – Figma

La última herramienta es Figma. Figma es una herramienta de diseño y su uso es gratuito para las personas. Pero aquí quiero hablar sobre cómo usar Figma como desarrollador.

Como desarrollador, puede obtener diseños de diseñadores de su equipo. Con Figma puede inspeccionar el código de los elementos y medir el diseño. Por lo tanto, necesita saber cómo leer el diseño de Figma, por ejemplo, cómo obtener el color, la tipografía o el espaciado correctos.

Aquí hay un artículo sobre varias herramientas de diseño, incluida Figma. Y aquí hay un tutorial divertido sobre cómo crear bocetos en 3D en Figma.

Muy bien, estas son las herramientas que necesita conocer al comenzar. No necesitas saberlo todo, pero asegúrese de comprender los conceptos básicos para que pueda mejorar mientras aprende a codificar.

Lenguajes de programación que los desarrolladores web deben aprender

HTML y CSS

A continuación, continuemos con los lenguajes de programación. Y comencemos hablando de Sitios web receptivos.

Los sitios web receptivos son sitios que se ven bien y se pueden usar en todos los dispositivos o tamaños de pantalla. Probablemente sepa lo importante que es crear un sitio web receptivo, ya que la gente usa tantos dispositivos diferentes en estos días.

Pasemos a los dos primeros idiomas que necesita saber para crear un sitio web: HTML y CSS.

HTML representa Lenguaje de marcado de hipertexto. Se utiliza para construir el esqueleto de su sitio web. HTML no es difícil de aprender, pero es posible que desee prestar más atención a los formularios HTML, ya que serán fundamentales en el futuro.

CSS representa Hojas de estilo en cascada. Este es un lenguaje de marcado, pero también lo considero un lenguaje de programación. CSS no es necesariamente difícil de aprender, pero es difícil de dominar.

Hay algunos temas a los que desea prestar más atención como:

Aquí hay un manual completo que le enseñará todos los conceptos básicos de HTML. Y aquí hay un curso completo sobre CSS en el canal de YouTube freeCodeCamp que lo ayudará a comenzar a embellecer sus sitios.

Cuando conozca los conceptos básicos de HTML y CSS, el siguiente paso es crear algunos sitios web básicos. Por ejemplo, puede probar un Página principal, una forma como una página de inicio de sesión o una página de pago. Incluso puedes construir un portafolio. Puede encontrar proyectos de ejemplo en DevChallenges.io.

Despliegue de sitios web

Una vez que tenga su sitio web, debe ponerlo en Internet para que la gente pueda verlo. La implementación es el proceso de implementación de su código en una plataforma de alojamiento.

En el pasado, era mucho más difícil de hacer. Pero ahora, es muy fácil y puede usar herramientas como GitHub Pages, Netlify o Vercel.

Aquí hay un curso completo de YouTube sobre cómo tener su sitio en línea que cubre todo el proceso de principio a fin.

JavaScript: fundamentos

Muy bien, el. JavaScript es un lenguaje de programación popular y se usa ampliamente para el desarrollo web, entre otras cosas.

Deberá aprender algunas de las características básicas del idioma, como Tipos de datos, Bucles, y Condicionales.

Luego hay temas en los que querrás profundizar.

Primero, tenemos depuración. Este es el proceso de encontrar y corregir errores. Aquí hay una excelente guía detallada para eliminar errores para que pueda comenzar.

Luego hay otros temas como Objetos, Primitivos, y Matrices. Especialmente cuando se trabaja con matrices, necesita conocer Métodos de matriz también.

Funciones son los principales bloques de construcción de su programa. Así que asegúrese de no pasarlos por alto.

Una de mis funciones favoritas en JavaScript es desestructuración – es fácil de escribir y hace que el lenguaje sea muy poderoso.

Como C #, Java u otros lenguajes de programación, en JavaScript moderno también tenemos clases. Estos son útiles cuando se trata de programación orientada a objetos y los principios SOLID.

Y no importa lo bueno que seas con la programación, tendrás errores en tus scripts. Esto significa que usted también querrá hacerlo.

La programación asincrónica es importante, especialmente cuando necesita comunicarse con el servidor. Así que dedique algo de tiempo a aprender.

JavaScript: navegador

Pasemos a cómo se usa JavaScript en el navegador.

Primero, necesita saber qué Modelo de objetos de documento o DOM es. Luego, necesita saber cómo obtener elementos, cómo cambiar las clases o cómo cambiar el estilo con JavaScript.

Aquí hay una buena introducción al JS DOM y aquí hay una guía sobre cómo manipular el DOM (aprenderá construyendo un proyecto).

También necesita aprender sobre diferentes Eventos de la interfaz de usuario como hacer clic, pasar el mouse sobre, mouse hacia abajo, etc.

Y también querrá prestar más atención en JavaScript, ya que tienen muchos eventos y propiedades.

JavaScript: otras funciones

los es un tema importante. Le permite enviar solicitudes de red a servidores. Esto es útil, por ejemplo, cuando necesitamos enviar un formulario u obtener información de un usuario.

Otro tema importante es el navegador. Aquí necesita saber cuáles son las diferencias entre Cookies, LocalStorage y sessionStorage.

Otros temas menos importantes cuando recién está comenzando son las expresiones regulares, los componentes web y los Websockets.

Expresiones regulares se utilizan para buscar y reemplazar texto. Componentes Web, son algo nuevo pero deberías echarles un vistazo.

Por último, tenemos Websockets. Son útiles cuando necesitas intercambiar datos de forma continua, como en las aplicaciones de chat.

Entonces, después de aprender Javascript, es posible que desee dedicar un tiempo a. Me encanta TypeScript, ya que me da una sensación de seguridad al escribir código.

TypeScript proporciona escritura estática, que le permite detectar errores antes en el proceso de depuración. También le ahorra tiempo, ya que encuentra errores antes de que se ejecute el código.

Aquí hay una publicación útil sobre los tipos de TypeScript para ayudarlo a pensar en ellos de la manera correcta.

Puede detenerse aquí y comenzar a trabajar en algunos proyectos. Pero personalmente, continuaría aprendiendo al menos un marco. Entonces puedes practicar JavaScript al mismo tiempo.

Muy bien, sigamos adelante.

Bibliotecas y marcos para conocer

Para convertirse en un desarrollador de front-end o un desarrollador de pila completa, necesita conocer algunas de las bibliotecas y marcos que existen.

Bibliotecas y marcos para desarrolladores front-end

Así que comencemos con Hablar con descaro a, que es un lenguaje de secuencias de comandos de preprocesador. Utilizo Sass en casi todos mis proyectos. Hace que el CSS parezca más limpio y hace que su desarrollo sea más rápido.

Aquí hay un curso completo sobre Sass que le enseñará cómo otorgar superpoderes a sus CSS.

A continuación, tenemos NPM que es un administrador de paquetes para la programación de JavaScript. Esto le permite instalar diferentes paquetes en su máquina rápidamente.

Aquí hay una buena guía para principiantes de NMP que lo ayudará a comenzar a descargar paquetes de inmediato.

Uno de mis arrepentimientos es que no sabía Contenido cuanto antes. Contentful es un sistema de gestión de contenido sin cabeza o CMS. Es diferente de un CMS tradicional, ya que puede almacenar datos en Contentful y usarlos para su interfaz.

Y para conseguir un trabajo de frontend, necesita conocer al menos un marco de frontend. Yo personalmente elegiría Reaccionar. Hablaremos de otros frameworks más adelante.

Además de aprender los conceptos básicos de React, también debe prestar atención a cómo Expresar se gestiona en las aplicaciones React y cómo Formularios trabajar en React.

Una vez que haya aprendido algunos conceptos básicos, puede consolidar sus habilidades construyendo un montón de proyectos con React en este curso de YouTube.

Otro arrepentimiento que tengo es que no sabía nada Next.js cuanto antes. Next.js se usa para representación del lado del servidor o generando sitios web estáticos. Y sí, Next.js todavía es bastante nuevo, pero creo que esta es la habilidad que deber tener como desarrolladores de React.

Puede aprender todos los conceptos básicos de Next.js en este manual detallado.

Después de aprender estas herramientas, es posible que también desee echar un vistazo a UI de material que es una biblioteca de componentes de React, o que es un marco CSS que le ayuda a acelerar su trabajo al hacer prototipos o trabajar independientemente, por ejemplo.

Entonces, después de aprender JavaScript y un marco, necesita práctica por proyectos de construcción.

Puede comenzar por construir algunos componentes reutilizables simples para comprender cómo funciona React. Entonces puede crear aplicaciones más complejas como un Aplicación de prueba o un Aplicación Todo.

Después de eso, querrá crear aplicaciones aún más difíciles como un Herramienta de búsqueda de empleo, a Blog, o un Página del documento. Nuevamente, puede encontrar proyectos de ejemplo en DevChallenges.io.

Desarrollador de pila completa

Ahora está listo para solicitar un trabajo de desarrollador front-end. Si desea continuar convirtiéndose en un desarrollador de pila completa, puede comenzar por y Rápido.

Aquí, necesita saber cómo construir un API RESTful y puedes usar MongoDB al trabajar con bases de datos. Lo cual es bastante sencillo de aprender cuando ya conoce JavaScript.

Después de eso, si desea obtener más información, puede hacerlo sobre un lenguaje de manipulación y consulta de datos para API. Personalmente, también pasaría algún tiempo aprendiendo PostgreSQL. En comparación con MongoDB, es un poco más difícil de aprender, ya que también necesita aprender sobre SQL.

Después de aprender estas herramientas, puede practicar creando aplicaciones como un Cargador de imágenes, Autenticación, o Sala de chat. También puede encontrar estos proyectos en Devchallenges.io.

Ahora está listo para postularse a una posición de pila completa. Si su trabajo requiere que sepa Vue.js, Angular o incluso Esbelto también puede dedicar algo de tiempo a aprender esas herramientas. No debería ser demasiado difícil una vez que ya conozcas React.

Con eso concluye la hoja de ruta. Espero que les sea útil. Uno de mis objetivos para 2021 es hacer videos sobre todos los temas de los que acabamos de hablar. Por lo tanto, no olvide revisar mi y DevChallenges Learn.

__________ 🐣 Acerca de mí __________

Este contenido se publicó originalmente aquí.