Nuestra misión como Frontend Developers es construir las funcionalidades de una aplicación, creando emociones que alegren el día de nuestros usuarios y habiéndonos apropiado de su corazón, resolver sus problemas dándoles la mejor experiencia posible.
Nuestro papel es VITAL para las empresas.
De las malas experiencias, corazones rotos, problemas sin solución y descuidos de los usuarios somos los responsables. Tanto diseñadores como backends están siempre encima de nosotros presionándonos, su trabajo y esfuerzo se reducen a nada si no damos buenos resultados.
El fin de este tutorial es que aprendas a construir interfaces dinámicas e interactivas. Que las aplicaciones que publiques en tu portafolio te llenen de orgullo, capten la atención de los mejores equipos de desarrollo y así, logres crecer profesionalmente.
Si estás dispuesto a luchar por la experiencia y comodidad de tus usuarios, te apasiona crear contenido para internet y estas dispuesto a construir aplicaciones interactivas, agradables y flexibles. ¡Tienes todos los requisitos para convertirte en un Frontend Developer!
Estos son los pasos a seguir para un Frontend Developer:
1. HTML y CSS
Con HTML construimos la estructura de las paginas web, mientras que con CSS le damos estilos a nuestro contenido. El control de estas herramientas es sumamente importante en tu desempeño como Frontend Developer, ya que su uso puede ser tan básico y complejo como queramos.
Puedes tomar el Curso de Desarrollo Web Online en Platzi. Aprenderás desde cero a crear y maquetar sitios web con HTML5 y CSS3. Hay desafíos y sesiones en vivo donde Leonidas Esteban te enseña a crear efectos y animaciones increíbles.
Experimenta todo lo que puedas.
No te quedes con las bases, copia el estilo de tus aplicaciones favoritas. Esto te retará a crear sitios web diferentes y llamativos, como Twitter, Instagram o Platzi. No tienen que ser copias exactas. Al principio lo importante no es el resultado, sino el proceso. Cada vez que no sepas cómo crear una interfaz, pero con mucho esfuerzo y TIEMPO logras el resultado esperado, has dado un gran paso para convertirte en el Frontend Developer que quieres ser. ¡Aprende todas las propiedades y herramientas que puedas!
Pero esto no acaba aquí, tienes mucho más por estudiar.
Aprende a construir aplicaciones que se adapten a cualquier dispositivo con Responsive Design y CSS Prefixes. Existen muchas convenciones para hacer tu código mucho más fácil de leer y entender, la convención más popular en CSS es BEM. Además, existen herramientas para facilitarnos la construcción de código CSS que se conocen como Preprocesadores. Puedes darles una oportunidad a estas herramientas, te ayudarán mucho a la construcción tus aplicaciones.
Puedes echarle un vistazo a estos links:
- HTML & CSS - Mejores practicas
- Tips y metodologías de buenas prácticas CSS
- CSS Grid Layout, la manera correcta de hacer interfaces
- Best Practices for Perfect CSS Documentation
- Consejos para escribir un mejor CSS
- Variables nativas en CSS
- Atomic Design en Platzi
De nuevo, lo más importante no es leer tutoriales o tomar cursos. Para mejorar tu habilidad creando sitios web espectaculares y responsivos necesitas practicar y practicar. Puedes imitar diseños geniales de sitios web que encontraras en Dribbble, Behance o The Best Designs. Tambien aprende a crear guías de estilo como Zeit o Auth0. Los componentes que van dentro de tu guía de estilos los puedes encontrar en el siguiente tutorial: ¿Qué elementos debe incluir una guía de estilo de diseño web?
2. Interactividad (es decir JavaScript)
Ya sabes crear sitios estáticos con HTML y CSS. Es momento de darles algo de vida y movimiento. Para esto usaremos JavaScript, un lenguaje de programación que nos permite crear acciones en nuestra aplicación. Con JavaScript podemos crear efectos dinámicos e interactuar con nuestros usuarios.
Puedes empezar con el Curso de Fundamentos de JavaScript en Platzi, en el que aprenderás desde las bases de JavaScript hasta conceptos avanzados del lenguaje. Es importante que aprendas a mover todo lo que vez. Puedes tomar el Curso de animaciones para la web, uno de los mejores cursos de Platzi que te enseñara a mover, mover y mover contenido 😄.
Nunca pares de practicar!
¿Conoces alguna aplicación que encante por sus animaciones? Cada vez que tu aplicación está cargando, debes cambiar el contenido de tu aplicación o incluso cuando tus usuarios encuentran errores. Todas estas son oportunidades para que tus usuarios se enamoren de tu aplicación. Cada pequeña interacción es importante, pues son los momentos que recordarán de ti y tu aplicación.
La inspiración nunca te hará falta. Todos los días hay nuevas y más creativas soluciones a problemas como los que acabo de describir. Siempre podrás sorprender a tus usuarios, incluso cuando menos se lo esperan.
3. Frameworks JavaScript
Aunque tu dominio de JavaScript sin necesidad de herramientas como jQuery es sumamente importante, esta habilidad vale oro si la complementas con un framework o librería de JavaScript cómo Reactjs, Vuejs o Angular. Estas herramientas nos ayudaran a construir nuestras aplicaciones, facilitando mucho nuestro trabajo en equipo y además tendremos el apoyo de la comunidad.
Aprende consultar APIs.
Las APIs son la forma en que se comunican las aplicaciones. Tu dominio para acceder a ellas es más que valorado, ya que acerca tus aplicaciones a ser tan reales como profesionales. Puedes buscar APIs de prueba para desafiar tu creatividad y crear aplicaciones increíbles. Recuerda que el futuro de esta tecnología está en GraphQL, así que saber manejarla te dará puntos frente a otros desarrolladores. Consume APIs de GraphQL con Apollo Client en Reactjs
Tiempo de carga y código mantenible.
Tus usuarios NO SON PACIENTES. Si tu aplicación demora mucho en mostrar el contenido que buscan, se irán. Perderás la oportunidad de resolver sus problemas y probablemente dinero para tu empresa. Lo mismo pasa con tu equipo de desarrollo; si tu código no es entendible, es enredado y desordenado, le estarás haciendo la vida imposible a tus compañeros. Ocúpate de que todos estén felices, harás tu trabajo mucho más sencillo y enfocado.
Es importante que practiques no solo cosas básicas sino también complejas. Construye aplicaciones que se sientan como aplicaciones reales, no como simples experimentos. Asegúrate de publicar todo lo que aprendes, esto te ayudará a demostrar tus habilidades a los equipos de desarrollo donde quieres trabajar. Recuerda que todos los días hay nuevas herramientas y actualizaciones de estas para ayudarnos a crear aplicaciones mucho mas eficientes.
El camino de un Frontend Developer es muy duro. Pero si de verdad quieres luchar para crear aplicaciones que resuelvan los problemas de tus usuarios de la mejor forma posible, esta es tu profesión. Nunca pares de aprender. Tendrás la oportunidad de mejorar la experiencia de tus usuarios. Lo que es bastante satisfactorio.
Seguro con tu experiencia has descubierto muchos otros consejos para convertirte en un Frontend Developer. Te animo a que nos los compartas. De nuestro trabajo dependen muchas personas, hacerlo bien hará de nuestro de mundo (virtual) y nuestras aplicaciones un lugar mejor ❤️.
Curso de Desarrollo Web Online 2016