README.es.md

Aprende sobre El DOM (Interactivo)

Por @alesanchezr y otros colaboradores en 4Geeks Academy

Este tutorial es parte de un grupo de tutoriales sobre desarrollo web, este repositorio se enfoca solo en el DOM.

Aprenderás los siguientes conceptos:

1. Aprenderás cómo seleccionar elementos de su sitio web.

2. Manipularlos con Javascript (cambiar estilos, agregar detectores de eventos).

3. Eliminar elementos mediante programación.

4. Cambiar todo tu sitio web sin un refresh.

Te recomiendo hacer los tutoriales en este orden:

1. Introducciónn a HTML
2. Introducción a CSS
3. Introducción a Javascript
4. Introducción a The DOM ← you are here now 🔥
5. Uso de eventos & The DOM
6. Programación Orientada a Objetos

Instalación en un clic (recomendado)

Puedes empezar estos ejercicios en pocos segundos haciendo clic en: Abrir en Codespaces (recomendado) o Abrir en Gitpod.

Una vez ya tengas abirto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: $ learnpack start

Instalación local

1. Asegúrate de tener instalado learnpack y node.js version v14+ y jest v27.0.6 Este es el comando para instalar learnpack-cli y jest:

$ npm i learnpack [email protected] -g

2. Clona o descarga este repositorio. Una vez que termines de descargar, encontrarás una nueva carpeta con un subdirectorio "exercises" que contiene todos los ejercicios dentro.

3. Instala el plugin de learnpack para probar y compilar vanillajs:

$ learnpack plugins:install learnpack-dom

4. Inicializa tutorial/exercises ejecutando el siguiente comando en la raíz del proyecto:

$ learnpack start

¿Cómo están organizados los ejercicios?

Cada ejercicio es un pequeño sitio web de vanillajs que contiene los siguientes archivos:

1. index.js: representa el archivo javascript de entrada que se ejecutará cuando se cargue el sitio web.
2. index.html: representa la entrada HTML para el sitio web.
3. style.css: los estilos de tu sitio web, deben importarse desde index.html
4. README.md: contiene las instrucciones de los ejercicios.
5. test.js: no tienes que abrir este archivo, contiene el script de test para el ejercicio.

Nota: Los ejercicios tienen calificación automática pero los tests son muy rígidos y estrictos, mi recomendación es que ignores los tests y los uses solo como una recomendación o pueden frustrarte.

Colaboradores

Gracias a estas personas maravillosas (emoji key):

1. Alejandro Sanchez (alesanchezr), contribución: (programador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (build-tutorial) ✅ (documentación) 📖

2. Paolo (plucodev), contribución: (bug reports) 🐛, (programador), (traducción) 🌎

Este proyecto sigue la especificación all-contributors. ¡Todas las contribuciones son bienvenidas!

Este y otros ejercicios son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.