Нauчите основе веб развоја уз наш свеобухватни курс од 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-u и упознајте експерте и друге програмере
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:
Bash / macOS / Linux:
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'CMD (Windows):
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 Challenge 🚀" у већини поглавља. То је нови изазов који треба да завршите коришћењем GitHub Copilot и Agent мода. Ако раније нисте користили Agent мод, он није само за генерисање текста већ може и да креира и уређује фајлове, извршава команде и још много тога.
Управо додат нови AI Assistant пројекат, погледајте пројекат
📣 Обавештење - Нови наставни план о генеративној вештачкој интелигенцији за 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
У својој копији репозиторијума коју сте направили, кликните на дугме Code и изаберите Open with Codespaces. Ово ће креирати нови Codespace у којем ћете радити.
Да бисте локално покренули овај наставни план на вашем рачунару, потребан вам је уређивач текста, прегледач и алат за командну линију. Наша прва лекција, Увод у програмске језике и алате рада, водиће вас кроз разне опције за сваки од ових алата тако да изаберете шта вам највише одговара.
Наш савет је да користите Visual Studio Code као уређивач, који такође има уграђени Терминал. Visual Studio Code можете преузети овде.
-
Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме Code и копирањем УРЛ-а:
Затим отворите 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 | Почетак рада | Увод у програмирање и алатке струке | Научите основне основе иза већине програмских језика и о софтверу који помаже професионалним програмерима у раду | Увод у програмске језике и алатке струке | 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 | Тераријум | HTML у пракси | Изградите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда | Увод у HTML | Jen |
| 09 | Тераријум | CSS у пракси | Направите CSS за стил тераријума, фокусирајући се на основе CSS-а укључујући додавање респонзивности страницама | Увод у CSS | Jen |
| 10 | Тераријум | JavaScript затварања, манипулација DOM-ом | Направите JavaScript да тераријум функционише као drag/drop интерфејс, фокусирајући се на затварања и манипулацију DOM-ом | JavaScript затварања, манипулација DOM-ом | Jen |
| 11 | Игра куцања | Направите игру куцања | Научите како да искористите тастатурне догађаје за управљање логиком ваше JavaScript апликације | Програмирање вођено догађајима | Christopher |
| 12 | Грин екстензија за прегледач | Рад са прегледачима | Сазнајте како прегледачи раде, њихову историју и како створити прве елементе проширења за прегледач | О прегледачима | Jen |
| 13 | Грин екстензија за прегледач | Креирање форме, позивање API-ја и складиштење променљивих у локалну меморију | Направите JavaScript елементе ваше екстензије за позивање API користећи променљиве у локалној меморији | API-ји, форме и локална меморија | Jen |
| 14 | Грин екстензија за прегледач | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом екстензије; научите о веб перформансама и оптимизацијама | Позадински задаци и перформансе | Jen |
| 15 | Свемирска игра | Напреднија израда игре у JavaScript-у | Научите о наследству користећи и класе и композицију и Pub/Sub образац, као припрему за израду игре | Увод у напредну израду игара | Chris |
| 16 | Свемирска игра | Цртање на платну (canvas) | Научите о Canvas API-ју, који се користи за цртање елемената на екрану | Цртање на платну | Chris |
| 17 | Свемирска игра | Премештање елемената по екрану | Откријте како елементи добијају кретање користећи картизне координате и Canvas API | Премештање елемената | Chris |
| 18 | Свемирска игра | Детекција судара | Учини да се елементи сударају и реагују један на други користећи притиске тастера и обезбедите функцију хладног периода за глaдко функционисање игре | Детекција судара | Chris |
| 19 | Свемирска игра | Водити резултат | Обављај математичке операције на основу статуса и перформанси игре | Води резултат | Chris |
| 20 | Свемирска игра | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | Услов за завршетак | Chris |
| 21 | Банкарска апликација | HTML шаблони и руте у веб апликацији | Научите како направити структуру више страница у вебсајту користећи рутирање и HTML шаблоне | HTML шаблони и руте | Yohan |
| 22 | Банкарска апликација | Направите форму за пријаву и регистрацију | Научите како изградити форме и руковати валидацијом | Форме | Yohan |
| 23 | Банкарска апликација | Начини дохвата и коришћења података | Како подаци улазе и излазе из ваше апликације, како их дохватити, складиштити и уклонити | Подаци | Yohan |
| 24 | Банкарска апликација | Концепти управљања стањем (state management) | Научите како ваша апликација задржава стање и како га програмски управљати | Управљање стањем | Yohan |
| 25 | Прегледач/VScode кôд | Рад са VScode-ом | Научите како користити уређивач кôда | Употреба VScode уређивача кôда | Chris |
| 26 | AI асистенти | Рад са вештачком интелигенцијом | Научите како направити свог AI асистента | Пројекат AI асистента | Chris |
Наш наставни план и програм је дизајниран са два кључна педагошка принципа у виду:
- учење засновано на пројектима
- чести квизови
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данас користе веб развојни инжењери. Студенти ће имати прилику да стекну практично искуство израдом игре куцања, виртуелног тераријума, еколошки прихватљивог проширења за прегледач, игре у стилу свемирских нападача и банкарске апликације за предузећа. До краја серије, студенти ће стећи солидно разумевање веб развоја.
🎓 Прве неколико лекција у овом курикулуму можете узети као 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 svih lekcija можете пронаћи овде.
Наш тим производи и друге курсеве! Погледајте:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Ако застакнете или имате било каквих питања у вези са прављењем AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP-у. То је подршка заједница где су питања добродошла и знање се слободно дели.
Ако имате повратне информације о производу или грешке приликом прављења, посетите:
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку LICENSE за више информација.
Одрицање од одговорности: Овај документ је преведен помоћу AI сервиса за превођење Co-op Translator. Иако тежимо прецизности, имајте у виду да аутоматски преводи могу да садрже грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразуми или неправилна тумачења проистекла из коришћења овог превода.