Mentor Frontend: Aprende habilidades Front-End y gana $17K

Matt creó Frontend Mentor, una herramienta que ayuda a las personas a desarrollar sus habilidades informáticas frontales mediante la construcción de proyectos prácticos. Los ingresos han aumentado mes a mes desde que estableció un nivel de suscripción en agosto del año pasado y ahora superan los $17.000.

Matt creó Frontend Mentor, una herramienta que ayuda a las personas a desarrollar sus habilidades informáticas frontales mediante la creación de proyectos prácticos. Los ingresos han aumentado mes a mes desde que estableció un nivel de suscripción en agosto del año pasado y ahora superan los $17.000.

¿En qué trabaja actualmente y quién es usted?

¡Hola! Soy el creador de Frontend Mentor, un sitio web que permite a los usuarios desarrollar sus habilidades de codificación front-end mediante la construcción de proyectos prácticos.

Damos a nuestra comunidad proyectos planificados profesionalmente para construir en lugar de instrucciones. Gracias a estas dificultades, nuestros miembros adquieren experiencia práctica en la creación de sitios y aplicaciones web con un flujo de trabajo realista.

Los usuarios de Frontend Mentor tienen la opción entre nuestros retos gratuitos y nuestra suscripción PRO gracias a nuestra estrategia de negocio freemium. Nuestros retos gratuitos suelen ser tareas más cortas con fotos JPG de los diseños. Los miembros más dedicados a su crecimiento profesional pueden acceder a los archivos de diseño originales de nuestros desafíos premium, desafíos gratuitos y algunas funciones extra de la plataforma con nuestra suscripción PRO.

Nuestros retos premium se acercan lo más posible a los encargos profesionales reales. Por lo general, se trata de aplicaciones en línea o sitios web de varias páginas. El proyecto viene con el archivo del diseño. Tienen diseños de maquetación para PC, tabletas y dispositivos móviles, además de un sistema de diseño para colores, elementos estándar, etc. Son excelentes componentes para un portafolio que ayudará a uno de nuestros miembros a conseguir entrevistas y encontrar el trabajo de sus sueños.

‍

¿Cuál es su formación y cómo surgió el concepto de Frontend Mentor?

En realidad, ¡tengo experiencia en deportes, actividad física y nutrición! El baloncesto fue uno de los numerosos deportes en los que participé de joven. Me especialicé en deporte y ciencias del ejercicio en la universidad. Dejé la universidad y monté un negocio de entrenamiento personal en Cambridge, donde nací.

Aunque me encantaba llevar mi propio negocio, no estaba hecha para dedicarme al entrenamiento personal. Me gustaba hacer ejercicio y llevar un estilo de vida saludable, pero pronto descubrí que estas cosas no eran mis verdaderas pasiones. Seguía consumiendo vino y pizza con demasiada regularidad.

Me di cuenta enseguida y supe que tenía que tomar un camino alternativo. Pero todo lo que se me ocurría eran ideas para negocios web. Como no tenía dinero para contratar a alguien que construyera nada, opté por formarme yo mismo.

Me sentí obligado a estudiar Ruby on Rails allí en ese momento, ya que Lynda.com era la plataforma más utilizada. Al principio, conocí General Assembly viendo un vídeo en YouTube. Con el fin de prepararme para un trabajo como desarrollador, ofrecían en Londres un bootcamp de tres meses a tiempo completo en el que se enseñaban los principios de la programación web.

Me contrataron como desarrollador front-end tras terminar el curso. Después de trabajar como profesional durante casi un año, volví a pasar los fines de semana y las noches en Georgia. Empecé con un trabajo a jornada completa y me convertí en ayudante de profesor. Sabía que me quedaba mucho camino por recorrer, ya que no escribí mi primera línea de código hasta los 28 años. Sabía que enseñar a otros me ayudaría a mejorar más rápidamente, a reconectar con la comunidad de GA, a conocer gente nueva y a aumentar mi autoconfianza de desarrollador.

Al cabo de un año, estaba preparada para empezar a impartir los cursos y seminarios en los que había colaborado anteriormente. Mi nombramiento como profesora principal a tiempo parcial fue bien recibido por GA, así que empecé a impartir los cursos yo misma.

Esta experiencia de enseñanza me dio la motivación para empezar Frontend Mentor. En ese momento había estado intentando en vano poner en marcha un nuevo negocio web relacionado con el fitness. Sin llegar a lanzar nada, probar el concepto, o incluso averiguar una manera de hacer publicidad, había estado trabajando en una aplicación durante más de seis meses. Me impuse la exasperante tarea de lanzar en poco tiempo una idea que no tuviera nada que ver.

Mi objetivo inicial era crear una lista de recursos para principiantes para mis alumnos. Aunque soy consciente de que no era innovador, no dejaba de ser un paso esencial. Aunque habitualmente indicaba a mis alumnos los mismos recursos para principiantes, carecía de un recurso centralizado para hacerlo. Decidí crearlo a raíz de ello.

El dominio.io estaba libre, el propietario del dominio.com no lo utilizaba y los nombres de usuario de las redes sociales no habían sido reclamados, así que "Frontend Mentor" me pareció una buena opción. Y me puse manos a la obra.

Creé mi lista de recursos al cabo de unos días y la compartí con mi red de LinkedIn, mis alumnos en el canal Slack de la Asamblea General y los (nuevos) canales sociales de Frontend Mentor.

Recibí muchos elogios y tarjetas de agradecimiento, ¡lo que me ayudó mucho! También me dio la idea de crear más información solo para desarrolladores.

Después de pensar más profundamente en los problemas comunes que experimentaban mis estudiantes, se me ocurrió un enfoque diferente. Los estudiantes solían preguntar: "¿Dónde puedo practicar la creación de proyectos y construir una cartera?" después de la finalización de nuestro curso de Desarrollo Web Front-end de 10 semanas a tiempo parcial.

Primero les sugerí que crearan proyectos y páginas web para sus otros alumnos. Sin embargo, me contestaban: "Pero se me da fatal el diseño. Todo lo que hago parece de aficionado. ¿Dónde puedo conseguir diseños?".

Sin embargo, varios estudiantes afirmaron que era difícil conseguir diseños a partir de los cuales trabajar y, cuando lo conseguían, los activos no estaban disponibles, lo que dificultaba la duplicación de los diseños. Mi segunda opción era encontrar un diseño en Dribbble e implementarlo en código.

¿Por qué no existía un sitio web que ofreciera diseños profesionales, código de inicio y activos optimizados a los desarrolladores? Eso eliminaría muchas fricciones y permitiría a los desarrolladores centrarse en escribir código, con la ventaja añadida de producir proyectos estéticamente agradables y dignos de un portafolio. Esta cuestión me vino inmediatamente a la mente cuando pensaba en otros retos para mis alumnos.

El resultado fue la creación de Frontend Mentor.

¿Cómo convirtió un concepto en un producto acabado?

Sabía que existía la posibilidad de que se convirtiera en un negocio en el futuro, pero no quería precipitarme en el desarrollo de un plan de negocio. En ese momento, había dejado mi empleo a tiempo completo, pero había aumentado mis horas en GA, por lo que era capaz de mantener mi estabilidad financiera. Empecé Frontend Mentor como un recurso gratuito. Me centraba más en ayudar a los desarrolladores y atender sus necesidades fundamentales.

Pasé otro día subiendo un proyecto al sitio web después de darme cuenta de que podía diseñar proyectos para desarrolladores front-end. Encontré un diseño de Sketch en un sitio web de recursos de Sketch y envié un correo electrónico al diseñador para pedirle permiso para utilizarlo a cambio de un enlace a su sitio de portafolio. Después de otro artículo de LinkedIn, algunos mensajes de Slack a mis clases y publicaciones en las redes sociales, estaba listo para probar mi hipótesis.

Tras hablar con los primeros participantes, me di cuenta de que era un método educativo que gustaba a la gente. También era muy similar a un flujo de trabajo real, por lo que los participantes adquirían experiencia práctica codificando un proyecto utilizando un diseño como guía. La gente empezó inmediatamente a instalar el proyecto, completar el reto, compartir sus soluciones y solicitar comentarios.

El siguiente paso fue añadir algunos retos adicionales al sitio web para ver si la gente aceptaba numerosas tareas, y así fue. En este punto, había verificado lo siguiente:

Las personas intentarían construir el proyecto basándose en el diseño y las especificaciones del proyecto para adquirir experiencia en el desarrollo de programación front-end.

Habitualmente compartían su solución con su red después de terminar un trabajo para obtener comentarios.

La gente disfrutó del proceso, pensó que era gratificante construir los proyectos y se mostró muy contenta con los resultados.

El proyecto me atraía en todos los sentidos y podía imaginarme trabajando en él durante décadas. No sólo había probado una serie de ideas cruciales, sino que llegué a la conclusión de que era la empresa ideal para mí.

La marca Frontend Mentor y algunos diseños se completaron después de un día de colaboración, como muestra esta captura de Wayback Machine de junio de 2018 (¡oh, lo absurdo!). Afortunadamente, tengo un amigo cercano que es un diseñador brillante, y se ha ofrecido voluntario para crear algunos diseños básicos de marca y plantillas iniciales como favor.

Utilicé mis canales habituales para la presentación del sitio web actualizado, además de publicar artículos en dev.to, Hackernoon y un Show HN en Hacker News.

Junto con este lanzamiento, también establecí una comunidad Slack, que inicialmente pretendía que fuera un lugar donde la gente pudiera pedir ayuda con iniciativas y compartir sus soluciones, pero a medida que la comunidad crecía, vi que era (¡y sigue siendo!) un lugar maravilloso para pasar el rato donde la gente entablaba relaciones, colaboraba en iniciativas y daba su opinión sobre el sitio web, entre otras muchas cosas.

Mi grupo de investigación es ahora la comunidad de Slack. Las conversaciones diarias con los miembros de la comunidad me permitieron comprender con claridad meridiana los requisitos de la primera iteración de la aplicación web. En ese momento, el sitio era simplemente un sitio estático que utilizaba la API de WordPress, sin funciones de inicio de sesión, envío de proyectos o comentarios. Mi objetivo era ir construyendo poco a poco para aumentar mis posibilidades de tomar decisiones acertadas.

Tras años de docencia adjunta en GA, ya conocía al personal. Mike, un instructor, se sentó y me preguntó en qué estaba trabajando mientras hablábamos. Le hice una demostración de Frontend Mentor y le gustó tanto el concepto que se ofreció a ayudarme. Yo no buscaba activamente un cofundador, pero Mike es un desarrollador back-end brillante y nos llevamos muy bien, así que decidimos trabajar juntos.

Al cabo de unos meses, estábamos seguros de que nuestra asociación tenía éxito, así que decidimos hacerla más oficial, utilizando el método Slicing Pie para empezar a repartirnos el capital aunque la empresa aún no fuera rentable.

Decidimos centrar nuestros esfuerzos en los comentarios de la comunidad para crear la mejor plataforma con las mejores funciones en lugar de anunciar externamente el debut de la aplicación web para mantener las cosas razonables.

Numerosas personas solicitaron tutoría 1:1 y la posibilidad de ver una solución "oficial"; no queríamos crear un mercado de tutoría, ya que esto podría haberse convertido en una solución alternativa para la comunidad y disminuir la probabilidad de que la gente realmente utilizara la solución; tampoco queríamos proporcionar soluciones oficiales, ya que éstas podrían haberse convertido en una barrera para la comunidad y disminuir la probabilidad de que la gente realmente utilizara la solución; y, por último, no queríamos proporcionar soluciones oficiales, ya que éstas podrían haberse convertido en una barrera para la comunidad y aumentar la probabilidad de que la gente utilizara la solución.

Subimos los diseños a Dropbox y probamos la idea con Buy Me a Coffee. Algunas personas empezaron a comprar los diseños; fue nuestro primer ingreso online, ya que en los retos sólo ofrecíamos JPG. Con frecuencia recibíamos peticiones de archivos Sketch/PSD (Figma no era tan popular entonces) de los diseños.

Evaluamos los obstáculos "premium", que serían lo más parecido a un esfuerzo del mundo real que un desarrollador no profesional podría conseguir, e inicialmente presentamos uno, ¡y empezó a venderse! La gente también empezó a pedir retos de mayor envergadura, querían proyectos destacados para presentar a los jefes de contratación y aumentar sus posibilidades de empleo.

Hasta ese momento, todo era una compra única, así que tomamos la decisión de empaquetarlo todo en una suscripción y ofrecer más funciones "PRO", incluidas soluciones privadas, a la plataforma.

Sabíamos que a la gente le encantaba la idea y que íbamos camino de desarrollar un negocio de éxito; sin embargo, antes de lograrlo, teníamos que "lanzar" el sitio web más públicamente.

Nos "lanzamos" en Product Hunt un año después de la versión beta de la aplicación web, lo que puede parecer excesivo, pero fue intencionado. Decidí no entusiasmarme demasiado con el lanzamiento de PH y precipitarlo antes de que hubiéramos establecido una base firme.

Poco después, Frontend Mentor fue destacado en boletines de desarrollo web e incluso en un artículo de Chris Coyier, de CSS Tricks, ¡una leyenda del front-end!

Fuimos capaces de vender casi $10.000 en suscripciones en los primeros días, con un flujo continuo de suscripciones llegando después de la oleada inicial, así que sabíamos que habíamos creado algo que la comunidad desea. Al cabo de unos meses, estábamos listos para introducir la suscripción PRO. La comunidad estaba entusiasmada, y los primeros 500 suscriptores recibieron descuentos perpetuos por suscripción anticipada.

Validé el modelo de negocio y lancé la suscripción demasiado despacio (prefiero llamarlo metódico, pero ¿a quién quiero engañar?). Podríamos haber puesto en marcha una suscripción PRO con archivos de diseño y retos premium en unos pocos meses. Si pudiera volver atrás en el tiempo, haría las cosas de otra manera.

¿Qué técnicas de marketing utilizó para hacer crecer su empresa?

La mayoría de nuestro crecimiento ha venido de la gente que refiere Frontend Mentor a otros y que comparte sus soluciones; aparte de los artículos indicados arriba, no he hecho mucha promoción proactiva.

Con el tiempo, he cultivado excelentes relaciones con algunos streamers, lo cual es ideal porque ellos reciben contenido deslumbrante que pueden crear para su audiencia, su audiencia gana una tremenda cantidad de conocimiento, y Frontend Mentor recibe una excelente exposición. Por lo tanto, ¡es efectivo para todos! Me di cuenta de que algunas personas se retransmitían a sí mismas completando nuestros retos y, en ocasiones, ¡tenían audiencias muy grandes!

Frontend Mentor no debería ser uno de los muchos productos excelentes que han fracasado debido a la falta de experiencia en marketing, ¡por lo que estoy decidido a mejorar en ello!

¿Qué objetivos tiene para el futuro y cómo le va hoy?

Con los ingresos del mes pasado ligeramente por encima de $17.000, Mike también se ha unido al equipo a tiempo completo (yo hice la transición en enero, cuando nuestros ingresos eran de $6.500), y Frontend Mentor se encuentra actualmente en una trayectoria excelente. Desde que introdujimos nuestra suscripción en agosto del año pasado, los ingresos mensuales han aumentado constantemente.

Ahora estamos en el punto de equilibrio después de costes, salarios y contratistas; ¡esperemos que esta tendencia continúe y podamos crecer!

Somos totalmente contrarios al mensaje de la cultura del esfuerzo y tenemos objetivos muy claros para Frontend Mentor; queremos dirigir la empresa como una empresa pacífica y sostenible que ofrezca a sus empleados un estilo de vida completo y cómodo. A través de procesos, soluciones escalables y una visión clara, podemos crecer sin poner en peligro la salud física y mental del equipo, en nuestra opinión.

Queremos construir una casa en la que podamos vivir, y estamos utilizando Gumroad y Buffer como modelos del tipo de negocio que nos gustaría gestionar.

En el ámbito empresarial, nuestro próximo paso será encontrar formas de vincular a las empresas con nuestra comunidad de desarrolladores, muy cualificada y formada por muchas personas destacadas que buscan trabajo activamente en todo el mundo.

Los perfiles de Frontend Mentor se convertirán en el lugar ideal para mostrar sus iniciativas de desarrollo de habilidades y demostrar su experiencia proporcionando comentarios sobre las soluciones de otros usuarios. Quiero que el perfil de Frontend Mentor de un desarrollador sea tan esencial como sus perfiles de GitHub o Stack Overflow a la hora de buscar empleo.

¿Qué es lo que más ha aprendido al crear Frontend Mentor?

He aprendido el valor de no precipitarse, aunque antes dijera que, si pudiera volver atrás en el tiempo, habría avanzado más deprisa. Continuamente se me ocurren nuevas ideas. He aprendido a no precipitarme.

Si tienes una idea, deja que se desarrolle, aprovecha para discutirla con los usuarios (o usuarios potenciales) y comprueba si sigue surgiendo. Muchas noches no he podido dormir por estar considerando las implicaciones de una posible nueva idea. Si esto ocurre con frecuencia con una idea, probablemente sea buena. Podría haber llevado Frontend Mentor por una trayectoria diferente, lo que podría haber supuesto su desaparición.

Creo que existe una alternativa viable al modelo empresarial convencional de olla a presión y crecimiento a toda costa. ¿Por qué entonces intentaríamos establecer un negocio de esta manera? No estamos motivados únicamente por el crecimiento y el beneficio. Además, ten claro el propósito de la creación de tu empresa.

Me sorprende cómo muchas empresas siguen tratando a sus empleados como niños dictando horas de trabajo específicas y microgestionando todos los aspectos de su trabajo. Nuestra misión en Frontend Mentor es crear un lugar de trabajo tranquilo, sostenible y agradable. Si tenemos la suerte de crecer un equipo, tenemos la intención de crear un lugar de trabajo saludable donde todo el mundo es tratado con respeto y se confía para realizar sus tareas asignadas.

Recientemente he leído una serie de libros que han conformado mis puntos de vista, y sugeriría los siguientes a cualquiera que desee crear una organización pacífica:

Paul Jarvis escribió un artículo titulado Company of One.

Lost and Entrepreneur de Rand Fishkin

El libro Start Small, Remain Small de Rob Walling.

It Doesn't Have to Be Crazy at Work, de Jason Fried y David Heinemeier Hansson (dadas las recientes noticias sobre Basecamp, dudo en sugerir este libro, pero sigue siendo estupendo).

El libro Essentialism de Greg McKeown

escrito por Tim Ferriss y Eric Jorgenson, The Naval Ravikant Almanac

El libro de Steven Bartlett Happy Sexy Millionaire salió a la venta en 2000.

Adii Pienaar escribió el libro Life Profitability.

Arvid Kahl escribió un libro titulado Zero to Sold.

Tendremos que esperar a ver cómo crece la empresa, pero será estupendo probar distintas estrategias operativas hasta que encontremos la que mejor funcione.

‍

¿Cuáles fueron los obstáculos más difíciles a los que se enfrentó y cuáles sus peores errores?

Empecé a trabajar a tiempo completo en Frontend Mentor en enero de este año, y Mike se unió al equipo este mes, así que llevamos varios años desarrollando Frontend Mentor paralelamente a nuestro empleo remunerado.

Mike solo podía ocuparse de algunas tardes y fines de semana porque siempre había trabajado a tiempo completo en otro sitio, pero yo tenía más tiempo para dedicar a este proyecto porque era un contratista independiente.

Esto nos ha desafiado a ambos a ser pacientes debido al poco tiempo de que disponemos, pero también ha mejorado nuestra capacidad para priorizar las actividades adecuadas.

La comunidad ha crecido con el tiempo, y cada mes que pasa crece más rápido. En mayo, el sitio alcanzó los 150.000 usuarios registrados.

Es molesto, pero hay espacio para otros rivales en el mercado, y yo estoy a favor de la competencia y de dar opciones a la comunidad de desarrolladores. También estamos empezando a encontrarnos con sitios falsificados, algunos de los cuales han replicado literalmente nuestro concepto y redacción.

Sirve como un maravilloso recordatorio de que las pequeñas decisiones que tomas a través de la investigación, la retroalimentación y la intuición se suman para crear algo genuinamente único. Puede que otros intenten imitarte, pero si tu visión es clara, será difícil detenerte. Recomendaría The Innovation Stack de Jim McKelvey a cualquiera que se enfrente a imitadores o al lanzamiento de competidores.

El tiempo dirá si fue un error, pero también hemos rechazado la financiación en un esfuerzo por hacer crecer la empresa de forma responsable.

¿Qué equipos y fuentes recomendaría?

Utilizamos una serie de herramientas que me encantaría sugerir a las personas que están empezando una empresa en Internet.

Me convertí en un gran admirador de la filosofía empresarial de Paul Jarvis tras leer Company of One, y también sabía que había cofundado una empresa de análisis que da prioridad a la privacidad llamada Fathom Analytics, así que elegimos ese nombre. Mike y yo somos personas muy conscientes de la privacidad, por lo que era esencial encontrar una solución analítica que priorizara la privacidad. Recomendaría Fathom a cualquiera que busque una solución analítica centrada en la privacidad.

MongoDB, Node.js y Next.js están todos construidos sobre JavaScript, y estamos considerando cambiar a PostgreSQL y una API Rails, pero no hay nada decidido.

Utilizamos Stripe y PayPal como pasarelas de pago y Chargebee con ProfitWell para que pueda conocer mejor las métricas de suscripción y controlar sus objetivos de ingresos mensuales. No podemos recomendar Chargebee lo suficiente porque han desarrollado un producto excelente, y su servicio al cliente es excepcional.

La comunidad compañera de nuestra plataforma es una comunidad Slack; si yo empezara de cero, probablemente elegiría Discord; sin embargo, Discord está apoyando y construyendo comunidades más inclusivas; por lo tanto, el coste de la transición sería demasiado costoso en este momento. Nuestra comunidad Slack tiene más de 60.000 usuarios, y está haciendo un trabajo respetable.

Aconsejaría a cualquiera con objetivos similares que se uniera al grupo de la Cumbre de Fundadores, formado por personas dedicadas a crear empresas pacíficas.

‍

Para más información:

Publico actualizaciones en Mentor Frontendpero no tengo blog, así que la forma más rápida de seguir mis actividades es a través de mi cuenta personal de Twitteraunque no soy muy activa en él. Sin embargo, me gusta escribir, así que quiero tuitear más y empezar un diario.

Recopilamos estudios de casos empresariales únicos de todo Internet, para inspirarle con una amplia gama de ideas de negocio. Este caso práctico fue supervisado por nuestro equipo y sin duda captó nuestro interés. Puedes encontrar otras historias de negocios inspiradoras aquí.