Roadmap Desarrollo web - Javascript en español

CTRL+K

¿Estás empezando o perfeccionándote en el mundo del Desarrollo web? Aquí tienes un roadmap para seguir o descubrir nuevos caminos para avanzar. Algunas tarjetas muestran tecnologías alternativas, mueve la rueda del ratón para verlas.

Diseño y bases

CodePen

Plataforma online para compartir código HTML/CSS/Javascript

Web

CodeSandbox

Plataforma online de código compatible con frameworks JS

Web

Figma

Herramienta colaborativa de diseño y prototipado de interfaces

Web

Penpot

Herramienta colaborativa de diseño y prototipado alternativa a Figma

Web

HTML

Marcado HTML y semántica. Estructura y contenido.

Aprender más

Bootstrap

Framework CSS orientado a maquetar utilizando código HTML

Web

Pico CSS

Framework CSS minimalista orientado a HTML semántico (sin clases)

Web

CSS

Lenguaje de estilos, bases visuales y apariencia estética

Aprender más

Animaciones

Animaciones y transiciones basadas en CSS y/o Javascript

Aprender más

Motion One

Librería de animaciones utilizando la API nativa del navegador

Web

Anime.js

Librería de animaciones CSS y SVG usando Javascript

Web

SVG

Lenguaje de gráficos vectoriales y escalables derivado de HTML

Aprender más

VSCode

Editor de código extensible con plugins y temas visuales

Aprender más

VSCodium

Versión open source de Visual Studio Code sin telemetría de Microsoft

Web

Sublime Text

Editor de texto ultrarápido, con plugins y escrito en Python

Web

Neovim

Editor para terminales de texto, basado en Vim, y extensible con plugins

Web

Tailwind CSS

Framework CSS orientado a maquetar utilizando código HTML y CSS

Web

UnoCSS

Motor de CSS avanzado, atómico, agnóstico y no opinionado

Web

Open Props

Librería con colección de tokens de diseño atómicos y reutilizables

Web

Terminal

Uso de comandos para moverse por una terminal de texto o CLI

Aprender más

Programación

Fundamentos

Bases y fundamentos de programación (ideal para empezar a programar)

Aprender más

Git

Control de versiones y gestión de código del proyecto

Aprender más

Javascript

Popular lenguaje de programación para cliente y servidor

Aprender más

npm

Gestor de paquetes y dependencias Javascript de tu proyecto

Aprender más

pnpm

Alternativa rápida y eficiente al gestor de paquetes npm

Aprender más

yarn

Alternativa a npm para gestionar proyectos y dependencias.

Web

DOM

Estructura HTML modificable desde Javascript dinamicamente

Aprender más

Asincronía

Programación asíncrona mediante promesas en Javascript

Aprender más

GitHub

Repositorio de Git para subir el código de tu proyecto

Web

GitLab

Plataforma de gestión de repositorios de código para tus proyectos

Web

Vite

Herramienta ultrarápida para automatizar tareas de desarrollo

Aprender más

Webpack

Herramienta para automatizar tareas de desarrollo de tu proyecto

Web

ESBuild

Herramienta para crear bundles Javascript de forma ultrarápida

Web

Rollup

Herramienta para crear bundles y especializado en creación de librerías

Web

Gulp

Herramienta para automatizar de forma personalizada tu workflow

Web

Testing y errores

StyleLint

Herramienta de revisión de código CSS para resolver problemas

Web

ESLint

Herramienta de revisión de código Javascript para resolver problemas

Web

Biome

Herramienta ultrarápida de revisión de código Javascript

Web

Prettier

Herramienta de formateo de código Javascript y relacionados

Web

OXC

Colección de herramientas ultrarápidas para Javascript escritas en Rust

Web

Testing Library

Herramientas y utilidades de testing enfocadas en el usuario

Web

Vitest

Framework de testing unitario y componentes alternativo a Jest

Web

Jest

Framework Javascript de testing unitario enfocado en la simplicidad

Web

Typescript

Lenguaje tipado basado en Javascript con mejor detección de errores

Web

Zod

Validación de esquemas con Typescript e inferencia de tipos

Web

Valibot

Validación de esquemas de datos desconocidos con Typescript

Web

Perfeccionamiento

Sass

Herramienta de preprocesado para escribir código CSS

Web

PostCSS

Herramienta de transformación CSS con plugins

Aprender más

LightningCSS

Herramienta de transformación CSS ultrarápida

Web

WebComponents

Componentes nativos con HTML, CSS y Javascript (sin librerías)

Aprender más

Lit

Librería para crear WebComponents de forma más ágil y sencilla

Web

Atomico

Microlibrería para crear WebComponents de forma funcional (hooks)

Web

Despliegue y cloud

GitHub Pages

Despliegue estático de páginas frontend en GitHub

Web

GitLab Pages

Despliegue estático de páginas frontend en GitLab

Web

CloudFlare

Despliegue rápido de páginas estáticas en Cloudflare Pages

Web

Netlify

Plataforma de despliegue de aplicaciones web con Drag and Drop

Web

Vercel

Plataforma de despliegue de aplicaciones web especializada en React

Web

GitHub Actions

Servicio para automatizar workflows de trabajo a la hora de desplegar

Web

Digital Ocean

Plataforma cloud para alojar máquinas VPS con Linux

Web

AWS

Plataforma cloud sofisticada y potente para desplegar infraestructuras

Web

Google Cloud

Plataforma cloud de Google para desplegar sistemas

Web

Azure

Plataforma cloud de Microsoft para desplegar sistemas

Web

Frameworks

Elige el camino a seguir

Enfoque JSX

SolidJS

Librería alternativa a React basada en reactividad y señales

Web

React

Librería para crear interfaces UI creándolo todo con Javascript

Web

Preact

Alternativa rápida y ligera a React utilizando Javascript vanilla

Web

Qwik

Librería alternativa a React enfocada en la velocidad y el rendimiento web

Web

Enfoque plantillas

Vue

Framework Javascript progresivo que sigue filosofía Front-end

Aprender más

Petite Vue

Alternativa ligera a Vue optimizada y centrada en la mejora progresiva

Web

htmx

Framework para crear aplicaciones con un HTML con superpoderes

Web

Alpine

Sistema de plantillas HTML potenciado con atributos HTML

Web

Enfoque todo-en-uno

Angular

Framework Javascript para Front-end que sigue la filosofía Back-end

Web

Ecosistema Svelte

Svelte

Librería/compilador Javascript para Front-end enfocado en la simplicidad

Web

Manejo del estado

Pinia

Gestor de estado simplificado orientado a la nueva generación de Vue

Web

Vuex

Almacén o gestor de estado tradicional (legacy) de Vue 2

Web

NgRx

Gestor de estado reactivo para Angular

Web

Zustand

Gestor de estado agnóstico muy utilizado en React

Web

MobX

Gestor de estado basado en patrones de reactividad para React

Web

Redux

Gestor de estado global centralizado, predecible y mantenible

Web

XState

Gestor de estado Javascript orientado a máquinas de estado

Web

Jotai

Gestor de estado global basado en enfoque atómico y sencillo

Web

NanoStores

Gestor de estado minimalista orientado a estados atómicos

Web

Valtio

Gestor de estado minimalista, flexible y no opinionado.

Web

Exome

Gestor de estado minimalista para gestionar estructuras complejas

Web

Routing

Tanstack Router

Sistema de routing escalable, moderno y agnóstico

Web

React Router

Sistema de routing para cliente basado en ecosistema React

Web

Wouter

Router pequeño y simple para apps creadas en React/Preact

Web

Vue Router

Sistema de enrutado expresivo, configurable y adaptado a Vue.

Web

Kitbag Router

Sistema alternativo de routing para el framework Vue.js

Web

Navigo

Librería simple para hacer routing en cliente con Javascript vanilla

Web

Itty Router

Microrouter para cliente, agnóstico y compatible con Typescript

Web

CSS-in-JS

CSS Modules

Estrategia para aislar código CSS para utilizar junto a Javascript

Web

ecsstatic

Librería CSS-in-JS diseñada para Vite y generada a CSS estático

Web

Emotion

Librería orientada a la composición de estilos CSS en Javascript

Web

Linaria

Librería para escribir CSS en JS y obtener CSS durante la build

Web

Styled Components

Librería para crear componentes estilizados con CSS integrado

Web

Panda CSS

Motor de estilos para generar CSS atómicos compatible con Typescript

Web

Vanilla Extract

Librería de CSS-in-JS usando Typescript como preprocesador

Web

Catálogos de componentes

shadcn/ui

Colección de componentes para copiar y pegar en tu app

Web

Ant Design

Catalogo de componentes de UI para aplicaciones web basadas en React

Web

Material UI

Librería de componentes para React que usa Material Design

Web

PrimeFaces

Librería de componentes de UI para React, Vue o Angular

Web

Shoelace

Librería de componentes de UI basada en WebComponents

Web

Daisy UI

Catálogo de componentes basados en la librería Tailwind CSS

Web

MetaFrameworks

Astro

Framework Javascript orientado a contenido compatible con libs de UI

Web

Eleventy

Framework Javascript orientado a accesibilidad, sencillez y velocidad

Web

Framework de React para escribir aplicaciones Javascript

Web

SvelteKit

Framework de Svelte para escribir aplicaciones rápidas

Web

Nuxt

Framework de Vue para escribir aplicaciones Javascript

Web

Testing en apps

StoryBook

Sandbox para documentar y probar tus componentes de Frontend

Web

Histoire

Alternativa para documentar tus componentes de Vue y Svelte

Web

Playwright

Herramienta Javascript para realizar test end-to-end (e2e) en apps modernas

Web

Puppeteer

Librería Javascript para utilizar Chrome headless (sin UI) para automatizar

Web

Cypress

Crea y automatiza tests en tus aplicaciones web de forma visual

Web

Demos desde cero

En mi canal de Youtube encontrarás demos y ejercicios desde cero:

Cómo hacer una BARRA DE PROGRESO animada desde cero

Efecto Loading con modos de fusión de CSS

Videos de Youtube

En mi canal de Youtube encontrarás videos con conceptos de desarrollo web:

Flex CSS: Alinear, centrar y reordenar elementos

Variables CSS NATIVAS: ¿Qué son y cómo funcionan?

CÓMO hacer la ANIMACIÓN del header de Manz.dev

Grid CSS: Centrar, distribuir y alinear elementos

CSS Cards: Baraja de cartas diseñada sólo con HTML y CSS

Dibujos con CSS

Estos dibujos que tenemos a continuación están hechos con CSS... ¿No te lo crees?

Interfaz (UI) de PCFútbol 2.0 con Javascript y CSS

Nintendo GAMEBOY dibujada con código CSS

Caja Funko Pop dibujada con código CSS / Javascript

Teléfono Alcatel One Touch Easy dibujado con código CSS

Más Dibujos con CSS.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev