Web Dev For Beginners
1.0.0
Aprenda 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. Participe en cuestionarios, debates y tareas prácticas. Mejore sus habilidades y optimice la retención de conocimientos con nuestra eficaz pedagogía basada en proyectos. ¡Comience su viaje de codificación hoy!
Visite la página Student Hub donde encontrará recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un vale de certificado gratuito. Esta es la página que desea marcar y consultar de vez en cuando a medida que cambiamos contenido mensualmente.
¡No te pierdas nuestro NUEVO plan de estudios de 12 lecciones sobre IA generativa!
Cada lección incluye una tarea para completar, una verificación de conocimientos y un desafío para guiarlo en temas de aprendizaje como:
incitación e ingeniería rápida
generación de aplicaciones de texto e imagen
aplicaciones de búsqueda
¡Visite https://aka.ms/genai-beginners para comenzar!
Maestros , hemos incluido algunas sugerencias sobre cómo utilizar este plan de estudios. ¡Nos encantaría recibir tus comentarios en nuestro foro de discusión!
Los estudiantes , para cada lección, comiencen con una prueba previa a la conferencia y continúen leyendo el material de la conferencia, completando las diversas actividades y verifiquen su comprensión con la prueba posterior a la conferencia.
Para mejorar su experiencia de aprendizaje, conéctese con sus compañeros para trabajar juntos en los proyectos. Se fomentan las discusiones en nuestro foro de discusión donde nuestro equipo de moderadores estará disponible para responder sus preguntas.
Para ampliar su educación, recomendamos encarecidamente explorar Microsoft Learn para obtener materiales de estudio adicionales.
¡Este plan de estudios tiene un entorno de desarrollo listo para funcionar! Al comenzar, puede optar por ejecutar el plan de estudios en Codespace ( un entorno basado en navegador que no requiere instalación ) o localmente en su computadora usando un editor de texto como Visual Studio Code.
Para que pueda guardar fácilmente su trabajo, se recomienda que cree su propia copia de este repositorio. Puede hacerlo haciendo clic en el botón Usar esta plantilla en la parte superior de la página. Esto creará un nuevo repositorio en su cuenta de GitHub con una copia del plan de estudios.
Siga estos pasos:
Bifurcar el repositorio : haga clic en el botón "Bifurcar" en la esquina superior derecha de esta página.
Clonar el repositorio : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
En la copia de este repositorio que creó, haga clic en el botón Código y seleccione Abrir con Codespaces . Esto creará un nuevo Codespace para que puedas trabajar.
Para ejecutar este plan de estudios localmente en su computadora, necesitará un editor de texto, un navegador y una herramienta de línea de comandos. Nuestra primera lección, Introducción a los lenguajes de programación y las herramientas del oficio, lo guiará a través de varias opciones para cada una de estas herramientas para que pueda seleccionar la que funcione mejor para usted.
Nuestra recomendación es utilizar Visual Studio Code como editor, que también tiene una Terminal incorporada. Puede descargar el código de Visual Studio aquí.
Clona tu repositorio en tu computadora. Puede hacer esto haciendo clic en el botón Código y copiando la URL:
Luego, abra Terminal dentro de Visual Studio Code y ejecute el siguiente comando, reemplazando <your-repository-url> con la URL que acaba de copiar:
git clone <tu-url-de-repositorio>
Abra la carpeta en Visual Studio Code. Puede hacerlo haciendo clic en Archivo > Abrir carpeta y seleccionando la carpeta que acaba de clonar.
Extensiones recomendadas de Visual Studio Code:
Live Server: para obtener una vista previa de las páginas HTML dentro de Visual Studio Code
Copilot: para ayudarte a escribir código más rápido
nota de boceto opcional
vídeo suplementario opcional
prueba de preparación previa a la lección
lección escrita
para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto
comprobaciones de conocimientos
un desafío
lectura suplementaria
asignación
cuestionario posterior a la lección
Una nota sobre los cuestionarios : todos los cuestionarios están contenidos en la carpeta Quiz-app, 48 cuestionarios en total de tres preguntas cada uno. Están vinculados desde las lecciones; la aplicación de prueba se puede ejecutar localmente o implementar en Azure; Siga las instrucciones en la carpeta
quiz-app. Poco a poco se están localizando.
| Nombre del proyecto | Conceptos enseñados | Objetivos de aprendizaje | Lección vinculada | Autor | |
|---|---|---|---|---|---|
| 01 | Empezando | Introducción a la programación y herramientas del oficio | Conozca los fundamentos básicos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores profesionales a hacer su trabajo. | Introducción a los lenguajes de programación y las herramientas del oficio | Jazmín |
| 02 | Empezando | Conceptos básicos de GitHub, incluye trabajar con un equipo. | Cómo usar GitHub en tu proyecto, cómo colaborar con otros en una base de código | Introducción a GitHub | Piso |
| 03 | Empezando | Accesibilidad | Aprende los conceptos básicos de accesibilidad web | Fundamentos de accesibilidad | cristóbal |
| 04 | Conceptos básicos de JS | Tipos de datos de JavaScript | Los conceptos básicos de los tipos de datos de JavaScript | Tipos de datos | Jazmín |
| 05 | Conceptos básicos de JS | Funciones y métodos | Obtenga más información sobre funciones y métodos para gestionar el flujo lógico de una aplicación. | Funciones y métodos | jazmín y cristóbal |
| 06 | Conceptos básicos de JS | Tomando decisiones con JS | Aprenda a crear condiciones en su código utilizando métodos de toma de decisiones | Tomar decisiones | Jazmín |
| 07 | Conceptos básicos de JS | Matrices y bucles | Trabajar con datos usando matrices y bucles en JavaScript | Matrices y bucles | Jazmín |
| 08 | Terrario | HTML en la práctica | Cree el HTML para crear un terrario en línea, centrándose en crear un diseño. | Introducción a HTML | Jen |
| 09 | Terrario | CSS en la práctica | Cree el CSS para diseñar el terrario en línea, centrándose en los conceptos básicos de CSS, incluida la capacidad de hacer que la página sea responsiva. | Introducción a CSS | Jen |
| 10 | Terrario | Cierres de JavaScript, manipulación DOM | Construya JavaScript para que el terrario funcione como una interfaz de arrastrar y soltar, centrándose en cierres y manipulación de DOM. | Cierres de JavaScript, manipulación DOM | Jen |
| 11 | Juego de mecanografía | Construye un juego de mecanografía | Aprenda a utilizar eventos de teclado para impulsar la lógica de su aplicación JavaScript | Programación basada en eventos | cristóbal |
| 12 | Extensión de navegador verde | Trabajar con navegadores | Aprenda cómo funcionan los navegadores, su historial y cómo desarrollar los primeros elementos de una extensión del navegador. | Acerca de los navegadores | Jen |
| 13 | Extensión de navegador verde | Crear un formulario, llamar a una API y almacenar variables en el almacenamiento local | Cree los elementos JavaScript de la extensión de su navegador para llamar a una API utilizando variables almacenadas en el almacenamiento local. | API, formularios y almacenamiento local | Jen |
| 14 | Extensión de navegador verde | Procesos en segundo plano en el navegador, rendimiento web. | Utilice los procesos en segundo plano del navegador para administrar el ícono de la extensión; Obtenga información sobre el rendimiento web y algunas optimizaciones que debe realizar. | Tareas en segundo plano y rendimiento | Jen |
| 15 | Juego espacial | Desarrollo de juegos más avanzado con JavaScript | Aprenda sobre la herencia usando Clases y Composición y el patrón Pub/Sub, como preparación para crear un juego. | Introducción al desarrollo avanzado de juegos | cris |
| 16 | Juego espacial | Dibujar sobre lienzo | Obtenga más información sobre la API de Canvas, que se utiliza para dibujar elementos en una pantalla. | Dibujar sobre lienzo | cris |
| 17 | Juego espacial | Mover elementos por la pantalla | Descubra cómo los elementos pueden ganar movimiento utilizando las coordenadas cartesianas y la API de Canvas | Mover elementos | cris |
| 18 | Juego espacial | Detección de colisiones | Haga que los elementos colisionen y reaccionen entre sí presionando teclas y proporcione una función de enfriamiento para garantizar el rendimiento del juego. | Detección de colisiones | cris |
| 19 | Juego espacial | mantener la puntuación | Realiza cálculos matemáticos basados en el estado y el rendimiento del juego. | Mantener la puntuación | cris |
| 20 | Juego espacial | Finalizar y reiniciar el juego. | Obtenga información sobre cómo finalizar y reiniciar el juego, incluida la limpieza de recursos y el restablecimiento de valores de variables. | La condición final | cris |
| 21 | Aplicación bancaria | Plantillas HTML y rutas en una aplicación web | Aprenda a crear el andamio de la arquitectura de un sitio web de varias páginas utilizando enrutamiento y plantillas HTML. | Plantillas HTML y rutas | yohan |
| 22 | Aplicación bancaria | Cree un formulario de inicio de sesión y registro | Aprenda a crear formularios y manejar rutinas de validación. | Formularios | yohan |
| 23 | Aplicación bancaria | Métodos de obtención y uso de datos | Cómo entran y salen los datos de su aplicación, cómo recuperarlos, almacenarlos y eliminarlos | Datos | yohan |
| 24 | Aplicación bancaria | Conceptos de Gestión del Estado | Descubra cómo su aplicación conserva el estado y cómo administrarla mediante programación | Gestión del Estado | yohan |
Nuestro plan de estudios está diseñado teniendo en cuenta dos principios pedagógicos clave:
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 una experiencia práctica mediante la creación de un juego de mecanografía, un terrario virtual, una extensión de navegador ecológica, un juego estilo invasor espacial y una aplicación bancaria para empresas. 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 plan de estudios como una ruta de aprendizaje en Microsoft Learn!
Al garantizar que el contenido se alinee con los proyectos, el proceso se vuelve más atractivo para los estudiantes y se aumentará la retención de conceptos. También escribimos varias lecciones iniciales sobre conceptos básicos de JavaScript para presentar conceptos, junto con un video de la colección de tutoriales en video "Beginners Series to: JavaScript", algunos de cuyos autores contribuyeron a este plan de estudios.
Además, una prueba de bajo riesgo antes de una clase establece la intención del estudiante de aprender un tema, mientras que una segunda prueba después de la clase garantiza una mayor retención. Este plan de estudios fue diseñado para ser flexible y divertido y puede cursarse total o parcialmente. Los proyectos comienzan siendo pequeños y se vuelven cada vez más complejos al final del ciclo de 12 semanas.
Si bien hemos evitado deliberadamente introducir marcos de JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un marco, un buen siguiente paso para completar este plan de estudios sería aprender sobre Node.js a través de otra colección de videos: "Serie para principiantes para: Nodo.js".
Visite nuestro Código de conducta y pautas de contribución. ¡Agradecemos sus comentarios constructivos!
Puede ejecutar esta documentación sin conexión utilizando Docsify. Bifurque este repositorio, instale Docsify en su máquina local y luego, en la carpeta raíz de este repositorio, escriba docsify serve . El sitio web se entregará en el puerto 3000 de su localhost: localhost:3000 .
Puede encontrar un PDF de todas las lecciones aquí.
¡Nuestro equipo produce otros planes de estudio! Verificar:
IA para principiantes
Ciencia de datos para principiantes
IA generativa para principiantes
NUEVA Ciberseguridad para principiantes
IoT para principiantes
Aprendizaje automático para principiantes
Desarrollo XR para principiantes
Dominar GitHub Copilot para la programación emparejada con IA
Este repositorio tiene la licencia MIT. Consulte el archivo de LICENCIA para obtener más información.
