Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Termina en:

02D

15H

31M

49S

158

5 proyectos para tu portafolio como frontend developer

51426Puntos

hace un año

El camino del desarrollo web tiene muchas posibilidades, una de ellas es empezar a crear tus propios proyectos. Aunque quizás… si eres nuevo en este mundo no tienes idea de cómo empezar.

No te preocupes, a todas nos ha pasado y es por eso que quise escribir este blog donde te sugiero cinco proyectos que puedes implementar en tu portafolio para trabajar como desarrolladora front end.

¡Es hora de poner manos a la obra!

1. Página de error

Untitled.png

Crea una página de error 404. La página debe de ser responsive, es decir, es importante que se adapte al tamaño de cualquier dispositivo móvil o computador.

Elaborar una página de error te permitirá practicar el lenguaje HTML y CSS. Además de seguir este diseño puedes añadir animaciones, cambiar imágenes y más. Piensa sin límites.

2. Starbucks Rewards

Untitled 1.png

Construye una réplica de la página de Starbucks Rewards. Este proyecto debería ser una copia fiel al original. Recuerda que este reto te permitirá aprender a construir un menú fijo, manejar secciones a través de pestañas, elegir los colores y replicar estilos.

3. Tic-tac-toe

Untitled 2.png

Recrea el juego tic-tac-toe siguiendo el diseño generado por FrontendMentor. En este reto no solo tendrás que copiar el diseño proporcionado con toda la fidelidad posible, sino que también tendrás que crear la lógica para jugar.

Este reto te permitirá practicar tus habilidades con HTML, CSS, diseño responsive y también tu lógica con JavaScript.

4. ToDo

Untitled 3.png

Trabaja elaborando una aplicación de tareas que te permita añadir nuevos tasks y marcar esas asignaciones que ya has terminado.

Te recomiendo seguir el diseño propuesto por FrontendMentor, pero tampoco te sientas obligada a cumplirlo al 100%. Siéntete libre de experimentar con colores, formas y animaciones al trabajar en este tipo de proyecto.

5. Aplicación del tiempo

Untitled 4.png

Desarrolla una aplicación meteorológica que obtenga los datos del clima utilizando una API. Puedes usar librerías como React o Vue para completar este reto.

Ten en cuenta que podrías implementar features para la aplicación que te permitan ver el tiempo de la ciudad por defecto. A su vez, podrías desarrollar un buscador principal para encontrar el clima en otras ciudades e integrar indicadores de humedad, temperatura máxima, mínima y más.

La API que puedes emplear para completar este reto es la de MetaWeather.

¡Ahora es tu turno! ¿Con cuál proyecto quieres empezar?

Elige uno de los proyectos que ya te mencioné y empieza a crearlos, cada uno cuenta con los assests necesarios para que sea sencillo desarrollarlo y solo te preocupes por el código.

Recuerda que construir proyectos es una excelente forma de mostrar tus habilidades y acercarte más a tu primer trabajo como desarrolladora front end.

Comparte en los comentarios cuál proyecto empezarás a trabajar a continuación o en cuál estás trabajando. Menciónalo en los comentarios y así la comunidad de Platzi te dará feedback para que quede mucho mejor.

También si quieres aprender a hacer tus propios proyectos, te recomiendo el curso Práctico de Frontend Developer donde aprenderás a dar los primeros pasos para crear tus propios proyectos.

Y ya por último, si quieres potenciar tus aprendizajes, te recomiendo aprender estos trucos con CSS para no se te resista ningún diseño y además te dejo mi selección de los 15 mejores plugins que puedes usar en VSCode para frontend.

Nunca pares de aprender y de crear 💚

Alex
Alex
alexcamachogz

51426Puntos

hace un año

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
9
26297Puntos

Gracias Alex por tus tips, me parecen de gran ayuda y los voy a utilizar para hacer mi portafolio. 😎

4
12379Puntos

Estoy apunto de empezar el curso practico de frontend y estoy emocionado

1
51426Puntos
10 meses

Mucha suerte 💚 nos muestras los resultados si te animas a hacer alguno de los proyectos.

3
16362Puntos

Recuerdo que me propuse como meta en este 2022 realizar 100 proyectos en mi portafolio de frontend. Aunque no voy ni por un cuarto es una buena brújula publicaciones como ésta.
.
.Me han ayudado a ver con otra perspectiva el desarrollar proyectos, puesto que cada uno debe ser como una oportunidad para aprender algo completamente nuevo.
.
Gracias Alex, esto nos da dirección y orientación para construir un portafolio sólido.

2
6735Puntos
un año

Ánimo con esa meta!!

4
20273Puntos
8 meses

No es necesario que hagas 100 proyectos. Te aconsejo que realices 3-5 proyectos increíbles.

2
2381Puntos

Será que haya problema en replicar la página de starbucks rewards?

2
51426Puntos
un año

No lo hay, en el recurso se te da la info necesaria para replicarla y bueno, replicar sitios reales es una práctica común para mejorar en nuestras skills como frontends 💪🏻

2
16565Puntos

Es sugerible usar vanilla JS o algún tipo de librería para estos proyectos?

2
51426Puntos
un año

Depende de lo que quieras ponder en practica 😉

2
20273Puntos
un año

Puedes hacerlo con Vanilla y luego recrearlos con un Framework/Librería.

2

Gracias por el aporte me parecen muy buenos proyectos para agregar al portafolio 😄

2
20681Puntos

se ve retadora la app del tiempo, quiero intentarlo…

2
5085Puntos

Agradezco mucho este tipo de aportes!

2
9901Puntos

Muy valioso tu aporte, muchas gracias!

1
8643Puntos

Muchas gracias por tal valisos datos!! ✌️

1
1534Puntos

Excelente contenido, más tips así por favor ❤️

1
2449Puntos

Que interesante, intentaré desarrollarlos apenas haya avanzado lo suficiente con esto.

1
17646Puntos

Excelente, gracias! 👏👏🚀

1

No entiendo porque tanto portafolio. He visto varios con portafolio y ni los llaman

1
2366Puntos

**Increíble **>>> Gracias miles!
Ahora manos en acción.

1
3070Puntos

Estoy en mi camino a aprender a programar y me motiva el poder completar estos proyectps!

1

por donde subo los retos?

1
51426Puntos
10 meses

Súbelos a tu GitHub y presúmelos con el mundo 🚀

1
23044Puntos

¡Muchas gracias por la inspiracion, te vas a ir al cielo!

1
10586Puntos

Este post está muy útil. ¿Hay alguna forma de guardar posts?

1
16105Puntos

Gracias por el aporte. Hay algún post similar para Backend Developer?

1
8703Puntos

Muchas gracias por las buenas ideas!

1
520Puntos

Esta muy los tips, gracias.