Desarrollo Web con HTML, CSS y JavaScript para Principiantes

Siempre me ha fascinado cómo puedes controlar un proyecto físico, como un robot o unas luces, desde una página web que funciona en tu móvil o en el ordenador. Es el puente perfecto entre el mundo digital y el hardware que tanto nos gusta tocar. Si alguna vez has pensado en crear esas interfaces, estás en el sitio correcto. Hoy te voy a guiar por los cimientos de todo: el desarrollo web con HTML, CSS y JavaScript para principiantes. Olvídate de cursos interminables, vamos a construir algo práctico desde ya.

¿Qué vamos a construir hoy?

Para que esto no sea un tutorial aburrido y teórico, vamos a crear un mini-proyecto: un "Panel de Control Maker". Será una página web sencilla pero funcional que simula el control de un LED. Tendrá un título, un indicador de estado (APAGADO/ENCENDIDO) y un botón para cambiarlo. Con esto aprenderás los tres pilares de la web y cómo se relacionan entre sí:

HTML: Será el esqueleto, la estructura de nuestra página. Pondrá el título, el párrafo del estado y el botón.
CSS: Se encargará de la apariencia. Le daremos colores, cambiaremos la fuente y centraremos los elementos para que no parezca una página de los años 90.
JavaScript: Le dará la vida. Haremos que al pulsar el botón, el estado del LED cambie de verdad en la pantalla.

Al final, tendrás una base sólida para empezar a crear tus propias interfaces para proyectos, tu portfolio personal o cualquier idea que tengas en mente.

Las herramientas que necesitas (son gratis)

La barrera de entrada para el desarrollo web es prácticamente cero. No necesitas material caro ni software de pago. Solo dos cosas:

Un navegador web: Cualquiera moderno te sirve. Chrome, Firefox, Edge, el que más te guste. Lo usaremos para ver el resultado de nuestro código.
Un editor de código: Aunque podrías usar el bloc de notas, no te lo recomiendo. Un buen editor te ayuda con colores, autocompletado y detección de errores. Mi recomendación personal, y la de millones de desarrolladores, es Visual Studio Code. Es gratuito, muy versátil y tienes una comunidad enorme detrás. Si no lo tienes, aquí te explico qué es y cómo instalar Visual Studio Code.

Paso a paso: Tu primera página web interactiva

Vamos al lío. Sigue estos pasos y verás qué fácil es tener algo funcionando en pocos minutos.

1. Prepara tu espacio de trabajo

El orden es fundamental para no volverse loco. Crea una carpeta en tu ordenador donde quieras. Llámala como prefieras, por ejemplo, "MiPrimeraWeb".

Dentro de esa carpeta, crea tres archivos vacíos:

index.html
styles.css
script.js

Esta es la estructura clásica. El archivo .html contendrá la estructura, el .css los estilos y el .js la interactividad. Ahora, abre la carpeta completa con Visual Studio Code (Archivo > Abrir carpeta...).

2. El esqueleto con HTML (index.html)

El HTML (HyperText Markup Language) define el contenido y su estructura semántica. Piensa en él como los cimientos y las paredes de una casa. Abre tu archivo index.html y pega el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panel de Control Maker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Mi Panel de Control</h1>
    </header>
    <main>
        <div class="control-widget">
            <h2>Control LED 1</h2>
            <p>Estado: <span id="led-status">APAGADO</span></p>
            <button id="toggle-button">Encender / Apagar</button>
        </div>
    </main>
    <footer>
        <p>Creado en dorcu.com</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Un repaso rápido de lo que hemos puesto:

<!DOCTYPE html>: Le dice al navegador que usamos HTML5.
<head>: Contiene metadatos. Lo importante aquí es el <title> (lo que ves en la pestaña del navegador) y el <link> que conecta nuestro archivo CSS.
<body>: Aquí va todo el contenido visible de la página.
<h1>, <h2>, <p>: Son etiquetas para títulos y párrafos.
class="control-widget" y id="led-status": Son identificadores que usaremos luego en CSS y JavaScript para apuntar a estos elementos concretos. Una class puede usarse en varios elementos, un id debe ser único en toda la página.
<script src="script.js"></script>: Justo antes de cerrar el </body>, cargamos nuestro archivo JavaScript. Lo ponemos al final para asegurarnos de que todo el HTML se ha cargado antes de que el script intente manipularlo.

Si ahora guardas este archivo y lo abres con tu navegador (doble clic en el archivo), verás el contenido sin ningún estilo. Funcional, pero feo. Vamos a arreglarlo.

3. Dando color con CSS (styles.css)

CSS (Cascading Style Sheets) es el lenguaje que usamos para describir la presentación de un documento HTML. Es el pintor, el decorador. Abre tu archivo styles.css y añade este código:

body {
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.control-widget {
    background-color: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1, h2 {
    color: #569cd6;
}

button {
    background-color: #0e639c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
}

button:hover {
    background-color: #1177bb;
}

#led-status {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #ce3636;
}

#led-status.led-on {
    background-color: #4CAF50;
}

Guarda el archivo y refresca la página en el navegador. ¡Vaya cambio! Ahora tenemos un tema oscuro, todo centrado y con un aspecto mucho más profesional. Lo más importante aquí es cómo seleccionamos elementos: por su etiqueta (body, button), por su clase (.control-widget) o por su ID (#led-status).

4. La interactividad con JavaScript (script.js)

Ahora toca la parte más divertida. JavaScript es el lenguaje de programación que se ejecuta en el navegador y nos permite crear páginas dinámicas. Es el sistema nervioso de nuestra casa. Abre script.js y escribe lo siguiente:

// Esperamos a que todo el contenido del DOM esté cargado
document.addEventListener('DOMContentLoaded', () => {

    // 1. Seleccionamos los elementos del HTML con los que vamos a trabajar
    const statusSpan = document.getElementById('led-status');
    const toggleButton = document.getElementById('toggle-button');

    // 2. Creamos una variable para guardar el estado actual del LED
    let isLedOn = false;

    // 3. Añadimos un "escuchador de eventos" al botón.
    // Esto ejecutará una función cada vez que alguien haga clic.
    toggleButton.addEventListener('click', () => {
        // Invertimos el valor de la variable. Si era false, ahora es true, y viceversa.
        isLedOn = !isLedOn;

        // 4. Actualizamos el texto y el estilo según el nuevo estado
        if (isLedOn) {
            statusSpan.textContent = 'ENCENDIDO';
            statusSpan.classList.add('led-on');
        } else {
            statusSpan.textContent = 'APAGADO';
            statusSpan.classList.remove('led-on');
        }
    });
});

Guarda el archivo, refresca el navegador y... ¡púlsalo! El texto y el color del estado deberían cambiar cada vez que haces clic. Acabas de crear tu primera aplicación web interactiva. Lo que hemos hecho es:

Seleccionar los elementos HTML que necesitamos por su ID.
Crear una variable (isLedOn) para recordar si el LED está encendido o apagado.
Usar addEventListener para que, cuando se haga clic en el botón, se ejecute nuestro código.
Dentro de esa función, cambiamos el estado, actualizamos el texto con textContent y añadimos o quitamos la clase CSS .led-on para cambiar el color de fondo.

Errores típicos que te vas a encontrar

Si algo no funciona, no te frustres. Es parte del proceso. Aquí tienes los problemas más comunes:

"Mis estilos no se aplican": Revisa la etiqueta <link> en tu HTML. ¿El nombre del archivo en el atributo href es exactamente styles.css? ¿Está el archivo en la misma carpeta?
"El botón no hace nada": Lo mismo, pero con la etiqueta <script>. ¿El src apunta a script.js? El error más común es un nombre de archivo incorrecto.
La consola del desarrollador es tu mejor amiga: Pulsa F12 en tu navegador (o clic derecho > Inspeccionar) y ve a la pestaña "Consola". Si hay algún error en tu JavaScript, el navegador te lo chivará ahí. Aprender a leer esos mensajes es el 90% del trabajo de depuración.
Errores de escritura (typos): JavaScript distingue entre mayúsculas y minúsculas. getElementById no es lo mismo que getElementbyID. Revisa tu código con atención.

¿Y ahora qué? Tus siguientes pasos

¡Enhorabuena! Has completado el primer paso. Esto es solo el principio. El desarrollo web es un mundo enorme, pero has empezado con la base correcta.

A partir de aquí, te sugiero varias rutas:

Practica, practica y practica: Intenta modificar el proyecto. Añade más botones, más indicadores. Intenta construir un pequeño portfolio para tus proyectos maker. La soltura se coge haciendo.
Aprende un framework: Cuando te sientas cómodo con HTML, CSS y JavaScript puros, el siguiente paso es aprender un framework. Son herramientas que te facilitan la creación de aplicaciones complejas. Echa un vistazo a mi guía sobre los mejores frameworks para desarrollo web para orientarte.
Conéctalo con hardware: Aquí es donde se pone interesante para nosotros, los makers. Imagina que ese botón, en lugar de cambiar un texto, envía una señal por internet a un ESP32 para encender un LED de verdad en tu mesa. Esto se consigue con tecnologías como WebSockets o creando APIs, y es el puente definitivo entre el software y el hardware.

Espero que este tutorial te haya sido útil y te haya picado el gusanillo del desarrollo web. Es una habilidad muy valiosa que complementa perfectamente el mundo maker.

Si tienes cualquier duda, déjame un comentario aquí abajo y te echo una mano.

Un saludo,
David Ortega