La parte de la web que todos vemos y tocamos
Cada vez que abres una aplicación web, pulsas un botón, rellenas un formulario o ves cómo un menú se despliega con una animación suave, estás interactuando con el trabajo de un desarrollador frontend. Es la capa de un producto digital que el usuario ve, escucha y manipula directamente, y de su calidad depende en gran medida que una aplicación resulte agradable, rápida y fácil de usar, o frustrante.
El desarrollo frontend es también una de las puertas de entrada más habituales al mundo de la programación. Los resultados son visibles desde el primer día, las herramientas básicas son gratuitas y basta con un navegador y un editor de código para empezar. Sin embargo, el ecosistema ha crecido tanto que muchas personas que se acercan a él se sienten abrumadas por la cantidad de lenguajes, frameworks, librerías y herramientas que aparecen en las ofertas de empleo.
En este artículo vamos a explicar con claridad qué es el desarrollo frontend, en qué se diferencia del backend, qué tecnologías forman su base, qué herramientas conviene conocer hoy y cuáles pueden esperar, y qué pasos concretos dar para conseguir un primer empleo o los primeros clientes como freelance.
Qué hace exactamente un desarrollador frontend
Un desarrollador frontend construye la interfaz de usuario de sitios y aplicaciones web. Su trabajo consiste en transformar un diseño, normalmente creado por un equipo de diseño en herramientas como Figma, en código que el navegador puede interpretar y mostrar.
Pero traducir un diseño a código es solo una parte del trabajo. Entender qué hace un desarrollador frontend en el día a día implica conocer muchas otras responsabilidades:
- Garantizar que la interfaz se adapta a móviles, tabletas, portátiles y monitores grandes.
- Hacer que la aplicación sea accesible para personas con discapacidades visuales, motoras o cognitivas.
- Conectar la interfaz con los servicios del backend para mostrar y enviar datos.
- Gestionar el estado de la aplicación: qué usuario ha iniciado sesión, qué hay en el carrito, qué filtros están activos.
- Optimizar el rendimiento para que la página cargue rápido incluso en conexiones lentas.
- Escribir pruebas que verifiquen que la interfaz funciona como se espera.
- Colaborar con diseñadores, desarrolladores backend, responsables de producto y equipos de calidad.
Tomemos como ejemplo la página de inicio de una tienda en línea. El logotipo, la barra de búsqueda con sugerencias mientras escribes, el carrusel de productos destacados, el contador del carrito que se actualiza al añadir un artículo, el menú que se convierte en un icono de hamburguesa en el móvil y el modo oscuro que respeta la preferencia del sistema son trabajo del equipo de frontend.
Frontend, backend y full stack
Para entender bien el papel del frontend conviene compararlo con el resto de capas de una aplicación.
El frontend se ejecuta en el dispositivo del usuario, normalmente en el navegador. Se encarga de la presentación y la interacción.
El backend se ejecuta en servidores. Gestiona la lógica de negocio, la autenticación, el acceso a bases de datos, el procesamiento de pagos y la comunicación con otros servicios. Se programa con lenguajes como Python, Java, Go, C#, PHP o el propio JavaScript con Node.js.
Ambos se comunican a través de APIs, generalmente mediante peticiones HTTP que intercambian datos en formato JSON:
// El frontend solicita al backend los productos de una categoría
const respuesta = await fetch("/api/productos?categoria=cafeteras");
const productos = await respuesta.json();
console.log(productos[0]);
{ id: 812, nombre: 'Cafetera italiana 6 tazas', precio: 34.9, stock: 12 }
Un desarrollador full stack trabaja en ambas capas. En la práctica, la frontera se ha difuminado en los últimos años: frameworks como Next.js, Nuxt, SvelteKit, Remix o Astro permiten ejecutar parte del código en el servidor, y muchos desarrolladores frontend escriben hoy rutas de API, componentes de servidor y funciones que se ejecutan en el edge. Aun así, la especialización en la experiencia de usuario sigue siendo el núcleo del perfil frontend.
HTML: la estructura y el significado
HTML, HyperText Markup Language, es el lenguaje que define la estructura del contenido de una página: títulos, párrafos, listas, enlaces, imágenes, formularios, tablas y botones. No es un lenguaje de programación en sentido estricto, sino un lenguaje de marcado.
Un error frecuente al empezar es pensar que HTML es solo una forma de colocar cosas en pantalla. En realidad, su función principal es dar significado al contenido. Usar la etiqueta adecuada para cada cosa, lo que se conoce como HTML semántico, ayuda a los lectores de pantalla, a los motores de búsqueda y a los propios desarrolladores que mantendrán el código:
<header>
<a href="/" class="logo">Cafetería Aroma</a>
<nav aria-label="Principal">
<ul>
<li><a href="/carta">Carta</a></li>
<li><a href="/reservas">Reservas</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Nuestro café de temporada</h1>
<p>Un lote de Colombia con notas de panela y frutos rojos.</p>
<img
src="cafe-temporada.webp"
alt="Taza de café filtrado sobre una mesa de madera"
width="800"
height="533"
/>
<button type="button">Añadir al pedido</button>
</article>
</main>
<footer>
<p>Abierto de lunes a sábado, de 8:00 a 20:00.</p>
</footer>
Etiquetas como header, nav, main, article y footer describen el papel de cada bloque. Un botón real, creado con la etiqueta button, es accesible con el teclado y anunciado correctamente por los lectores de pantalla, algo que un div con un evento de clic no consigue sin trabajo adicional.
HTML no debe usarse para dar estilo. Las antiguas etiquetas de presentación, como font o center, están obsoletas desde hace muchos años. El aspecto visual es responsabilidad de CSS.
CSS: diseño, maquetación y adaptación a cualquier pantalla
CSS, Cascading Style Sheets, controla la presentación: colores, tipografías, espaciados, maquetación, animaciones y adaptación a distintos tamaños de pantalla.
:root {
--color-marca: #6b3e26;
--color-fondo: #fffaf5;
--radio: 0.75rem;
}
body {
font-family: system-ui, sans-serif;
background: var(--color-fondo);
line-height: 1.6;
margin: 0;
}
.tarjeta {
display: grid;
gap: 1rem;
padding: 1.5rem;
border-radius: var(--radio);
box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
}
button {
background: var(--color-marca);
color: white;
border: 0;
padding: 0.75rem 1.25rem;
border-radius: var(--radio);
cursor: pointer;
transition: transform 0.15s ease;
}
button:hover {
transform: translateY(-2px);
}
CSS moderno es mucho más potente que hace unos años. Flexbox y Grid resuelven la maquetación que antes requería trucos, las propiedades personalizadas permiten crear sistemas de diseño coherentes, el anidamiento nativo evita muchas de las razones por las que se usaban preprocesadores, y las consultas de contenedor permiten que los componentes se adapten al espacio disponible.
El diseño responsive, que la interfaz funcione en cualquier dispositivo, es hoy un requisito básico. La mayoría del tráfico web procede de móviles, por lo que la práctica habitual es diseñar primero para pantallas pequeñas y ampliar después:
.productos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1.5rem;
}
@media (prefers-color-scheme: dark) {
:root {
--color-fondo: #1c1410;
}
}
JavaScript: la interactividad
JavaScript es el lenguaje de programación del navegador. Mientras HTML y CSS describen qué hay en la página y cómo se ve, JavaScript define cómo se comporta: qué ocurre al pulsar un botón, cómo se validan los formularios, cómo se cargan datos sin recargar la página o cómo se actualiza la interfaz cuando cambia algo.
Un ejemplo clásico es el menú que se abre y se cierra al pulsar un botón en el móvil:
<button
type="button"
class="menu-boton"
aria-expanded="false"
aria-controls="menu"
>
Menú
</button>
<nav id="menu" hidden>
<a href="/carta">Carta</a>
<a href="/reservas">Reservas</a>
</nav>
const boton = document.querySelector(".menu-boton");
const menu = document.querySelector("#menu");
boton.addEventListener("click", () => {
const abierto = boton.getAttribute("aria-expanded") === "true";
boton.setAttribute("aria-expanded", String(!abierto));
menu.hidden = abierto;
});
El atributo aria-expanded informa a los lectores de pantalla de si el menú está abierto o cerrado, un pequeño detalle que marca la diferencia en accesibilidad.
JavaScript ha evolucionado mucho y cada año incorpora nuevas características al estándar. Conviene dominar los fundamentos antes de saltar a cualquier framework: variables y tipos, funciones, objetos y arrays, el DOM, los eventos, las promesas y async/await, los módulos y la gestión de errores. Todo lo que hacen los frameworks se construye sobre esas bases.
Además del navegador, JavaScript se ejecuta en servidores con Node.js, Deno o Bun, en aplicaciones móviles con React Native, en aplicaciones de escritorio con Electron o Tauri, y en multitud de herramientas de desarrollo.
TypeScript: el estándar de facto en proyectos profesionales
En los últimos años, TypeScript se ha convertido en una pieza casi obligatoria en el frontend profesional. Es un superconjunto de JavaScript que añade tipos estáticos, lo que permite detectar muchos errores antes de ejecutar el código y mejora enormemente el autocompletado de los editores:
interface Producto {
id: number;
nombre: string;
precio: number;
stock: number;
}
function formatearPrecio(producto: Producto): string {
return new Intl.NumberFormat("es-ES", {
style: "currency",
currency: "EUR",
}).format(producto.precio);
}
formatearPrecio({ id: 1, nombre: "Molinillo", precio: 49.9, stock: 3 });
Si intentas pasar un objeto al que le falta una propiedad o en el que el precio es un texto, el editor lo marcará como error inmediatamente. La mayoría de ofertas de empleo frontend actuales piden TypeScript, y los principales frameworks lo integran de serie. Lo recomendable es aprender JavaScript primero y dar el salto a TypeScript cuando te sientas cómodo con los fundamentos.
Frameworks y librerías de JavaScript
A medida que una aplicación crece, mantener sincronizados los datos y la interfaz manualmente se vuelve complejo. Los frameworks y librerías de JavaScript resuelven este problema organizando la interfaz en componentes reutilizables que se actualizan automáticamente cuando cambian sus datos.
React sigue siendo la librería más demandada en el mercado laboral. Su versión estable actual es la 19.3, y el React Compiler, que optimiza automáticamente los componentes, alcanzó ya su versión 1.0. Un componente de React se ve así:
import { useState } from "react";
export function ContadorTazas() {
const [tazas, setTazas] = useState(0);
return (
<div className="tarjeta">
<p>Tazas servidas hoy: {tazas}</p>
<button onClick={() => setTazas(tazas + 1)}>Servir otra</button>
</div>
);
}
Angular, mantenido por Google, es un framework completo con enrutado, formularios, inyección de dependencias y herramientas de pruebas integradas. Su versión actual es la 22, y en los últimos años ha adoptado las señales como modelo reactivo y los componentes independientes sin módulos. Es muy habitual en grandes empresas y en el sector financiero.
Vue destaca por su curva de aprendizaje suave y su excelente documentación, y es especialmente popular en Europa y Asia. Svelte compila los componentes en JavaScript muy eficiente y ha ganado adeptos por su sintaxis concisa. Solid, Qwik y Preact completan un ecosistema variado.
Sobre estas librerías se construyen los metaframeworks, que añaden enrutado, renderizado en el servidor y generación estática: Next.js, cuya versión actual es la 16, para React; Nuxt para Vue; SvelteKit para Svelte; y Astro, muy usado para sitios de contenido, que es compatible con componentes de varios frameworks.
La recomendación más útil es no intentar aprenderlos todos. Revisa las ofertas de empleo de tu zona o del mercado al que quieras optar, identifica cuál aparece con más frecuencia y profundiza en él. Los conceptos, como componentes, propiedades, estado y efectos, se transfieren de uno a otro con facilidad.
Frameworks de CSS y preprocesadores
Del mismo modo que existen frameworks para JavaScript, hay herramientas que aceleran la escritura de estilos.
Tailwind CSS, actualmente en su versión 4, es el framework de CSS más popular en proyectos nuevos. En lugar de escribir hojas de estilo, se aplican clases de utilidad directamente en el HTML:
<article class="grid gap-4 rounded-xl p-6 shadow-md">
<h2 class="text-xl font-bold text-amber-900">Espresso doble</h2>
<p class="text-stone-600">
Intenso y con cuerpo, servido en taza precalentada.
</p>
<button
class="rounded-lg bg-amber-800 px-4 py-2 text-white hover:bg-amber-900"
>
Pedir
</button>
</article>
Bootstrap sigue muy presente, sobre todo en paneles de administración y proyectos corporativos, gracias a su colección de componentes listos para usar. Otras opciones son Bulma o librerías de componentes accesibles como shadcn/ui, Radix, Headless UI o Material UI, que proporcionan piezas complejas como diálogos, menús desplegables o selectores de fecha ya resueltos.
Los preprocesadores, como Sass y Less, añaden variables, anidamiento, funciones y mezclas al CSS. Fueron imprescindibles durante años, pero CSS nativo ha incorporado muchas de sus funcionalidades, como las variables y el anidamiento. Sass sigue siendo común en proyectos existentes, por lo que conviene conocerlo, aunque ya no es un requisito para empezar.
Igual que con JavaScript, aprende primero CSS puro. Un framework te hará más productivo, pero cuando algo no se vea como esperas necesitarás entender qué está ocurriendo por debajo.
Herramientas del día a día
Además de los lenguajes, un desarrollador frontend trabaja a diario con un conjunto de herramientas.
El editor de código más extendido es Visual Studio Code, aunque los IDE de JetBrains, como WebStorm, y editores como Zed o Neovim también tienen muchos usuarios. Los asistentes de programación con inteligencia artificial se han integrado en casi todos ellos y forman ya parte del flujo de trabajo habitual, aunque conviene revisar siempre el código que proponen.
Node.js y un gestor de paquetes, como npm, pnpm o Yarn, son necesarios para instalar dependencias y ejecutar herramientas de desarrollo. La rama de soporte a largo plazo activa de Node.js es la 24. Vite se ha convertido en la herramienta de desarrollo y empaquetado de referencia para la mayoría de proyectos:
npm create vite@latest cafeteria-aroma -- --template react-ts
cd cafeteria-aroma
npm install
npm run dev
cafeteria-aroma
├── index.html
├── package.json
├── public
├── src
│ ├── App.tsx
│ ├── main.tsx
│ └── assets
├── tsconfig.json
└── vite.config.ts
Las herramientas de desarrollo del navegador son imprescindibles para inspeccionar elementos, depurar JavaScript, analizar peticiones de red y medir el rendimiento. Y herramientas como ESLint, Biome o Prettier mantienen el código limpio y con un formato coherente en todo el equipo.
Control de versiones con Git
Git es el sistema de control de versiones estándar en la industria. Registra cada cambio que se hace en el código, permite volver a versiones anteriores y hace posible que varias personas trabajen sobre el mismo proyecto sin pisarse. GitHub, GitLab y Bitbucket son las plataformas más usadas para alojar repositorios y colaborar mediante solicitudes de integración.
Un flujo de trabajo típico es crear una rama para cada tarea, hacer commits con mensajes descriptivos y abrir una pull request para que el equipo revise los cambios:
git switch -c feature/selector-de-tamano
git add src/components/SelectorTamano.tsx
git commit -m "Añade selector de tamaño de taza al detalle de producto"
git push -u origin feature/selector-de-tamano
Dominar Git es una de las habilidades que más diferencian a un candidato preparado para trabajar en equipo. Además, tener tus proyectos en GitHub sirve como portafolio público que los reclutadores pueden revisar.
Accesibilidad, rendimiento y SEO
Tres aspectos que separan una interfaz correcta de una excelente, y que cada vez más empresas exigen.
La accesibilidad consiste en que cualquier persona pueda usar la aplicación, incluidas quienes utilizan lectores de pantalla, navegan solo con teclado, tienen baja visión o daltonismo. Las pautas WCAG son la referencia internacional, y en muchos países la accesibilidad ya es una obligación legal; en la Unión Europea, por ejemplo, la Ley Europea de Accesibilidad se aplica a numerosos productos y servicios digitales desde junio de 2025. Practicar la accesibilidad web desde el principio es mucho más barato que corregirla al final:
<label for="correo">Correo electrónico</label>
<input id="correo" type="email" autocomplete="email" required />
<img
src="grafico-ventas.png"
alt="Las ventas crecieron un 18 % en el tercer trimestre"
/>
<button type="button" aria-label="Cerrar diálogo">✕</button>
El rendimiento afecta directamente a la experiencia y a los resultados de negocio. Google mide la experiencia de carga con las métricas Core Web Vitals: LCP, el tiempo que tarda en mostrarse el elemento principal; INP, la rapidez de respuesta a las interacciones; y CLS, la estabilidad visual. Optimizar imágenes, cargar el JavaScript estrictamente necesario y reservar espacio para los elementos que se cargan después son prácticas básicas.
El SEO técnico, por último, consiste en que los motores de búsqueda puedan rastrear e interpretar correctamente la página: HTML semántico, títulos y descripciones adecuados, URLs limpias y contenido que se pueda leer sin depender exclusivamente de JavaScript.
Pruebas y depuración
Depurar es encontrar y corregir errores. Todo desarrollador pasa una parte importante de su tiempo haciéndolo, y la herramienta principal son las herramientas de desarrollo del navegador, que permiten poner puntos de interrupción, inspeccionar variables y seguir la ejecución paso a paso:
function calcularTotal(lineas) {
debugger; // la ejecución se detiene aquí si las herramientas están abiertas
return lineas.reduce(
(total, linea) => total + linea.precio * linea.cantidad,
0
);
}
Las pruebas son código que verifica automáticamente que otro código funciona. En frontend se combinan pruebas unitarias, que comprueban funciones aisladas; pruebas de componentes, que verifican que una pieza de la interfaz se comporta correctamente; y pruebas de extremo a extremo, que simulan a un usuario real navegando por la aplicación. Vitest, Testing Library y Playwright son las herramientas más usadas hoy:
import { describe, it, expect } from "vitest";
import { calcularTotal } from "./carrito";
describe("calcularTotal", () => {
it("suma precio por cantidad de cada línea", () => {
const lineas = [
{ precio: 2.5, cantidad: 2 },
{ precio: 4, cantidad: 1 },
];
expect(calcularTotal(lineas)).toBe(9);
});
});
✓ src/carrito.test.js (1 test)
✓ calcularTotal > suma precio por cantidad de cada línea
Test Files 1 passed (1)
Tests 1 passed (1)
Resolver problemas: la habilidad más importante
Por encima de cualquier lenguaje o framework, la habilidad que más valoran los equipos es la capacidad de resolver problemas. Las herramientas cambian cada pocos años; la forma de enfrentarse a un problema desconocido es lo que permanece.
Resolver problemas significa descomponer una tarea grande en piezas pequeñas y manejables, formular hipótesis cuando algo falla, comprobarlas una a una y saber buscar información de forma eficaz en la documentación oficial, en los mensajes de error y en las comunidades de desarrolladores.
Un ejemplo práctico: si te piden un buscador con filtros, en lugar de enfrentarte a todo a la vez puedes dividirlo en mostrar la lista de productos, filtrar por texto, añadir filtros por categoría, combinar ambos filtros, mostrar un mensaje cuando no hay resultados y, por último, conservar los filtros en la URL. Cada paso es pequeño y verificable.
La práctica constante con proyectos propios es la mejor forma de desarrollar esta habilidad. Cada error que resuelves por tu cuenta te prepara para el siguiente.
Cómo conseguir tu primer trabajo como desarrollador frontend
Aprender las tecnologías es solo la mitad del camino. La otra mitad es demostrar que sabes usarlas y llegar a las personas que contratan.
El portafolio es tu carta de presentación. Más que muchos proyectos pequeños sacados de tutoriales, conviene tener tres o cuatro proyectos propios, completos y publicados, que resuelvan problemas reales, con un código limpio en GitHub y un archivo README que explique qué hace cada uno, qué tecnologías usa y qué decisiones tomaste. Un proyecto accesible, responsive, con pruebas y buen rendimiento dice mucho más que una lista de tecnologías en el currículum.
El currículum debe ser breve, claro y orientado a resultados. Si vienes de otra profesión, destaca las habilidades transferibles, como la comunicación, la gestión de proyectos o el conocimiento de un sector concreto, que pueden ser una ventaja frente a otros candidatos.
Las entrevistas técnicas para puestos frontend suelen combinar preguntas sobre fundamentos de JavaScript, CSS y el framework que use la empresa, ejercicios prácticos de construir un componente o consumir una API, y en algunas compañías problemas de algoritmos. Practicar explicando en voz alta tu razonamiento mientras programas es tan importante como resolver el ejercicio.
El networking sigue siendo una de las vías más eficaces para encontrar empleo. Participar en comunidades locales y en línea, asistir a encuentros técnicos, contribuir a proyectos de código abierto y mantener un perfil profesional actualizado en LinkedIn multiplican las oportunidades. Muchas ofertas se cubren por recomendación antes de publicarse.
El trabajo freelance es otra vía de entrada. Crear sitios para pequeños negocios de tu entorno te da experiencia real, ingresos y proyectos para el portafolio. Para tener éxito, aprende a redactar propuestas claras con alcance, plazos y precio bien definidos, y a gestionar las expectativas del cliente.
Errores comunes al aprender frontend
Hay una serie de tropiezos que se repiten en casi todas las personas que empiezan, y conocerlos ahorra mucho tiempo.
El primero es saltar a un framework sin dominar los fundamentos. Quien aprende React sin entender JavaScript se bloquea en cuanto aparece un problema que no está en el tutorial.
El segundo es el llamado infierno de los tutoriales: encadenar cursos sin construir nada propio. Los tutoriales dan una falsa sensación de progreso; el aprendizaje real ocurre cuando te enfrentas a un proyecto sin instrucciones.
El tercero es intentar aprenderlo todo a la vez. El ecosistema es enorme y cambia constantemente. Céntrate en una ruta, HTML, CSS, JavaScript, Git, un framework y TypeScript, y amplía cuando la domines.
El cuarto es ignorar la accesibilidad y el diseño responsive hasta el final. Son mucho más fáciles de incorporar desde el principio que de añadir a posteriori.
El quinto es no leer la documentación oficial. La documentación de MDN para HTML, CSS y JavaScript, y la oficial de cada framework, es casi siempre la fuente más fiable y actualizada.
Y el sexto es copiar código, venga de un foro o de un asistente de inteligencia artificial, sin entenderlo. Estas herramientas son aliadas excelentes, pero tú eres responsable del código que entregas.
Una ruta de aprendizaje realista
Para quien empieza desde cero, este orden suele funcionar bien:
- HTML semántico y formularios.
- CSS: modelo de caja, Flexbox, Grid y diseño responsive.
- JavaScript: fundamentos, DOM, eventos,
fetchyasync/await. - Git y GitHub.
- Proyectos propios con HTML, CSS y JavaScript sin frameworks.
- Un framework, elegido según la demanda de tu mercado.
- TypeScript.
- Pruebas, accesibilidad y rendimiento.
- Un metaframework como Next.js, Nuxt o SvelteKit.
No hay un plazo universal. Depende del tiempo que puedas dedicar, de tu experiencia previa y de tus objetivos. Lo importante es la constancia y construir proyectos en cada etapa.
Conclusiones
El desarrollo frontend es la disciplina que convierte diseños e ideas en interfaces web que las personas pueden usar. Va mucho más allá de colocar elementos en pantalla: incluye la adaptación a cualquier dispositivo, la accesibilidad, el rendimiento, la integración con el backend, la gestión del estado y las pruebas.
Su base sigue siendo la misma que hace años: HTML para la estructura y el significado, CSS para la presentación y JavaScript para la interactividad. Sobre ella se construye un ecosistema amplio en el que TypeScript se ha consolidado como estándar profesional, React, Angular, Vue y Svelte dominan la construcción de interfaces, y herramientas como Vite, Tailwind CSS, Git y los frameworks de pruebas forman parte del trabajo diario.
No hace falta dominarlo todo. Lo más eficaz es construir unos fundamentos sólidos, elegir las herramientas según la demanda real del mercado y aprender construyendo proyectos propios. La capacidad de resolver problemas, más que cualquier tecnología concreta, es lo que permite adaptarse a un sector que cambia constantemente.
Por último, conseguir el primer empleo requiere tanto habilidades técnicas como visibilidad: un portafolio con proyectos reales, un currículum claro, preparación para las entrevistas y una red de contactos en la comunidad. Con constancia y práctica, el frontend es una de las vías más accesibles y gratificantes para empezar una carrera en tecnología.