📘 Notes — JavaScript School (Platzi)

Repositorio educativo con apuntes, ejercicios y mini‑proyectos de la Escuela de JavaScript y Frontend de Platzi. Reúne conceptos fundamentales (HTML/CSS/JS), prácticas con ECMAScript moderno, asincronismo, manejo de paquetes con npm, PWA y manipulación del DOM, organizados por carpetas de curso.

---

🧭 Módulos / Carpetas principales

• 01-FrontendDeveloper — Fundamentos de HTML y CSS: anatomía, semántica, selectores, modelo de caja, posicionamiento, flexbox y grid.
• 02-FrontendDeveloperPractico — Maquetación práctica tipo e‑commerce: pantallas de autenticación, vistas principales, navegación y menús.
• 03-JavascriptBásico — Base de JS: valores, variables, funciones, coerción, operadores, arrays/objetos y retos (piedra‑papel‑tijera).
• 04-JavascriptPráctico — Ejercicios de DOM y mini tienda: index.html, index.js y carpeta store/ con assets y estilos.
• 05-ClosuresScopesJS — Scope, hoisting y closures con ejemplos.
• 06-ECMAScript6+ — ES6 a ES12: nuevas características por versiones.
• 07-AsincronismoJS — Callbacks, promesas, async/await, generators y proyecto de práctica.
• 09-DependenciasYPaquetesNPM — Gestión de paquetes, scripts y proyecto base con npm.
• 10-JsProfessional — MediaPlayer (TypeScript) y sitio web con Service Worker (PWA básica).
• 11-manipulaciónDOM/avocado-app — App demo con Snowpack y manipulación del DOM.

---

🌟 Características

• Organización por carpetas de curso para navegar y aprender por temas.
• Ejemplos autoconclusivos y archivos .html para abrir directamente en el navegador.
• Proyectos puntuales con package.json para instalar dependencias localmente.
• Código orientado a práctica y comprensión, con comentarios y ejercicios.

---

🖼️ Vista previa

Agrega aquí una imagen o GIF cuando tengas una captura del repositorio o de los mini‑proyectos.

![Demo](./assets/preview.png)

---

🚀 Demo en Vivo

Este repositorio es principalmente de estudio. Puedes publicar mini‑proyectos en GitHub Pages o Netlify desde cada carpeta que tenga una build/dist.

---

🛠️ Tecnologías utilizadas

• HTML5 y CSS3 — Maquetación y estilos.
• JavaScript (ES6+) — Lógica y ejercicios.
• TypeScript — Proyecto MediaPlayer.
• Node.js y npm — Gestión de dependencias y scripts.
• Snowpack — avocado-app para desarrollo rápido.
• Service Workers — PWA básica en 10-JsProfessional/website.

---

📁 Estructura general del proyecto

nt.platzi/
├── 01-FrontendDeveloper/
├── 02-FrontendDeveloperPractico/
├── 03-JavascriptBásico/
├── 04-JavascriptPráctico/
├── 05-ClosuresScopesJS/
├── 06-ECMAScript6+/
├── 07-AsincronismoJS/
├── 09-DependenciasYPaquetesNPM/
├── 10-JsProfessional/
└── 11-manipulaciónDOM/

---

⚙️ Instalación y uso

Dependiendo de la carpeta:

1. Ejemplos simples (01-FrontendDeveloper, 02-FrontendDeveloperPractico, etc.):

   • Abre los archivos .html directamente en el navegador.

2. Proyectos con package.json (por ejemplo 07-AsincronismoJS, 09-DependenciasYPaquetesNPM, 10-JsProfessional/mediaplayer, 11-manipulaciónDOM/avocado-app):

   • Entra a la carpeta del proyecto y ejecuta:
     • npm install para instalar dependencias.
     • npm run dev, npm run build o los scripts definidos en cada package.json.

3. Requisitos generales:

   • Node.js recomendado: >= 16 (ideal >= 18).

---

🎯 Funcionalidades clave

• Conceptos de HTML/CSS para construir interfaces sólidas.
• Fundamentos de JavaScript y patrones de control de flujo.
• ECMAScript moderno por versiones (ES6–ES12).
• Asincronismo: callbacks, promesas, async/await y generators.
• Gestión de paquetes y scripts con npm.
• PWA básica con Service Worker y ejemplos de DOM.

---

⚠️ Consideraciones y límites actuales

• El código es demostrativo y educativo; no está orientado a producción.
• La compatibilidad de navegadores puede variar en ejemplos antiguos.
• Algunos proyectos requieren instalación local de dependencias (npm install).
• No se usan APIs externas: todo corre localmente en el navegador (salvo herramientas de build donde aplique).

---

🔧 Posibles mejoras

• Unificar scripts de desarrollo en una guía común.
• Añadir más retos prácticos con soluciones.
• Documentar referencias y recursos por carpeta.
• Añadir tests unitarios en proyectos con build.
• Internacionalización (ES/EN) en ejemplos clave.
• Integrar linters y formateadores consistentes.

---

💡 Aprendizajes

• Maquetación semántica y moderna con HTML/CSS.
• Fundamentos y buenas prácticas de JavaScript.
• Uso progresivo de ECMAScript y herramientas del ecosistema.
• Estructuración modular por temas para escalar y reutilizar.

---

📄 Licencia

Actualmente sin licencia. Si deseas reutilizar, puedes aplicar la licencia MIT y añadir el archivo LICENSE.

---

🤝 Contribuciones

Las contribuciones son bienvenidas:

1. Realiza un fork del repositorio.
2. Crea una rama: git checkout -b feature/mi-mejora.
3. Commit: git commit -m "feat: añade mejora X".
4. Push: git push origin feature/mi-mejora.
5. Abre un Pull Request.

---

👨‍💻 Autor

Charles Castillo (FROSTYLAN)

• 🌐 https://github.com/FROSTYLAN
• 💼 https://linkedin.com/in/charles-castillo-772968234

---

⭐ Si te resultó útil, considera dar una estrella al repositorio. 🚀 ¡Explora, practica y domina el ecosistema de JavaScript!