¿Cómo mejorar para ser desarrollador frontend?

¿Estás o has terminado de tomar cursos para ser desarrollador frontend y ahora no sabes qué hacer o cómo seguir? En este artículo te haré un par de recomendaciones que te pueden servir para practicar y subir de nivel.

Cuando estás aprendiendo o tomando cursos como los de la Academia Hola Mundo, estamos obteniendo mucho conocimiento que puede llegar hasta agobiarte por todo el camino que hay que recorrer o que todavía te falta mucho para pedir un trabajo en programación.

En este caso hablaremos del frontend; para esto, debes estar aprendiendo HTML, CSS, JS o algún framework para construir tus aplicaciones, y no solo para la web, sino también para el desarrollo móvil.

Y en mi opinión, la manera más efectiva de reforzar lo aprendido en cursos es practicar, ya que los cursos te darán los conocimientos que necesitas para poder realizar estos ejercicios, pero para reforzar y retarte, sí va a ser necesario que practiques, esto sin importar en qué nivel o curso te encuentres tomando.

Una de las cosas que puedes hacer es clonar páginas, ya que estas te permitirán ver si puedes lograr maquetar y replicar lo que está construido con el conocimiento que ya tienes. Esto también te ayudará a realizar búsquedas de aquello que no sabes, y esto puede ser en Google, tutoriales, ChatGPT, lo que mejor te ayude a encontrar la solución

Para esto tenemos este artículo para que puedas comenzar a practicar; vamos a dividirlo en algunos niveles:

Hablamos de hacer clones, pero esto no significa que tienes que clonar toda la página; con lograr los estilos de un componente ya es suficiente.

Ejercicio 1: Componente de barra lateral

Tendremos que construir esta barra de navegación; esta es de la comunidad Hola Mundo, en donde se responden todas las preguntas de la comunidad de alumnos de la academia:

Ejercicio 2: Maquetación de elementos

Nuestro segundo ejercicio será maquetar la sección de cursos; como tal vez hay muchos más elementos, igualmente tendremos una barra de navegación, pero tendremos ya también elementos que son cada uno de los cursos. Esta página la puedes encontrar en este link: todos los cursos de Hola Mundo.

Además, cada una de las cards de estos cursos tiene un efecto hover cuando pasamos el mouse sobre estos elementos:

Si quieres ir más allá, puedes hacer la página de cada uno de los cursos cuando hacemos clic en alguna de estas cards:

Ejercicio 3: Carrousel de videos

Aquí iremos a la página de Youtube de Hola Mundo y en esta sección de videos.

Aquí tenemos 3 videos, los cuales también podemos maquetar como cards independientes, pero esta también debe tener interactividad al usar un elemento para cambiar qué videos estamos mostrando:

Y si hacemos clic en la flecha de la derecha vemos como ha cambiado a diferentes cards de los videos:

Ejercicio 4: Clon de landing page

Ahora podemos desarrollar una landing más completa, que puede ser la de Spotify, por ejemplo, con las canciones o títulos de Hola Beats. Aquí es que podemos complementar mucho de lo que hemos aprendido en los ejercicios anteriores:

Estos por supuesto que no son obligatorios, pero son algunos que pueden ayudarte a practicar Estos por supuesto que no son obligatorios, pero son algunos que pueden ayudarte a practicar maquetación, pero puedes tomar los componentes, plataformas o páginas que a ti te gusten o que veas como un reto y comenzar a practicar allí, también algunas que puedes encontrarle mejoría y tratar de maquetarlas.

Más ideas

Otro lugar donde puedes encontrar ideas es Twitter; si buscas «CSS» puedes encontrar ejemplos de la comunidad que hace ejemplos interesantes.

Lo importante es que practiques para mejorar lo que ya has aprendido; igualmente, si llegas a hacer alguno de estos u otros ejercicios, puedes publicar un comentario con el repositorio de tu proyecto, así podemos encontrar más ideas de cómo resolver un problema.


Ahora, si quieres aprender sobre HTML, CSS, JS o React, tenemos estos cursos para que, como primer paso, obtengas los conocimientos y después puedas practicar:

Te dejaremos el enlace a todos nuestros cursos de programación, los cuales 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, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago

acceso a todo primer año

O igualmente puedes optar por cada curso de manera individual en Udemy.

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, Instagram y Tiktok, 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

Gabriel Hernández

Soy desarrollador fullstack autodidacta y estudié administración en la universidad. Mi stack es principalmente con JavaScript, haciendo frontend con React y Next, y backend con Node y Express. Otras herramientas con las que he trabajado son Python para backend y Solidity para desarrollo de contratos inteligentes.

Deja un comentario

Press ESC to close

Descubre más desde Hola Mundo

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo