Cómo empezar como desarrollador web Front-End

Source: GitHub

Aquí se puede ver una hoja de ruta para los desarrolladores web front-end. Si no lo ha visto antes, Ojealo para tener una idea de la ruta general.

Hay mucho que asimilar, pero en este artículo te ayudaré a crear un camino más corto para aprender Desarrollo web.

Antes de profundizar en las habilidades que necesitas aprender para convertirse en desarrollador web, debes saber que el desarrollo web no es un concepto o tema único. Tiene numerosos subcampos.

Puede concentrarse en el desarrollo de front-end, desarrollo de back-end, diseño gráfico, etc. Empezaremos ahora con la interfaz.

Para el desarrollo de front-end, necesita aprender HTML, CSS, JavaScript y un framework , biblioteca o libreria como React, Angular o Vue.js.

Así que ahora hablemos con más detalle sobre qué es el desarrollo front-end y qué necesita aprender.

¿Qué es el desarrollo front-end?

El front-end de una aplicación generalmente se refiere a la capa que representa la IU (interfaz de usuario). Esto puede incluir cualquier cosa, desde un sitio estático con HTML y CSS hasta una aplicación React completa que impulsa la interfaz de usuario, Es lo que el usuario ve.

Hay algunos conceptos básicos que debe conocer para el desarrollo web front-end. Son:

HTML
CSS
JavaScript

HTML y CSS se usan para crear sitios web estáticos.

Que es HTML?

HTML siglas de (Hypertext Markup Language). Se utiliza para agregar contenido a un sitio web. La información que ve en un sitio web en particular solo es visible debido a HTML. Puede ejecutar código HTML en un IDE como Visual Studio, Sublime Text, Atom y muchos más.

HTML consta de etiquetas como <h1> (para encabezado) y <p> (para párrafo).

Por ejemplo:

 
<!DOCTYPE html>  
<html> 
<body> 
  <h1>Hola Mundo</h1> 
  <p>con HTML</p>  
</body> 
</html>

Esta es una sintaxis básica para HTML. Tenemos que escribir código dentro de las etiquetas corporales para mostrarlo en las páginas web. Aquí mostramos una etiqueta h1 con una etiqueta de párrafo.

La salida de este código se verá así:

Que es CSS?

CSS es un acrónimo de Cascading Style Sheets. Se usa para crear un estilo para un sitio web para que se vea atractivo.

Una vez más, analiza el código HTML anterior. No muestra el color de fondo ni colores. Esto se debe a que aún no le hemos aplicado CSS.

Entonces, CSS mejora el HTML y le dice a los elementos cómo mostrarse en las páginas web.

CSS consta principalmente de 3 tipos:

CSS en linea
CSS interno
CSS externo

Para ayudarte a entender un poco mejor, usaremos CSS en línea. CSS en línea es un tipo de CSS en el que puede agregar propiedades de estilo dentro de las etiquetas HTML.

Por ejemplo, aquí hemos agregado una propiedad de estilo a la etiqueta del cuerpo. Acabamos de cambiar el color de fondo del cuerpo a verde:

 
<!DOCTYPE html>  
<html> 
<body style="background-color:green;"> 
  <h1>Hola Mundo</h1> 
  <p>con HTML</p>  
</body> 
</html>

Que es JavaScript?

Entonces, ¿qué pasa con los sitios web dinámicos? Todo eso sucede gracias a JavaScript.

Incluso Google ha mencionado JavaScript como el lenguaje de programación más popular que existe en estos días.

JavaScript es un lenguaje de programación que se utiliza principalmente en el lado del cliente para ayudar a que las páginas web sean más interactivas.

Mientras que HTML y CSS son lenguajes que dan estructura y estilo a las páginas web, JavaScript proporciona a las páginas web elementos interactivos que atraen al usuario.

Expliquemos cómo funciona con un ejemplo.

Piense en su casa. Construir los cimientos y el marco de su hogar con ladrillos y cemento es parte del HTML. Pintar y decorar tu casa es trabajo de CSS. Y la integración de tecnología, como IoT (Internet de las cosas), es parte de JavaScript.

Eso es. El desarrollo web front-end consta de HTML, CSS y JavaScript.

Una vez que conozca los conceptos básicos, puede agregar frameworks y bibliotecas como React, Angular o Vue.js a su conjunto de habilidades.

Estas son las habilidades básicas que necesita para comenzar como desarrollador web front-end.

Hablemos del Back-End

Para el desarrollo de back-end, necesitarás aprender Node.js, Express, MongoDB y Mongoose.

Pero, ¿qué es el desarrollo back-end?

El desarrollo de back-end también se conoce como desarrollo del lado del servidor. Es la práctica de comunicarse entre la base de datos y el navegador.

Los lenguajes y herramientas de desarrollo back-end incluyen:

Node.js
Express
MongoDB

Es importante aprender estas tres habilidades si deseas convertirte en un desarrollador de back-end.

Que es Node?

Según la documentación de Node, Node.js es un entorno de ejecución de JavaScript de código abierto y multiplataforma. Es una herramienta popular que puede utilizar básicamente para cualquier tipo de proyecto.

Node.js ejecuta el motor JavaScript V8, el núcleo de Google Chrome, fuera del navegador. Esto ayuda a Node.js a tener un gran rendimiento.

Ahora, ¿qué es Express?

Express es un framework de Node.js que proporciona un conjunto sólido de funciones para aplicaciones web y móviles.

Déjame explicarte cómo funciona a través de un ejemplo. El siguiente código es la sintaxis básica de Express.

 
const express = require('express'); 
const app = express(); 
const port = 3000; 
app.get('/', (req, res) => { 
  res.send("Hola @jfdesousa7") 
}) 
app.listen(port, () => { 
  console.log("Servidor iniciado en el puerto 3000"); 
})

Aquí estamos instalando y luego solicitando Express. Simplemente inicialice la aplicación como express () y asigne el puerto 3000

Luego solicitamos la ruta '/' para responder con Hola @jfdesousa7.

Cuando nuestra aplicación se está ejecutando, veremos que se está ejecutando en el puerto 3000. https://localhost:3000/

Por último, ¿qué es MongoDB?

Antes de continuar, tengo que explicar un concepto crucial: las bases de datos.

Para crear sitios web, se necesita una base de datos. Sabemos que los sitios web requieren bases de datos para almacenar información. La base de datos nos ayudan a almacenar información del usuario, mostrar información basada en las solicitudes de los usuarios y mucho más.

Las bases de datos vienen en dos tipos: SQL y NoSQL.

¿Cuál es la diferencia entre SQL y NoSQL?

SQL es una base de datos relacional, mientras que NoSQL es una base de datos no relacional.
SQL se representa en tablas, mientras que NoSQL está en pares clave-valor o en formato JSON.
Las bases de datos SQL más populares son MySQL y PostgreSQL, mientras que la base de datos NoSQL más popular es MongoDB.

Ahora hablemos de MongoDB.

Según mongodb.com, MongoDB es una base de datos distribuida de uso general, basada en documentos, creada para los desarrolladores de aplicaciones modernas y la era de la nube.

Cuando necesites trabajar con una base de datos, MongoDB es una gran NoSql opcion

También deberás aprender Mongoose

Mongoose te ayuda a trabajar más fácilmente con MongoDB.

Mongoose proporciona una solución sencilla basada en esquemas para modelar los datos de su aplicación. Incluye conversión de tipos incorporada, validación, creación de consultas y mucho más

Esas son las tecnologías básicas que necesita aprender para convertirse en un desarrollador de back-end.

Una vez que haya aprendido todas estas habilidades, puedes llamarte desarrollador web Full Stack.

Por cierto, es posible que haya escuchado a personas refiriéndose a ciertas stacks de tecnología, como "MERN" o "MEAN".

Bueno, si elige aprender React.js, será un desarrollador web de stack MERN (MongoDB, Express, React, Node).

Con Angular.js, será un desarrollador web de stack MEAN (MongoDB, Express, Angular, Node).

Y con esos amigos llegamos al final del tutorial, espero que lo hayan disfrutado y ¡hasta la próxima!

No se olviden de visitar mi página web oficial https://tupaginaonline.net

Todo lo que necesitas saber para convertirte en un programador web (Principiante)