¿Cómo empezar en el desarrollo de aplicaciones web? Para entender todos los conceptos que abarca este campo, te presentamos este roadmap de contenido especializado y técnico sobre Desarrollo Web, en el que vas a encontrar una variedad de tutoriales y guías que te van a ayudar a dominar este área tecnológica.
Desde los fundamentos de hTML & CSS3, hasta el desarrollo backend, te daremos toda la información que necesitas para que seas un experto en la materia.
¡Acompáñanos en esta aventura tecnológica!
Desarrollo Web
- Tipos de contenido en HTML
- 6 etiquetas para insertar elementos multimedia en HTML
- ¿Qué es el alt tex y por qué es importante?
- ¿Cómo crear tablas en HTML?
- 3 herramientas para trabajar con CSS
- Selectores básicos en CSS
- ¿Cómo funciona el color en CSS?
- ¿Cómo importar iconos como tipografías en CSS?
- Propiedades para fuentes en CSS
- Unidades de medida en CSS
- Cómo insertar una barra de navegación en HTML
- Cómo funcionan las etiquetas div y sapn en HTML
- ¿Cómo usar la etiqueta pre en HTML y CSS?
- ¿Cómo estructurar clases en CSS?
- Introducción al diseño responsive
- Preparar hojas de estilo para diseño responsive
- Selectores múltiples en CSS
- Aplicación de múltiples estilos en CSS
- Modelo de caja en CSS
- Propiedad display en CSS
- Posicionamiento de elementos en CSS
- Cómo dar estilo a una barra de navegación en CSS
- Cómo dar estilo a un menú en CSS
- Cómo funciona la propiedad z-index en CSS
- Cómo funciona la pseudoclase target en CSS
- Pseudoclases y pseudoelementos en CSS
- Cómo crear un menú de hamburguesa en CSS
- Sombras en CSS
- Cómo crear el icono de hamburguesa en CSS
- Scroll-behavior en CSS
- Cambios de flujo estático en CSS
- Cómo personalizar tu software de programación
- Conventional commits para programar en equipo
- Variables y cálculos en CSS
- Posicionamiento avanzado con Flexbox
- Cómo definir el tamaño de un elemento HTML
- Propiedad flex-direction en Flexbox
- Propiedad flex-wrap en Flexbox
- Propiedad flex flow en Flexbox
- Propiedad justify-content en Flexbox
- Propiedades align-items en Flexbox
- Propiedades de espaciados en Flexbox
- Propiedad order en Flexbox
- Propiedades flex-grow y flex-shrink en Flexbox
- Propiedad flex-basis en Flexbox
- Propiedad align-self en Flexbox
- Cómo situar una barra de navegación con Flexbox
- Cómo ubicar un menú de hamburguesa con Flexbox
- Cómo crear un footer con HTML y CSS
- Cómo ubicar dos columnas con Flexbox
- Media queries en CSS
- Propiedad align-content de Flexbox
- Probar funciones en distintos dispositivos con BrowserSync
- Cómo cambiar de puntero en CSS
- ¿Qué es resilient CSS?
- Patrones de layout para diseño responsive
- Propiedad background en CSS
- Posicionar y diseñar títulos para diseño responsive
- Posicionamiento avanzado con CSS Grid
- Propiedad grip-gap en CSS Grid
- Propiedad grid-template-rows en CSS Grid
- Propiedad grid-template-columns en CSS Grid
- Propiedad grid-auto-flow en CSS Grid
- Unidad relativa fr en CSS
- Propiedad grid-auto-rows en CSS Grid
- Funciones repeat y minmax en CSS Grid
- Auto-fill y auto-fit en CSS Grid
- Cómo numerar las líneas del grid en CSS Grid
- Cómo colocar objetos en CSS Grid
- Cómo nombrar las líneas de grid en CSS Grid
- Cómo funcionan las áreas en CSS Grid
- Cómo calcular posiciones en CSS Grid
- Alineación de elementos con CSS Grid
- Aplicar media queries en CSS Grid
- Transiciones en CSS
- Transformaciones en CSS
- Propiedad translate en CSS
- Propiedad rotate en CSS
- Propiedad scale en CSS
- Propiedad skew en CSS
- Cómo crear una tarjeta animada con CSS
- Animaciones en CSS
- Configurar una animación en CSS
- Librerías de animaciones en CSS
- Cómo animar una barra de progreso en CSS
- Propiedad overflow en CSS
- Cómo animar un loader en CSS
- Propiedad animation-direction de CSS
- Cómo animar un spinner en CSS
- Cómo diseñar un spinner básico en CSS
- Cómo animar un loader de ondas en CSS
- Cómo revelar una tarjeta con CSS
- Propiedad clip-path de CSS
- ¿Qué es JavaScript?
- La historia de JavaScript
- Tipos primitivos de JavaScript
- Sintaxis de JavaScript
- Particularidades de la escritura en JavaScript
- Cómo acceder a las propiedades de los objetos en JavaScript
- Cómo acceder a los elementos de un array en JavaScript
- Operadores aritméticos en JavaScript
- Operadores booleanos en JavaScript
- Bucle do-while en JavaScript
- Cómo ejecutar el código de JavaScript
- Cómo funciona el bucle for en JavaScript
- Bucles for in y for of en JavaScript
- Declarar variables en JavaScript
- Bloques en JavaScript
- ¿Cómo se almacenan los valores primitivos en JavaScript?
- ¿Cómo se almacenan los tipos no primitivos en JavaScript?
- ¿Cómo escribir funciones en JavaScript?
- ¿Cómo ejecutar una función en JavaScript?
- ¿Cómo escribir arrow functions en JavaScript?
- Pasar una variable por valor y por referencia en JavaScript
- ¿Cómo identificar errores en JavaScript?
- ¿Cómo crear un tablero de ajedrez en JavaScript?
- Cómo anidar bucles en JavaScript
- Qué son los callbacks en JavaScript
- Cómo utilizar los callbacks en JavaScript
- Objetos en JavaScript
- Clases en JavaScript
- Lenguajes de programación interpretados vs compilados
- Herencia en JavaScript
- Objetos literales en JavaScript
- Cómo usar la herencia para crear patrones en JavaScript
- Distribuir puntos de una competencia con JavaScript
- Cómo funciona el debugger de JavaScript
- Qué es un archivo JSON
- Pasar un objeto como parámetro en JavaScript
- Simplificar el constructor en JavaScript
- ¿Qué es object.assign en JavaScript?
- Método setup para particulizar clases en JavaScript
- ¿Cómo funciona la palabra clave super en JavaScript?
- Configurar el archivo launch.json en JavaScript
- Recorrer un array con propiedades en JavaScript
- ¿Cómo funciona el spread operator de JavaScript?
- Los arrays de JavaScript y la memoria RAM
- ¿Cómo funcionan los CommonJS Modules en JavaScript?
- ¿Cómo funcionan los ES6 Modules en JavaScript?
- ¿Cómo cargar un módulo en JavaScript?
- Crear un directorio de clases en JavaScript
- Arrays y programación funcional en JavaScript
- Método forEach en JavaScript
- Método map en JavaScript
- ¿Cómo crear una planificación con JavaScript?
- ¿Cómo utilizar el método forEach de JavaScript?
- ¿Cómo funciona el índice de un array en JavaScript?
- ¿Cómo utilizar Prettier en Visual Studio Code?
- Método filter en JavaScript
- ¿Cómo escribir el método forEach en JavaScript?
- TypeError de variable constante en JavaScript
- Método find en JavaScript
- Método reduce en JavaScript
- ¿Cómo utilizar el índice de un array en JavaScript?
- Programar un sistema de todos contra todos en JavaScript
- ¿Cómo crear alternancia en JavaScript?
- Método swap en JavaScript
- array.prototype.shuffle en JavaScript
- ¿Por qué separar y englobar métodos en JavaScript?
- ¿Cómo utilizar null en JavaScript?
- Aprender a programar con comentarios
- Método concat en JavaScript
- Operador módulo en JavaScript
- Copiar un array en JavaScript
- Método concat, forEach y Spread Operator en JavaScript
- Orden para escribir funciones en JavaScript
- Método push en JavaScript
- ¿Qué es this en JavaScript?
- ¿Cómo declarar variables indefinidas en JavaScript?
- ¿Qué es el operador booleano or en JavaScript?
- ¿Cómo decidir qué clase insertar en JavaScript?
- Programar resultados en JavaScript
- Simular errores en JavaScript
- Programar un partido de fútbol en JavaScript
- Objeto math en JavaScript
- Shorthand de objeto literal ES6 JavaScript
- Continue y break en JavaScript
- Usar if else else en JavaScript
- ¿Cómo utilizar el médoto find de JavaScript?
- Operadores de asignación compuestos en JavaScript
- NaN en JavaScript
- El método console.table en JavaScript
- Eliminar una columna de console.table en JavaScript
- Método slice en JavaScript
- Crear una tabla de clasificación en JavaScript
- ¿Por qué simular errores en JavaScript?
- Método sort en JavaScript
- Shortcut para ordenar un array en JavaScript
- Cambiar el color del código de JavaScript
- Métodos some y every en JavaScript
- Utilizar el método reduce de JavaScript
- Desestructuración en JavaScript
- El método array.entries en JavaScript
- Asincronía en JavaScript
- Métodos setTimeout y setInterval en JavaScript
- Promesas en JavaScript
- Estados de promesas en JavaScript
- Crear una promesa en JavaScript con Math.random
- Control de flujo try catch en JavaScript
- Métodos then y catch de JavaScript
- Anidar métodos en JavaScript
- Objeto error en JavaScript
- Promesas con setTimeOut en JavaScript
- Librería request para JavaScript
- Librería axios para JavaScript
- Transformar un string a un objeto en JavaScript
- ¿Qué es callback hell en JavaScript?
- Async y await en JavaScript
- Reescritura de funciones con promesas en JavaScript
- Deshacer el callback hell en JavaScript
- ¿Qué saber antes de empezar con React?
- ¿Qué es Swagger?
- Principios básicos de React
- Crear un hello world con React
- Instalar React en Visual Studio Code
- Atributos de un elemento React
- Añadir estilos a un elemento React
- React declarativo y JSX
- ¿Qué es Babel?
- Abrir una ventana a JavaScript en React
- 2 excepciones en JSX
- Spread en React
- Componentes en React
- Diferencia entre elemento y componente en React
- Destructuring de componentes en React
- Propiedad children en React
- Crear un reloj en React
- ¿Cómo funciona el Virtual DOM de React?
- Estado en React
- Crear un reloj con botón en React
- Crear un counter en React
- ¿Qué es una función pura en JavaScript?
- Efectos en React
- Estado y ciclo de vida de componentes en React
- ¿Son las clases necesarias para la programación?
- useEffect en React
- ¿Qué es create-react-app en React?
- Crear una aplicación con create-react app
- Código de una apliación creada con create-react-app
- ¿Qué es una SPA en programación?
- Limpiar create-react-app
- ¿Qué es React Developper Tools?
- Estructura básica de un proyecto React
- Crear una página listado en React
- Transformar un array de objetos en enlaces
- Key prop en React
- Traer contenido de una API en React
- Configurar un cliente en Axios
- Crear una función get con un cliente Axios
- Forzar un render en React
- Interceptors para un cliente en React
- Async y await en React
- Estilos en React
- Cargar CSS desde un componente React
- CSS Modules en React
- Etiqueta style en React
- Styled components para React
- 2 herramientas para personalizar styled components
- Estilizar botones con styled components
- Herramienta classNames para React
- Maquetación en React
- Insertar un SVG en React
- Archivo .env en React
- Sobrescribir estilos en React
- Formularios en React
- Crear una página de login en React
- Controlar input en React
- Evento onChange en React
- Unir estados en React
- Automatizar evento onChange en React
- Ejecutar un submit en React
- Actualizar una aplicación de create-react-app
- Evento onSumbit en React
- Formularios como componentes controlados en React
- Input de tipo checkbox en React
- Input de tipo radio y textarea en React
- Select en React
- Input de tipo file en React
- Ejecutar un login en React
- Enviar datos a una API desde React
- Controlar error login en React
- Controlar estado login en React
- Comunicar padres a hijos en React
- Elevar estado en React
- Controlar loading en React
- Tratar error con cliente Axios en React
- Guardar login en React
- Recordar login en React
- Configurar token con cliente Axios en React
- Tipos de input en React
- Crear un sustituto de input en React
- Focus-within en React
- ¿Para qué sirve la librería React Router?
- Ejecutar un logout en React
- Método logout para borrar token en React
- ¿Qué es React Router?
- Navegación estática y navegación dinámica
- Componentes principales de React Router
- Aplicar React Router a una aplicación React
- Declarar rutas con React Router
- Redirigir una ruta con React Router
- Crear una ruta 404 con React Router
- Componentes link y navlink en React Router
- Cómo usar navlink en React Router
- Protección de rutas con React Router
- Hooks en React Router
- Hook useLocation de React Router
- Replace en React Router
- Declarar ruta con ID en React Router
- ¿Qué es hook useParams de React Router y cómo funciona?
- Contexto en React
- useContext en React
- Crear un contexto en React
- ContextConsumer en React
- Cuándo usar contexto en React
- Crear botón con enlace en React
- Anidar rutas con React Router
- Componente outlet de React Router
- Componente fragment en React
- Crear un componente photo en React
- Librería date-fns para React
- Crear un botón de like en React
- Componentes y condicionales en React
- Componente de clase en React
- Declarar estado en un componente clase de React
- ComponentDidMount en React
- Modificar estado desde un componente clase en React
- ComponentDidUpdate en React
- ComponentWillUnmount en React
- 3 librerías para plantillas de componentes
- Programar un nuevo post en React
- Crear un contador de palabras en React
- Las refs y el DOM en React
- Referencias en React
- ¿Para qué sirven las refs en React?
- Modificar una ref en React
- Pasar una ref en React
- Pasar una ref a un componente función en React
- Exponiendo refs en React
- Formularios como componentes no controlados en React
- propTypes en React
- Warning failed prop type en React
- Crear una Ref en React
- Pintar datos de una API en React
- Crear un filtro de búsqueda en React
- Configurar Prettier en Visual Studio Code
- ¿Es necesario hablar inglés como desarrollador web?
- Reglas de los hooks de React
- eslint-plugin para React
- ¿Qué son los custom hooks en React?
- Crear un custom hook de contexto en React
- Custom hooks para mejor legibilidad en React
- useCallback en React
- Array de dependencias en React
- Importancia de useCallback en React
- useMemo en React
- useRef en React
- Pensando en React
- Comando build en create-react-app
- ¿Qué es NGINX?
- Ejecutar un DockerFile en Visual Studio Code
- Diferencia entre JavaScript para servidor y para frontend
- ¿Cómo funciona el inspector web?
- Partes de un navegador
- Modelo vista controlador
- Motores e intérpretes de 5 navegadores
- Crear un hello world en JavaScript
- Cargar JavaScript en HTML
- Live server en Visual Studio Code
- Orden de peticiones en el servidor
- Browser Object Model
- Objeto Window de BOM
- Objeto Navigator de BOM
- Métodos del objeto Window
- Document Object Model
- ¿Cómo entender el DOM desde el inspector?
- Navegar por el árbol del DOM
- Clase Element del DOM
- ¿Qué es un nodo en el DOM?
- Seleccionar nodos del DOM
- Crear elementos en el DOM
- Ubicar elementos creados en el DOM
- Crear un elemento img en el DOM
- Propiedad innerHTML
- ¿Dónde ubicar script en tu código?
- Manipular atributos del DOM
- Manipular estilos y clases CSS en nodos del DOM
- Crear un listado de objetos en JavaScript frontend
- Método appendchild del DOM
- Pintar un array de objetos con el DOM
- Método toISOString de JavaScript
- Eventos en frontend JavaScript
- Manejar eventos in-line en frontend JavaScript
- Manejar eventos imperativos en frontend JavaScript
- querySelector y querySelectorAll
- Funciones anónimas en JavaScript
- Event.target en JavaScript
- Comportamiento por defecto HTML
- Event bubbling en el DOM
- ¿Cómo entender event bubbling?
- Event capturing en el DOM
- Identificar el patrón modelo vista controlador
- Implementar el patrón modelo vista controlador
- ¿Qué hace un controlador en el patrón MVC?
- Nombrar elementos en JavaScript
- Ejecutar el patrón modelo vista controlador
- Import y export en JavaScript
- ¿Cómo asegurar que un elemento esté en el DOM?
- Promesas en frontend JavaScript
- Objeto promise en JavaScript
- Sintaxis de promesas en JavaScript
- Promesas con condición en JavaScript
- Método finally en JavaScript
- Ventajas deI patrón MVC
- Peticiones HTTP con Fetch
- Método parse de JavaScript
- Fetch o Axios
- Evitar la propagación de eventos en el DOM
- 2 utilidades de CSS externas
- ¿Cómo usar sparREST?
- ¿Cómo funciona Postman?
- Traer datos de una API con fetch
- ¿Qué devuelve una petición HTTP con fetch?
- ¿En qué orden se ejecuta una petición fetch?
- Concatenar promesas con fetch
- Diferencia entre promesas y async y await
- Transformar promesas con async y await
- Funciones autoejecutables en JavaScript
- Controlar errores con funciones async y await
- Ejemplo práctico con promesas en JavaScript
- Controlar errores con fetch
- Crear una ruleta de carga con HTML CSS y JavaScript
- Cómo simular errores de conexión en el inspector web
- Método remove de JavaScript
- Propiedad classList de JavaScript
- Crear alertas de error en JavaScript
- Finalizar sentencia try catch en JavaScript
- Clases e instancias en JavaScript
- Crear clases en JavaScript
- ¿Qué es el constructor de una clase en JavaScript?
- Crear un elemento personalizado en frontend
- ¿Por qué aprender las bases de frontend?
- Eliminar una alerta con click en frontend JavaScript
- Estilizar una alerta con CSS
- Patrón de inyección de dependencias
- Desventaja del patrón de inyección de dependencias
- Pubsub vs inyección de dependencias
- Emitir y escuchar mensajes con PubSub
- Implementar patrón PubSub con clase en JavaScript
- ¿Qué es el patrón singleton?
- Controlar mensajes con PubSub
- Ventajas del patrón PubSub
- Crear un índice de eventos en el patrón PubSub
- Métodos suscribe y publish en PubSub
- Desventaja de PubSub
- Crear un formulario de registro en HTML
- Atributo novalidate de HTML
- ¿Qué hace la vista en el patrón MVC?
- Evento DOMContentLoaded
- 6 acciones a ejecutar sobre un formulario de registro
- Atributo required de HTML
- Atributo disabled de HTML
- Escuchar cambios en un input desde JavaScript
- Habilitar botón al rellenar formulario en JavaScript
- ¿Qué devuelve el método querySelectorAll?
- Reemplazar el método every en JavaScript
- Button type submit en HTML
- Evento submit en JavaScript
- Eventos ciclo de vida de una página HTML
- Validar contraseñas en un formulario de registro
- ¿Qué es FormData en JavaScript?
- ¿Qué son las expresiones regulares?
- ¿Cómo levantar sparREST?
- Crear productos en sparREST
- Crear usuario con JavaScript y sparREST
- Enviar datos JSON con fetch
- Login automático después de signup en JavaScript
- ¿Cómo usar el JWT?
- Persistencia de datos en el navegador
- Guardar JWT en localstorage
- Propiedad window.location
- Redirigir una ruta con window.location
- ¿Cómo saber si un usuario ha iniciado sesión?
- Transformar modelo de datos en JavaScript
- Insertar imagen por defecto en JavaScript
- Crear una página detalle en JavaScript
- Enlace con ID en JavaScript
- Interfaz URLSearchParams
- Extensión Peacock de Visual Studio Code
- HTML fallback para una petición sin contenido
- Dar permiso de borrado desde JavaScript
- ¿Qué hay en un JWT?
- Seguridad de un JWT
- Codificar un JWT con JavaScript
- Protección de datos de token jwt
- Decodificar JWT desde JavaScript
- Crear un botón para borrar contenido en frontend
- Método para borrar contenido en frontend
- Cabecera authorization bearer
- ¿Qué son las propiedades de clase?
- ¿Cómo organizar archivos de un proyecto frontend?
- Crear una pantalla de login en HTML
- Aproximación teórica para editar un contenido en frontend
- ¿Qué es el hoisting de JavaScript?
- Rutas de archivos HTML
- Open workspace en Visual Studio Code
- ¿Qué es TypeScript?
