Thuta Learning
Search
Full-Stack Web Developer လမ်းကြောင်း cover illustration
beginner

Full-Stack Web Developer လမ်းကြောင်း

Website အခြေခံမှ React၊ Next.js၊ API၊ database နှင့် production deployment အထိ project လုပ်ရင်း အဆင့်လိုက်သင်ယူမည့် လမ်းကြောင်း။

Who this is for
Programming မသိသေးသူမှ ကိုယ်ပိုင် full-stack project တည်ဆောက်လိုသူအထိ
Duration
About 55 hours
Modules
5 modules · 11 tutorials

Prerequisites

  • Computer သုံးတတ်ပြီး file နှင့် folder အခြေခံနားလည်ထားရန်
  • တစ်ပတ်လျှင် အနည်းဆုံး ၆ နာရီခန့် လက်တွေ့ရေးနိုင်ရန်
  • အစပိုင်းတွင် programming အတွေ့အကြုံ မလိုအပ်ပါ

Learning outcomes

  • Semantic HTML နှင့် responsive CSS ဖြင့် အသုံးပြုရလွယ်ကူသော website တည်ဆောက်နိုင်မည်
  • JavaScript နှင့် TypeScript ဖြင့် browser logic ရေးနိုင်မည်
  • React component၊ state နှင့် data flow ကို မှန်ကန်စွာ အသုံးချနိုင်မည်
  • Next.js ဖြင့် frontend၊ backend နှင့် routing ပါဝင်သော application တည်ဆောက်နိုင်မည်
  • API နှင့် SQL database ကို ချိတ်ဆက်အသုံးပြုနိုင်မည်
  • Git၊ Docker နှင့် deployment workflow ဖြင့် project ကို production တင်နိုင်မည်

Curriculum

1

အဆင့် ၁ — Web ရဲ့ အခြေခံအုတ်မြစ်

About 12 hours

Browser က website ကို ဘယ်လိုဖတ်သလဲဆိုတာ နားလည်ပြီး content structure နဲ့ responsive layout ကို ကိုယ်တိုင်ရေးမယ်။

Skills

HTMLSemantic markupCSSResponsive design

Tutorials

HTMLStart tutorial →CSSStart tutorial →

Hands-on project

ဖုန်းနှင့် desktop နှစ်မျိုးလုံးအဆင်ပြေသော Personal Portfolio တည်ဆောက်ပါ။

2

အဆင့် ၂ — Programming နှင့် Version Control

About 11 hours

JavaScript ဖြင့် logic စဉ်းစားနည်း၊ DOM interaction နှင့် asynchronous data ကို လေ့လာပြီး Git ဖြင့် အလုပ်မှတ်တမ်းတင်မယ်။

Skills

JavaScriptDOMAsync programmingGit

Tutorials

JavaScriptStart tutorial →GitStart tutorial →

Hands-on project

Browser storage ပါသော Expense Tracker တစ်ခုရေးပြီး GitHub repository တင်ပါ။

3

အဆင့် ၃ — Type-safe Component UI

About 9 hours

TypeScript နဲ့ code error တွေကို စောစောဖမ်းပြီး React component၊ props၊ state တို့ဖြင့် UI ကို အပိုင်းလိုက်တည်ဆောက်မယ်။

Skills

TypeScriptReactComponentsState management

Tutorials

TypeScriptStart tutorial →ReactStart tutorial →

Hands-on project

Search၊ filter နဲ့ form validation ပါသော Task Dashboard တည်ဆောက်ပါ။

4

အဆင့် ၄ — Full-Stack Application

About 14 hours

Next.js App Router၊ server/client components၊ API design နဲ့ Node.js backend အခြေခံတို့ကို ပေါင်းစပ်မယ်။

Skills

Next.jsNode.jsREST APIAuthentication flow

Tutorials

Next.jsStart tutorial →API TutorialStart tutorial →Node.jsStart tutorial →

Hands-on project

Login၊ CRUD နဲ့ role အခြေခံခွင့်ပြုချက် ပါသော Notes application တည်ဆောက်ပါ။

5

အဆင့် ၅ — Data နှင့် Production

About 9 hours

Relational data ကို စနစ်တကျသိမ်းဆည်းပြီး application ကို container ပြုလုပ်ကာ production deployment အတွက် ပြင်ဆင်မယ်။

Skills

SQLData modelingDockerDeployment

Tutorials

SQLStart tutorial →DockerStart tutorial →

Hands-on project

Database backup plan၊ environment variables နဲ့ Docker image ပါသော final project ကို deploy လုပ်ပါ။

Suggested schedule

  1. 1ပထမ ၃ ပတ် — HTML၊ CSS နှင့် responsive portfolio
  2. 2အပတ် ၄ မှ ၆ — JavaScript၊ DOM နှင့် Git workflow
  3. 3အပတ် ၇ မှ ၉ — TypeScript နှင့် React project
  4. 4အပတ် ၁၀ မှ ၁၃ — Next.js၊ API နှင့် Node.js
  5. 5အပတ် ၁၄ မှ ၁၅ — SQL၊ Docker နှင့် production deployment

Completion checklist

  • Module project ၅ ခုလုံးကို ကိုယ်တိုင်ရေးပြီး README ထည့်ထားခြင်း
  • Final project ကို public URL တစ်ခုဖြင့် အသုံးပြုနိုင်ခြင်း
  • Code ကို Git repository တွင် commit history ကောင်းကောင်းဖြင့် ထိန်းသိမ်းထားခြင်း

Supporting articles

React နဲ့ Next.js ဘာကွာလဲReact library နဲ့ Next.js framework တို့၏တာဝန်၊ rendering၊ routing နဲ့ project ရွေးချယ်ပုံကို ရှင်းလင်းစွာ နှိုင်းယှဉ်ထားပါတယ်။Web Development အတွက် အကောင်းဆုံး ToolsTool များစွာစုဆောင်းမည့်အစား editor၊ browser DevTools၊ Git၊ package manager၊ formatter၊ testing နဲ့ API tools ပါဝင်သော အလုပ်ဖြစ်သည့် workflow တစ်ခုတည်ဆောက်ပါ။API Key ကို လုံခြုံစွာ အသုံးပြုနည်းAPI key ကို source code သို့ browser ထဲမဖော်ဘဲ environment variables၊ secret managers၊ least privilege၊ rotation နဲ့ monitoring ဖြင့် စီမံနည်း။Cloudflare Pages vs VercelStatic site၊ Next.js full-stack app၊ edge runtime နဲ့ deployment workflow အလိုက် Cloudflare Pages နှင့် Vercel ကို ဘယ်လိုရွေးမလဲ။

Official references