171

5 proyectos para tu portafolio como frontend developer

52115Puntos

hace 2 años

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.

Lee también: cómo crear un portafolio profesional atractivo

¡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 💚 Recuerda aprender desarrollo web en Platzi.

Inicia como javascript full stack developer en Platzi.

Alex
Alex
alexcamachogz

52115Puntos

hace 2 años

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

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

4
14371Puntos

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

1
52115Puntos
2 años

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

3
22848Puntos

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
7435Puntos
2 años

Ánimo con esa meta!!

4
20374Puntos
2 años

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

2
2499Puntos

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

2
52115Puntos
2 años

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
16681Puntos

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

2
52115Puntos
2 años

Depende de lo que quieras ponder en practica 😉

2
20374Puntos
2 años

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
20686Puntos

se ve retadora la app del tiempo, quiero intentarlo…

2
5301Puntos

Agradezco mucho este tipo de aportes!

2
10124Puntos

Muy valioso tu aporte, muchas gracias!

1
8639Puntos

Muchas gracias por tal valisos datos!! ✌️

1
1783Puntos

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

1
5464Puntos

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

1
21370Puntos

Excelente, gracias! 👏👏🚀

1

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

1
2737Puntos

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

1
3109Puntos

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

1
34191Puntos

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

1
10594Puntos

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

1
16648Puntos

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

1
9305Puntos

Muchas gracias por las buenas ideas!

1
520Puntos

Esta muy los tips, gracias.