¿Qué tecnologías aprender para el desarrollo Front-End?

escribirArticulo();

Fecha de publicación: 09-04-2021

  • Tecnología Front-End 1: HTML (Hyper Text Markup Language)

  • Lenguaje HTML

    🚫¡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:

    Ejemplo de HTML

    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.

    Google con estilos
    Google con estilos
    Google sin estilos
    Google sin estilos (La imagen del menú es enorme 😆)

    Para poder darle estilos a un elemento de nuestra web, primero debemos colocar el atributo “class” (preferiblemente), justo así:

    atributo class

    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.

    atributo id

    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.

    css con class css con id css usando tag


    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.