84

5 proyectos para tu portafolio como frontend developer

41085Puntos

hace 3 días

Curso Práctico de Frontend Developer
Curso Práctico de Frontend Developer

Curso Práctico de Frontend Developer

¡Aprende desarrollo frontend con responsive design! Pon en práctica todo lo que sabes sobre maquetación con HTML y CSS para construir las páginas y componentes de un e-commerce profesional. Sube tu nivel como frontend developer con tu profesora Estefany Aguilar.

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.

Nunca pares de aprender y de crear 💚

Curso Práctico de Frontend Developer
Curso Práctico de Frontend Developer

Curso Práctico de Frontend Developer

¡Aprende desarrollo frontend con responsive design! Pon en práctica todo lo que sabes sobre maquetación con HTML y CSS para construir las páginas y componentes de un e-commerce profesional. Sube tu nivel como frontend developer con tu profesora Estefany Aguilar.
Alex
Alex
alexcamachogz

41085Puntos

hace 3 días

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
11883Puntos

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

3
5756Puntos

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.

1
4716Puntos
3 días

Ánimo con esa meta!!

2
20617Puntos

se ve retadora la app del tiempo, quiero intentarlo…

2
1583Puntos

Muy valioso tu aporte, muchas gracias!

2
2075Puntos

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

1
41085Puntos
3 días

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

Agradezco mucho este tipo de aportes!

2

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

2
4647Puntos

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

2
41085Puntos
3 días

Depende de lo que quieras ponder en practica 😉

2
16066Puntos
2 días

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

1
3630Puntos

Muchas gracias por las buenas ideas!

1
12857Puntos

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

1
2821Puntos

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

1
8383Puntos

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

1
10377Puntos

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

1
434Puntos

Esta muy los tips, gracias.