10 Proyectos para Conseguir Tu Primer Trabajo como Desarrollador

1. Conoce bien tu editor de código

Como programador, vas a pasar mucho tiempo delante del editor de código que hayas elegido. Por eso debes saber todo lo que puedes hacer con él y cómo configurarlo. Si aún no estás familiarizado con ninguno, te recomiendo que pruebes Visual Studio Code.

VS Code viene con muchas características interesantes, como abreviaturas Emmet, Intellisense, atajos de teclado e integración con Git. También hay una gran cantidad de extensiones que puedes instalar para personalizar tu flujo de trabajo.

Idea de proyecto

• Instala VS Code de la forma correcta para tu sistema operativo.
• Busca al menos tres extensiones de las más populares que haya para el lenguaje de programación que utilices.
• Instala Prettier y configúralo para que tu código se formatee al guardarlo.
• Si usas JavaScript, ESLint es una extensión que muestra distintos errores de este lenguaje por consola.
• Imprime los atajos de teclado y memoriza un par de ellos cada semana.

Para saber más

• Post: VISUAL STUDIO CODE, web El Atareao.
• Podcast: VIM, EMACS O EXPRIMIR VISUAL STUDIO CODE, El Atareao.

2. Crea un formulario de contacto

Los formularios en HTML son una parte importante de las aplicaciones web y pueden llegar a ser complicados de implementar. Deben ser accesibles y tenemos que asegurarnos que se visualicen bien, tanto en los distintos navegadores como en los distintos tamaño de pantalla. Puede ser un desafío diseñarlo con un estilo consecuente sin romper su usabilidad.

Los formularios son una parte delicada del paso del visitante por la web. Incluso si un visitante ya ha decidido aceptar lo que le ofrece el sitio, un formulario roto o mal diseñado hará que se pierda la conversión.

Idea de proyecto

• Diseña y crea un formulario de contacto.
• Alinea sus campos correctamente.
• Incluye un CTA ( botón de llamada a la acción) que destaque.
• Añade algunos elementos <select> y casillas de verificación.

Para saber más

• Post: Validación de formularios con Vue, web javiergutierrez.trade.

3. Familiarízate con la validación desde el lado del cliente

JavaScript se utiliza en la parte del Frontend para una amplia variedad de tareas, como crear elementos interactivos para páginas web y mejorar la experiencia del usuario. Una característica bastante útil de este lenguaje es poder manipular el DOM, para ofrecer a los usuarios respuestas instantáneas a una acción del mismo sin la necesidad de recargar la página. Esto hace que la web se comporte de una forma más ágil y precisa.

Idea de proyecto

• Recupera el formulario que hiciste en el apartado anterior y amplia su funcionalidad añadiéndole validación desde el lado del cliente.
• Además de un uso correcto de los input types de las etiquetas de HTML añade alguna validación personalizada.
• Muestra los errores de una forma intuitiva y evita el uso de los cuadros de alerta.
• Agrega un campo para asegurarte que el usuario no es un bot.

Para saber más

• Libro: JavaScript. Edición 2018 (Guías Prácticas) (Español), web <CODESTORE>.

4. Haz un convertidor de divisas utilizando la API de Fixer

Hoy en día se pueden implementar aplicaciones completas en JavaScript mediante nuevas herramientas del propio lenguaje o apoyándonos en Frameworks. Es importante estar al corriente de los cambios que se producen y de que nuevos recursos podemos disponer para el desarrollo web.

Idea de proyecto

Crea una aplicación que permita realizar un cambio de moneda. El usuario debe ingresar la cantidad de dinero, eligir la moneda y seleccionar la moneda en la que queremos obtener el cambio utilizando la API de fixer.io. La interface de usuario debe actualizarse dinámicamente sin refrescar la página, para ello puedes usar funciones modernas de JavaScript o algún framework como Vue o React.

Para saber más

• Podcast: Reactividad y Vue.js con Rubén Valseca, danielprimo.io.
• Post: Instalación de VUE, web javiergutierrez.trade.

5. Diseña tu propio «Portfolio»

Como desarrollador web, es probable que trabajes junto a un diseñador en el mismo proyecto. Y aunque diseño y desarrollo se consideran disciplinas separadas, tener un robusto conocimiento sobre diseño facilitará esa relación.

O puede que seas un desarrollador independiente y lleves proyectos desde el diseño hasta su implementación. En este caso, que el sitio web tenga un aspecto genérico no bastará. Debe ofrecer al cliente un diseño llamativo a la par que funcional para ayudarle a alcanzar sus objetivos.

Idea de proyecto

Diseña tu propio portfolio, un sitio web para presentarte y mostrar tus habilidades. dedica un tiempo a investigar qué es lo que hace que un diseño sea bueno y luego cree uno propio con la ayuda de alguna herramienta de prototipado.

En cuanto al diseño, presta atención al layout, los colores y la tipografía. En lo referente al contenido, considera qué páginas vas a necesitar (formulario, about me, portfolio).

Para saber más

• Libro: CSS. Edición 2019 (Guías Prácticas), web <CODESTORE>.

6. Desarrolla tu propia web personal

Gracias a los avances en CSS, ahora podemos hacer fácilmente diseños complicados, declarar variables, aplicar CSS condicionalmente y otras cosas a las que en el pasado hubiéramos recurrido a JavaScript para realizarlas.

Si escribes CSS hoy en día, debes tener en cuenta técnicas actuales como Flexbox y CSS Grid. Debes considerar el uso de herramientas modernas como Houdini, preprocesadores como SASS y LESS y frameworks como Tailwindcss o BootStrap.

Idea de proyecto

Codifica la web del portfolio que diseñaste en el proyecto anterior. Investiga algunas de las unidades de medida introducidas recientemente, como vw y vh, pueden ser útiles para incluir una imagen en una presentación a pantalla completa.

Incluye también el formulario de contacto y usa CSS para añadir un par de animaciones, como animar el botón de envío cuando el usuario haga clic en él.

Para saber más

• Podcast: Frontend desde las bases con Ignacio Villanueva, de danielprimo.io.

7. Audita tu sitio web con Lighthouse

La velocidad con la que un usuario accede a tu sitio web es importante, nadie quiere esperar más de lo necesario para acceder a tu contenido. Incluso si en principio parece ir bien, debes tener en cuenta que no todo el mundo tiene un ordenador de gama alta, ni una conexión amplia. O que la mayoría del tráfico de tu web accede a través de un smartphone. Por eso, tu trabajo como desarrollador consiste en proporcionar a todos tus visitantes la mejor experiencia posible que le permita su tecnología.

Idea de proyecto

Google Chrome viene con una herramienta de auditoría para rendimiento, accesibilidad, mejores prácticas y SEO llamada Lighthouse. Te ofrece una gran variedad de consejos para abordar cualquier problema que encuentre.

Ejecuta la herramienta en el portfolio que has creado en los apartados anteriores y haz todo lo posible para asegurar que cada categoría esté en verde. Lighthouse genera informes tanto para versión móvil como de escritorio.Verifica ambos.

Para saber más

• Podcast: Quédate con el cambio

8. Aprende a usar el terminal

La línea de comandos es cada vez mas importante en el flujo de trabajo de un desarrollador. Se utiliza para instalar paquetes con npm, probar endpoints de APIs, enviar commits a GitHub y cada vez mas tareas. Estar familiarizado con ella, aumentará tus posibilidades de contratación.

Otra ventaja de usar el terminas es el uso de scripts. Esto te permite automatizar tareas, que a la larga pueden ahorrarte mucho tiempo.

Idea de proyecto

Instala y familiarízate con Bash. En macOS y muchas distribuciones de Linux bienen instalada, en windows puedes instala Git Bash.Comprométete a usar bash durante una semana para realizar cualquier tarea como:

• Navegar por tu sistema de archivos.
• Leer logs.
• Iniciar servicios.
• Instalar programas.
• Atajos de teclados para los comandos más comunes.

Para saber más

• Post: LA TERMINAL DE LINUX. UNA INTRODUCCIÓN A UNA POTENTE HERRAMIENTA, web de El Atareao.

9. Pon tus proyectos bajo control de versiones (Git)

Una vez tengamos conocimientos sobre terminales, es hora de ver Git, el software de control de versiones utilizado para hacer seguimiento de las modificaciones realizadas en el código fuente durante el desarrollo. Gracias a su función de ramas, Git facilita la colaboración de varias personas en un proyecto. También facilita poder volver a una versión anterior de tu código si fuera necesario. Como ves es una herramienta fundamental si vas a trabajar en equipo o si quieres tener la tranquilidad necesaria para poder refactorizar tu código.

Idea de proyecto

Instala Git en tu sistema y comienza a familiarizarte con sus comandos básicos. Pon la aplicación de conversión de monedas o cualquiera que te parezca bajo control de versiones, luego crea una cuenta en GitHub y súbela a un repositorio público para que otros la vean. Todo desde la línea de comandos.

Para saber más

• Podcast: Programador, pon un git en tu vida, de Web Reactiva.

10. Crea tu primera aplicación con Node.JS

JavaScript se encuentra en la mayoría de las aplicaciones de fron-end, pero también puede ser ejecutado en la parte del servidor mediante node.js. Tener algo de conocimiento para sobre cómo usar JavaScript en el back-end es una habilidad deseable para poder ingresar en el mercado laboral actual.

Idea de proyecto

Construye una App simple con Node.