Proyectos de práctica para desarrolladores front-end

El desarrollo front-end como cualquier otra habilidad requiere mucho trabajo. Hay varias formas de abordar esta gran tarea, algunas de las cuales serían:

1. Trabaja en una agencia como desarrollador front-end.
2. Estudia en tu casa y construye proyectos paralelos.
3. Trabaja como autónomo para clientes.

Cada uno tiene sus propios aspectos positivos y negativos, pero una cosa permanece constante: cuantas más tareas diversas obtenga, más rápido progresará.

En este artículo, veremos algunos proyectos potenciales en los que puede trabajar por su cuenta y por su cuenta, donde puede aprender nuevas tecnologías, enfoques y, potencialmente, algo de "¡Ajá!" momentos en su carrera de front-end.

Todas las tareas a continuación son repositorios bastante buenos para tener en su perfil de GitHub, especialmente cuando decide postularse para un puesto de front-end.

¡Una nota! Todos los ejemplos a continuación están hechos por diseñadores para productos reales. NO le proponemos que los tome, los codifique y haga lo que quiera. Todo esto es un ejemplo de elementos de la interfaz de usuario en los que puede trabajar sin distribuirlos o venderlos más adelante.

1 - Una biblioteca de IU de componentes

Dificultad: Fácil-Media.

Sin embargo, no se deje engañar por lo "fácil", porque como con cualquier proyecto aquí, tanto un desarrollador junior como senior pueden tener dificultades dependiendo de los problemas que resuelvan. Hemos puesto esto en la escala fácil porque no constará de ningún elemento de interfaz de usuario complejo y todo se puede encapsular.

Puede elegir un diseño existente como este, que se centra en menús desplegables / botones:

Fuente

O puede optar por uno más genérico como Bootstrap y Foundation. Qué considerar:

• Convención de nomenclatura bien definida.
• Una presentación de los componentes.
• Modificadores: a la mayoría de las personas les gusta cambiar elementos menores, así que considere cómo aplicarlos. Ejemplo: desea colores primarios y secundarios; éxito, estados de error, etc.
• Manténgalo "plug and play". Su objetivo es permitir que otro desarrollador use su código sin tener que escribir CSS. También puede combinarlo con un sistema de cuadrícula básico.

Una buena arquitectura de una biblioteca de este tipo no es un asunto trivial. Puede intentar esta misma tarea al comienzo de su carrera, así como algunos años después, y comparar lo que ha aprendido.

2 - Implementar la interfaz de usuario de animaciones complejas

Dificultad: Difícil

Esta tarea tiene que ver con animaciones elegantes y rendimiento. Pero además de eso, también tendrías que escribir algunas imágenes no tan genéricas. Vea el ejemplo a continuación:

Puedes ver la animación completa aquí. Una vez que tenga la interfaz de usuario activada, es hora de agregar la interactividad. No todas las animaciones se verán como el diseño, ya que no están hechas en un navegador sino en otra herramienta, pero eso no significa que no puedas acercarte mucho al original. Por supuesto, omitiremos cualquier efecto de desenfoque de movimiento y deformaciones de formas extrañas, pero gran parte del resto es algo que puede hacer. También hay bibliotecas JS que le ayudarán a crear fotogramas clave.

Esta tarea puede requerir solo dos cambios de pantalla para que sea un poco más corta. No es necesario trabajar en vistas móviles aquí a menos que tenga la energía.

3 - Una interfaz de usuario de juego

Dificultad: Difícil

¡Otra tarea complicada! La mayoría de los juegos tienen un estilo artístico único que no se puede traducir fácilmente en la web. Para hacer las cosas más difíciles, hay otra regla aquí: no use ninguna imagen / svgs para lograr las formas en la interfaz de usuario.

Fuente: StarCraft II

Hemos elegido StarCraft 2 para este propósito. Como puede ver, hay un montón de pequeños detalles aquí y allá que debe considerar en su implementación. De hecho, aquí la regla de "no activos" es lo que dificulta esto. Tendrá que trabajar con formas, recortes, sombras magix, degradados, bordes y más. Por supuesto, se necesitan imágenes para los retratos y el marino de la derecha.

Para hacer las cosas más realistas, el borde vertical superior derecho se puede intercambiar con uno de la fila superior de la siguiente imagen:

Fuente: StarCraft II

Si ha logrado que también se vea bien en pantallas más pequeñas y dispositivos móviles, ¡gana puntos extra! Esto sería muy "¡Guau!" proyecto de efecto en su CV.

4 - Un juego de preguntas

Dificultad: media

Los juegos de preguntas no son demasiado difíciles de construir en comparación con algunos de los diseños anteriores, pero requerirían algo de JS escrito para que funcionen. Sí, hasta ahora solo teníamos proyectos basados ​​en CSS, para este también tendrías que hacerlo interactivo, para que la gente pueda hacer clic, ver las respuestas correctas / incorrectas y más.

Si haces una búsqueda de "Quiz" en Dribbble, puedes encontrar un montón de ejemplos, pero si te resulta difícil elegir uno, puedes tomar esto:

Fuente

Como puede ver, solo hay dos pantallas, lo que significa que tendrá que crear el resto basándose en el diseño anterior.

Características del cuestionario:

• Cuente las respuestas correctas
• Respuesta de N opciones
• Mostrar respuestas correctas / incorrectas después de hacer clic
• Informe emergente de pregunta
• Regrese a todas las pruebas, elija una prueba
• Mostrar la puntuación final después de que finalice la prueba

Puede hacer mucho más que los mencionados anteriormente si lo desea. Este es generalmente un tipo de proyecto de “una tarde”.

5 - Elija un sitio aleatorio y conviértalo en fácil de imprimir

Dificultad: Fácil

La optimización para impresión tiene sus peculiaridades. Especialmente cuando oculta cualquier elemento existente en el sitio, limpia fondos, mejora la tipografía, trabaja con saltos de página y formatea las páginas.

Para esta tarea, puede elegir un sitio en la web, elegir una página de artículo y comenzar a trabajar en los estilos de impresión. Hay artículos extensos escritos sobre el tema, por lo que hay mucho para ayudarlo.

Sitios web de ejemplo que puede utilizar:

• Una página de ofertas de Amazon: céntrese solo en la información importante.
• Página de ventas del curso: de SitePoint.
• Otra página del curso

Siéntase libre de elegir cualquier otro sitio que desee, puede hacerlo fácil o difícil para usted. Si desea ver un ejemplo de un buen estilo de impresión, eche un vistazo a https://www.smashingmagazine.com/, realmente lo lograron.

6 - Un diseño de estilo de revista complejo

Dificultad: loco

Este, además de duro, también es complejo. Y lleva más tiempo en comparación con cualquiera de las otras tareas mencionadas anteriormente, por lo que es posible que deba liberar más de 20 a 30 horas para ello.

Fuente

El diseño anterior es un rediseño de The New York Times por Slava Kornilov. En el enlace verá todos los diseños que ha realizado, incluidas pantallas gigantes que muestran toda la página de inicio.

En este proyecto, deberá pensar en términos de componentes, diseñar algunos elementos complejos de la interfaz de usuario, como el video que sale de la ventana gráfica (que debe seguir respondiendo), la configuración de tipografía, los elementos superpuestos y más.

Incluso simplemente mirar el fondo detrás del título grande en la parte superior esconde algunas partes complicadas de su implementación.

Ha diseñado una tonelada de elementos, por lo que puedes pasar más de un mes o dos aquí si quisieras y habría mucho que aprender. Tal vez incluso puedas hacer un video de fondo como se muestra a continuación:

Fuente

Para este, también hay animaciones para los diferentes artículos de noticias que también se pueden implementar. También debería considerar las vistas móviles aquí.

7 - El tablero y sus gráficos

Dificultad: Media-Difícil

Los paneles están en todas partes. Y cuando los diseñadores no saben qué hacer por la noche, a veces simplemente diseñan otro. Simplemente porque.
Y gracias a eso, hay mucho para elegir. En algún momento probablemente tendrá que crear uno real para un producto real. Y es posible que tenga la mala suerte de obtener una de estas interfaces de "aspecto increíble" con un millón de animaciones cargadas que simplemente no tienen ningún sentido.

Para prepararse para ese día, aquí tiene un desafío:

Implementar el siguiente diseño:

Fuente

Lo que debe tener en cuenta aquí: los gráficos deben ser reales. Deben usar datos reales y debes intentar que se parezcan a los que ves en la parte superior. Hay muchas bibliotecas que puede usar y lo más probable es que tenga que ampliar o modificar mucho.

Si decides incorporar algunas animaciones, podría ser incluso mejor. Esto se vería muy bien en un CV, ¿verdad?

En el final:

Una de las mejores formas de aprender y convertirse en un mejor desarrollador es simplemente comenzar a escribir código y crear sitios. Hágalo a diario, ¡solo codifique una tonelada! Esto es útil especialmente en los primeros 3-4 años de su carrera.

Con esta experiencia a sus espaldas, fácilmente podría ocupar un puesto más alto. Allí podría tomar decisiones y liderar su propio equipo de manera efectiva utilizando la experiencia obtenida de todos estos proyectos y los problemas y cuestiones que encontró y superó en el camino. Y recuerde, ¡siempre trate de encontrar algo difícil en lo que trabajar!