|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 week ago | |
| 2-js-basics | 1 week ago | |
| 3-terrarium | 1 week ago | |
| 4-typing-game | 1 week ago | |
| 5-browser-extension | 1 week ago | |
| 6-space-game | 1 week ago | |
| 7-bank-project | 1 week ago | |
| 8-code-editor/1-using-a-code-editor | 1 week ago | |
| 9-chat-project | 1 week ago | |
| 10-ai-framework-project | 1 week ago | |
| Git-Basics | 1 week ago | |
| docs | 1 week ago | |
| lesson-template | 1 week ago | |
| memory-game | 1 week ago | |
| quiz-app | 1 week ago | |
| .co-op-translator.json | 1 week ago | |
| AGENTS.md | 1 week ago | |
| CODE_OF_CONDUCT.md | 1 week ago | |
| CONTRIBUTING.md | 1 week ago | |
| README.md | 1 week ago | |
| SECURITY.md | 1 week ago | |
| SUPPORT.md | 1 week ago | |
| _404.md | 1 week ago | |
| for-teachers.md | 1 week ago | |
README.md
Веб развој за почетнике - Наставни план
Научите основе веб развоја уз наш 12-недељни свеобухватни курс који воде Microsoft Cloud Advocates. Свака од 24 лекције улази у свет JavaScript-а, CSS-а и HTML-а кроз практичне пројекте као што су тераријуми, екстензије прегледача и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Побољшајте своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Започните своје путовање у програмирању данас!
Придружите се заједници Azure AI Foundry на Discord-у
Следите ове кораке да бисте започели коришћење ових ресурса:
- Направите форк репозиторијума: Кликните
- Клонирајте репозиторијум:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Придружите се Azure AI Foundry Discord-у и упознајте стручњаке и друге програмере
🌐 Подршка за више језика
Подржано путем GitHub Action-а (аутоматски и увек ажурирано)
арапски | бенгалски | бугарски | бурмански (Мјанмар) | китайски (поједностављени) | китайски (традиционални, Хонг Конг) | китайски (традиционални, Макао) | китайски (традиционални, Тајван) | хрватски | чешки | дански | холандски | естонски | фински | француски | немачки | грчки | хебрејски | хинди | мађарски | индонежански | италијански | јапански | каннада | корејски | литвански | малајски | малајалам | маратхи | непалски | нигеријски пидгин | норвешки | персијски (фарси) | пољски | португалски (Бразил) | португалски (Португал) | пунџаби (Гурмуки) | румунски | руски | српски (ћирилица) | словачки | словеначки | шпански | свахили | шведски | тагалог (филипински) | тамилски | телугу | тајландски | турски | украјински | урду | вијетнамски
Више волите клон локално?
Овај репозиторијум садржи преко 50 превода, што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
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'Ово вам даје све што вам је потребно да завршите курс са знатно бржим преузимањем.
Ако желите да имате додатне језике превода, подржани су на овој страни овде
🧑🎓 Јеси ли студент?
Посети Студентску страницу где ћеш пронаћи ресурсе за почетнике, студентске пакете, па чак и начине да добијеш бесплатан сертификат. Ово је страница коју треба да означиш као фаворита и повремено провераваш док месечно ажурирамо садржаје.
📣 Обавештење - Нови изазови GitHub Copilot Agent мода за завршетак!
Додат је нови изазов, потражи "GitHub Copilot Agent Challenge 🚀" у већини поглавља. То је нови изазов који треба да завршиш користећи GitHub Copilot и Agent мод. Ако раније ниси користио Agent мод, он осим генерисања текста може да креира и уређује фајлове, покреће команде и још много тога.
📣 Обавештење - Нови пројекат за прављење уз помоћ генеративне вештачке интелигенције
Додат је нови асистентски AI пројекат, провери га пројекат
📣 Обавештење - Нови наставни план о генеративној AI на JavaScript-у управо је објављен
Не пропусти наш нови наставни план о генеративној AI!
Посети https://aka.ms/genai-js-course да започнеш!
- Лекције које покривају све од основа до RAG.
- Интеракција са историјским ликовима уз помоћ GenAI и наше пратеће апликације.
- Забавно и занимљиво наративно искуство, путоваћеш кроз време!
Свака лекција укључује задатак за завршавање, проверу знања и изазов који ће ти помоћи да научиш теме као што су:
- Израђивање упита и инжењеринг упита
- Генерисање апликација за текст и слике
- Апликације за претраживање
Посети https://aka.ms/genai-js-course да започнеш!
🌱 Започињање
Наставници, укључили смо неке предлоге о томе како да користите овај наставни план. Волећемо ваше повратне информације на нашем форуму за дискусију!
Ученици, за сваку лекцију почнете са квизом пре предавања, а затим прочитајте материјал, завршите разне активности и проверите своје разумевање уз квиз након предавања.
Да бисте унапредили своје искуство учења, повежите се са својим колегама и радите на пројектима заједно! Дискусије су охрабрене на нашем форуму за дискусију где ће тим модератора бити доступан да одговори на ваша питања.
За даље образовање, топло препоручујемо да истражите Microsoft Learn за додатне материјале за учење.
📋 Постављање вашег окружења
Овај наставни план већ има спремно развојно окружење! Када кренеш, можеш да одабереш да покренеш наставни план у Codespace-у (окружење засновано на прегледачу, без потребе за инсталацијом), или локално на свом рачунару користећи текстуални едитор као што је Visual Studio Code.
Направи свој репозиторијум
Да бисте лако сачували свој рад, препоручујемо да направите своју копију овог репозиторијума. То можете учинити кликом на дугме Use this template на врху странице. Ово ће створити нови репозиторијум у вашем GitHub налогу са копијом овог наставног плана.
Пратите ове кораке:
- Направи форк репозиторијума: Кликните на дугме "Fork" у горњем десном углу ове странице.
- Клонирај репозиторијум:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Покретање наставног плана у Codespace-у
У копији репозиторијума коју сте направили, кликните дугме Code и одаберите Open with Codespaces. Ово ће направити нови Codespace у којем можете радити.
Покретање наставног плана локално на вашем рачунару
Да бисте покренули овај наставни план локално на рачунару, потребан вам је текстуални едитор, прегледач и алат за линију команди. Наша прва лекција, Увод у програмске језике и алате заната, водиће вас кроз различите опције за сваки од ових алата да изаберете шта вам највише одговара.
Препорука је да користите Visual Studio Code као едитор, који такође има уграђени Терминал. Visual Studio Code можете преузети овде.
-
Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме Code и копирањем URL-а:
CodeSpace Затим, отворите Terminal у оквиру Visual Studio Code и покрените следећу команду, замењујући
<your-repository-url>са УРЛ адресом коју сте управо копирали:git clone <your-repository-url> -
Отворите фасциклу у Visual Studio Code-у. То можете урадити кликом на File > Open Folder и избором фасцикле коју сте управо клонирали.
Препоручени Visual Studio Code додаци:
- Live Server - за преглед HTML страница унутар Visual Studio Code-а
- Copilot - да вам помогне да пишете код брже
📂 Свака лекција укључује:
- опциону скицноту
- опционални додатни видео
- пред-лекцијски квиз за загревање
- писану лекцију
- за пројектно засноване лекције, корак-по-корак упутства како да изградите пројекат
- провере знања
- изазов
- додатно читање
- задатак
- пост-лекцијски квиз
Напомена о квизовима: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова са по три питања. Доступни су овде, апликација за квизове може се покренути локално или поставити на Azure; пратите упутства у фасцикли
quiz-app.
🗃️ Лекције
| Име пројекта | Концепти који се уче | Циљеви учења | Повезана лекција | Аутор | |
|---|---|---|---|---|---|
| 01 | Почетак рада | Увод у програмирање и алате заната | Научите основе које стоје иза већине програмских језика и о софтверу који помаже професионалним програмерима у њиховом раду | Увод у програмске језике и алате заната | Џасмин |
| 02 | Почетак рада | Основе GitHub-а, укључује рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другима на кодној бази | Увод у GitHub | Флор |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | Основе приступачности | Кристофер |
| 04 | Основе JS | Типови података у JavaScript-у | Основе типова података у JavaScript-у | Типови података | Џасмин |
| 05 | Основе JS | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | Функције и методе | Џасмин и Кристофер |
| 06 | Основе JS | Доношење одлука са JS-ом | Научите како да креирате услове у свом коду користећи методе доношења одлука | Доношење одлука | Џасмин |
| 07 | Основе JS | Низови и петље | Рад са подацима користећи низове и петље у JavaScript-у | Низови и петље | Џасмин |
| 08 | Тераријум | HTML у пракси | Изградите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда | Увод у HTML | Џен |
| 09 | Тераријум | CSS у пракси | Изградите CSS за стилизовање онлајн тераријума, фокусирајући се на основе CSS укључујући прављење странице одзивном | Увод у CSS | Џен |
| 10 | Тераријум | JavaScript затварања, манипулација DOM-ом | Направите JavaScript који омогућава тераријуму да функционише као интерфејс за превлачење и испуштање, фокусирајући се на затварања и манипулацију DOM-ом | JavaScript затварања, манипулација DOM-ом | Џен |
| 11 | Тастатурна игра | Изградња тастатурне игре | Научите како да користите тастатурне догађаје за управљање логиком ваше JavaScript апликације | Програмирање вођено догађајима | Кристофер |
| 12 | Зелени проширење за прегледач | Рад са прегледачима | Научите како прегледачи функционишу, њихову историју и како направити прве елементе проширења прегледача | О прегледачима | Џен |
| 13 | Зелени проширење за прегледач | Изградња форме, позивање API-ја и чување променљивих у локалној меморији | Направите JavaScript елементе свог проширења прегледача за позивање API-ја користећи променљиве смештене у локалној меморији | API-ји, форме и локална меморија | Џен |
| 14 | Зелени проширење за прегледач | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконом проширења; упознајте се са веб перформансама и неким оптимизацијама | Позадински задаци и перформансе | Џен |
| 15 | Свемирска игра | Напредније развијање игара са JavaScript-ом | Учите о Наслеђивању коришћењем и Класа и Композиције и Pub/Sub обрасцу, као припрему за израду игре | Увод у напредни развој игара | Крис |
| 16 | Свемирска игра | Цртање на платну | Сазнајте о Canvas API-ју који се користи за цртање елемената на екрану | Цртање на платну | Крис |
| 17 | Свемирска игра | Померање елемената по екрану | Откријте како елементи могу добити кретање користећи картезијанске координате и Canvas API | Померање елемената | Крис |
| 18 | Свемирска игра | Детекција судара | Направите да се елементи сударе и реагују једни на друге користећи притиске тастера и обезбедите cooldown функцију за осигурање перформанси игре | Детекција судара | Крис |
| 19 | Свемирска игра | Вођење резултата | Извршите математичке прорачунe на основу статуса и перформанси игре | Вођење резултата | Крис |
| 20 | Свемирска игра | Завршавање и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | Услов за завршетак | Крис |
| 21 | Банкарска апликација | HTML шаблони и руте у веб апликацији | Научите како да направите основу архитектуре мултистраничног веб сајта користећи рутирање и HTML шаблоне | HTML шаблони и руте | Јохан |
| 22 | Банкарска апликација | Изградња форме за пријаву и регистрацију | Научите о изградњи форми и руковању валидацијом | Форме | Јохан |
| 23 | Банкарска апликација | Методе преузимања и коришћења података | Како подаци улазе и излазе из ваше апликације, како их преузимати, чувати и уклањати | Подаци | Јохан |
| 24 | Банкарска апликација | Концепти управљања стањем | Научите како ваша апликација задржава стање и како управљати њиме програмски | Управљање стањем | Јохан |
| 25 | Browser/VScode Code | Рад са VScode | Научите како да користите уређивач кода | Коришћење VScode уређивача кода | Крис |
| 26 | AI Assistants | Рад са вештачком интелигенцијом | Научите како да направите свог сопственог AI помоћника | Пројекат AI помоћник | Крис |
🏫 Педагогија
Наш програм је дизајниран са два кључна педагошка принципа на уму:
- учење засновано на пројектима
- чести квизови
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данашњи веб програмери користе. Студенти ће имати прилику да стекну практично искуство израдом тастатурне игре, виртуелног тераријума, еколошки прихватљивог проширења за прегледач, игре у стилу свемирског инвадера и банкарске апликације за предузећа. До краја серије, студенти ће стећи чврсто разумевање веб развоја.
🎓 Прве неколико лекција у овом курикулуму можете проћи као Learn Path на Microsoft Learn!
Осигуравањем да садржај одговара пројектима, процес је учињен занимљивијим за студенте и повећава задржавање концепата. Такође смо написали неколико почетних лекција о основама JavaScript-а да бисмо увели концепте, упарених са видеом из збирке видео туторијала "Серија за почетнике: JavaScript", чији су неки аутори допринели овом курикулуму.
Поред тога, квиз са малим улогом пре часа поставља намераву студента према учењу теме, док други квиз после часа обезбеђује даље задржавање. Овај курикулум је осмишљен да буде флексибилан и забаван и може се похађати у целини или делимично. Пројекти почињу мали и постају све сложенији до краја циклуса од 12 недеља.
Док смо свесно избегавали увођење JavaScript фрејмворка како бисмо се концентрисали на основне вештине потребне као веб програмер пре усвајања фрејмворка, добар следећи корак након завршетка овог курикулума био би учење о Node.js-у кроз другу збирку видео снимака: "Серија за почетнике: Node.js".
Посетите наше смернице Code of Conduct и Contributing. Добро дошли су ваши конструктивни предлози!
🧭 Приступ ван мреже
Ову документацију можете покренути ван мреже користећи Docsify. Форкујте овај репозиторијум, инсталирајте Docsify на свом локалном уређају, а затим у коренској фасцикли овог репозиторијума откуцајте docsify serve. Веб сајт ће се послужити на порту 3000 на вашем локалном хосту: localhost:3000.
PDF свих лекција можете пронаћи овде.
🎒 Остали курсеви
Наш тим производи и друге курсеве! Погледајте:
LangChain
Azure / Edge / MCP / Agents
Серии генеративне вештачке интелигенције
Основно учење
Серии Ко-пилота
Помоћ
Ако запнете или имате било каквих питања о изградњи AI апликација, прикључите се другим ученицима и искусним програмерима у дискусијама о MCP. То је подржавајућа заједница у којој су питања добродошла и знање се слободно дели.
Ако имате повратне информације о производу или наиђете на грешке током израде, посетите:
Лиценца
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку LICENSE за више информација.
Одрицање одговорности: Овај документ је преведен коришћењем AI услуге за превођење Co-op Translator. Иако се трудимо да превод буде тачан, имајте у виду да аутоматски преводи могу садржавати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква неспоразума или погрешна тумачења настала коришћењем овог превода.


