|
|
2 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 months ago | |
| 2-js-basics | 2 months ago | |
| 3-terrarium | 2 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 3 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 2 months ago | |
| 9-chat-project | 3 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 2 months ago | |
| quiz-app | 3 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 2 months ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
Пратите ове кораке да бисте започели коришћење ових ресурса:
- Fork репозиторијума: Кликните
- Клонирајте репозиторијум:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Придружите се Azure AI Foundry Discord серверу и упознајте стручњаке и друге програмере
Веб развој за почетнике - Курикулум
Научите основе веб развоја уз наш свеобухватни 12-недељни курс који су креирали Microsoft Cloud Advocates. Свака од 24 лекције обрађује JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, екстензије за претраживач и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз наш ефикасан приступ заснован на пројектима. Започните своје кодерско путовање већ данас!
🌐 Подршка за више језика
Подржано преко GitHub Action (аутоматски и увек ажурирано)
Француски | Шпански | Немачки | Руски | Арапски | Персијски (фарси) | Урду | Кинески (поједностављени) | Кинески (традиционални, Макао) | Кинески (традиционални, Хонг Конг) | Кинески (традиционални, Тајван) | Јапански | Корејски | Хинди | Бенгалски | Марати | Непалски | Пенџабски (гурмуки) | Португалски (Португалија) | Португалски (Бразил) | Италијански | Пољски | Турски | Грчки | Тајландски | Шведски | Дански | Норвешки | Фински | Холандски | Хебрејски | Вијетнамски | Индонежански | Малајски | Тагалог (Филипински) | Свахили | Мађарски | Чешки | Словачки | Румунски | Бугарски | Српски (ћирилица) | Хрватски | Словеначки | Украјински | Бирмански (Мјанмар)
Ако желите да додате још језика, подржани језици су наведени овде
🧑🎓 Да ли сте студент?
Посетите Student Hub страницу где ћете пронаћи ресурсе за почетнике, студентске пакете и чак начине да добијете бесплатан ваучер за сертификат. Ово је страница коју треба да обележите и повремено проверавате јер садржај мењамо месечно.
📣 Обавештење - Нови пројекат за изградњу помоћу генеративне вештачке интелигенције
Додат је нови пројекат 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 репозиторијума: Кликните на дугме "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-а:
Затим, отворите Терминал унутар 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 | Почетак рада | Увод у програмирање и алате за рад | Научите основне принципе већине програмских језика и софтвер који помаже професионалним програмерима у њиховом раду | Увод у програмске језике и алате за рад | Јасмин |
| 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 | Свемирска игра | Детекција судара | Направите да се елементи сударају и реагују један на други користећи притиске на тастере и обезбедите функцију хлађења ради перформанси игре | Детекција судара | Крис |
| 19 | Свемирска игра | Чување резултата | Извршите математичке прорачуне на основу статуса и перформанси игре | Чување резултата | Крис |
| 20 | Свемирска игра | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | Услов за завршетак | Крис |
| 21 | Банкарска апликација | HTML шаблони и руте у веб апликацији | Научите како да направите скелет архитектуре веб странице са више страница користећи руте и HTML шаблоне | HTML шаблони и руте | Јохан |
| 22 | Банкарска апликација | Направите форму за пријаву и регистрацију | Научите како да направите форме и обрађујете рутине за валидацију | Форме | Јохан |
| 23 | Банкарска апликација | Методе за преузимање и коришћење података | Како подаци протичу унутар и ван ваше апликације, како их преузети, сачувати и уклонити | Подаци | Јохан |
| 24 | Банкарска апликација | Концепти управљања стањем | Научите како ваша апликација задржава стање и како њиме управљати програмски | Управљање стањем | Јохан |
| 25 | Прегледач/VScode Code | Рад са VScode | Научите како да користите уређивач кода | Коришћење VScode уређивача кода | Крис |
| 26 | AI Асистенти | Рад са AI | Научите како да направите сопственог AI асистента | Пројекат AI асистента | Крис |
🏫 Педагошки приступ
Наш наставни план је осмишљен са два кључна педагошка принципа:
- учење засновано на пројектима
- чести квизови
Програм подучава основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данашњи веб програмери користе. Студенти ће имати прилику да стекну практично искуство кроз израду игре куцања, виртуелног тераријума, еко-пријатељског проширења за прегледач, игре у стилу свемирских нападача и банкарске апликације за предузећа. До краја серије, студенти ће стећи солидно разумевање веб развоја.
🎓 Прве лекције из овог наставног плана можете преузети као Learn Path на Microsoft Learn!
Осигуравањем да садржај одговара пројектима, процес постаје занимљивији за студенте, а задржавање концепата ће бити побољшано. Такође смо написали неколико уводних лекција о основама JavaScript-а за увођење концепата, уз видео из колекције "Beginners Series to: JavaScript", чији су неки аутори допринели овом наставном плану.
Поред тога, квиз са ниским ризиком пре часа поставља намеру студента ка учењу теме, док други квиз након часа осигурава даље задржавање. Овај наставни план је осмишљен да буде флексибилан и забаван и може се узети у целини или делимично. Пројекти почињу малим и постају све сложенији до краја 12-недељног циклуса.
Иако смо намерно избегли увођење JavaScript оквира како бисмо се концентрисали на основне вештине потребне као веб програмер пре усвајања оквира, добар следећи корак након завршетка овог наставног плана био би учење о Node.js-у кроз другу колекцију видеа: "Beginner Series to: Node.js".
Погледајте наш Кодекс понашања и смернице за Допринос. Добродошли сте да нам доставите конструктивне повратне информације!
🧭 Офлајн приступ
Можете покренути ову документацију офлајн користећи Docsify. Форкујте овај репозиторијум, инсталирајте Docsify на ваш локални рачунар, а затим у коренској фасцикли овог репозиторијума укуцајте docsify serve. Веб-сајт ће бити доступан на порту 3000 на вашем localhost-у: localhost:3000.
PDF свих лекција можете пронаћи овде.
🎒 Остали курсеви
Наш тим производи и друге курсеве! Погледајте:
- Генеративни AI за почетнике
- Генеративни AI за почетнике .NET
- Генеративни AI са JavaScript-ом
- Генеративни AI са Java-ом
- AI за почетнике
- Наука о подацима за почетнике
- Машинско учење за почетнике
- Сајбер безбедност за почетнике
- Веб развој за почетнике
- IoT за почетнике
- XR развој за почетнике
- Усавршавање GitHub Copilot-а за агентску употребу
- Усавршавање GitHub Copilot-а за C#/.NET програмере
- Изаберите своју авантуру са Copilot-ом
Помоћ
Ако се заглавите или имате питања о креирању AI апликација, придружите се:
Ако имате повратне информације о производу или наиђете на грешке током креирања, посетите:
Лиценца
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте LICENSE датотеку за више информација.
Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за аутоматски превод Co-op Translator. Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.


