[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [](http://makeapullrequest.com) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott) # Веб-разработка для начинающих - учебный курс Изучите основы веб-разработки с нашим 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Улучшите свои навыки и оптимизируйте запоминание знаний благодаря эффективной методике обучения на основе проектов. Начните свой путь в программировании уже сегодня! Присоединяйтесь к сообществу Azure AI Foundry в Discord [](https://discord.com/invite/ByRwuEEgH4) Следуйте этим шагам, чтобы начать использовать эти ресурсы: 1. **Сделайте форк репозитория**: Нажмите [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Присоединяйтесь к Azure AI Foundry Discord и познакомьтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Поддержка нескольких языков #### Поддерживается через GitHub Action (автоматически и всегда актуально) [Арабский](../ar/README.md) | [Бенгальский](../bn/README.md) | [Болгарский](../bg/README.md) | [Бирманский (Мьянма)](../my/README.md) | [Китайский (упрощенный)](../zh/README.md) | [Китайский (традиционный, Гонконг)](../hk/README.md) | [Китайский (традиционный, Макао)](../mo/README.md) | [Китайский (традиционный, Тайвань)](../tw/README.md) | [Хорватский](../hr/README.md) | [Чешский](../cs/README.md) | [Датский](../da/README.md) | [Голландский](../nl/README.md) | [Эстонский](../et/README.md) | [Финский](../fi/README.md) | [Французский](../fr/README.md) | [Немецкий](../de/README.md) | [Греческий](../el/README.md) | [Иврит](../he/README.md) | [Хинди](../hi/README.md) | [Венгерский](../hu/README.md) | [Индонезийский](../id/README.md) | [Итальянский](../it/README.md) | [Японский](../ja/README.md) | [Корейский](../ko/README.md) | [Литовский](../lt/README.md) | [Малайский](../ms/README.md) | [Маратхи](../mr/README.md) | [Непальский](../ne/README.md) | [Норвежский](../no/README.md) | [Персидский (фарси)](../fa/README.md) | [Польский](../pl/README.md) | [Португальский (Бразилия)](../br/README.md) | [Португальский (Португалия)](../pt/README.md) | [Панджаби (Гурмукхи)](../pa/README.md) | [Румынский](../ro/README.md) | [Русский](./README.md) | [Сербский (кириллица)](../sr/README.md) | [Словацкий](../sk/README.md) | [Словенский](../sl/README.md) | [Испанский](../es/README.md) | [Суахили](../sw/README.md) | [Шведский](../sv/README.md) | [Тагальский (филиппинский)](../tl/README.md) | [Тамильский](../ta/README.md) | [Тайский](../th/README.md) | [Турецкий](../tr/README.md) | [Украинский](../uk/README.md) | [Урду](../ur/README.md) | [Вьетнамский](../vi/README.md) **Если вы хотите добавить дополнительные переводы, поддерживаемые языки перечислены [здесь](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Вы студент?_ Посетите [**Студенческую страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный сертификат. Это страница, которую стоит добавить в закладки и проверять время от времени, так как мы ежемесячно обновляем контент. ### 📣 Объявление - Новые задания с режимом GitHub Copilot Agent! Добавлено новое задание, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новое задание, которое вы можете выполнить, используя GitHub Copilot и режим Agent. Если вы еще не использовали режим Agent, он способен не только генерировать текст, но и создавать и редактировать файлы, выполнять команды и многое другое. ### 📣 Объявление - _Новый проект с использованием генеративного ИИ_ Только что добавлен новый проект "AI Assistant", ознакомьтесь с ним [проект](./09-chat-project/README.md) ### 📣 Объявление - _Новый учебный курс_ по генеративному ИИ для JavaScript Не пропустите наш новый учебный курс по генеративному ИИ! Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!  - Уроки, охватывающие все от основ до RAG. - Взаимодействуйте с историческими персонажами, используя GenAI и наше приложение-компаньон. - Веселый и увлекательный сюжет, вы будете путешествовать во времени!  Каждый урок включает задание для выполнения, проверку знаний и вызов, чтобы помочь вам изучить такие темы, как: - Создание запросов и инженерия запросов - Генерация текстовых и графических приложений - Приложения для поиска Посетите [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), чтобы начать! ## 🌱 Начало работы > **Учителя**, мы [включили несколько предложений](for-teachers.md) о том, как использовать этот учебный курс. Мы будем рады вашим отзывам [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! **[Ученики](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с предварительной викторины и продолжайте изучение материала лекции, выполняя различные задания и проверяя свои знания с помощью викторины после лекции. Чтобы улучшить ваш учебный опыт, общайтесь с коллегами, чтобы работать над проектами вместе! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где наша команда модераторов будет готова ответить на ваши вопросы. Для дальнейшего обучения мы настоятельно рекомендуем изучить [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для получения дополнительных учебных материалов. ### 📋 Настройка вашей среды Этот учебный курс имеет готовую среду разработки! Когда вы начнете, вы можете выбрать запуск учебного курса в [Codespace](https://github.com/features/codespaces/) (_браузерная среда, не требующая установки_), или локально на вашем компьютере, используя текстовый редактор, такой как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Создайте свой репозиторий Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебного курса. Следуйте этим шагам: 1. **Сделайте форк репозитория**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы. 2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Запуск учебного курса в Codespace В вашей копии этого репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.  #### Запуск учебного курса локально на вашем компьютере Чтобы запустить этот учебный курс локально на вашем компьютере, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../1-getting-started-lessons/1-intro-to-programming-languages), проведет вас через различные варианты для каждого из этих инструментов, чтобы вы могли выбрать то, что лучше всего подходит для вас. Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) в качестве редактора, который также имеет встроенный [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Вы можете скачать Visual Studio Code [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Клонируйте ваш репозиторий на ваш компьютер. Вы можете сделать это, нажав кнопку **Code** и скопировав URL: [CodeSpace](./images/createcodespace.png) Затем откройте [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и выполните следующую команду, заменив `` на URL, который вы только что скопировали: ```bash git clone ``` 2. Откройте папку в Visual Studio Code. Вы можете сделать это, нажав **File** > **Open Folder** и выбрав папку, которую вы только что клонировали. > Рекомендуемые расширения для Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для предварительного просмотра HTML-страниц в Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - для ускорения написания кода ## 📂 Каждый урок включает: - необязательный скетчноут - необязательное дополнительное видео - разминка-тест перед уроком - письменный материал урока - пошаговые инструкции для проектных уроков по созданию проекта - проверка знаний - задание - дополнительное чтение - [тест после урока](https://ff-quizzes.netlify.app/web/) > **Примечание о тестах**: Все тесты находятся в папке Quiz-app, всего 48 тестов по три вопроса в каждом. Они доступны [здесь](https://ff-quizzes.netlify.app/web/), приложение для тестов можно запустить локально или развернуть на Azure; следуйте инструкциям в папке `quiz-app`. ## 🗃️ Уроки | | Название проекта | Изучаемые концепции | Цели обучения | Ссылка на урок | Автор | | :-: | :----------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | 01 | Начало работы | Введение в программирование и инструменты разработчика | Узнайте основные принципы большинства языков программирования и о программном обеспечении, которое помогает профессиональным разработчикам выполнять свою работу | [Введение в языки программирования и инструменты разработчика](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в вашем проекте, как сотрудничать с другими разработчиками на базе кода | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | Начало работы | Доступность | Узнайте основы доступности веб-сайтов | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | Основы JS | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine | | 05 | Основы JS | Функции и методы | Узнайте о функциях и методах для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher | | 06 | Основы JS | Принятие решений с помощью JS | Узнайте, как создавать условия в вашем коде, используя методы принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | Основы JS | Массивы и циклы | Работа с данными с использованием массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 08 | [Террариум](./3-terrarium/solution/README.md) | Практика HTML | Создайте HTML для онлайн-террариума, сосредоточив внимание на создании макета | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 09 | [Террариум](./3-terrarium/solution/README.md) | Практика CSS | Создайте CSS для стилизации онлайн-террариума, сосредоточив внимание на основах CSS, включая адаптивный дизайн | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания в JavaScript, манипуляция DOM | Создайте JavaScript для работы террариума в качестве интерфейса перетаскивания, сосредоточив внимание на замыканиях и манипуляции DOM | [Замыкания в JavaScript, манипуляция DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Игра на скорость печати](./4-typing-game/solution/README.md) | Создание игры на скорость печати | Узнайте, как использовать события клавиатуры для управления логикой вашего JavaScript-приложения | [Программирование, управляемое событиями](./4-typing-game/typing-game/README.md) | Christopher | | 12 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Работа с браузерами | Узнайте, как работают браузеры, их историю и как создать первые элементы расширения для браузера | [О браузерах](./5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Создание формы, вызов API и сохранение переменных в локальном хранилище | Создайте элементы JavaScript для вашего расширения браузера, чтобы вызывать API, используя переменные, сохраненные в локальном хранилище | [API, формы и локальное хранилище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 14 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Фоновые процессы в браузере, производительность веб-сайтов | Используйте фоновые процессы браузера для управления значком расширения; узнайте о производительности веб-сайтов и некоторых оптимизациях | [Фоновые задачи и производительность](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 15 | [Космическая игра](./6-space-game/solution/README.md) | Более сложная разработка игр с использованием JavaScript | Узнайте о наследовании с использованием классов и композиции, а также о паттерне Pub/Sub, чтобы подготовиться к созданию игры | [Введение в сложную разработку игр](./6-space-game/1-introduction/README.md) | Chris | | 16 | [Космическая игра](./6-space-game/solution/README.md) | Рисование на холсте | Узнайте о Canvas API, который используется для рисования элементов на экране | [Рисование на холсте](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 17 | [Космическая игра](./6-space-game/solution/README.md) | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться, используя декартовы координаты и Canvas API | [Перемещение элементов](./6-space-game/3-moving-elements-around/README.md) | Chris | | 18 | [Космическая игра](./6-space-game/solution/README.md) | Обнаружение столкновений | Заставьте элементы сталкиваться и реагировать друг на друга, используя нажатия клавиш, и добавьте функцию задержки для обеспечения производительности игры | [Обнаружение столкновений](./6-space-game/4-collision-detection/README.md) | Chris | | 19 | [Космическая игра](./6-space-game/solution/README.md) | Подсчет очков | Выполняйте математические вычисления на основе состояния игры и производительности | [Подсчет очков](./6-space-game/5-keeping-score/README.md) | Chris | | 20 | [Космическая игра](./6-space-game/solution/README.md) | Завершение и перезапуск игры | Узнайте о завершении и перезапуске игры, включая очистку ресурсов и сброс значений переменных | [Условие завершения](./6-space-game/6-end-condition/README.md) | Chris | | 21 | [Банковское приложение](./7-bank-project/solution/README.md) | HTML-шаблоны и маршруты в веб-приложении | Узнайте, как создать каркас архитектуры многостраничного веб-сайта, используя маршрутизацию и HTML-шаблоны | [HTML-шаблоны и маршруты](./7-bank-project/1-template-route/README.md) | Yohan | | 22 | [Банковское приложение](./7-bank-project/solution/README.md) | Создание формы входа и регистрации | Узнайте о создании форм и обработке процедур проверки | [Формы](./7-bank-project/2-forms/README.md) | Yohan | | 23 | [Банковское приложение](./7-bank-project/solution/README.md) | Методы получения и использования данных | Как данные поступают в ваше приложение, как их получать, сохранять и удалять | [Данные](./7-bank-project/3-data/README.md) | Yohan | | 24 | [Банковское приложение](./7-bank-project/solution/README.md) | Концепции управления состоянием | Узнайте, как ваше приложение сохраняет состояние и как управлять им программно | [Управление состоянием](./7-bank-project/4-state-management/README.md) | Yohan | | 25 | [Редактор кода Browser/VScode](../../8-code-editor) | Работа с VScode | Узнайте, как использовать редактор кода | [Использование редактора кода VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AI Ассистенты](./9-chat-project/README.md) | Работа с AI | Узнайте, как создать собственного AI-ассистента | [Проект AI-ассистента](./9-chat-project/README.md) | Chris | ## 🏫 Педагогика Наша учебная программа разработана с учетом двух ключевых педагогических принципов: * обучение на основе проектов * частые тесты Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, которые используют современные веб-разработчики. Учащиеся получат возможность приобрести практический опыт, создавая игру на скорость печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочные знания в области веб-разработки. > 🎓 Вы можете пройти первые несколько уроков этой программы в формате [Учебного пути](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn! Обеспечивая соответствие содержания учебной программы проектам, процесс обучения становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также подготовили несколько вводных уроков по основам JavaScript для знакомства с концепциями, сопровождаемых видео из коллекции "[Серия для начинающих: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" с участием некоторых авторов этой программы. Кроме того, тест с низкими ставками перед уроком настраивает студента на изучение темы, а второй тест после урока обеспечивает лучшее усвоение материала. Эта учебная программа была разработана как гибкая и увлекательная, и ее можно пройти полностью или частично. Проекты начинаются с простых и становятся все более сложными к концу 12-недельного цикла. Хотя мы намеренно избегали введения фреймворков JavaScript, чтобы сосредоточиться на базовых навыках, необходимых веб-разработчику до освоения фреймворков, хорошим следующим шагом после завершения этой программы будет изучение Node.js через другую коллекцию видео: "[Серия для начинающих: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". > Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и руководством по [участию](CONTRIBUTING.md). Мы будем рады вашим конструктивным отзывам! ## 🧭 Доступ оффлайн Вы можете запустить эту документацию оффлайн, используя [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на вашем локальном компьютере, а затем в корневой папке этого репозитория введите `docsify serve`. Веб-сайт будет доступен на порту 3000 вашего локального хоста: `localhost:3000`. ## 📘 PDF PDF всех уроков можно найти [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Другие курсы Наша команда создает и другие курсы! Ознакомьтесь: ### Azure / Edge / MCP / Agents [](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Серия по генеративному ИИ [](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- ### Основное обучение [](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Серия Copilot [](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## Получение помощи Если вы столкнулись с трудностями или у вас есть вопросы о создании приложений на основе ИИ, присоединяйтесь: [](https://aka.ms/foundry/discord) Если у вас есть отзывы о продукте или ошибки при разработке, посетите: [](https://aka.ms/foundry/forum) ## Лицензия Этот репозиторий лицензирован в соответствии с лицензией MIT. Подробнее см. в файле [LICENSE](../../LICENSE). --- **Отказ от ответственности**: Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.