≡En resumen
- El front-end es todo lo que el usuario ve y toca: textos, botones, formularios, menús y animaciones.
- Se construye con HTML, CSS y JavaScript, casi siempre apoyados en frameworks como React, Vue o Angular.
- El back-end trabaja en el servidor; el front-end le pide datos y los presenta de forma usable.
- Un buen front-end mejora las Core Web Vitals (LCP, INP y CLS), la accesibilidad y la conversión.
- Cuando alguien dice «el front» en un equipo de desarrollo se refiere a esta capa o al equipo que la programa.
01 ¿Qué es el front-end (o «el front»)?
El término viene del inglés front (parte delantera) y end (extremo): el extremo del sistema que queda de cara al usuario. No figura en el Diccionario de la lengua española, así que en textos formales se usa interfaz, parte del cliente o capa de presentación. En el día a día de los equipos se acorta a «el front», y también designa a quien lo programa: «eso lo tiene que tocar el front».
Verás las tres grafías: front-end, front end y frontend. Las tres son correctas en la práctica; la forma con guion es la más habitual en documentación técnica.
02 Tecnologías del front-end: HTML, CSS, JavaScript y frameworks
Todo front-end web se apoya en tres lenguajes que interpreta el navegador. El HTML define qué hay en la página, las hojas de estilo CSS deciden cómo se ve y JavaScript añade el comportamiento.
| Tecnología | Función | Ejemplo |
|---|---|---|
| HTML | Estructura y significado del contenido | Un título, un párrafo, un formulario de contacto |
| CSS | Presentación: colores, tipografía, maquetación, adaptación a móvil | El botón es verde y ocupa todo el ancho en pantallas pequeñas |
| JavaScript | Interacción y datos en tiempo real | Validar el formulario o cargar más productos sin recargar la página |
React
Biblioteca de Meta para construir interfaces con componentes. Es la más extendida y la base de frameworks como Next.js.
Vue
Framework progresivo, fácil de incorporar poco a poco a una web existente. Nuxt es su framework de aplicaciones.
Angular
Framework completo de Google con TypeScript, muy presente en aplicaciones corporativas grandes.
Svelte
Compila los componentes a JavaScript mínimo, lo que reduce el código que descarga el navegador.
66 %
de los desarrolladores usa JavaScript
Fuente: Stack Overflow Developer Survey 2025
61,9 %
usa HTML/CSS
Fuente: Stack Overflow Developer Survey 2025
44,7 %
usa React, el framework web de front-end más citado
Fuente: Stack Overflow Developer Survey 2025
03 Diferencia entre front-end y back-end
Son las dos mitades de casi cualquier aplicación. El front-end pide información y la presenta; el back-end la guarda, la procesa y aplica las reglas de negocio. Se comunican mediante peticiones HTTP a una API. Tienes una comparación más amplia en frontend y backend explicados con ejemplos.
| Criterio | Front-end | Back-end |
|---|---|---|
| Dónde se ejecuta | Navegador o dispositivo del usuario | Servidor o nube |
| Qué hace | Muestra la interfaz y recoge las acciones del usuario | Procesa datos, aplica reglas, guarda información |
| Lenguajes típicos | HTML, CSS, JavaScript, TypeScript | PHP, Python, Java, Node.js, Go, C# |
| Herramientas | React, Vue, Angular, Vite | Laravel, Django, Spring, Express, bases de datos SQL |
| Se nota cuando falla | Botones que no responden, diseño roto en móvil | Errores 500, datos que no se guardan, pagos que fallan |
La frontera no siempre es nítida. Con el renderizado en el servidor (SSR), frameworks como Next.js o Nuxt generan el HTML en el servidor y luego lo «hidratan» con JavaScript en el navegador, de modo que el mismo código de front-end se ejecuta en los dos lados. Con el renderizado en el cliente (CSR), el servidor envía una página casi vacía y es el navegador quien la construye. Para SEO suele convenir que el contenido importante llegue ya en el HTML inicial, porque los buscadores lo procesan antes y con menos riesgo.
04 Qué hace un desarrollador front-end
El desarrollador front-end convierte un diseño en una interfaz que funciona en cualquier navegador y tamaño de pantalla. Trabaja a medio camino entre el diseñador y el equipo de back-end, y comparte muchas decisiones con el diseño UX/UI del producto.
- ✓Maquetar diseños de Figma u otras herramientas con HTML semántico y CSS adaptable (responsive).
- ✓Programar la interacción con JavaScript o TypeScript y un framework de componentes.
- ✓Conectar la interfaz con las API del back-end y gestionar estados de carga y error.
- ✓Cuidar la accesibilidad: navegación con teclado, contraste, textos alternativos y etiquetas de formulario.
- ✓Optimizar el rendimiento: peso de imágenes, código que se descarga y bloqueos del renderizado.
- ✓Probar en distintos navegadores y dispositivos y escribir tests de la interfaz.
05 Por qué el front-end importa para el SEO y la conversión
Google mide la experiencia de página con las Core Web Vitals, y las tres dependen sobre todo del front-end: cuánto tarda en aparecer el contenido principal, cuánto tarda la página en reaccionar a un clic y si los elementos se mueven mientras carga. Desde el 12 de marzo de 2024, INP sustituye a FID como métrica de interactividad.
| Métrica | Qué mide | Umbral bueno | Culpable habitual en el front |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Carga del elemento principal | ≤ 2,5 s | Imágenes pesadas, fuentes o CSS que bloquean |
| INP (Interaction to Next Paint) | Respuesta a las interacciones | ≤ 200 ms | Demasiado JavaScript ejecutándose a la vez |
| CLS (Cumulative Layout Shift) | Estabilidad visual | ≤ 0,1 | Imágenes sin dimensiones, banners que empujan el contenido |
06 Ejemplos de front-end en webs y apps
El calendario desplegable, el autocompletado de aeropuertos y los filtros de precio son front-end. Cuando pulsas «Buscar», el front envía la consulta a una API; el back-end consulta tarifas y devuelve los resultados, que el front pinta como tarjetas ordenables.
Web corporativa
Cabecera, menú, secciones de servicios y formulario de contacto maquetados y adaptados a móvil.
Panel de administración
Tablas con filtros, gráficos y formularios que leen y escriben datos a través de una API.
App móvil
Las pantallas de una app hecha con React Native o Flutter son su front-end; el servidor sigue siendo el back.
Web app o PWA
Aplicaciones que funcionan en el navegador, se pueden instalar y a veces trabajan sin conexión.
07 Cómo empezar en el front-end
-
1
HTML semántico
Aprende a estructurar una página con encabezados, listas, formularios y etiquetas con significado.
-
2
CSS moderno
Domina Flexbox, Grid, variables CSS y diseño adaptable antes de pasar a frameworks de estilos.
-
3
JavaScript
Manipulación del DOM, eventos, fetch para pedir datos y módulos. Después, TypeScript.
-
4
Un framework
Elige uno (React es el más demandado) y construye proyectos pequeños completos.
-
5
Herramientas
Git, npm, un empaquetador como Vite y las herramientas de desarrollo del navegador.
-
6
Rendimiento y accesibilidad
Mide con Lighthouse y PageSpeed Insights y revisa las pautas WCAG.
Preguntas frecuentes sobre Front-end
Es la forma corta de front-end: la parte de una aplicación que se ejecuta en el navegador o dispositivo del usuario y que él ve y usa. También se llama así al equipo o la persona que la programa.
Literalmente, «extremo frontal». En español se traduce como interfaz, parte del cliente o capa de presentación, aunque en el sector se usa el término en inglés.
El front-end es la interfaz que ve el usuario y se ejecuta en su navegador; el back-end funciona en el servidor, procesa los datos y aplica la lógica de negocio. Se comunican a través de una API.
HTML para la estructura, CSS para el diseño y JavaScript (o TypeScript) para la interacción. Encima se suelen usar frameworks como React, Vue, Angular o Svelte.
Convierte diseños en interfaces funcionales, adaptables y accesibles, las conecta con las API del back-end y optimiza su rendimiento en navegadores y dispositivos.
Sí. Las Core Web Vitals, el HTML semántico, el contenido que se renderiza y la versión móvil dependen del front-end y son señales que Google tiene en cuenta.
Las tres formas se usan. Front-end con guion es la más habitual en documentación técnica; frontend junto es frecuente en ofertas de empleo.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗