¿Sabes utilizar HTML, CSS, Javascript o sus diferentes frameworks y aún no has creado ninguna página completa, con un diseño profesional?, ¿Estás cansado de ir de tutorial en tutorial haciendo piezas de código aisladas sin poner en práctica todos estos conocimientos en una página real? ¿Quisieras armar tu portafolio de proyectos para poderlo presentar aplicando a un trabajo?

La página 📰

No te preocupes, en este post te voy a mostrar una página que te va a ayudar a solucionar estos problemas y muchos más. Ésta página se llama frontendmentor.io, que aunque está en su fase beta está muy avanzada y realmente cumple con lo que promete que básicamente es darte las herramientas necesarias para que subas de nivel tus habilidades cómo desarrollador con proyectos reales.

Los retos 💪

Ésta página básicamente te brinda retos orientados al frontend, es decir a lo que usuario final ve en pantalla, y se puede resumir en 4 pasos:

1. Eliges el reto que quieres hacer.
2. Realizas el código y el diseño en tu computador con las herramientas y tecnologías que tú creas conveniente.
3. Envías la solución a la página donde podrás recibir feedback de otras personas; y
4. También podrás dar feedback a los demás.

Los diseños que se tiene como reto, son diseños profesionales, que no solamente te ayudarán a poner en práctica tus conocimientos, si no que también te ayudarán a engrosar tu portafolio de proyectos creados, que como sabes muy bien, un buen portafolio, es una excelente carta de recomendación que puedes presentar al momento que estés buscando trabajo como desarrollador web.

Lo bueno es que estos retos no solamente están pensados para personas que dominan las tecnologías del desarrollo web si no que también existen niveles donde si estás empezando en este maravilloso mundo puedes seleccionar niveles como intermedio o newbie que significa novato.

No es necesario suscripción 😍

Si bien es cierto la página es de paga, tú tienes una gran variedad de retos que puedes empezar a hacer simplemente registrándote en la misma, sin la necesidad de ingresar datos de una tarjeta de crédito.

Lo único que no incluye en la versión gratuita son los esquemáticos donde básicamente te va a decir cuantos pixeles de distancia debe haber entre los elementos, sin embargo esto lo puedes aproximar con herramientas que te permitan medir los píxeles en las imágenes de donde vas a tomar el diseño, así que tampoco lo veo tan necesario.

¿Qué es lo que te provee la página para que empieces a crear los diseños?📎

Una vez te hayas decidido por el reto le vas a dar click en StartChallenge y se van a descargar los archivos que vas a necesitar:

• La carpeta con los diseños en jpg.✔
• Otra carpeta con recursos como las imágenes que necesitas para el diseño, así como los fondos en caso de que se requiera, estos fondos tanto para móvil y escritorio.✔
• El gitignore que lo necesitarás para cuando trabajes con GIT.✔
• Un archivo html que tiene todo el texto ya digitado, hay que darle un poco más de formato con más etiquetas.✔
• El archivo readme donde encontarás información general de cómo podrás empezar a programar y que hacer una vez que ya tengas tu diseño listo.✔
• Una guía de estilos básicas que te indicará colores, tipografía y tamaños.✔

¿Estas atorado con algún reto? 😵

También puedes revisar soluciones hechas por otros usuarios y esto lo podrás revisar en la sección solutions que se encuentra en la parte superior. Donde aquí podrás ver las soluciones a todos los retos que se han enviado, podrás darle al botón me gusta o ponerle una marca para que lo puedas encontrar más rápido después.

De esta manera si estás enfrascado en alguna parte y quieres ver cómo lo han resuelto algunas personas esto te puede ser de mucha utilidad. Quieres saber más detalles checa el siguiente video:

Si te interesó este contenido me puedes seguir en twitter: @CodingTube o en youtube: CodingTube