Aprende los fundamentos del desarrollo web con nuestro curso integral de 12 semanas impartido por Microsoft Cloud Advocates. Cada una de las 24 lecciones profundiza en JavaScript, CSS y HTML a través de proyectos prácticos como terrarios, extensiones de navegador y juegos espaciales. Participa con cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza la retención de conocimiento con nuestra efectiva metodología basada en proyectos. ¡Comienza tu viaje de codificación hoy!
Únete a la Comunidad Azure AI Foundry en Discord
Sigue estos pasos para comenzar a usar estos recursos:
- Haz un Fork del Repositorio: Haz clic en
- Clona el Repositorio:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Únete al Azure AI Foundry Discord y conoce a expertos y otros desarrolladores
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
¿Prefieres Clonar Localmente?
Este repositorio incluye más de 50 traducciones de idiomas que aumentan significativamente el tamaño de la descarga. Para clonar sin traducciones, usa checkout disperso:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"Esto te da todo lo necesario para completar el curso con una descarga mucho más rápida.
Si deseas que se admitan idiomas adicionales para la traducción, están listados aquí
Visita la página Student Hub donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un cupón para certificado gratis. Esta es la página que quieres marcar como favorita y revisar de vez en cuando ya que actualizamos el contenido mensualmente.
Nuevo desafío añadido, busca "GitHub Copilot Agent Challenge 🚀" en la mayoría de los capítulos. Es un nuevo desafío para que completes usando GitHub Copilot y el modo Agente. Si no has usado el modo Agente antes, es capaz no solo de generar texto, sino también de crear y editar archivos, ejecutar comandos y más.
Nuevo proyecto Asistente AI añadido, échale un vistazo proyecto
¡No te pierdas nuestro nuevo currículo de IA Generativa!
Visita https://aka.ms/genai-js-course para comenzar!
- Lecciones que cubren desde lo básico hasta RAG.
- Interactúa con personajes históricos usando GenAI y nuestra aplicación compañera.
- ¡Narrativa divertida y atractiva, viajarás en el tiempo!
Cada lección incluye una tarea para completar, una revisión de conocimiento y un desafío para guiarte en temas como:
- Prompting y ingeniería de prompts
- Generación de apps de texto e imagen
- Apps de búsqueda
Visita https://aka.ms/genai-js-course para comenzar!
Profesores, hemos incluido algunas sugerencias sobre cómo usar este currículo. ¡Nos encantaría recibir sus comentarios en nuestro foro de discusión!
Estudiantes, para cada lección, comiencen con un cuestionario previo y sigan leyendo el material de la lección, completando las diversas actividades y comprobando su comprensión con el cuestionario posterior a la clase.
Para mejorar su experiencia de aprendizaje, ¡conéctense con sus compañeros para trabajar juntos en los proyectos! Las discusiones están alentadas en nuestro foro de discusión donde nuestro equipo de moderadores estará disponible para responder sus preguntas.
Para profundizar en la educación, recomendamos altamente explorar Microsoft Learn para materiales de estudio adicionales.
¡Este currículo tiene un entorno de desarrollo listo para usar! Al comenzar puedes elegir ejecutar el currículo en un Codespace (un entorno basado en navegador, sin necesidad de instalaciones), o localmente en tu computadora usando un editor de texto como Visual Studio Code.
Para guardar fácilmente tu trabajo, se recomienda crear tu propia copia de este repositorio. Puedes hacerlo haciendo clic en el botón Use this template en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del currículo.
Sigue estos pasos:
- Haz un Fork del Repositorio: Haz clic en el botón "Fork" en la esquina superior derecha de esta página.
- Clona el Repositorio:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
En tu copia de este repositorio que creaste, haz clic en el botón Code y selecciona Open with Codespaces. Esto creará un nuevo Codespace para que trabajes.
Para ejecutar este currículo localmente en tu computadora necesitarás un editor de texto, un navegador y una herramienta de línea de comandos. Nuestra primera lección, Introducción a Lenguajes de Programación y Herramientas del Oficio, te guiará a través de varias opciones para cada una de estas herramientas para que elijas lo que mejor se adapte a ti.
Nuestra recomendación es usar Visual Studio Code como tu editor, que también tiene un Terminal integrado. Puedes descargar Visual Studio Code aquí.
-
Clona tu repositorio en tu computadora. Puedes hacer esto haciendo clic en el botón Code y copiando la URL:
Luego, abre Terminal dentro de Visual Studio Code y ejecuta el siguiente comando, reemplazando
<your-repository-url>con la URL que acabas de copiar:git clone <your-repository-url>
-
Abre la carpeta en Visual Studio Code. Puedes hacer esto haciendo clic en File > Open Folder y seleccionando la carpeta que acabas de clonar.
Extensiones recomendadas de Visual Studio Code:
- Live Server - para previsualizar páginas HTML dentro de Visual Studio Code
- Copilot - para ayudarte a escribir código más rápido
- nota gráfica opcional
- video complementario opcional
- cuestionario de calentamiento antes de la lección
- lección escrita
- para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto
- verificaciones de conocimiento
- un desafío
- lectura complementaria
- tarea
- cuestionario posterior a la lección
Una nota sobre los cuestionarios: Todos los cuestionarios están contenidos en la carpeta Quiz-app, un total de 48 cuestionarios con tres preguntas cada uno. Están disponibles aquí; la aplicación de cuestionarios puede ejecutarse localmente o desplegarse en Azure; sigue las instrucciones en la carpeta
quiz-app.
| Nombre del Proyecto | Conceptos Enseñados | Objetivos de Aprendizaje | Lección Vinculada | Autor | |
|---|---|---|---|---|---|
| 01 | Comenzando | Introducción a la programación y herramientas del oficio | Aprende los fundamentos básicos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a desarrolladores profesionales a hacer su trabajo | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Comenzando | Conceptos básicos de GitHub, incluye trabajo en equipo | Cómo usar GitHub en tu proyecto, cómo colaborar con otros en una base de código | Intro to GitHub | Floor |
| 03 | Comenzando | Accesibilidad | Aprende los conceptos básicos de accesibilidad web | Accessibility Fundamentals | Christopher |
| 04 | JS Básico | Tipos de datos en JavaScript | Los conceptos básicos de los tipos de datos en JavaScript | Data Types | Jasmine |
| 05 | JS Básico | Funciones y métodos | Aprende sobre funciones y métodos para manejar el flujo lógico de una aplicación | Functions and Methods | Jasmine y Christopher |
| 06 | JS Básico | Tomando decisiones con JS | Aprende a crear condiciones en tu código utilizando métodos de toma de decisiones | Making Decisions | Jasmine |
| 07 | JS Básico | Arreglos y bucles | Trabaja con datos usando arreglos y bucles en JavaScript | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML en práctica | Construye el HTML para crear un terrario en línea, enfocándote en construir un diseño | Introduction to HTML | Jen |
| 09 | Terrarium | CSS en práctica | Construye el CSS para darle estilo al terrario en línea, enfocándote en los fundamentos de CSS, incluyendo hacer la página responsiva | Introduction to CSS | Jen |
| 10 | Terrarium | Closures en JavaScript, manipulación del DOM | Construye el JavaScript para que el terrario funcione como una interfaz de arrastrar y soltar, enfocándote en closures y manipulación del DOM | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Construye un juego de mecanografía | Aprende a usar eventos de teclado para manejar la lógica de tu aplicación JavaScript | Event-Driven Programming | Christopher |
| 12 | Green Browser Extension | Trabajando con navegadores | Aprende cómo funcionan los navegadores, su historia y cómo esqueletonizar los primeros elementos de una extensión para navegador | About Browsers | Jen |
| 13 | Green Browser Extension | Construir un formulario, llamar a una API y almacenar variables localmente | Construye los elementos JavaScript de tu extensión de navegador para llamar una API usando variables almacenadas localmente | APIs, Forms, and Local Storage | Jen |
| 14 | Green Browser Extension | Procesos en segundo plano en el navegador, rendimiento web | Usa los procesos en segundo plano del navegador para administrar el ícono de la extensión; aprende sobre el rendimiento web y algunas optimizaciones para mejorarlo | Background Tasks and Performance | Jen |
| 15 | Space Game | Desarrollo de juegos más avanzado con JavaScript | Aprende sobre herencia usando tanto clases como composición y el patrón Pub/Sub, para prepararte para construir un juego | Introduction to Advanced Game Development | Chris |
| 16 | Space Game | Dibujando en canvas | Aprende sobre la API Canvas, usada para dibujar elementos en una pantalla | Drawing to Canvas | Chris |
| 17 | Space Game | Moviendo elementos por la pantalla | Descubre cómo los elementos pueden adquirir movimiento usando coordenadas cartesianas y la API Canvas | Moving Elements Around | Chris |
| 18 | Space Game | Detección de colisiones | Haz que los elementos colisionen y reaccionen entre sí usando presiones de tecla y provee una función de enfriamiento para asegurar el rendimiento del juego | Collision Detection | Chris |
| 19 | Space Game | Mantener puntuación | Realiza cálculos matemáticos basados en el estado y rendimiento del juego | Keeping Score | Chris |
| 20 | Space Game | Finalizar y reiniciar el juego | Aprende sobre finalizar y reiniciar el juego, incluyendo limpiar recursos y reiniciar valores de variables | The Ending Condition | Chris |
| 21 | Banking App | Plantillas HTML y rutas en una aplicación web | Aprende a crear la estructura de la arquitectura de un sitio web multipágina usando rutas y plantillas HTML | HTML Templates and Routes | Yohan |
| 22 | Banking App | Construye un formulario de inicio de sesión y registro | Aprende a construir formularios y manejar rutinas de validación | Forms | Yohan |
| 23 | Banking App | Métodos para obtener y usar datos | Cómo fluyen los datos dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y desecharlos | Data | Yohan |
| 24 | Banking App | Conceptos de gestión de estado | Aprende cómo tu aplicación retiene el estado y cómo gestionarlo programáticamente | State Management | Yohan |
| 25 | Browser/VScode Code | Trabajar con VScode | Aprende a usar un editor de código | Use VScode Code Editor | Chris |
| 26 | AI Assistants | Trabajar con IA | Aprende a construir tu propio asistente de IA | AI Assistant project | Chris |
Nuestro currículo está diseñado con dos principios pedagógicos clave en mente:
- aprendizaje basado en proyectos
- cuestionarios frecuentes
El programa enseña los fundamentos de JavaScript, HTML y CSS, así como las últimas herramientas y técnicas utilizadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de desarrollar experiencia práctica construyendo un juego de mecanografía, un terrario virtual, una extensión de navegador ecológica, un juego estilo invasores espaciales y una aplicación bancaria para negocios. Al final de la serie, los estudiantes habrán adquirido una sólida comprensión del desarrollo web.
🎓 ¡Puedes tomar las primeras lecciones de este currículo como una ruta de aprendizaje en Microsoft Learn!
Al asegurar que el contenido se alinee con proyectos, el proceso se vuelve más atractivo para los estudiantes y se potencia la retención de conceptos. También escribimos varias lecciones introductorias en los fundamentos de JavaScript para introducir conceptos, acompañadas de un video de la colección de tutoriales en video "Beginners Series to: JavaScript", algunos de cuyos autores contribuyeron a este currículo.
Además, un cuestionario de bajo riesgo antes de una clase establece la intención del estudiante hacia el aprendizaje de un tema, mientras que un segundo cuestionario después de la clase garantiza una mayor retención. Este currículo fue diseñado para ser flexible y divertido y puede tomarse en su totalidad o en parte. Los proyectos comienzan pequeños y se vuelven cada vez más complejos al final del ciclo de 12 semanas.
Aunque hemos evitado intencionadamente introducir frameworks de JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un framework, un buen siguiente paso después de completar este currículo sería aprender sobre Node.js a través de otra colección de videos: "Beginner Series to: Node.js".
Visita nuestras guías de Código de Conducta y Contribuciones. ¡Agradecemos tus comentarios constructivos!
Puedes ejecutar esta documentación sin conexión utilizando Docsify. Haz un fork de este repositorio, instala Docsify en tu máquina local y luego, en la carpeta raíz de este repositorio, escribe docsify serve. El sitio web se servirá en el puerto 3000 en tu localhost: localhost:3000.
Un PDF de todas las lecciones se puede encontrar aquí.
¡Nuestro equipo produce otros cursos! Mira:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Si te quedas atascado o tienes alguna pregunta sobre cómo construir aplicaciones de IA. Únete a otros estudiantes y desarrolladores experimentados en discusiones sobre MCP. Es una comunidad de apoyo donde las preguntas son bienvenidas y el conocimiento se comparte libremente.
Si tienes comentarios sobre el producto o encuentras errores mientras desarrollas, visita:
Este repositorio está licenciado bajo la licencia MIT. Consulta el archivo LICENSE para más información.
Aviso Legal:
Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Aunque nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de cualquier malentendido o interpretación errónea que surja del uso de esta traducción.