38 KiB

Raw Blame History

ဤအရင်းအမြစ်များကို စတင်အသုံးပြုရန် အောက်ပါအဆင့်များကို လိုက်နာပါ-

Repository ကို Fork လုပ်ပါ: ကိုနှိပ်ပါ
Repository ကို Clone လုပ်ပါ: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Azure AI Foundry Discord ကို Join လုပ်ပြီး ကျွမ်းကျင်သူများနှင့် Developer များနှင့်တွေ့ဆုံပါ

စတင်သူများအတွက် Web Development - သင်ရိုး

Microsoft Cloud Advocates မှ 12 ပတ်ကြာ သင်ရိုးတစ်ခုဖြင့် Web Development အခြေခံများကို သင်ယူပါ။ JavaScript, CSS, HTML တို့ကို terrariums, browser extensions, space games စသည့် လက်တွေ့လုပ်ငန်းများဖြင့် သင်ကြားပေးပါသည်။ Quiz များ၊ ဆွေးနွေးပွဲများနှင့် လက်တွေ့အလုပ်များဖြင့် ပါဝင်ဆောင်ရွက်ပါ။ သင်၏ကျွမ်းကျင်မှုများကို တိုးတက်စေပြီး သင်ယူမှုကို ပိုမိုထိရောက်စေမည့် Project-based သင်ကြားမှုနည်းလမ်းဖြင့် သင်တန်းကို စတင်လိုက်ပါ။

🧑‍🎓 ကျောင်းသားလား?

Student Hub page ကို သွားရောက်ကြည့်ရှုပါ။ အခြေခံအရင်းအမြစ်များ၊ ကျောင်းသားအထုပ်များနှင့် အခမဲ့လက်မှတ်ရယူနိုင်မည့် နည်းလမ်းများကို တွေ့နိုင်ပါသည်။ ဤစာမျက်နှာကို Bookmark လုပ်ထားပြီး လစဉ်အကြောင်းအရာများပြောင်းလဲသည့်အခါ ပြန်လည်ကြည့်ရှုပါ။

📣 ကြေညာချက် - Generative AI သင်ရိုး အသစ်ကို မကြာသေးမီက ထုတ်ပြန်ခဲ့သည်

Generative AI သင်ရိုးအသစ်ကို လက်မလွှတ်ပါနှင့်!

https://aka.ms/genai-js-course သို့ သွားရောက်ပြီး စတင်လိုက်ပါ!

အခြေခံမှ RAG အထိ သင်ခန်းစာများ
GenAI နှင့် အပလီကေးရှင်းကို အသုံးပြု၍ သမိုင်းဆိုင်ရာ ဇာတ်ကောင်များနှင့် အပြန်အလှန်ဆွေးနွေးပါ
စိတ်ဝင်စားဖွယ် ဇာတ်လမ်းတစ်ခုဖြင့် အချိန်ခရီးသွားပါ!

သင်ခန်းစာတိုင်းတွင် အလုပ်ပေးစာ, သိမှတ်စရာများနှင့် စိန်ခေါ်မှုများ ပါဝင်ပြီး အောက်ပါအကြောင်းအရာများကို သင်ယူနိုင်ပါသည်-

Prompting နှင့် Prompt Engineering
Text နှင့် Image App ဖန်တီးခြင်း
Search Apps

https://aka.ms/genai-js-course သို့ သွားရောက်ပြီး စတင်လိုက်ပါ!

🌱 စတင်ရန်

ဆရာများ, ဤသင်ရိုးကို အသုံးပြုရန် အကြံပြုချက်များကို ဒီမှာ ထည့်သွင်းထားပါသည်။ သင်၏အကြံပြုချက်များကို ဆွေးနွေးပွဲဖိုရမ် တွင် မျှဝေပါ။

သင်ယူသူများ, သင်ခန်းစာတိုင်းအတွက် Pre-lecture Quiz ဖြင့် စတင်ပြီး သင်ခန်းစာအကြောင်းအရာကို ဖတ်ရှုပါ။ လှုပ်ရှားမှုများကို ပြီးမြောက်စေပြီး Post-lecture Quiz ဖြင့် သင်၏နားလည်မှုကို စစ်ဆေးပါ။

သင်ယူမှုအတွေ့အကြုံကို ပိုမိုကောင်းမွန်စေရန် သင်၏အတန်းဖော်များနှင့် ပူးပေါင်းဆောင်ရွက်ပါ! ဆွေးနွေးပွဲဖိုရမ် တွင် ဆွေးနွေးမှုများကို လှုံ့ဆော်ပြီး သင်၏မေးခွန်းများကို ဖြေကြားပေးမည့် Moderator များရှိပါသည်။

သင်၏ပညာရေးကို ပိုမိုတိုးတက်စေရန် Microsoft Learn တွင် ထပ်မံလေ့လာရန် အကြံပြုပါသည်။

📋 သင့်ပတ်ဝန်းကျင်ကို ပြင်ဆင်ခြင်း

ဤသင်ရိုးသည် ဖွံ့ဖြိုးရေးပတ်ဝန်းကျင်ကို အသင့်ဖြစ်စေပါသည်! သင်စတင်လိုက်သောအခါ Codespace (Browser-based, Install မလိုအပ်သော ပတ်ဝန်းကျင်) သို့မဟုတ် သင်၏ကွန်ပျူတာတွင် Visual Studio Code ကဲ့သို့သော Text Editor ကို အသုံးပြု၍ လုပ်ဆောင်နိုင်ပါသည်။

သင်၏ Repository ကို ဖန်တီးပါ

သင်၏အလုပ်ကို လွယ်ကူစွာ သိမ်းဆည်းနိုင်ရန် သင်၏ Repository ကို ဖန်တီးရန် အကြံပြုပါသည်။ ဤသင်ရိုး၏ မိတ္တူတစ်ခုကို သင်၏ GitHub အကောင့်တွင် ဖန်တီးရန် Use this template ခလုတ်ကို နှိပ်ပါ။

အဆင့်များကို လိုက်နာပါ-

Repository ကို Fork လုပ်ပါ: ဤစာမျက်နှာ၏ အပေါ်ညာဘက်ထောင့်ရှိ "Fork" ခလုတ်ကို နှိပ်ပါ။
Repository ကို Clone လုပ်ပါ: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Codespace တွင် သင်ရိုးကို လည်ပတ်ခြင်း

သင်ဖန်တီးထားသော Repository တွင် Code ခလုတ်ကို နှိပ်ပြီး Open with Codespaces ကို ရွေးချယ်ပါ။ ဤသည် သင်အလုပ်လုပ်ရန် Codespace အသစ်တစ်ခုကို ဖန်တီးပေးပါမည်။

!Codespace

သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ခြင်း

သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ရန် Text Editor, Browser နှင့် Command Line Tool တို့လိုအပ်ပါမည်။ ကျွန်ုပ်တို့၏ ပထမဆုံးသင်ခန်းစာ Programming Languages နှင့် Tools of the Trade အကြောင်းအရာ တွင် သင့်အတွက် အကောင်းဆုံးဖြစ်မည့် Tools များကို ရွေးချယ်ရန် လမ်းညွှန်ထားပါသည်။

ကျွန်ုပ်တို့၏ အကြံပြုချက်မှာ Visual Studio Code ကို Editor အဖြစ် အသုံးပြုရန် ဖြစ်ပြီး၊ ဤသည်တွင် Terminal ပါဝင်သည်။ Visual Studio Code ကို ဤနေရာတွင် ဒေါင်းလုပ်လုပ်ပါ။

သင်၏ Repository ကို သင်၏ကွန်ပျူတာသို့ Clone လုပ်ပါ။ Code ခလုတ်ကို နှိပ်ပြီး URL ကို ကူးယူပါ-

!CodeSpace

ထို့နောက်, Visual Studio Code တွင် Terminal ကို ဖွင့်ပြီး အောက်ပါ Command ကို လုပ်ဆောင်ပါ-
```
git clone <your-repository-url>
```
Visual Studio Code တွင် Folder ကို ဖွင့်ပါ။ File > Open Folder ကို နှိပ်ပြီး သင် Clone လုပ်ထားသော Folder ကို ရွေးချယ်ပါ။

Visual Studio Code အတွက် အကြံပြု Extension များ-

Live Server - HTML စာမျက်နှာများကို Visual Studio Code တွင် ကြည့်ရှုရန်

Copilot - Code ကို ပိုမိုမြန်ဆန်စွာ ရေးရန်

📂 သင်ခန်းစာတိုင်းတွင် ပါဝင်သည်-

စိတ်ကြိုက် Sketchnote
အပို Supplemental Video
Pre-lesson Warmup Quiz
ရေးသားထားသော သင်ခန်းစာ
Project-based သင်ခန်းစာများအတွက် လုပ်ငန်းဆောင်ရွက်ရန် လမ်းညွှန်ချက်များ
သိမှတ်စရာများ
စိန်ခေါ်မှု
အပိုစာဖတ်ရန်
အလုပ်ပေးစာ
Post-lesson Quiz

Quiz များအကြောင်းမှတ်ချက်: Quiz များအားလုံးကို Quiz-app Folder တွင် ထည့်သွင်းထားပြီး၊ 48 ခုရှိသည်။ Quiz တစ်ခုစီတွင် 3 မေးခွန်းပါဝင်သည်။ ဤနေရာတွင် ရရှိနိုင်ပြီး၊ Quiz App ကို Local တွင် သို့မဟုတ် Azure တွင် တင်နိုင်ပါသည်။ quiz-app Folder တွင် လမ်းညွှန်ချက်များကို လိုက်နာပါ။

🗃️ သင်ခန်းစာများ

	Project Name	Concepts Taught	Learning Objectives	Linked Lesson	Author
01	Getting Started	Programming နှင့် Tools of the Trade အကြောင်းအရာများ	Programming Language များနှင့် Professional Developer များအလုပ်လုပ်ရန် အသုံးပြုသော Software များအကြောင်းကို သင်ယူပါ	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	GitHub အခြေခံများ၊ အဖွဲ့နှင့်အတူ အလုပ်လုပ်ခြင်း	GitHub ကို သင်၏ Project တွင် အသုံးပြုနည်း၊ အခြားသူများနှင့် Code Base တွင် ပူးပေါင်းဆောင်ရွက်နည်း	Intro to GitHub	Floor
03	Getting Started	Accessibility	Web Accessibility အခြေခံများကို သင်ယူပါ	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScript Data Types	JavaScript Data Types အခြေခံများ	Data Types	Jasmine
05	JS Basics	Functions and Methods	Application Logic Flow ကို စီမံရန် Functions နှင့် Methods အကြောင်းကို သင်ယူပါ	Functions and Methods	Jasmine and Christopher
06	JS Basics	Making Decisions with JS	Decision-making နည်းလမ်းများကို အသုံးပြု၍ သင်၏ Code တွင် Conditions ဖန်တီးနည်း	Making Decisions	Jasmine
07	JS Basics	Arrays and Loops	JavaScript တွင် Arrays နှင့် Loops ကို အသုံးပြု၍ Data ကို စီမံပါ	Arrays and Loops	Jasmine
08	Terrarium	HTML in Practice	Online Terrarium တစ်ခု ဖန်တီးရန် HTML ကို အသုံးပြု၍ Layout တစ်ခုကို ဖန်တီးပါ	Introduction to HTML	Jen
09	Terrarium	CSS in Practice	Online Terrarium ကို Style ပြုလုပ်ရန် CSS ကို အသုံးပြုပါ၊ CSS အခြေခံများနှင့် Page ကို Responsive ဖြစ်စေရန် အခြေခံများကို သင်ယူပါ	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	JavaScript ကို အသုံးပြု၍ terrarium ကို drag/drop အင်တာဖေ့စ်အဖြစ် လုပ်ဆောင်နိုင်ရန် closures နှင့် DOM ကိုင်တွယ်မှုကို အာရုံစိုက်ပါ။	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Build a Typing Game	JavaScript app ၏ logic ကို keyboard events အသုံးပြု၍ လေ့လာပါ။	Event-Driven Programming	Christopher
12	Green Browser Extension	Working with Browsers	Browser များအလုပ်လုပ်ပုံ၊ ၎င်းတို့၏ သမိုင်းကြောင်းနှင့် browser extension ၏ ပထမဆုံး အစိတ်အပိုင်းများကို စတင်ဖွဲ့စည်းပုံကို လေ့လာပါ။	About Browsers	Jen
13	Green Browser Extension	Building a form, calling an API and storing variables in local storage	Browser extension ၏ JavaScript အစိတ်အပိုင်းများကို API ကို local storage တွင် သိမ်းဆည်းထားသော variable များ အသုံးပြု၍ ဖန်တီးပါ။	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Background processes in the browser, web performance	Browser ၏ background processes ကို အသုံးပြု၍ extension ၏ icon ကို စီမံခန့်ခွဲပါ၊ web performance နှင့် အချို့သော optimization များကို လေ့လာပါ။	Background Tasks and Performance	Jen
15	Space Game	More Advanced Game Development with JavaScript	Class နှင့် Composition နှစ်မျိုးစလုံးကို အသုံးပြု၍ Inheritance ကို လေ့လာပြီး Pub/Sub pattern ကို သင်ယူပါ။	Introduction to Advanced Game Development	Chris
16	Space Game	Drawing to canvas	Canvas API ကို အသုံးပြု၍ screen ပေါ်တွင် element များကို ရေးဆွဲပုံကို လေ့လာပါ။	Drawing to Canvas	Chris
17	Space Game	Moving elements around the screen	Cartesian coordinates နှင့် Canvas API ကို အသုံးပြု၍ element များကို ရွေ့လျားပုံကို ရှာဖွေပါ။	Moving Elements Around	Chris
18	Space Game	Collision detection	Keypress များကို အသုံးပြု၍ element များကို တိုက်ဆိုင်စေပြီး game ၏ performance ကို အာရုံစိုက်ရန် cooldown function ကို ပံ့ပိုးပါ။	Collision Detection	Chris
19	Space Game	Keeping score	Game ၏ အခြေအနေနှင့် performance အပေါ် မူတည်၍ သင်္ချာတွက်ချက်မှုများကို လုပ်ဆောင်ပါ။	Keeping Score	Chris
20	Space Game	Ending and restarting the game	Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်လည်စတင်ခြင်းအကြောင်း၊ asset များကို ရှင်းလင်းခြင်းနှင့် variable တန်ဖိုးများကို ပြန်လည်သတ်မှတ်ခြင်းကို လေ့လာပါ။	The Ending Condition	Chris
21	Banking App	HTML Templates and Routes in a Web App	Routing နှင့် HTML templates ကို အသုံးပြု၍ multipage website architecture ၏ scaffold ကို ဖန်တီးပုံကို လေ့လာပါ။	HTML Templates and Routes	Yohan
22	Banking App	Build a Login and Registration Form	Form များကို ဖန်တီးခြင်းနှင့် validation routine များကို ကိုင်တွယ်ပုံကို လေ့လာပါ။	Forms	Yohan
23	Banking App	Methods of Fetching and Using Data	App ၏ data များကို ဘယ်လို ရယူ၊ သိမ်းဆည်း၊ နှင့် ဖယ်ရှားရမည်ကို လေ့လာပါ။	Data	Yohan
24	Banking App	Concepts of State Management	App ၏ state ကို ဘယ်လို သိမ်းဆည်းပြီး programmatically စီမံခန့်ခွဲရမည်ကို လေ့လာပါ။	State Management	Yohan

🏫 သင်ကြားမှုနည်းလမ်း

ကျွန်ုပ်တို့၏ သင်ရိုးညွှန်းတန်းကို အဓိက သင်ကြားမှုနည်းလမ်းနှစ်ခုအပေါ် အခြေခံထားပါသည်။

စီမံကိန်းအခြေပြု သင်ကြားမှု
မကြာခဏ စစ်ဆေးမှုများ

ဒီအစီအစဉ်က JavaScript, HTML, CSS ၏ အခြေခံများနှင့် ယနေ့၏ web developer များ အသုံးပြုနေသော နောက်ဆုံးပေါ် ကိရိယာများနှင့် နည်းလမ်းများကို သင်ကြားပေးပါသည်။ ကျောင်းသားများသည် typing game, virtual terrarium, သဘာဝပတ်ဝန်းကျင်နှင့် သင့်တော်သော browser extension, space-invader ပုံစံ game, နှင့် စီးပွားရေးလုပ်ငန်းများအတွက် banking app တို့ကို ဖန်တီးခြင်းအားဖြင့် လက်တွေ့အတွေ့အကြုံ ရရှိမည်ဖြစ်သည်။ သင်ရိုးညွှန်းတန်း၏ အဆုံးတွင် ကျောင်းသားများသည် web development အပေါ် အခြေခံအားကောင်းသော နားလည်မှု ရရှိမည်ဖြစ်သည်။

🎓 ဒီသင်ရိုးညွှန်းတန်း၏ ပထမဆုံး သင်ခန်းစာအချို့ကို Microsoft Learn တွင် Learn Path အဖြစ် လေ့လာနိုင်ပါသည်။

စီမံကိန်းများနှင့် အညီ အကြောင်းအရာများကို ကိုက်ညီစေရန် သေချာစွာ စီစဉ်ထားသောကြောင့် ကျောင်းသားများအတွက် ပိုမိုစိတ်ဝင်စားစေပြီး အကြောင်းအရာများကို ပိုမိုမှတ်မိစေပါသည်။ JavaScript အခြေခံများကို မိတ်ဆက်ပေးသည့် starter lesson အချို့ကိုလည်း ရေးသားထားပြီး "Beginners Series to: JavaScript" ဗီဒီယို tutorial စီးရီးမှ ဗီဒီယိုတစ်ခုနှင့် တွဲဖက်ထားပါသည်။ ဤ tutorial များ၏ အချို့သောရေးသားသူများကလည်း ဒီသင်ရိုးညွှန်းတန်းတွင် ပါဝင်ရေးသားထားကြသည်။

ထို့အပြင်၊ သင်တန်းမစတင်မီ စိတ်ဖိစီးမှုမရှိသော စစ်ဆေးမှုတစ်ခုက ကျောင်းသား၏ အာရုံစိုက်မှုကို သင်ခန်းစာအပေါ် ဦးတည်စေပြီး သင်တန်းပြီးဆုံးချိန်တွင် စစ်ဆေးမှုတစ်ခုက အကြောင်းအရာများကို ပိုမိုမှတ်မိစေပါသည်။ ဒီသင်ရိုးညွှန်းတန်းကို ပြီးစီးရန် အချိန် ၁၂ ပတ်ကြာမည်ဖြစ်ပြီး စီမံကိန်းများသည် အစပိုင်းတွင် သေးငယ်ပြီး နောက်ပိုင်းတွင် အဆင့်မြင့်လာမည်ဖြစ်သည်။

JavaScript frameworks များကို မိတ်ဆက်ခြင်းကို ရှောင်ရှားထားပြီး framework များကို သုံးစွဲရန်မတိုင်မီ web developer အဖြစ် လိုအပ်သော အခြေခံကျသော ကျွမ်းကျင်မှုများကို အာရုံစိုက်ထားပါသည်။ ဒီသင်ရိုးညွှန်းတန်းကို ပြီးစီးပြီးနောက် Node.js အကြောင်းကို "Beginner Series to: Node.js" ဗီဒီယို စီးရီးမှတစ်ဆင့် လေ့လာရန် သင့်တော်ပါသည်။

ကျွန်ုပ်တို့၏ Code of Conduct နှင့် Contributing လမ်းညွှန်ချက်များကို ကြည့်ပါ။ သင့်၏ အဆောက်အအုံဆန်းစစ်ချက်များကို ကြိုဆိုပါသည်။

🧭 အော့ဖ်လိုင်း အသုံးပြုမှု

ဤစာတမ်းများကို Docsify အသုံးပြု၍ အော့ဖ်လိုင်းတွင် လည်ပတ်နိုင်ပါသည်။ ဤ repo ကို fork လုပ်ပြီး Docsify ကို သင့် local စက်တွင် install လုပ်ပါ၊ ထို့နောက် repo ၏ root folder တွင် docsify serve ဟု ရိုက်ထည့်ပါ။ website ကို သင့် localhost ၏ port 3000 တွင် လည်ပတ်မည်ဖြစ်သည်။ localhost:3000။

📘 PDF

သင်ခန်းစာများအားလုံး၏ PDF ကို ဒီမှာ ရနိုင်ပါသည်။

🎒 အခြားသင်တန်းများ

ကျွန်ုပ်တို့၏ အဖွဲ့သည် အခြားသင်တန်းများကိုလည်း ထုတ်လုပ်ပါသည်! ကြည့်ပါ:

License

ဤ repository သည် MIT လိုင်စင်အောက်တွင် လိုင်စင်ရရှိထားပါသည်။ ပိုမိုသိရှိရန် LICENSE ဖိုင်ကို ကြည့်ပါ။

အကြောင်းကြားချက်:
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု Co-op Translator ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။

38 KiB Raw Blame History