Introducción: tu primera página empieza por entender la web
Aprender desarrollo web desde cero puede parecer complicado cuando aparecen nombres como HTML, CSS, JavaScript, servidores o bases de datos. Sin embargo, no necesitas dominar todas esas herramientas para crear tu primera página. Necesitas entender qué hace cada una y avanzar con un proyecto pequeño.
¿Te gustaría crear una web personal, presentar tu negocio o desarrollar una aplicación? Todos esos proyectos comparten unas bases. Conocerlas te ayudará a tomar mejores decisiones y a comprender qué ocurre detrás de lo que ves en el navegador.
En esta primera guía de Websarrolladores descubrirás qué es el desarrollo web, en qué se diferencia del diseño y qué recorrido puedes seguir para empezar a practicar.
Qué es el desarrollo web
El desarrollo web es el trabajo necesario para construir y mantener sitios y aplicaciones que utilizamos mediante un navegador. Incluye organizar contenidos, definir su presentación, programar funciones y, cuando el proyecto lo necesita, gestionar información en un servidor.
Una página de presentación con tus servicios es un proyecto web. También lo son una tienda online, una plataforma de cursos y una aplicación para registrar el mantenimiento de un vehículo. Lo que cambia es su complejidad.
Conviene distinguir dos conceptos:
- Página web: un documento o una vista concreta, como la página de contacto.
- Sitio web: el conjunto de páginas y recursos que forman una web.
Una aplicación web, además, permite realizar tareas e interactuar con datos. Por ejemplo, consultar pedidos o guardar una lista de canciones.
Diseño web y desarrollo web: qué aporta cada uno
El diseño web define cómo se presenta y se utiliza una web: distribución, colores, tipografías, navegación y jerarquía del contenido.
El desarrollo web convierte esas decisiones en una solución que funciona. Construye la estructura, aplica los estilos y programa los comportamientos necesarios.
Imagina la web de una academia. El diseño determina dónde aparece el catálogo y cómo se distingue el botón de inscripción. El desarrollo hace que las páginas se adapten a la pantalla y que, si existe un sistema de matrícula, los datos lleguen al servidor.
Ambas disciplinas se complementan. Una web debe resultar comprensible y permitir que las personas completen sus tareas.
Cómo funciona una web cuando la visitas
Cuando abres una dirección, el navegador solicita recursos al servidor que los aloja. Después interpreta los documentos y el código recibidos para mostrar la página. En una visita real pueden intervenir cachés y otros servicios, pero esta idea permite entender el proceso inicial.
Hay tres términos que encontrarás a menudo:
- Dominio: el nombre utilizado para acceder a una web.
- Hosting o alojamiento: el servicio que proporciona recursos para alojarla y servirla.
- Navegador: el programa con el que consultas e interactúas con la web.
No necesitas contratar un dominio ni un alojamiento para empezar. Puedes crear un archivo HTML en tu ordenador y abrirlo en el navegador. Publicarlo será un paso posterior.
HTML, CSS y JavaScript: las bases del desarrollo web
Estas tres tecnologías cumplen funciones diferentes. Entender su relación es uno de los primeros objetivos al aprender desarrollo web.
HTML: estructura y significado
HTML es un lenguaje de marcado que describe el contenido: títulos, párrafos, enlaces, imágenes, listas o formularios.
Por ejemplo, un encabezado identifica el tema de una sección y un enlace permite acceder a otro recurso. Elegir el elemento adecuado aporta significado; cambiar únicamente el tamaño de un texto no lo convierte en un encabezado.
El curso de HTML de web.dev permite profundizar en la estructura de los documentos y el uso de elementos semánticos.
CSS: presentación y adaptación a las pantallas
CSS es un lenguaje de estilos que controla colores, tipografías, márgenes y distribución. También permite adaptar la presentación al espacio disponible.
Por ejemplo, una lista de servicios puede mostrarse en varias columnas en una pantalla grande y en una sola columna en un móvil. El contenido sigue siendo el mismo, pero cambia su distribución.
El curso de CSS de web.dev explica fundamentos como selectores, cascada y modelo de caja.
JavaScript: lógica e interacción
JavaScript es un lenguaje de programación que permite responder a acciones, trabajar con datos y actualizar partes de una página.
Un ejemplo sería una calculadora que muestra un presupuesto al introducir cantidades. No todas las interacciones requieren JavaScript: un enlace o determinados controles HTML ya funcionan por sí mismos.
Puedes ampliar estas bases en el curso de JavaScript de web.dev.
Frontend y backend: las dos partes de muchos proyectos
El frontend es la parte que funciona en el navegador y con la que interactúa el usuario. En ella intervienen HTML, CSS y JavaScript.
El backend se ejecuta en el servidor. Puede comprobar credenciales, aplicar reglas de negocio, consultar una base de datos o registrar una compra.
En una tienda, el frontend muestra los productos y permite añadirlos al carrito. El backend comprueba datos como precios y disponibilidad antes de confirmar una operación. Las comprobaciones importantes deben realizarse también en el servidor, porque el código del navegador puede modificarse.
Un sitio sencillo puede funcionar sin un backend propio. No necesitas aprender ambas partes al mismo tiempo para comenzar.
En qué orden aprender desarrollo web desde cero
Como recorrido inicial, puedes seguir esta secuencia y volver a cada etapa conforme avances:
- Comprende los conceptos básicos: archivos, carpetas, rutas, navegador y servidor.
- Practica HTML: crea páginas con encabezados, párrafos, enlaces e imágenes.
- Añade CSS: trabaja espaciado, tipografía, colores y distribución.
- Adapta la página a distintas pantallas: comprueba que el contenido se puede leer y utilizar.
- Introduce JavaScript: aprende variables, condiciones, funciones y eventos con ejercicios pequeños.
- Aprende control de versiones: utiliza Git para registrar cambios y recuperar estados anteriores.
- Publica un proyecto sencillo: familiarízate con el alojamiento y la revisión de errores.
Después podrás explorar bases de datos, backend o herramientas como React y Laravel según lo que quieras construir. No hace falta incorporarlas todas al primer proyecto.
Los módulos de introducción de MDN ofrecen un punto de partida para preparar el entorno y construir una primera web.
Tu primer ejercicio: crea una página de presentación
Empieza con un proyecto que puedas terminar: una página sobre ti, tu afición o un negocio imaginario. Incluye un título, una presentación breve, una lista de servicios y un enlace de contacto.
Crea un archivo llamado index.html, comprueba que no termine en .txt y escribe este documento:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi primera página web</title>
</head>
<body>
<main>
<h1>Hola, soy Fran</h1>
<p>Estoy aprendiendo a crear páginas web.</p>
<h2>Lo que quiero aprender</h2>
<ul>
<li>Organizar contenido con HTML.</li>
<li>Diseñar páginas con CSS.</li>
<li>Añadir interactividad con JavaScript.</li>
</ul>
</main>
</body>
</html>Guarda el archivo y ábrelo con el navegador. Después cambia una frase, guarda y recarga la página. Así comprobarás la relación entre el código que escribes y el resultado que aparece en pantalla.
La etiqueta h1 identifica el encabezado principal; p, un párrafo; y ul, una lista sin orden numérico. El atributo lang="es" indica el idioma del documento. La configuración viewport prepara el área de visualización para móviles, aunque la adaptación completa dependerá también del diseño y del CSS.
Accesibilidad: un hábito desde la primera página
La accesibilidad web busca que las personas con discapacidad puedan percibir, comprender, navegar e interactuar con la web.
Desde el principio puedes utilizar encabezados ordenados, escribir enlaces descriptivos, mantener un contraste legible y comprobar que los controles se utilizan con teclado. Cuando añadas imágenes informativas, proporciona un texto alternativo que comunique su función o contenido.
La introducción a la accesibilidad web del W3C explica por qué estas decisiones forman parte de una web usable.
Errores frecuentes al empezar
Uno de los errores más habituales es seguir tutoriales sin modificar los ejemplos. Para aprender, cambia el contenido, prueba otra distribución e intenta reconstruir una parte sin mirar la solución.
También conviene evitar proyectos iniciales demasiado grandes. Una tienda completa puede exigir conocimientos que todavía no has practicado. Una página pequeña permite terminar, revisar y comprender cada parte.
Si utilizas inteligencia artificial para pedir ayuda, solicita explicaciones y comprueba el resultado. Poder generar código no sustituye a entender qué hace ni a verificar que funciona.
Conclusión: empieza con una web pequeña y comprensible
Aprender desarrollo web desde cero comienza con tres bases: HTML para organizar el contenido, CSS para presentarlo y JavaScript para programar comportamientos.
Tu primer objetivo puede ser sencillo: crear una página, abrirla en el navegador y entender cada cambio que realizas. A partir de ahí podrás incorporar herramientas y funciones cuando tu proyecto las necesite.
En Websarrolladores empezamos por los fundamentos y avanzamos con ejemplos que puedas poner en práctica. El primer reto ya está sobre la mesa: crea tu archivo HTML y dale forma a tu primera página.