|
|
4 weeks ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | 1 month ago | |
| docs | 1 month ago | |
| lesson-template | 1 month ago | |
| memory-game | 1 month ago | |
| quiz-app | 1 month ago | |
| .co-op-translator.json | 4 weeks ago | |
| AGENTS.md | 4 weeks ago | |
| CODE_OF_CONDUCT.md | 1 month ago | |
| CONTRIBUTING.md | 1 month ago | |
| README.md | 4 weeks ago | |
| SECURITY.md | 1 month ago | |
| SUPPORT.md | 1 month ago | |
| _404.md | 1 month ago | |
| for-teachers.md | 1 month ago | |
README.md
Веб развој за почетнике - Наставни програм
Научите основе веб развоја уз наш свеобухватни курс у трајању од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције детаљно покривају JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, проширења прегледача и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Почните своје програмирање данас!
Придружите се заједници Azure AI Foundry на Дискорду
Пратите ове кораке да бисте започели коришћење ових ресурса:
- Направите форк репозиторијума: Кликните
- Клонирајте репозиторијум:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Придружите се Azure AI Foundry Дискорду и упознајте стручњаке и друге програмере
🌐 Подршка за више језика
Подржано преко GitHub Action (аутоматизовано и увек ажурирано)
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 | 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
Више волите да клонирате локално?
Овај репозиторијум укључује преко 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'Ово вам пружа све што је потребно за завршетак курса уз знатно брже преузимање.
Ако желите додатне језике превода који су подржани, они су наведени овде
🧑🎓 Јеси ли студент?
Посети Student Hub страницу где ћеш пронаћи ресурсе за почетнике, студентске пакете па и начине да добијеш бесплатан сертификат. Ово је страница коју требаш обележити и повремено проверавати јер садржај мењамо месечно.
📣 Објава - Нови изазови у GitHub Copilot Agent режиму!
Нови изазов додат, потражи "GitHub Copilot Agent Challenge 🚀" у већини поглавља. То је нови изазов који треба да завршиш користећи GitHub Copilot и Agent режим. Ако пре тога ниси користио Agent режим, он није способан само за генерисање текста већ може и креирати и уређивати фајлове, извршавати команде и још много тога.
📣 Објава - Нови пројекат за израду користећи Генеративну вештачку интелигенцију
Нови пројекат AI асистента управо додат, погледај проект
📣 Објава - Нови Наставни програм о Генеративној ВИ за JavaScript је управо објављен
Не пропусти наш нови наставни програм о Генеративној ВИ!
Посети 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>са 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 | Почињемо | Увод у програмирање и алати заната | Научите основне основе већине програмских језика и софтвера који помажу професионалним програмерима да обављају свој посао | Увод у програмске језике и алате заната | Jasmine |
| 02 | Почињемо | Основе GitHub-а, укључује рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другима на кодној бази | Увод у GitHub | Floor |
| 03 | Почињемо | Приступачност | Научите основе веб приступачности | Основе приступачности | Christopher |
| 04 | JS Основе | Врсте података у JavaScript-у | Основе JavaScript типова података | Типови података | Jasmine |
| 05 | JS Основе | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | Функције и методе | Jasmine и Christopher |
| 06 | JS Основе | Доношење одлука са JS | Научите како креирати услове у свом коду користећи методе доношења одлука | Доношење одлука | Jasmine |
| 07 | JS Основе | Низови и петље | Рад са подацима коришћењем низова и петљи у JavaScript-у | Низови и петље | Jasmine |
| 08 | Terrarium | HTML у пракси | Направите HTML да креирате онлајн тераријум, фокусирајући се на изградњу распореда | Увод у HTML | Jen |
| 09 | Terrarium | CSS у пракси | Направите CSS за стиловање онлајн тераријума, фокусирајући се на основе CSS укључујући и прављење странице одзивном | Увод у CSS | Jen |
| 10 | Terrarium | JavaScript закључавања, манипулација DOM-ом | Направите JavaScript да тераријум функционише као интерфејс за превлачење и испуштање, фокусирајући се на закључавања и манипулацију DOM-ом | JavaScript закључавања, манипулација DOM-ом | Jen |
| 11 | Typing Game | Направите игру куцања | Научите како користити догађаје са тастатуре за управљање логиком ваше JavaScript апликације | Програмирање на основу догађаја | Christopher |
| 12 | Green Browser Extension | Рад са претраживачима | Научите како претраживачи раде, њихову историју и како направити прве елементе проширења претраживача | О претраживачима | Jen |
| 13 | Green Browser Extension | Прављење форме, позивање API-ја и чување променљивих у локалној меморији | Направите JavaScript елементе вашег проширења претраживача за позивање API-ја користећи променљиве које се чувају у локалној меморији | API-ји, форме и локална меморија | Jen |
| 14 | Green Browser Extension | Позадински процеси у претраживачу, веб перформансе | Користите позадинске процесе претраживача за управљање иконом проширења; научите о перформансама веба и неким оптимизацијама које треба направити | Позадински задаци и перформансе | Jen |
| 15 | Space Game | Напреднији развој игара са JavaScript-ом | Научите о наслеђивању користећи и класе и композицију и Pub/Sub шаблон, у припреми за креирање игре | Увод у напредни развој игара | Chris |
| 16 | Space Game | Цртање на платну | Научите о Canvas API-у, који се користи за цртање елемената на екрану | Цртање на платну | Chris |
| 17 | Space Game | Померање елемената око екрана | Откријте како елементи могу добити кретање коришћењем картоезијских координата и Canvas API-ја | Померање елемената | Chris |
| 18 | Space Game | Детекција судара | Нека се елементи сударају и реагују један на другог коришћењем притиснутих тастера и обезбедите cooldown функцију за осигурање перформанси игре | Детекција судара | Chris |
| 19 | Space Game | Вођење резултата | Изводите математичке прорачуне на основу статуса и перформанси игре | Вођење резултата | Chris |
| 20 | Space Game | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање променљивих | Услов завршетка | Chris |
| 21 | Banking App | HTML шаблони и руте у веб апликацији | Научите како да креирате структуру архитектуре вишестраничног сајта користећи рутирање и HTML шаблоне | HTML шаблони и руте | Yohan |
| 22 | Banking App | Направите форму за пријављивање и регистрацију | Научите о креирању форми и руковању процедурама валидације | Форме | Yohan |
| 23 | Banking App | Методи преузимања и коришћења података | Како подаци тoку из и у вашу апликацију, како их преузети, чувати и обрисати | Подаци | Yohan |
| 24 | Banking App | Концепти управљања стањем | Научите како ваша апликација задржава стање и како га програмски управљати | Управљање стањем | Yohan |
| 25 | Browser/VScode Code | Рад са VScode | Научите како да користите уређивач кода | Коришћење VScode Code Editor-а | Chris |
| 26 | AI Assistants | Рад са вештачком интелигенцијом | Научите како да направите свог AI асистента | AI асистент пројекат | Chris |
🏫 Педагогија
Наш наставни план је дизајниран са два кључна педагошка принципа на уму:
- учење засновано на пројектима
- честе квизове
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које користе данашњи веб програмери. Студенти ће имати прилику да стекну практично искуство прављењем игре куцања, виртуелног тераријума, еко-пријатељског проширења прегледача, игре у стилу свемирског инвазијског нападачa и банкарске апликације за пословање. На крају серије, студенти ће имати чврсто разумевање веб развоја.
🎓 Прве неколико лекција овог наставног плана можете похађати као Learn Path на Microsoft Learn!
Осигуравањем да садржај буде у складу са пројектима, процес учења постаје занимљивији за студенте и повећава задржавање концепата. Такође смо написали неколико уводних лекција о основама JavaScript-а како бисмо увели концепте, уз видео из колекције туторијала "Beginners Series to: JavaScript", чији су неки аутори допринели овом наставном плану.
Поред тога, квиз са ниским улогом пре часа поставља студенту намеру за учење теме, док други квиз након часа осигурава даље задржавање знања. Овај наставни план је осмишљен да буде флексибилан и забаван и може се пратити у целини или делимично. Пројекти почињу мали и постају све сложенији до краја 12-недељног циклуса.
Иако смо намерно избегли увођење JavaScript оквира да бисмо се концентрисали на основне вештине неопходне као веб програмер пре усвајања оквира, добар следећи корак након завршетка овог наставног плана био би учење о Node.js преко друге колекције видео материјала: "Beginner Series to: Node.js".
Посетите наша упутства за Code of Conduct и Contributing. Добронамеран фидбек нам је добродошао!
🧭 Оффлине приступ
Можете да покренете ову документацију офлајн коришћењем Docsify. Клонирајте овај репозиторијум, инсталирајте Docsify на свој локални рачунар, а затим у корену ове фасцикле укуцајте docsify serve. Веб сајт ће бити доступан на порту 3000 на вашем локалном хосту: localhost:3000.
PDF свих лекција може се пронаћи овде.
🎒 Остали курсеви
Наш тим производи и друге курсеве! Погледајте:
LangChain
Azure / Edge / MCP / Agents
Серия генеративне вештачке интелигенције
Основно учење
Серия Copilot
Како добити помоћ
Ако запнете или имате било каквих питања о изградњи AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP. То је подржавајућа заједница где су питања добродошла и где се знање слободно дели.
Ако имате повратне информације о производу или грешке током израде посетите:
Лиценца
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку LICENSE за више информација.
Одрицање одговорности:
Овај документ је преведен уз помоћ AI услуге за превођење Co-op Translator. Иако тежимо тачности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати коначним и ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразума или погрешна тумачења која могу настати коришћењем овог превода.


