# ¿Quieres ser desarrollador frontend? tienes que saber esto - Link: https://creativa.dev/desarrollo-web/quieres-ser-desarrollador-frontend-tienes-que-saber-esto/ - Published: 2020-07-04T23:48:12-04:00 - Author: Juanito Ortega ¿Así que quieres ser desarrollador frontend?, déjame decirte que acabas de llegar al lugar indicado, gracias al sitio web [galuxui.com.es](https://galuxui.com.es/) te traemos esta estupenda guía, de la ruta de aprendizaje que debes seguir para convertirte en el mejor desarrollador frontend. Sin más preámbulos, te dejamos el artículo a continuación: Últimamente me han llegado varias dudas vía [Twitter](https://twitter.com/helleworld_) y a mi correo personal, sobre gente que desea convertirse en frontend developer pero no sabe cómo, qué aprender o cómo es el camino a seguir. Ante todo debo decir que yo me considero meramente una diseñadora que puede programar sin más, pero aún con ello y dada mi experiencia profesional, soy capaz de arrojaros algo de luz sobre este tema. ## Pero antes… ¿Qué significa ser Frontend? Echando un vistazo a la comunidad rápidamente te darás cuenta de que para cada profesional« ser frontend» incluye o excluye diversas cosas. Por ejemplo, hay quienes apartan completamente el diseño del campo Frontend o quienes apartan lenguajes semánticos. Algo así como que personalizan su menú. Desde mi punto de vista, voy a darte la definición que, en mi experiencia, la industria define sobre alguien «frontend»: una persona que maneje lenguajes semánticos (HTML), lenguajes de estilización (CSS) y de programación web (JS, Python, PHP…) al nivel de poder construir una página que sea funcional. Quiero y necesito que no confundas el rol de Frontend con otros roles. Erróneamente se confunde con el rol de un Diseñador/a web, Diseñador/a gráfico/a e incluso Diseñador/ a UX. No has de saber crear el diseño de una web, un logo o una marca para ser frontend, esas son otras áreas. Tampoco se debe confundir con el Backend o con los servicios de las personas de Sistemas. Pero sobre qué has o no de saber, hablaremos más adelante. ## 📍 Empiezas aquí; los 3 pilares del Front A continuación quiero exponerte lo que considero que son los 3 pilares que debes aprender y manejar para adentrarte en el mundo del Front y de qué se encarga cada uno. ➜HTML: Este es el lenguaje más importante de los 3 que vamos a comentar. Todo lo que ves en internet, todas las páginas web que visitas cada día están escritas en HTML. Este es el lenguaje que hace que una página web sea una página web. ➜CSS: Este es el lenguaje que construye el estilismo de todas las interfaces que ves. Toda la decoración, estilos y colocación de cada elemento en una página web se organiza a través de CSS. ➜JavaScript: Este es el lenguaje que hace que tu página web sea funcional. Hay muchas otras tecnologías que harán que tu página web funcione, pero por lo general JavaScript es el rey del mercado y el más sencillo de utilizar. ## 🤔 He oído hablar de React, Angular, Vue… ¿Cuál debo aprender? Esta pregunta me la suelen hacer en las mentorías. «Es que he visto x o y, en las ofertas piden n, ¿cuál aprendo?». La respuesta es: depende. Si todavía no dominas HTML, CSS y JavaScript, ni te acerques a ellos. Si por el contrario sientes que tienes un nivel HTML, CSS y JavaScript avanzado, te recomiendo empezar con Vuejs, por el simple hecho de que es el más sencillo de los tres y el más enfocado al Frontend. ## ¿Dónde puedo aprender? Si estás leyendo este artículo, probablemente estés aprendiendo por tu cuenta. Si no es el caso, la respuesta rápida es que curses un Ciclo superior de DAW o DAM, o el curso adecuado de informática en la universidad de tu ciudad. Considera la  formación a distancia si es necesario. Pese a que ya tengo un artículo donde explico [Dónde y cómo aprendí diseño y programación por mi cuenta](https://galuxui.com.es/#/wheretolearn), voy a repasar este tema muy brevemente por aquí enfocándome en la programación: ➜ [Codecademy](https://www.codecademy.com/) ➜ [FreeCodeCamp](https://www.freecodecamp.org/) ➜ [SoloLearn](https://www.sololearn.com/) ➜ [Udemy](https://www.udemy.com/) ➜ [Open Webinars](https://openwebinars.net/) También existen cursos «no oficiales» y Bootcamps, considera también atender alguna de esas alternativas para poder allanarte un poco más el camino. Yo te dejo algunos sitios de interés, eres libre de buscar más por tu cuenta: ➜ [Fictizia (Mayormente online)](https://www.fictizia.com/) ➜ [LCI Barcelona (Mayormente online)](https://www.lcibarcelona.com/) ➜ [Adalab (Sólo mujeres, normalmente presencial)](https://adalab.es/) ➜ [Hack a Boss (Normalmente presencial)](https://hack-a-bos.com/) ## ¿Cómo me hago «un porfolio» siendo Frontend? Esta es otra de las preguntas que me suelen hacer. Se dice mucho que «un porfolio no es una colección de cromos», y lo cierto es que yo lo veo de esa manera. Es una demostración de qué sabes y puedes hacer. Al fin y al cabo un artista no hace una exposición sobre sus obras fallidas o sus sketches, sino sobre sus pinturas bonitas y acabas. Pero quiero ampliarte esto. No te quedes solo en el porfolio, crea tu página web, e incluso un blog personal si te animas. Un porfolio es casi o igual de importante que tener presencia online. Esto no significa que debas escribir 100 artículos al mes o tener 50.000 seguidores, pero es una manera de darte a conocer y dar tu trabajo a conocer. Puedes crear «presencia online» creándote una cuenta en [Twitter](https://twitter.com/), [Devto](https://dev.to/) o [Medium](https://medium.com/), siguiendo y apoyando a creadores de contenido que te gusten o te inspiren, animándoles, comentándoles y compartiendo lo que hacen, ¡o compartiendo aquello que tú haces! También puedes crear presencia online aportando a contenidos Open Source, ayudando a quienes saben menos que tú e incluso dando feedback a quien lo pide. Sé que habrá gente que discrepe conmigo y prefiera ser alguien «anónimo», pero tener presencia online es realmente beneficioso por 1) conocer a gente de la industria y que te conozcan, 2) compartir y dar a conocer tu trabajo y 3) ayudar a humanizar el sector. La presencia online puede conseguirte oportunidades laborales, contactos y colaboraciones, ¡date a conocer! E incluso si te animas, quizá un día quieras crear tus propios cursos y tutoriales 😉. ## ✅ La checklist de Frontend Otra cosa que me suelen preguntar en mentorías es, ¿Cuándo sabré si estoy preparado/ a para buscar trabajo de Front?, así que me he permitido crearte una lista de checks para saber si cumples con los requisitos esenciales para desempeñar un trabajo como Frontend developer, allé voy: ❒ Manejas HTML, CSS y JavaScript a nivel intermedio o avanzado. ❒ Tienes experiencia utilizando librerías externas de JavaScript, como librerías simples para crear gráficos, tablas dinámicas, etc. [Ej: Momentjs, Chartjs] ❒ Tienes experiencia o conoces frameworks de CSS. [Ej: Bulma, Materialize, Foundation, Bootstrap] ❒ Entiendes o tienes experiencia con Grid CSS y Flexbox. ❒ Tienes experiencia con API’s. ❒ Tienes experiencia con JSON’s. ❒ Tienes experiencia con el uso de la terminal. ❒ Eres capaz de conectar una API con la interfaz y disparar gestiones desde la interfaz. ❒ Tienes experiencia( aunque sea mínima) con bases de datos y cómo conectarlas a tu proyecto. [Ej: MySQL o Firebase] ❒ Tienes experiencia haciendo el deploy de una aplicación (ya sea propia o de otra persona). [Ej: en Netlify, GitHub Pages o Heroku] ❒ Tienes experiencia con algún framework de JavaScript. [Ej: Vuejs, React, Angular] ❒ Tienes experiencia o sabes crear una autenticación con tokens. [Ej: JWT] Ten en cuenta que no tienes que ser un/a ninja-jedi-master-todoterreno-crack-monstro de todo lo mencionado anteriormente, la experiencia «profesional» del uso de todo esto lo conseguirás únicamente en un entorno laboral, con casos de aplicación reales y clientes reales. ## Herramientas que te pueden ser útiles Es difícil encontrar herramientas para gestionar ya sea tu aprendizaje, tus proyectos y tus avances. Yo a continuación me voy a limitar a listarte algunas herramientas que utilizo, por si te animas a usarlas también 😉. ➜ [Notion](https://www.notion.so/): Esta es mi herramienta favorita para tomar notas de lo que voy aprendiendo y practicando, y para documentar mis proyectos. ➜ [Miro](https://miro.com/): Mi herramienta favorita para hacer esquemas y flows. ➜ [GitHub](https://github.com/): Todos mis proyectos (publicados y no publicados), están aquí. Yo te recomiendo descargarte GitHub Desktop para manejar los pulls rápidamente 😉. ➜ [Netlify](https://www.netlify.com/): Mi plataforma favorita para subir mis proyectos que no tienen un servidor, API ni Backend detrás. ➜ [Heroku](https://www.heroku.com/): Si tu proyecto tiene API, base de datos o servidor detrás, vas a querer utilizar Heroku para hacer el deploy. ## Pequeñas reflexiones finales 📌 Si quieres aprender nuevas tecnologías para implementarlas en tus proyectos,  ⛔NO LAS APRENDAS E IMPLEMENTES TODAS A LA VEZ⛔. Ve una por una y no des nada « por aprendido» hasta que no te sientas cómodo/a utilizando esa tecnología. 📌 La frase «esta tecnología es mejor que esta otra» es mentira. Hay tecnologías más modernas y tecnologías más antiguas y todas funcionan, la diferencia es que unas son más sencillas que otras o abarcan más soluciones. 📌 Reutiliza. No tienes que reinventar un proyecto desde cero una y otra vez, recrea tus proyectos cada vez que estés aprendiendo una nueva tecnología. 📌 Si no entiendes algo, no pasará nada por dejarlo y retomarlo cuando te sientas más preparado/a. 📌 No existen gurús ni gente que hace magia en programación, esa persona que te parece tan buena también se ha peleado con las tecnologías que sabe para llegar a tener tanta experiencia. 📌 Comenta tu código y documenta tus proyectos. No importa cuándo leas esto. 📌 Si estás aprendiendo algo, toma notas o hazte una guía para ti mismo/a sobre qué estás haciendo y cómo lo estás haciendo. ## Contenido visual del artículo A continuación encontrarás una guía visual sobre qué necesitas saber para ser Frontend Developer. ![Guía visual de Frontend Developer](https://www.creativa.dev/wp-content/uploads/ 2020/07/Front_Guide.30eec1e5.png) Guía visual de Frontend Developer ## TL;DR En resumen, si quieres ser frontend primero anímate a aprender HTML, CSS y JavaScript; aprende a utilizar librerías externas, frameworks, gestionar API’s y mínimamente bases de datos. Sería recomedable saber sobre autenticación y deploy de aplicaciones web.