|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "efa251c5fc089367f0a81c572874afca",
|
|
|
"translation_date": "2025-08-28T10:00:56+00:00",
|
|
|
"source_file": "README.md",
|
|
|
"language_code": "sr"
|
|
|
}
|
|
|
-->
|
|
|
[](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)
|
|
|
|
|
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
|
|
|
|
|
[](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)
|
|
|
|
|
|
# Веб развој за почетнике - Курикулум
|
|
|
|
|
|
Научите основе веб развоја уз наш свеобухватни 12-недељни курс који су креирали Microsoft Cloud Advocates. Свака од 24 лекције обрађује JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, екстензије за претраживач и свемирске игре. Учествујте у квизовима, дискусијама и практичним задацима. Унапредите своје вештине и оптимизујте задржавање знања уз наш ефикасан приступ заснован на пројектима. Започните своје програмирање већ данас!
|
|
|
|
|
|
#### 🧑🎓 _Да ли сте студент?_
|
|
|
|
|
|
Посетите [**Студентску страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћете пронаћи ресурсе за почетнике, студентске пакете и чак начине да добијете бесплатан ваучер за сертификат. Ово је страница коју треба да обележите и повремено проверавате јер садржај мењамо сваког месеца.
|
|
|
|
|
|
### 📣 Обавештење - _Нови курикулум_ о генеративној вештачкој интелигенцији за 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 у коме можете радити.
|
|
|
|
|
|
[!Codespace](../..)./images/createcodespace.png)
|
|
|
|
|
|
#### Покретање курикулума локално на вашем рачунару
|
|
|
|
|
|
Да бисте покренули овај курикулум локално на вашем рачунару, биће вам потребан текст едитор, претраживач и алат за командну линију. Наша прва лекција, [Увод у програмске језике и алате](../../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) и покрените следећу команду, замењујући `<your-repository-url>` са URL-ом који сте управо копирали:
|
|
|
|
|
|
```bash
|
|
|
git clone <your-repository-url>
|
|
|
```
|
|
|
|
|
|
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) | Џен |
|
|
|
| 11 | [Игра куцања](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како да користите догађаје са тастатуре за управљање логиком ваше JavaScript апликације | [Програмирање засновано на догађајима](./4-typing-game/typing-game/README.md) | Кристофер |
|
|
|
| 12 | [Еко додатак за прегледач](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како функционишу прегледачи, њихову историју и како да направите прве елементе додатка за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Џен |
|
|
|
| 13 | [Еко додатак за прегледач](./5-browser-extension/solution/README.md) | Израда форме, позивање API-ја и чување променљивих у локалној меморији | Направите JavaScript елементе вашег додатка за прегледач како бисте позвали API користећи променљиве сачуване у локалној меморији | [API-ји, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Џен |
|
|
|
| 14 | [Еко додатак за прегледач](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконом додатка; научите о веб перформансама и оптимизацијама | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Џен |
|
|
|
| 15 | [Свемирска игра](./6-space-game/solution/README.md) | Напреднија израда игара са JavaScript-ом | Научите о наслеђивању користећи класе и композицију, као и Pub/Sub образац, као припрему за израду игре | [Увод у напредну израду игара](./6-space-game/1-introduction/README.md) | Крис |
|
|
|
| 16 | [Свемирска игра](./6-space-game/solution/README.md) | Цртање на платну | Научите о Canvas API-ју, који се користи за цртање елемената на екрану | [Цртање на платну](./6-space-game/2-drawing-to-canvas/README.md) | Крис |
|
|
|
| 17 | [Свемирска игра](./6-space-game/solution/README.md) | Померање елемената по екрану | Откријте како елементи могу добити кретање користећи координатни систем и Canvas API | [Померање елемената](./6-space-game/3-moving-elements-around/README.md) | Крис |
|
|
|
| 18 | [Свемирска игра](./6-space-game/solution/README.md) | Детекција судара | Учини да се елементи сударају и реагују једни на друге користећи притиске тастера и обезбеди функцију хлађења ради перформанси игре | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Крис |
|
|
|
| 19 | [Свемирска игра](./6-space-game/solution/README.md) | Чување резултата | Извршите математичке прорачуне на основу статуса и перформанси игре | [Чување резултата](./6-space-game/5-keeping-score/README.md) | Крис |
|
|
|
| 20 | [Свемирска игра](./6-space-game/solution/README.md) | Завршетак и поновно покретање игре | Научите како завршити и поново покренути игру, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов за завршетак](./6-space-game/6-end-condition/README.md) | Крис |
|
|
|
| 21 | [Банкарска апликација](./7-bank-project/solution/README.md) | HTML шаблони и руте у веб апликацији | Научите како да направите структуру архитектуре веб сајта са више страница користећи руте и HTML шаблоне | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Јохан |
|
|
|
| 22 | [Банкарска апликација](./7-bank-project/solution/README.md) | Израда форме за пријаву и регистрацију | Научите како да направите форме и обрађујете рутине за валидацију | [Форме](./7-bank-project/2-forms/README.md) | Јохан |
|
|
|
| 23 | [Банкарска апликација](./7-bank-project/solution/README.md) | Методи за преузимање и коришћење података | Како подаци теку у и из ваше апликације, како их преузети, сачувати и обрисати | [Подаци](./7-bank-project/3-data/README.md) | Јохан |
|
|
|
| 24 | [Банкарска апликација](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како ваша апликација задржава стање и како њиме управљати програмски | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Јохан |
|
|
|
|
|
|
|
|
|
## 🏫 Педагошка основа
|
|
|
|
|
|
Наш наставни план и програм је осмишљен са два кључна педагошка принципа:
|
|
|
* учење засновано на пројектима
|
|
|
* честе провере знања
|
|
|
|
|
|
Програм подучава основе 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).
|
|
|
|
|
|
|
|
|
## 🎒 Остали курсеви
|
|
|
|
|
|
Наш тим производи и друге курсеве! Погледајте:
|
|
|
|
|
|
- [Генеративна вештачка интелигенција за почетнике](https://aka.ms/genai-beginners)
|
|
|
- [Генеративна вештачка интелигенција за почетнике .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
|
|
|
- [Генеративна вештачка интелигенција са JavaScript-ом](https://github.com/microsoft/generative-ai-with-javascript)
|
|
|
- [Генеративна вештачка интелигенција са Java-ом](https://github.com/microsoft/Generative-AI-for-beginners-java)
|
|
|
- [Вештачка интелигенција за почетнике](https://aka.ms/ai-beginners)
|
|
|
- [Наука о подацима за почетнике](https://aka.ms/datascience-beginners)
|
|
|
- [Машинско учење за почетнике](https://aka.ms/ml-beginners)
|
|
|
- [Сајбер безбедност за почетнике](https://github.com/microsoft/Security-101)
|
|
|
- [Веб развој за почетнике](https://aka.ms/webdev-beginners)
|
|
|
- [IoT за почетнике](https://aka.ms/iot-beginners)
|
|
|
- [XR развој за почетнике](https://github.com/microsoft/xr-development-for-beginners)
|
|
|
- [Савладавање GitHub Copilot-а за агентску употребу](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
|
|
|
- [Савладавање GitHub Copilot-а за C#/.NET програмере](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
|
|
|
- [Изаберите своју авантуру са Copilot-ом](https://github.com/microsoft/CopilotAdventures)
|
|
|
|
|
|
## Лиценца
|
|
|
|
|
|
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте [ЛИЦЕНЦУ](../../LICENSE) за више информација.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Одрицање од одговорности**:
|
|
|
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода. |
