🚀 DOM Fundamentals Mastery

Bienvenido al repositorio de Fundamentos del DOM. Este proyecto está diseñado como un campo de entrenamiento interactivo para dominar la manipulación del Document Object Model (DOM) utilizando JavaScript moderno y Tailwind CSS.

🌿 Naturaleza del Proyecto

La manipulación del DOM es el puente entre el código estático y las experiencias web dinámicas. Este proyecto proporciona una estructura visualmente atractiva y organizada para que los desarrolladores practiquen las habilidades esenciales de selección y modificación de elementos en tiempo real.

🎯 ¿Qué vamos a hacer?

En este taller, nos enfocaremos en las técnicas fundamentales de interacción con el navegador:

• Selección de Elementos Únicos: Uso de getElementById.
• Selección de Colecciones: Práctica con getElementsByClassName y getElementsByTagName.
• Selectores Avanzados: Dominio de querySelector y querySelectorAll con sintaxis CSS.
• Manipulación de Contenido: Renderizado dinámico mediante innerHTML.
• Gestión de Estilos: Interacción con clases de Tailwind CSS desde JavaScript.

🛠️ Tecnologías

• Core: HTML5 & JavaScript (ES6+)
• Styling: Tailwind CSS 4
• Bundler: Vite
• Fonts: Outfit (Google Fonts)

🚀 Cómo Empezar

1. Clonar el repositorio:

   git clone https://github.com/jcomte23/DOM-fundamentals.git

2. Instalar dependencias:

   npm install

3. Iniciar servidor de desarrollo:

   npm run dev

📂 Estructura de Práctica

El proyecto está dividido en tarjetas interactivas:

• Blue Card: Práctica de IDs.
• Purple Card: Práctica de clases.
• Green Card: Práctica de etiquetas.
• Orange Card: Práctica de selectores complejos.
• Pink Card: Práctica de renderizado dinámico (innerHTML).

---

Hecho con ❤️ para el aprendizaje del desarrollo web.