Aprendiendo los Fundamentos
Fundamentos del Desarrollo Web: Guía para Principiantes y Desarrolladores Intermedios
Frontend Roadmap: Introducción
Hoy en día, palabras como “marca personal”, “aprender enseñando” o “dejar una huella” han estado resonando bastante en mi cabeza.
Hace unos años atrás, cuando iniciaba en el mundo de la programación, no sabía por dónde empezar o qué ruta seguir. Incluso hoy en día, he estado en búsqueda activa sobre cómo sobresalir como desarrolladora o dar el siguiente paso de mid-senior a senior developer. Y la verdad, blogs en Medium o dev.to me han ayudado bastante a tener una idea de cómo avanzar.
Es por esto que, a modo de crecimiento personal, he decidido iniciar este blog sobre programación. Y qué mejor que explicando los fundamentos en el desarrollo web, específicamente Frontend (que es el área en la que me he ido especializando en los últimos años).
Mi meta es apoyar a todos aquellos que están recién empezando en el mundo del desarrollo web y a aquellos que ya llevan algunos años en la industria pero están perdidos en qué conceptos técnicos aprender para mejorar su base.
Intentaré explicar de la forma más educativa e interactiva posible, para que incluso los conceptos más difíciles de entender (como lo fueron para mí al principio 😅) puedan ser aprendidos y comprendidos.
Así que si quieres comenzar este journey conmigo, reunámonos una vez por semana con los fundamentos del Desarrollo Web.
¿Por qué una ruta de aprendizaje?
“Si tuviera que volver a empezar”, es una frase que está muy de moda en muchas redes sociales, pero resulta bastante útil para tener una guía de por dónde empezar cuando eres principiante o te sientes perdido/a respecto a qué aspectos reforzar o qué seguir aprendiendo. Esto es especialmente relevante cuando eres autodidacta, como yo.
Entonces, como mencioné, si tuviera que comenzar desde cero en el aprendizaje de Desarrollo Web con especialización en Front-End, seguiría la ruta que presentaré más adelante.
Pero antes de empezar, quiero hacer una advertencia que puedes omitir si deseas sumergirte directamente: Soy una desarrolladora web especializada en Front-end con 4 años de experiencia hasta la fecha, 2023. Actualmente me encuentro en una etapa en la que busco reforzar conceptos fundamentales y potenciar mi aprendizaje en aspectos más complejos que afectan el rendimiento, el código limpio y otros aspectos en un proyecto. Hace unos meses, empecé a buscar numerosos artículos, videos y servicios de desarrolladores senior que ayudan a ascender en seniority, entre otros. Estaba bastante perdida sobre cómo empezar, en quién confiar y dónde encontrar explicaciones que pudiera entender, con ejemplos claros. Por eso me vi en la necesidad de crear mi propia ruta de aprendizaje, con todos los conceptos que DEBERÍA dominar como desarrolladora React para conseguir un mejor empleo o simplemente aumentar mi confianza al hablar o iniciar un proyecto de desarrollo web. Así que todo lo que encontrarás a continuación es el resultado de mi curiosidad y, vamos a decirlo, mi deseo de no pagar por plataformas o servicios adicionales que lo hagan por mí.
Muchos de los puntos que enumeraré a continuación aún no tienen una publicación, pero los iré añadiendo semana tras semana a esta ruta. No te preocupes si hay algún punto para el cual aún no he escrito un artículo, puedes utilizar esta guía para investigar por ti mismo/a. Recuerda que una de las habilidades más importantes de un programador/a es su curiosidad y capacidad de aprender por sí mismo/a.
Recuerda también que esta es solo una guía de lo que considero como los conceptos más importantes para ser un desarrollador web, al menos a nivel intermedio o semi-senior.
P.D. Si estás empezando desde cero, te recomiendo seguir estrictamente estos fundamentos, excepto en la sección 1 y 2, que puedes estudiar en paralelo o en otro orden.
P.D.2. Si ya llevas un tiempo en el mundo del desarrollo web, te recomiendo aprender bien los fundamentos que abarcan las secciones 1 a 4. El resto dependerá de ti y de los aspectos que desees reforzar.
React Frontend Developer Roadmap
Antes que todo, por favor no desesperes si ves que es demasiado por aprender. Sólo enfócate en una sección a la vez y avanza paso a paso. No te darás cuenta lo rápido que avanzas. Sólo preocúpate en entender muy bien los conceptos.
- ¿Cómo funciona todo?
- El Internet
— ¿Cómo funciona el Internet?
— Servidor
— Routers
— Protocolos
— Client-side & Server-side
— DNS
— Hosting - La web
–Browsers
–HTTP — HTTPS
–URL
–GET / POST
–Status code
2. HTML & CSS
- HTML
–¿Qué es HTML?
–Tags & attributes
–Head
–Storage [ Cookies, LocalStorage, SessionStorage]
–APIs
–Doctype
–href vs. src
–meta tags
–viewport
–Forms
–Accesibilidad
–SEO - CSS
–Los básicos: syntax y selectors
–Modelo de caja
–Herencia de propiedades
–Responsividad & mobile first [Media queries]
–Display & Positions
–Floats
–Fonts y cómo importarlos
–Shadows
–Flexbox
–CSS Grid o Grilla
–CSS transitions
–Sass
–Compatibilidad de navegadores
–Variables & Functions
3. Javascript
- – Sintaxis & Constructores básicos
–Tipos de Datos [Primitivos & No-Primitivos]
–Operadores & Operadores Lógicos
–Estructura de Datos: Objectos (… y sus metodos)
–Estructura de Datos: Listas (… y sus metodos)
–Funciones
–Bucles
–Conditionales
–Variables [Scope & Hoisting & Closures]
–Programación Asíncrona
–Modular Javascript
–Event bubbling
–Prototype
–Funciones de Orden Superior
–Bugs & Errors [Try, Catch, Finally]
–Expresiones regulares
–Javascript y el Navegador
–Manipulación del DOM& Manejando Eventos
–Shadow DOM
–Fetch API
–Javascript Engine Mechanism
4. ReactJS
- –Conceptos básicos [¿Qué es React?, Componentes, JSX, Virtual DOM, Hooks]
–Tipos de Componentes [Functional components, Class Components]
–State vs Props
–Conditional Rendering
–Composition
–Eventos sintéticos
–Hooks [useState, useEffect, useContext, useRef]
–Formularios [Validaciones, React Hook Form, Formik]
–Routing [React routing]
–Manejos de estado [Redux, Recoil, MobX, Context]
–Estilos [Styled components, CSS Modules, TailwindCSS, Material UI]
–API Calls
–REST API [SWR, react-query, Axios, superagent]
–GraphQL
–Testing [Jest, React Testing Library, Cypress]
–Frameworks [Remix, NextJS]
Y si te preguntas de donde me basé para realizar este roadmap, te dejaré varios links como referencias, asi puedes investigar o estudiar por tu cuenta :)
Preguntas de Entrevista:
Algo más por agregar. Cada post vendrá con una sección de preguntas que te podrían hacer al momento de una entrevista y posibles respuestas. En este caso, al ser preguntas más personales, no las responderé y te dejaré a ti responderlas por tu cuenta. Recuerda ser conciso/a y honesto/a.
- ¿Cómo comenzaste en el mundo de la programación?
- ¿Me podrías dar un ejemplo de un desafío que enfrentaste en los últimos años y cómo lo abordaste?
- ¿Por qué elegiste especializarte en el desarrollo frontend y qué es lo que más te entusiasma de ello?
PD: Si tú eres un hablante nativo en inglés o prefieres aprender estos conceptos usando el idioma más usado en equipos internacionales, puedes consultar la versión gemela de esta publicación. Mismos conceptos, mismas explicaciones, pero en diferente idioma 😉 cada semana.
