Ruta para ser desarrollador frontend con Hola Mundo

El frontend es una de las áreas en el desarrollo web que puedes optar por seguir para especializarte y así conseguir un trabajo en la industria, y en este post nuestro objetivo es proponerte una ruta a seguir con Hola Mundo.

Pero antes de continuar, si antes no has leído nuestro post: Ruta para comenzar a programar con Hola Mundo, te recomendamos mucho que vayas a darle una vista, ya que, en esta publicación encontrarás los conocimientos generales que debes saber, independientemente de tu área, y si vas comenzando desde cero, es un buen lugar para encontrar una ruta para incitarte en el mundo de la programación, y así después decidirte por un área de especialización.

Hola Mundo y bienvenidos a este artículo, vamos a comenzar por describir primero qué es el frontend y después los cursos que puedes optar por tomar en conjunto con el contenido que tenemos para ti y la Academia Hola Mundo, recuerda que este post y los que saquemos de esta saga de rutas serán actualizados conforme vayamos agregando cursos a la academia o recursos a nuestras diferentes redes para complementar la información.

¿Qué es el frontend?

Tal vez hayas escuchado mucho sobre los devs/desarrolladores/programadores frontend, ¿pero qué es lo que hacen?

De las áreas del desarrollo web, está en mi opinión, es la más fácil de comprender para cuando vamos comenzando, porque es muy visual, porque podemos ver directamente lo que escribimos en código, ahora mismo estamos en una aplicación web en este blog, el frontend es quien se va a encargar de desarrollar la interfaz de usuario y su interactividad con el sitio web, por supuesto hay muchas más cosas que se hacen en el frontend, pero con estas dos partes tenemos suficiente para adentrarnos en qué es.

Con la interfaz de usuario nos referimos a los textos, botones, formularios, imágenes, sesiones, todo lo que podemos ver o leer en un sitio o aplicación web, mientras que la interactividad es que podemos hacer con estos elementos, por ejemplo, en YouTube al hacer clic en el botón de suscripción, la interfaz cambia de tener el botón con el texto suscribirse a suscrito y se verá de otro color junto el desbloqueo de opciones adicionales, al igual que pasa con el botón de «me gusta»

O pensemos en un productor de música como Spotify, Apple Music, Amazon Music, Youtube Music y Deezer, donde además encontrarás la música Hola Beats diseñada, ayudarte a concentrarte mientras estudias o trabajas.

En este reproductor tenemos botones para pausar, reproducir la canción, dar un favorito una canción, entre otros.

Aunque estas interacciones son pequeñas, todas y absolutamente todas tienen que ser programadas, este es uno de los primeros pasos a comprender, le tenemos que decir a nuestro sitio web a través de la programación que tendrá que hacer, prácticamente paso por paso para que la interacción se complete.

Cualquier sitio web que hayas visitado, ya sea una red social como Twitter, YouTube, la propia Academia de Hola Mundo, todos tuvieron que haber pasado por las tecnologías usadas para desarrollar frontend para ser usadas por los usuarios.

Ahora que ya vimos una pequeña introducción a que es el frontend, podemos pasar a la ruta que te proponemos junto con Hola Mundo para encaminarte a esta área de la programación.

Curso de HTML

Este sitio lo puedes visitar en este link, aquí solo podemos ver texto, pero en HTML podremos agregar imágenes, inputs para formularios, botones, así como lo que llamamos HTML semántico, el cual son etiquetas «especiales» para indicarle al sitio web que determinado bloque es una elemento, en especial como una barra de navegación o un formulario donde el usuario tiene que ingresar datos.

Recursos de HTML

Para comenzar a aprender este lenguaje, tenemos el curso HTML5: sin fronteras y sobre este lenguaje también tenemos un post, por si quieres saber un poco más ¿Qué es HTML y para qué nos sirve?

Curso de CSS

Ahora que hemos construido la estructura es turno de seguir con los estilos de nuestro sitio, como notaste en la primera imagen del sitio construido con solo HTML, notaras que puede llegar a verse «feo», a diferencia de otros sitios, piensa en cualquier página, no vas a ver que ninguna aplicación solo tenga texto plano; regresando a nuestro ejemplo de la casa, si la estructura de ladrillos era el HTML, CSS será la capa de pintura, yeso, muebles y decoraciones que podemos agregar para que nuestra casa se vea mejor.

Además de que tenemos que hacer que nuestra página se diferencie de todas las que hay allá afuera, una forma de hacer esta diferencia es a través del estilo visual que tenga nuestra aplicación, vamos de nuevo a ver reproductores de música viendo el perfil de Hola Beats.

Recursos de CSS

Para aprender esta tecnología, tenemos el curso: CSS3: sin fronteras.

Además de que te dejaremos un post adicional para cuando te hayas adentrado un poco más a este lenguaje: Como centrar un div con CSS.

Curso de JavaScript

Este es uno de los lenguajes más populares y más usados en la actualidad, y esto se puede deber a una razón, el navegador por defecto solo sabe interpretar JavaScript, además de CSS y HTML claro. Entonces con este lenguaje sumaremos la tercera parte de nuestra tríada de tecnologías necesarias para desarrollar aplicaciones del lado del frontend, estas siempre van juntas de una u otra manera y todos los frameworks o librerías que veas en el mercado son básicamente estas 3 juntas.

Con JavaScript agregaremos toda la interactividad con la que podremos lograr toda clase de funcionalidades a nuestras aplicaciones, si hacemos clic en un botón tendremos que programar qué hará ese botón, si un usuario se registra en nuestra app tendremos que manejar esa información, además de que con este lenguaje podremos crear la comunicación con servicios del lado del backend y así traer información.

También tendremos que preocuparnos por la seguridad que pueda tener nuestro sitio para agregarle una capa de seguridad para nuestros usuarios y por el rendimiento que tiene nuestra aplicación, esto por supuesto también tiene que ver con HTML y CSS, pero como te he mencionado, estos 3 lenguajes siempre van juntos.

Recursos de javaScript

Para aprender este lenguaje, tenemos dos cursos

• Ultimate JavaScript, en el que verás todas las bases de este lenguaje de programación desde cero, te recomiendo tomar mucho este curso antes del siguiente, ya que este es para tomar conocimiento y los conceptos, y el siguiente te servirá mucho más como integración de varias tecnologías y extender otros conocimientos.
• Aprende Javascript, HTML5, CSS3 y NodeJS desde cero, en este curso no solamente podrás tomar también bases de HTML y CSS, sino que también podrás aprender qué pasa del lado del servidor o backend con Node JS, si es que te interesa también aprender cómo funciona este lado, lo cual te recomiendo que le des una vista para tener noción de cómo funciona el servidor, ya que te ayudará a colaborar mejor en un equipo de trabajo, aunque solo hagas frontend.

Igualmente, te dejaré algunos post si quieres aprender un poco más de javaScript:

• ¿Qué es JavaScript y para qué nos sirve?
• 7 razones para aprender JavaScript
• Anatomía del código: Funciones en JavaScript

Curso de React

Antes de pasar a este punto espero que hayas practicado mucho con HTML, CSS y JS, porque los necesitarás para entrar a un framework o una librería, y antes de pasar a este punto.

¿Qué es una librería o biblioteca?

Si ya tomaste el curso de JS, verás que hay bloques de código que bien podemos reutilizar, porque nos resuelven un problema al que nos hemos enfrentado, pues adivina, todos nos hemos enfrentado a problemas y los hemos solucionado, esas soluciones, y la gran ventaja es pueden ser reutilizadas por otros desarrolladores; la buena gente de Internet han creado herramientas para poder compartir estas soluciones y así reutilizar el código de otros desarrolladores, y si, no necesitas, ni deberías ponerte a solucionar un problema que ya han resuelto otros.

A estas soluciones las llamamos librerías, o bibliotecas si usamos la traducción correcta del inglés, y cuando otros desarrolladores han encapsulado varias de estas soluciones en un solo lugar y crean una forma de trabajar o un estándar de escribir el código, lo llamamos frameworks o marcos de trabajo en español, lo cuales ya han resulto multitud de problemas al construir aplicaciones y nos dan una metodología con la que trabajaremos para crear en este caso, nuestras interfaces de usuario.

¿Qué es React?

Por supuesto React no es la única, y últimamente han salido muchas propuestas al mercado, pero React en este momento es la más usada con respecto a su competencia, no podemos decir que sea la mejor, ya que cada una resuelve problemas y podrías utilizar una respecto a otra, dependiendo de las necesidades del proyecto.

Recursos de react

Para React tenemos los cursos:

• Ultimate React: Nuestro curso más reciente, en donde aprenderás todos los conceptos desde 0 para dominar esta librería, así como poder practicar con proyectos para reafirmar lo aprendido.

• React – Guía definitiva: hooks, router, redux, next + Proyectos : donde aprenderás cómo se utiliza esta librería, algunas bibliotecas útiles para usar en conjunto a React, además de Next JS, el cual es un framework de React, el cual prefiero usar en mis proyectos frente a React, por todo lo que nos ofrece.

E igualmente te dejaremos un par de post adicionales para seguir aprendiendo de React:

• 7 razones para programar en React
• Lo nuevo de Next 13
• ¿Debemos aprender ReactJS?

Curso de TypeScript

Uno de los pros más fuertes de usar TypeScript es que agrega tipado fuerte a JavaScript, esto es cada variable o función, se le tendrá que decir qué tipo de datos son, reciben o nos regresan en su ejecución, y podrías preguntarte como yo la primera vez que lo vi, ¿para qué escribo más para algo que ya funciona bien sin agregarle el tipado?, porque es cierto, escribirás un poco más de código y hasta puede darte algunos dolores de cabeza el agregar este tipado, pero a medida que crezcan tus aplicaciones podrías llegar a tener problemas con los tipos de datos con los que manejas, y una vez que entiendes su utilidad en proyectos más grandes, es que ahora ya todos los proyectos que hago los trato de realizar con typeScript.

Recursos de typeScript

Para esta tecnología tenemos el curso: TypeScript: sin fronteras, el cual te recomiendo si ya conoces JavaScript y has tomado más práctica con este lenguaje, ya que en él no abordaremos cómo es que funciona JavaScript para eso tenemos el curso Aprende Javascript, HTML5, CSS3 y NodeJS desde cero, Además si quieres aprovechar mucho mejor este curso, te recomiendo saber React y Node, ya que hay unas secciones para la integración de estas dos tecnologías.

---

Resumen

Ahora me gustaría dejarte la recopilación de los cursos que deberías tomar, recuerda que trata de practicar y construir antes de pasar a tomar los cursos sin fin, el practicar y construir tus proyectos es lo que más te ayudará cuando has adquirido nuevos conocimientos.

• HTML5: sin fronteras
• CSS3: sin fronteras
• Ultimate JavaScript
• Aprende Javascript, HTML5, CSS3 y NodeJS desde cero
• React – Guía definitiva: hooks, router, redux, next + Proyectos
• TypeScript: sin fronteras

Igualmente, puedes adquirir todos estos cursos en Udemy si es de tu preferencia

• Udemy

No te preocupes si aún no has entendido uno que otro concepto, eso lo vamos adquiriendo con el tiempo, y conforme vayas regresando a esta publicación, espero que estos términos ya sean parte de tu lenguaje del día a día, esto es poco a poco, pero es totalmente realizable.

---

Comienza tu ruta en el frontend

Si te ha gustado o llamado la atención, alguno de los cursos recuerda que todos estos cursos los encontrarás disponibles en la Academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo,si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual.

Te dejaremos adicional un recurso más, sobre conocimientos que deberías adquirir para ser desarrollador frontend Ruta 2023: 7 cosas que debes saber para ser desarrollador frontend. Pero si no te ha llamado la atención el área frontend, también te sugerimos darle una vista a nuestro post sobre el desarrollo frontend: Ruta para ser desarrollador backend con Hola Mundo.

Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter e Instagram, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.

¡Hasta la próxima!, y chao mundo