Este proyecto es una chuleta interactiva para principiantes que quieren entender cómo se conectan HTML, CSS y JavaScript desde cero.
El objetivo es mostrar, de forma muy visual y comentada, cómo los tres lenguajes trabajan juntos en una misma página web.
Perfecto para estudiantes que comienzan en el desarrollo frontend o para quienes necesitan repasar los fundamentos básicos.
| Archivo | Descripción |
|---|---|
index.html |
Contiene la estructura base de la página y ejemplos de etiquetas HTML (encabezados, párrafos, listas, enlaces, imágenes y formularios). Incluye también un pequeño bloque interactivo conectado a JS. |
index.css |
Contiene los estilos visuales (colores, fuentes, márgenes, botones, etc.) y explicaciones básicas sobre selectores, propiedades y el Box Model. |
script.js |
Contiene ejemplos de código JavaScript explicados línea a línea: variables, condicionales, bucles, funciones, manipulación del DOM y eventos. Controla la pequeña interacción del botón en la página. |
- Comprender la estructura básica de un documento HTML5.
- Entender cómo aplicar CSS externo para estilizar una página.
- Aprender a enlazar un script de JavaScript y manipular el DOM.
- Visualizar de manera práctica cómo trabajan juntos los tres lenguajes.
- Experimentar modificando el código y observando los resultados en tiempo real.
- Abre el archivo
index.htmlen tu navegador. - Lee los comentarios en cada archivo (
.html,.css,.js) — ahí encontrarás explicaciones didácticas paso a paso. - Pulsa el botón de ejemplo en la web para ver cómo JavaScript cambia el texto y el estilo del elemento.
- Qué es el HTML y para qué sirve.
- Estructura básica de una página (
<!DOCTYPE html>,<html>,<head>,<body>). - Etiquetas más comunes:
h1,p,a,img,ul,li,form,input,button. - Comentarios y buenas prácticas básicas.
- Qué es CSS y cómo se enlaza a un HTML (
<link rel="stylesheet" ...>). - Tipos de selectores: etiqueta, clase (
.), id (#). - Propiedades esenciales: color, fuente, márgenes, relleno, bordes, alineación.
- Concepto del Box Model.
- Diferencias entre clase e id.
- Qué es JavaScript y su papel en el navegador.
- Variables (
let,const) y tipos de datos básicos. - Condicionales (
if,else), bucles (for), funciones. - Manipulación del DOM con
document.getElementById. - Eventos con
addEventListener("click", ...). - Ejemplo práctico: cambiar texto y estilo al hacer clic en un botón.
- Abre los archivos en tu editor (VS Code, Sublime, etc.)
- Cambia colores, textos o estilos para ver el efecto.
- Añade más botones o elementos para practicar la manipulación del DOM.
- Usa la consola del navegador (F12) para experimentar con JavaScript.
