¿Qué tecnologías aprender para el desarrollo Front-End?
Fecha de publicación: 09 - 11 - 2023
Tecnología Front-End 1: HTML (Hyper Text Markup Language)
- Variables✅
- Tipo de datos ✅
- Operadores✅
- Controles de flujo ✅
- Iteradores✅
- Arreglos✅
- Objetos✅
- Funciones✅
- DOM ✅
- Eventos ✅
- ... Y lo que falta 🤯
🚫¡NO ES UN LENGUAJE DE PROGRAMACIÓN!🚫
HTML es el primer lenguaje que todo front-end debe aprender; consiste en crear, a base de código, la estructura básica de un sitio web a través de <etiquetas>.
¿Y qué es una etiqueta HTML? 🤔
Se le llama etiqueta a la sintaxis encerrada entre los símbolos “menor que” y “mayor que” <>. Casi todas las etiquetas en HTML tienen un “abre y cierra” para cubrir texto u otro bloque de etiquetas, para abrir una etiqueta se usa <> y para cerrarla se le agrega un slash entre ellas < />. 🤓
Ejemplo de un texto entre etiquetas:
<p>Este es un ejemplo de un texto dentro de una etiqueta de párrafo.</p>Sí, existen un montón de etiquetas en HTML, cada una con un propósito casi concreto.
Y este es otro ejemplo de una etiqueta englobando otras etiquetas:
Hay un detalle que se debe aprender de inmediato al momento de escribir cualquier código y ese es TABULAR para que sea legible, y por si te lo preguntas, lo que está dentro de < ! -- -- > es para comentar tu código en HTML, esto no será leído por el navegador.
Esta es una forma básica de entender este primer lenguaje de front-end. El tema se extiende mucho más pero no se hará en este artículo, así que pasemos al siguiente de la lista. 😁
CSS es el lenguaje que nos permite dar estilos a una página web, como colores, tipo de fuente, ubicación de los elementos, algunos efectos y animaciones. El CSS es una herramienta muy poderosa y pueden lograrse cosas impresionantes con el.
Para poder darle estilos a un elemento de nuestra web, primero debemos colocar el atributo “class” (preferiblemente), justo así:
Es recomendado que el nombre de la clase o el id sea coherente con el elemento que quieres manipular.
También se pueden usar los “id” pero estos se reservan para JavaScript.
La forma de escribir CSS va a depender del atributo que le diste, si es para clases se hace con un punto (.) y si es con id se hace con un hashtag, almohadilla o símbolo de gato (#). En caso de no haber clases o id, también se usa el nombre de la etiqueta HTML, este va a afectar todos elementos con el mismo nombre.
JavaScript es el lenguaje de programación obligatorio para todo desarrollador Front-End, pero este no se queda ahí, también es usado en el Back-End y hasta se han desarrollado juegos con él. Con JavaScript podemos dar interactividad a la web pero para ello se deben tener conocimientos claros de HTML y CSS.
Con esta tecnología hay bastante tela que cortar, sin menospreciar a las dos anteriores. JavaScript es programación pura, aquí empezaremos a ver
Explicar “brevemente” cómo funciona esta tecnología en el Front-End llevaría rato ( y muchas líneas 😆), como mencioné anteriormente, es un lenguaje que tiene un abanico enorme de posibilidades y sí o sí, debes entenderlo para seguir tu camino como Front-End o saltar al Back-End con el o hacerte un desarrollador Full-Stack con solo esta tecnología.
¿Y qué sigue después?
Puedes desarrollarte profesionalmente dominando solo estas tres tecnologías de desarrollo web básicas pero tienes la posibilidad de seguir otros caminos llamados Frameworks o Librerías. ¿Por qué? Cada uno de estos son basados en JavaScript, por eso es tan importante aprenderlo. Entre ellos están React, Angular, Vue y Svelte y librerías como jQuery.