Si desea acelerar su crecimiento como desarrollador front-end, nada mejor que realizar proyectos de desarrollo reales.
La verdad es que puedes ver todos los tutoriales y cursos del mundo, pero sin aplicación y práctica, realmente no aprenderás las habilidades que necesitas para trabajar en proyectos reales.
Los proyectos de los clientes no vienen con instrucciones paso a paso porque, de lo contrario, no lo necesitarían en absoluto. Tendrá que pensar fuera de la caja, encontrar soluciones, comprometerse y abrirse camino hasta la línea de meta.
La mejor manera de aprender estas habilidades es hacer algunos proyectos de desarrollador front-end y aprender en el camino. ¿Y la mejor parte? Ni siquiera necesita un cliente para comenzar porque puede hacer estos proyectos usted mismo.
Cómo elegir un proyecto de desarrollo de front-end personal
Tenga en cuenta su nivel de habilidad
No elija un proyecto que sea demasiado avanzado para su nivel de habilidad, especialmente si es del tipo que pierde la motivación cuando las cosas se ponen demasiado difíciles.
Pero no olvide que dado que el objetivo aquí es ayudarlo a dominar el desarrollo de front-end, elija un proyecto que supere su nivel de habilidad actual, pero que aún sea factible.
Por ejemplo, si ha aprendido HTML y CSS recientemente, es hora de subir de nivel aprendiendo JavaScript.
Resuelve un problema personal o un problema que te importa
También es más probable que disfrute y se ciña a un proyecto si resuelve sus propios problemas o satisface sus propios deseos.
Tal vez siempre pierda la noción del tiempo cuando se desplaza por su feed de noticias de Facebook, o si desea un sitio web donde pueda generar automáticamente miniaturas atractivas de YouTube.
Piense en un problema personal que pueda resolver con tecnología y comience desde allí. Las sugerencias de este artículo solo pretenden ser un punto de partida. Será mucho mejor si lo modifica para agregar su toque único.
4 divertidos proyectos de desarrollo front-end
Crea un clon de un sitio web.
Habilidades para aprender: HTML, CSS, JavaScript y / o Bootstrap.
Crear un clon de un sitio web es una excelente manera de explorar cómo se construye y aprender los conceptos básicos de la estructura de la página, los colores, las fuentes, los medios, las tablas y más. Entre en todos los detalles que pueda para replicar el original.
Elija un sitio web que le guste y cree un clon del mismo. No mire el código fuente tanto como sea posible para aprovecharlo al máximo.
La clonación de Google es en realidad uno de los ejercicios de Thinkful para los estudiantes del taller de codificación. Thinkful es una empresa educativa que ofrece cursos de tecnología que incluyen un campo de entrenamiento de desarrollo web.
También puede seguir este ejercicio para ayudarlo a clonar la página de inicio de una aplicación llamada Karma WiFi. Fue creado por Kyle Koski, uno de los mentores de Thinkful, y utiliza HTML y CSS.
Lo bueno de la clonación de un sitio web es que puede elegir el nivel de complejidad del sitio web. Si recién está comenzando, un sitio web simple que solo necesita HTML y CSS es un buen lugar para comenzar. Si está más avanzado, elija un sitio web que requiera JavaScript o React.
Crea un juego de preguntas de JavaScript.
Habilidad para aprender: JavaScript
JavaScript es un lenguaje de programación que le permite crear páginas web interactivas. Es el idioma que usa al crear elementos receptivos como menús, reproductores de video, animaciones, mapas interactivos e incluso juegos en el navegador.
Pero antes de continuar, es importante saber por qué le gustaría crear un cuestionario.
Es más que diversión y juegos. Los cuestionarios están ganando popularidad como herramientas de marketing de contenidos. ¿Has visto alguna vez este tipo de cosas?
Los cuestionarios son excelentes herramientas de marketing porque son interactivos. Según una encuesta realizada por Content Marketing Institute, el 81% de los especialistas en marketing están de acuerdo en que el contenido interactivo, que es cualquier tipo de contenido que requiere la participación del usuario, capta la atención de manera más efectiva que el contenido estático.
Por esta razón, los cuestionarios se utilizan para diferentes fines de marketing. Los cuestionarios triviales, como el de la izquierda, se utilizan para impulsar el tráfico a un sitio web. Algunos especialistas en marketing también utilizan cuestionarios para calificar clientes potenciales, segmentar clientes potenciales y aumentar la participación.
Estoy explicando esto porque, como desarrollador, su trabajo es no solo asegurarse de que las cosas se vean bonitas, sino también crear funciones que sean fáciles de usar y harán que el sitio web de su cliente sea más efectivo para lograr sus objetivos de ventas y marketing.
Para crear una prueba, consulte estos tutoriales sobre cómo realizar pruebas de JavaScript desde WebDevTrick y SitePoint. Así es como puede verse su cuestionario de JS:
Crea tu propio lector QR móvil.
Habilidad para aprender: JavaScript
Los códigos de barras y los códigos QR han cambiado la forma en que compramos. Los clientes ahora pueden escanear un producto con sus teléfonos inteligentes y encontrar diversa información sobre él, como el precio o dónde pueden comprarlo.
También elimina la necesidad de escribir códigos largos en un sitio web, como códigos de activación o números de modelo, lo que hace que su experiencia de compra sea más fácil y sin complicaciones.
Al contrario de lo que otros piensan, no necesitas una aplicación de teléfono nativa para escanear códigos QR.
Los sitios web que se ejecutan en un dispositivo inteligente con una cámara pueden funcionar.
Esta guía le muestra el proceso paso a paso para crear su propio lector de códigos QR.
Utilizará HTML y JavaScript, pero la parte más importante es utilizar una biblioteca JS que pueda interpretar el código QR. La buena noticia es que no tendrá que crearlo desde cero porque hay muchas bibliotecas excelentes para este propósito exacto.
Cree una aplicación meteorológica.
Habilidad para aprender: Angular 8
Angular es uno de los tres frameworks de desarrollo front-end más populares junto con React y Vue.js. Se usa comúnmente para crear aplicaciones basadas en formularios (donde debe registrarse para crear una cuenta), pero también se puede usar para crear juegos e incluso aplicaciones con elementos de realidad virtual.
Hay un tutorial paso a paso muy detallado en Medium que enseña a los principiantes cómo crear una aplicación meteorológica hermosa con Angular 8 (la última versión de Angular). La aplicación meteorológica se ve así:
Esta aplicación presenta un diseño limpio y minimalista con impresionantes ilustraciones y una interfaz simple. También tiene una ingeniosa función de modo de luz y oscuridad que le agrega más estilo.
Lo bueno de este proyecto es que tendrá una idea de lo que es crear una aplicación útil y receptiva desde cero. Aprenderá todo, desde instalar Node.js y Angular CLI hasta probar su código con LightHouse.
Y aunque el creador del tutorial obviamente insertó su propia preferencia de diseño, puede agregar su propio estilo y ser tan creativo como desee. Puede jugar con el estilo y las animaciones CSS e incluso usar su propio logotipo, iconos y otros materiales de diseño.
Haga esto bien y tendrá una aplicación meteorológica impresionante en su cartera.
Puedes acceder al tutorial aquí.
Si bien este tutorial es amigable para principiantes, aún necesita un poco de familiaridad con Angular. Si desea aprender Angular, el mejor lugar para comenzar es Angular.io.
Diseñe y codifique su propio sitio web de cartera.
En un proyecto típico, lo más probable es que trabaje junto con un diseñador web que toma las decisiones sobre cómo se verá el sitio web.
Aunque el diseño y el desarrollo son posiblemente dos campos diferentes, comprender el diseño web no solo agregará otro conjunto de habilidades a su arsenal, sino que también lo equipará en caso de que decida trabajar en solitario como autónomo y trabajar en proyectos desde el diseño hasta la implementación.
Diseñar y codificar su propio sitio web de cartera le dará la libertad de mostrar su lado artístico y técnico simultáneamente.
El primer paso es pensar en su mensaje o marca . ¿Cuáles son sus servicios principales, a quién desea servir y por qué deberían elegirlo? (Lea más sobre la marca aquí).
El segundo es crear un diseño simulado que detallará el diseño, los colores y la tipografía.
Además, piense en un tema. ¿Es minimalista o ruidoso y funky? ¿Es monocromático o utilizará colores llamativos? Luego haz una lista de las páginas que necesitarás. Esto a menudo incluye una página de contacto, algunas publicaciones de blog, una página sobre mí y una página de términos y condiciones.
En tercer lugar, ¡ codifíquelo ! Use CSS moderno para diseñar el sitio, agregar algunas animaciones, agregar algunas imágenes de alta calidad, etc. El cielo es el límite aquí: puede hacer lo que quiera con el sitio web de su portafolio porque es suyo, ¡adelante!
¿Dónde puedo practicar el desarrollo front-end?
Aunque la mejor manera de practicar el desarrollo front-end es mediante la creación de sitios web de anuncios de aplicaciones reales, sigue siendo genial tener un lugar al que acudir para obtener consejos, acceder a tutoriales y obtener ayuda cuando te quedas atascado o necesitas una opinión sobre algo.
Estos son excelentes lugares para obtener ayuda mientras practica el desarrollo de front-end:
- freeCodeCamp.org: este es un sitio web lleno de tutoriales gratuitos sobre la teoría del desarrollo web, los idiomas y las mejores prácticas. También hay una gran comunidad aquí que puede ayudarlo con sus preguntas.
- HTML y CSS modernos desde el principio: este es un curso de Udemy de Brad Traversy. Está repleto de información útil y realmente puede enseñarle todo lo que necesita para comenzar con estos idiomas.
- Frontendmentor.io: aquí puede encontrar “desafíos” gratuitos y premium del tamaño de un bocado que puede hacer en su tiempo libre para desarrollar sus habilidades. La dificultad de los desafíos varía de "junior" a "avanzado". Aquí hay ejemplos de los desafíos que encontrará aquí:
Hay más recursos que me encantaría compartir contigo, pero para evitar que esto sea demasiado largo, puedes consultar este enlace para ver mi lista completa de cursos recomendados.
Estos son 5 divertidos proyectos de desarrollo front-end que puede probar hoy. Nuevamente, estos están pensados como puntos de partida. En última instancia, depende de usted personalizarlo para agregar un poco de su toque personal :)
Recuerde, se trata de practicar. NECESITAS construir cosas para mejorar tus habilidades.
No aprenda solo mirando.
Aprenda construyendo.
Aprender haciendo.
- Kyle Prinsloo (@study_web_dev) 24 de junio de 2020¡Feliz codificación!
Gracias por leer y saludos por ahora.
Kyle
Sígueme en Twitter para obtener más consejos.