Aprende Desarrollo Web: Ve Desde Cero Hasta Convertirte En Programador Web.

¿Quieres aprender desarrollo web pero no sabes por dónde empezar?

Con tantos recursos y especializaciones para aprender a programar, especialmente para aprender desarrollo web, puede resultar difícil decidir cuál es la mejor opción para ti.

Pero no te preocupes. En 2023, aprender desarrollo web es más fácil que nunca, y si te enfocas en tus primeros pasos, te convertirás en un desarrollador web.

Pasos Para Aprender Desarrollo Web:

• Aprender los conceptos básicos, las especializaciones en desarrollo web, front-end y back-end, y la importancia del desarrollo web.
• Aprender los conceptos básicos de front-end: HTML, CSS y JavaScript.
• Aprender las herramientas: editores de código, control de versiones, construcción y empaquetado.
• Aprender un framework de JavaScript: Aprender React, Vue o Angular.
• Aprender los conceptos básicos del desarrollo back-end: lenguajes de programación, servidores y bases de datos.

¿Qué Es El Desarrollo Web?

El desarrollo web es el proceso de creación de sitios y aplicaciones web. Abarca todo desde la estructura de un sitio web hasta el diseño y la programación.

¿Cómo funcionan los sitios web?

Cuando se habla de sitios web, es importante conocer dos términos. En primer lugar, tenemos el cliente (usted, en su navegador), y luego tenemos el servidor, el dispositivo en Internet que contiene las páginas web que queremos visualizar.

Por ejemplo, cuando ingresa https://livecodestream.dev en su navegador, esto envía una solicitud a nuestro servidor. El servidor buscará los archivos que conforman este sitio web, en particular la página que está solicitando, y la enviará de vuelta a su navegador para que pueda ver el contenido.

Todo lo que existe en el servidor y devuelve las páginas web que está viendo es creado por desarrolladores web.

Pero no todas las aplicaciones se construyen de la misma manera. Los blogs como este tienen una configuración (o arquitectura) relativamente fácil. En contraste, otros como Facebook, Google o incluso el sitio web de su tienda local pueden ser mucho más complejos y requerir la participación de diferentes especializaciones de desarrolladores web para construir dicho sitio.

¿Qué es un desarrollador de front-end?

Un desarrollador de front-end es un desarrollador web que se especializa en construir la interfaz y la experiencia de usuario de un sitio web o aplicación web.

Son los responsables de todo lo que se ve y se puede interactuar en un sitio web. Esto puede incluir desde el diseño y la distribución general hasta características específicas como animaciones, videos y formularios.

Para programar un sitio o aplicación web, los desarrolladores web front-end necesitan tener un buen conocimiento de HTML, CSS y JavaScript.

¿Qué es un desarrollador de back-end?

Un desarrollador de back-end es un desarrollador web que se especializa en el lado del servidor. Son responsables de todo lo que sucede detrás de escena en un sitio o aplicación web.

Esto puede incluir desde configurar el servidor, las bases de datos y la seguridad hasta manejar la autenticación del usuario, el procesamiento de datos y las notificaciones por correo electrónico.

Para construir un sitio web o aplicación web, los desarrolladores web back-end necesitan tener un buen conocimiento de lenguajes de programación como Python, JavaScript, Go, entre otros, y bases de datos como MySQL, MongoDB, entre otras.

¿Qué es un desarrollador full-stack?

Un desarrollador web full-stack es un desarrollador que se especializa tanto en el front-end como en el back-end de una aplicación web. Son responsables de todo lo que se ve e interactúa en un sitio web o aplicación web, así como de todo lo que sucede detrás de escena.

¿Por qué es importante aprender desarrollo web?

El desarrollo web es una de las habilidades más demandadas en el mundo.

Según estudios recientes, en 2022 hubo 1.5 millones de puestos de trabajo sin cubrir en el desarrollo web en todo el mundo. Esto significa que si deseas una carrera exitosa y gratificante, aprender desarrollo web es un gran lugar para comenzar.

Pero no solo se trata del dinero. Como desarrollador web, tienes el poder de crear sitios web hermosos y útiles que hacen la vida de las personas más fácil. También puedes construir aplicaciones que resuelven problemas del mundo real.

En resumen, aprender desarrollo web es una excelente manera de tener un impacto positivo en el mundo.

Conceptos Básicos Del Front-End:

Ahora que hemos discutido qué es el desarrollo web y los diferentes tipos de desarrolladores web, hablemos sobre los conceptos básicos del desarrollo front-end.

Como mencionamos anteriormente, los desarrolladores web front-end son responsables de todo lo que se ve e interactúa en un sitio web o aplicación web. Esto incluye el diseño, la disposición y la experiencia del usuario.

Los desarrolladores front-end construyen páginas web utilizando tres tecnologías: HTML, CSS y JavaScript. Todas estas tecnologías son cargadas por el navegador y definen la estructura, el estilo y el comportamiento de un sitio web.

HTML

HTML (Lenguaje de Marcado de Hipertexto) es responsable de la estructura de un sitio web. Define el contenido de un sitio web y cómo está organizado.

Utiliza etiquetas para definir la estructura y colocar el contenido en secciones como títulos, encabezados, párrafos, tablas, etc., similar a lo que se podría hacer en Google Docs, pero también ofrece características más avanzadas.

Aquí hay un ejemplo de una página en HTML puro:

<html>
  <head>
    <title>My First Web Page</title>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Y aquí es como se ve ese código en una página web:

Si recién comienzas con HTML, te recomiendo ver este curso gratuito de HTML+CSS de Udacity (inglés) o mejor en español, este curso de HTML en freeCodeCamp .

CSS

CSS (Hojas de Estilo en Cascada por sus siglas en inglés) es responsable del estilo de un sitio web. Define cómo se muestran los elementos HTML en la pantalla.

Se puede utilizar para controlar el color, la fuente, el tamaño, el espaciado y otros aspectos del diseño de la página. CSS también se puede utilizar para crear diseños responsivos que se vean bien en dispositivos móviles, tabletas y escritorios.

CSS se trata de hacer que se vea bonito.

Aquí hay un ejemplo de CSS, que alterará cualquier encabezado para tener un color azul:

h1 {
    color: blue;
    font-size: 24px;
}

Si lo combinamos con el HTML, queda asî:

<html>
  <head>
    <title>My First Web Page</title>
    <style>
      h1 {
        color: blue;
        font-size: 24px;
      }
    </style>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Aquí se puede ver el resultado:

JavaScript

JavaScript es responsable del comportamiento de un sitio web. Hace que las cosas sucedan en un sitio web, como hacer clic en botones, enviar formularios y otras interacciones de los usuarios.

También se puede utilizar para crear animaciones, juegos y otros tipos de interactividad. JavaScript es el lenguaje de programación más popular del mundo, y es uno de los más fáciles de aprender.

Aquí hay un ejemplo de JavaScript:

function porqueAprenderJavaScript() {
  alert("¡Porque es muy divertido!");
}

And you can try it out here:

Donde puedo aprender HTML, CSS, y JavaScript?

No todos los sitios web son iguales, ni tampoco lo son las personas. Mientras que algunos prefieren aprender leyendo, otros prefieren formatos de video y otros quieren saltar directamente a construir cosas. Recomiendo seguir el camino con el que se sienta más cómodo, ya sea con contenido escrito o en video. Sin embargo, la parte de construcción no es opcional.

La única manera de aprender a programar es construyendo cosas. Tweet this

Así que, independientemente del recurso que elijas, asegúrate de practicar, practicar y practicar.

freeCodeCamp

Pero el estilo del sitio web, la difícil navegación o la dificultad para encontrar los recursos son algunas de las desventajas que he escuchado de las personas. La gran cantidad de contenido y productos pueden ser abrumadores para algunos, y aunque tienen videos que cubren la mayoría de los temas en el desarrollo web, no están estructurados junto con el curso, por lo que el curso se presenta en texto plano.

Lo bueno también es que tienen una gran cantidad de contenido en español.

Udemy

La ventaja de Udemy es que puedes encontrar un curso sobre casi cualquier cosa, desde cocina hasta desarrollo web. La desventaja es que la calidad de los cursos puede ser muy variable, ya que Udemy no verifica a sus instructores.

El curso Universidad Desarrollo Web - FrontEnd Web Developer! es uno de los mejores cursos en español para principiantes dentro de la plataforma. Ya pasaron por el más de 145 mil estudiantes y mantiene un alto nivel de ratings.

Coursera

La ventaja de Coursera es que puedes encontrar cursos muy bien hechos de universidades prominentes como la Universidad Johns Hopkins y la Universidad de Stanford. La desventaja es que la mayoría de estos son cursos pagos, por lo que puede que no sea la mejor opción si tienes un presupuesto ajustado.

Un excelente curso es HTML, CSS y JavaScript para desarrolladores de Yaakov Chaikin, que el nombre puede ser engañoso, ya que el curso está hecho para principiantes.

YouTube

La ventaja de YouTube es que puedes aprender a tu propio ritmo y volver atrás las veces que necesites. La desventaja es que puede ser difícil encontrar un curso completo y bien hecho, y es posible que necesites ver varios videos de diferentes canales para obtener una educación completa.

Aquí hay algunos recursos excelentes para comenzar con HTML, CSS y JavaScript en YouTube:

• Aprende HTML, CSS y JavaScript desde cero (Curso Exprés) de Kiko Palomares
• Aprende HTML ahora! curso completo GRATIS desde cero

Libros sobre desarrollo web

Si prefieres aprender leyendo libros, aquí hay unas muy buenas recomendaciones:

Herramientas Para Desarrolladores Web

Aunque es verdad que no se necesita una herramienta o sistema en particular para ser un desarrollador, y un simple bloc de notas podría ser suficiente, en un solo día los desarrolladores utilizan varias herramientas para ayudarles a ser más productivos, colaborar en equipo y guardar copias del código.

Editores y IDEs

Un editor de código es un editor de texto con funcionalidades adicionales específicas para programación, como resaltado de sintaxis (guías visuales de color que facilitan la lectura y comprensión del código), sangría, autocompletado y depuración.

Un buen editor de código te hará más productivo y te ayudará a reducir errores de código. El editor de código más popular con diferencia es Visual Studio Code , es 100% gratuito y es mi recomendación para empezar. Otras opciones populares incluyen Sublime Text y Notepad++ .

Los editores de código son geniales, pero hay algo más. Los IDE (o Entorno de Desarrollo Integrado) son editores de código con aún más funcionalidades, como herramientas de depuración, integraciones de control de versiones, gestión de proyectos, etc.

El IDE más popular para desarrollo web es WebStorm de JetBrains. No es gratuito y puede ser un poco caro. Yo uso WebStorm y toda la suite de JetBrains. Lo he estado usando durante años y es muy familiar y soy muy productivo con él, aunque no lo recomiendo para todos, especialmente si estás empezando.

Control de código

El control de versiones es un sistema que realiza un seguimiento de cada cambio que realizas en el código, y te permite navegar por tu historial de cambios y revertir tu código al estado en que se encontraba en cualquier momento.

Los sistemas de control de versiones son una herramienta invaluable tanto para desarrolladores individuales como para equipos, ya que facilitan la colaboración y el trabajo en los mismos archivos.

El sistema de control de versiones más popular es Git, y es lo que te recomiendo que uses.

GitHub es un sitio web que te permite almacenar tu código en línea (en la nube), y también proporciona muchas características para la colaboración, como el seguimiento de problemas, solicitudes de extracción, wikis, etc. Es la plataforma más popular para el código de código abierto (ya que es gratuita para el código abierto), y es un sitio web que debes conocer y usar, ya que servirá como portafolio y mostrará a futuros reclutadores y entrevistadores lo que has estado aprendiendo y trabajando.

Herramientas de compilación

Existen todo tipo de herramientas de compilación, pero para el propósito del desarrollo web, son programas que procesan y transforman archivos, por ejemplo, pueden tomar tu código fuente y reducir su tamaño para optimizar la velocidad de carga de tu sitio web.

Pero eso no es todo, también pueden mejorar la compatibilidad de tu código y convertirlo de un lenguaje a otro (al menos hasta cierto punto), por ejemplo, pueden convertir SASS en CSS o versiones más nuevas de JavaScript en versiones más antiguas (sí, hacemos esto para tener una mejor compatibilidad con navegadores antiguos mientras codificamos con lo más nuevo y reluciente).

Entre las opciones más populares se encuentran Webpack , Rollup y Gulp .

En muchos casos, especialmente cuando estás aprendiendo, no necesitarás trabajar directamente con estas herramientas. A menudo usamos bibliotecas o herramientas que las configuran automáticamente por nosotros, pero es bueno saber que existen y qué tipo de magia hacen detrás de escena, así que familiarízate con ellas y comienza a explorarlas con más detalle una vez que te sientas cómodo trabajando con código y construyendo sitios web y aplicaciones web.

Gestores de paquetes

Una vez que adquieras cierta experiencia y hayas construido algunos proyectos, comenzarás a notar que muchas veces reutilizas código o funcionalidad que has copiado y pegado de un lugar a otro. Pero, ¿podemos hacerlo mejor? ¿Qué pasa si quiero compartir mi código con otros? Aquí es donde entran en juego las bibliotecas.

Las librerías son código escrito por otras personas (o por ti mismo) que podemos usar en nuestros proyectos para acelerar el desarrollo o simplemente para no tener que reinventar la rueda cada vez que necesitamos alguna funcionalidad específica.

Un gestor de paquetes te permite instalar, actualizar y eliminar librerías y herramientas de tus proyectos y sistemas.

Existen diferentes gestores de paquetes para diferentes lenguajes de programación, pero el más popular es npm, que es el predeterminado para JavaScript.

Aprende Un Framework De JavaScript

Ahora que conoces los conceptos básicos de JavaScript, es hora de introducirte al mundo de los frameworks.

Un framework es una librería que proporciona un conjunto de herramientas y estándares para ayudarte a estructurar y organizar tu código, para que no tengas que empezar desde cero cada vez que construyas algo.

Hay muchos frameworks disponibles para diferentes lenguajes de programación, pero en el caso de JavaScript, hay tres principales: React , Angular y Vue .

¿Qué framework de JavaScript debería elegir?

No hay una respuesta correcta o incorrecta cuando se trata de elegir un framework, ya que muchos factores entran en juego, como el tamaño de tu proyecto, el equipo con el que estás trabajando, tus propias preferencias, etc.

Siempre recomiendo React para empezar, ya que tiene la curva de aprendizaje más rápida y es mi favorito, pero también recomiendo leer sobre y construir una aplicación de muestra en Angular y Vue, y ver por ti mismo cuál te gusta más.

Lo que no recomiendo es que aprendas más de uno a la vez, esto agregará complejidad y será más difícil para que te especialices y te conviertas en un experto en cualquiera de ellos. Pruébalos, ve cuál te gusta más, profundiza en ese y solo en ese. Con el tiempo puedes expandirte, pero tómalo de mí, he probado docenas de frameworks, pero si necesito trabajar en un proyecto, siempre voy con React ya que es donde está mi conocimiento.

Recomendaciones de cursos para aprender React

Recomendaciones de cursos para aprender Angular

Recomendaciones de cursos para aprender Vue

Fundamentos Del Desarrollo Backend

Ahora que sabes cómo construir el frontend de sitios web y aplicaciones web, es hora de aprender sobre el backend.

El backend es responsable de todo lo que sucede detrás de escena, como almacenar datos, procesar solicitudes, manejar la seguridad, etc.

Al igual que con el desarrollo frontend, existen muchos lenguajes de programación backend diferentes, pero los más populares son Python, JavaScript, Java y Go.

De estos, recomiendo aprender Node.js ya que es JavaScript y ya conoces los conceptos básicos, además tiene mucho impulso en este momento y es utilizado por algunas de las empresas más grandes del mundo como Netflix, Uber y eBay.

Recomendaciones de cursos para aprender NodeJS

Recomendaciones de cursos para aprender Python

Recomendaciones de cursos para aprender Go

SQL y Bases de Datos

No importa qué lenguaje de backend elijas, en algún momento necesitarás interactuar con una base de datos.

Una base de datos es una colección de datos que se almacena de manera estructurada para que puedan ser accedidos y procesados por computadoras.

Para trabajar con algunas bases de datos, deberás aprender un nuevo lenguaje de programación llamado SQL.

Conclusión

En primer lugar, felicidades por tomar la iniciativa y llegar hasta aquí, estás decidido/a y serás un desarrollador/a fantástico/a, estoy seguro/a!

¡Es mucho! ¡Lo sé! Aprender a programar lleva tiempo y no deberías apresurarte, disfruta del camino, asegúrate de practicar mientras aprendes y construye cosas increíbles.

Estoy 100% seguro de que puedes lograrlo, con dedicación y paciencia, ¡te convertirás en un gran desarrollador web!

Antes de irme, revisa mi libro electrónico gratuito con consejos para el desarrollador autodidacta, es una buena lectura complementaria y puede ayudarte a tener la mentalidad adecuada para tu viaje.

Espero que esta guía para aprender desarrollo web te haya ayudado a comprender lo que se necesita para convertirse en un desarrollador web. Si tienes alguna pregunta o quieres compartir tu propia experiencia, ¡deja un comentario en Reddit!, link debajo.

¡Gracias por leer!

Juan Cruz Martinez

¡Hola!

Soy Juan Cruz Martinez, el fundador de LiveCodeStream.dev. Me encanta programar y creo en el poder de la programación no solo para construir un mundo mejor, sino para hacer que TU vida sea mejor.

Fundé LiveCodeStream.dev porque quería ayudarte a aprender a programar, construir una mejor carrera y, en última instancia, crear una vida mejor. Eso me sucedió hace más de una década cuando comencé a programar, y le sucede a decenas de miles de personas a diario. Quiero que TÚ te unas a esa revolución.

No importa cómo lo llames, escribir código, programación, desarrollo de software o cualquier otra cosa, las habilidades involucradas están en una demanda cada vez mayor. Y ya sea que quieras incursionar en el desarrollo de sitios web, diseño de juegos, desarrollo de blockchain o cualquier otra cosa, quiero ayudarte.