Front-end Web Development Roadmap for Self-taught Developers

·

3 min read

Front-end Web Development Roadmap for Self-taught Developers

Web developmentကို စပြီးလေ့လာချင်တယ် ဘယ်ကစရမှန်း မသိဘူးဆိုရင် ဒီကစပါ။ 💈

တစ်ခုကြို​ပြောချင်တာကတော့ ဒီpostက ခုမှစလေ့လာမယ့်လူတွေ overwhelmed ဖြစ်မသွားအောင် "essential part"တွေကို သီးသန့်ပြထားတာဖြစ်လို့ ကိုယ်လေ့လာနိုင်ရင် လေ့လာနိုင်သလောက် ထပ်တိုး ဖတ်စရာမှတ်စရာအပိုင်းတွေ ရှိသေးတာကို သိထားစေချင်ပါတယ်။

  • Computer Science အခြေခံကောင်းကောင်းရယ်
  • Internet, Webအလုပ်လုပ်ပုံတွေ
  • Project management methodologyတွေ
  • UI/UX Conceptတွေ
  • Logical thinkingတွေ စသဖြင့် လိုမယ့်အပိုင်းကို ကိုယ်တိုင်ရှာဖွေပြီး ဖတ်ဖို့အကြံပေးပါတယ်။

📌 1. Install and Setup a Text Editor

Codeရေးဖို့ text editorလိုပါတယ်။ ကျနော်ကတော့ VSCodeကို ညွှန်းပါတယ်။

  • လူသုံးများလို့ community/supportပိုကောင်းတယ်
  • Lightweightဖြစ်တယ် Customizeလုပ်ရလွယ်တယ်။
  • Code completionကောင်းပြီး web languageတွေအားလုံးရေးလို့ရတယ်။

    Download here 🔗 code.visualstudio.com/download

📌 2. Learn HTML & CSS

HTMLက စလေ့လာပါမယ်။ အခြေခံအကျဆုံးlanguageဖြစ်လို့ အချိန်နည်းနည်းအတွင်း လေ့လာလို့ရပါတယ်။ ပြီးရင် CSS အခြေခံတွေကို လေ့လာပါ။

HTML က web pageတစ်ခုကို structureချပေးပြီး CSSက styleထည့်ပေးပါတယ်။ Youtubeမှာ HTML, CSS Tutorialဆိုပြီး ရှာလေ့လာပါ။ CSSလေ့လာရင် Layoutချတာအတွက် CSS Flexbox, Gridတို့ပါ ဆက်လေ့လာပါ။ Flexboxတစ်ခုပဲ လေ့လာလည်း ဒီအဆင့်မှာ အဆင်ပြေပါတယ်။

ပြီးရင် HTML, CSSနဲ့ projectတွေလုပ်ကြည့်ပါ။ ပထမတော့ Project Tutorialတွေရှာပြီး followလိုက်လုပ်ပါ။ ပြီးရင်တော့ ကိုယ်တိုင် projectလေးတွေ လုပ်ကြည့်ပါ။ Project-based လေ့လာနည်းက အတတ်လွယ်ဆုံးပါပဲ။

📌 3. Learn a CSS framework

CSS Frameworkတွေက အချိန်ကုန်သက်သာစေပြီး Design Systemတွေအတိုင်း ဖန်တီးထားတာမို့ အချိန်တိုအတွင်း လှလှပပresultရစေပါတယ်။ အလုပ်လိုအပ်ချက်အရတော့ Bootstrap ကို လေ့လာပါ။ Freelanceရေးမှာဆိုရင်တော့ ကိုယ့်teammateနဲ့ အဆင်ပြေရာ Bootstrap, Tailwind, Materialize CSS, Bulma ကြိုက်တာကို လေ့လာနိုင်ပါတယ်။

📌 4. Learn Command Line Interface (CLI)

Developerတွေအနေနဲ့ buttonတွေကိုနှိပ်ပြီး commandပေးရတာထက် Command Line/Terminalနဲ့ လုပ်ရတာက ပိုများပြီး ပိုအသုံးတည့်ပါတယ်။ ဒီတော့ Gitတို့လို Version Control Systemတွေ မလေ့လာခင် CLIအခြေခံတွေကို ရင်းနှီးအောင် အရင်လေ့ကျင့်ထားပါ။ Basic CLIကို နာရီပိုင်းအတွင်း ကောင်းကောင်းလေ့လာလို့ရပါတယ်။

📌 5. Learn Git and Github (Version Control System)

Projectတွေ ရေးတဲ့အခါ အဆင့်ဆင့်developလုပ်ရင်း ကိုယ့်project code fileတွေကို တစ်နေရာမှာ သိမ်းထားဖို့လိုလာပါတယ်။ Code file changesတွေကို Gitသုံးပြီးအလွယ်လေး Manageလုပ်နိုင်ပါတယ်။

Gitက version control အတွက်ဖြစ်ပြီး Githubကတော့ online code file storageပါ။ Git command တွေကတစ်ဆင့် ကိုယ့်Github accountမှာ fileတွေသွားသိမ်းပါတယ်။

tutorialလေးကြည့်/documentationဖတ်ပြီး လိုက်လုပ်ရင်တတ်ပါတယ်။ နေ့စဥ်သုံးရတာမို့ မသိမဖြစ်နည်းပညာတွေပါပဲ။

📌 6. Learn JavaScript Fundamentals

ကျနော်တို့ ပထမဆုံးလေ့လာမယ့်programming languageပါ။ HTML က markup language CSS က Stylesheet languageမို့ပါ။ JavaScriptကိုတော့ ကိုယ့်websiteကို interactionတွေ functionalityတွေထည့်ဖို့ သုံးရပါတယ်။

📌 7. Learn DOM Manipulation with JavaScript

DOM = Document Object Model JavaScriptလေ့လာတဲ့အခါမှာ (၃)ပိုင်းခွဲနိုင်ပါတယ်။

  • the language
  • DOM (JavaScript in browser/client-side)
  • Node.js (JavaScript in server-side) Front-end devတွေအတွက်က ရှေ့(၂)ခုက မဖြစ်မနေသိရမယ့် အပိုင်းတွေပါ။

    JavaScriptအခြေခံတွေကို လေ့လာပြီးရင် browserမှာ အလုပ်လုပ်ဖို့ DOMကိုလေ့လာပါတယ်။

📌 8. Build projects with HTML, CSS & Javascript

ပြီးရင်တော့ ဒီ(၃)ခုပေါင်းပြီး project tutorialတွေ လိုက်လုပ်ပါ။ လက်တွေ့လိုက်ရေးပါ။ ပြီးရင် ခုနကလိုပဲ ideaစဥ်းစားပြီး ကိုယ်တိုင်projectတွေ ရေးကြည့်ပါ။

📌 9. Learn Package Managers Usage (Choose NPM or Yarn)

ရှင်းသွားအောင် ခွဲပြောထားပေမယ့် ဒါကသီးသန့်လေ့လာတာမျိုးမဟုတ်ဘဲ project tutorialတွေ လိုက်လုပ်ရင်းတောင် သင်သွားနိုင်တဲ့အရာမျိုးပါ။ Projectတွေရေးရင် လိုအပ်တဲ့Dependenciesတွေ installလုပ်ဖို့ သုံးပါတယ်။

📌 10. Choose a Javascript framework and start learning

Websiteတွေအတွက် User Interfaceတွေ တည်ဆောက်တဲ့အခါ Javascript Framework တစ်ခုခုသုံးရင် Developလုပ်ရတာလည်း ပိုမြန်ပြီးစနစ်ကျသလို Performanceလည်းပိုသာလို့ User Experience (UX) ပိုကောင်းစေပါတယ်။ Front end developerတွေအတွက်တော့ Frameworkတစ်ခုခုက မရှိမဖြစ် ကျွမ်းကျင်ဖို့လိုပါတယ်။

React, Vue, Angularစသဖြင့် Frameworkတွေ ရွေးချယ်စရာအများကြီးရှိပြီးသားပါ။ ကမ္ဘာပေါ်မှာ အများဆုံးက အချစ်တွေမဟုတ်ပါဘူး JS Frameworkတွေပါဗျာ။ 🤣 ဒါပေမယ့် အလုပ်ခေါ်တာအများဆုံးက React ပါပဲ။ communityကလည်း သူ့မှာအတောင့်တင်းဆုံးလို့ ပြောလို့ရပါတယ်။

ဒီတော့ ရွေးရခက်ရင် Reactကိုရွေးပါ။ Vueကလည်း ခုနောက်ပိုင်းမှာ အလုပ်တွေလည်းပေါပြီး လူသုံးများလာပါတယ် ။ဘယ်ဟာရွေးရင်ကောင်းမလဲ ထိုင်စဥ်းစားနေတာထက် တစ်ခုခုကိုရွေးပြီးရင် လေ့လာဖြစ်ဖို့က ပိုအရေးကြီးပါတယ်။ မှားတယ်လို့ မရှိပါဘူး။ နောက်ကျမှ ပြောင်းလေ့လာချင်လည်း ကိုယ်သိတဲ့knowledgeတွေက transferလုပ်လို့ရပါတယ်။

📌 11. Build Projects with React/Vue/Angular

အပေါ်က အဆင့်တွေလိုပဲ အခြေခံတွေလေ့လာပြီးရင် project tutorialတွေ လိုက်လုပ်ပါ။ အဲလိုနဲ့ လိုအပ်သလောက် နားလည်ပြီထင်ရင် ကိုယ်တိုင်ideaနဲ့ projectတွေ အစအဆုံးရေးကြည့်ပါ။

Backend မပါဘဲ ရေးလို့ရတာတွေရှိပေမယ့် တကယ်အလုပ်လုပ်တဲ့အခါ backendက လိုကိုလိုအပ်ပါတယ်။ ဒီတော့ database အခြေခံရယ်၊ backend apiနဲ့ ပေါင်းပြီး javascript frameworkတွေကိုသုံးနည်းရယ် လေ့လာထားဖို့လည်းလိုပါတယ်။ အလုပ်လုပ်တဲ့အခါ backend developerတစ်ယောက်နဲ့ ပေါင်းလုပ်ရပါမယ်။

📌 12. Deploy Projects (Hosting)

ဒီအဆင့်ကတော့ အရေးအကြီးဆုံးထဲ ပါပါတယ်။ ကိုယ့်projectတွေကို userတွေသုံးနိုင်ဖို့ onlineမှာ hostလုပ်ပေးရပါတယ်။

Heroku, Netlify, Vercelတို့က သုံးရလွယ်ပါတယ်။ နောက်ထပ်

  • Firebase
  • AWS
  • Github Pages
  • Microsoft Azureတို့လည်း ရွေးချယ်နိုင်ပါတယ်။ အများစုက စမ်းသပ်ဖို့အတွက် freeပါ။

    Hosting/Deploymentမှာတော့ တစ်ခုထက်မက သုံးတတ်တာကပိုကောင်းပါတယ်။ တစ်ခုကိုလေ့လာပြီးလို့ သဘောတရားနားလည်သွားရင် နောက်တစ်ခုက လွယ်လွယ်နဲ့တတ်ပါတယ်။

🌿 🌿 🌿

Web developmentက နည်းနည်းရှုပ်ထွေးပြီး လေ့လာစရာတွေများတယ်လို့ ထင်ရပေမယ့် တစ်ဆင့်ပြီးတစ်ဆင့်ပိုင်အောင် လေ့လာပြီး လမ်းကြောင်းလေးအတိုင်း သွားရင် ရိုးရှင်းပါတယ်။ (Simple, not easyပါ) လက်ရှိအလုပ်လုပ်နေတဲ့လူတွေတိုင်း အခက်အခဲတွေ၊ နားမလည်လို့ စိတ််ရှုပ်ရတာတွေ၊ ဆက်မလုပ်ချင်တော့တာတွေ ဖြတ်သန်းပြီးမှ ဒီအခြေအနေကို ရောက်ကြတာပါ။

ဒီအတိုင်းလေ့လာဖို့ resourceတွေ မရှာတတ်ဖူးဆိုရင် ကျနော်လည်းတင်ပေးဖို့ရှိပါတယ်။ ဘော်ဒါတွေနဲ့အတူတူ ညှိပြီးလေ့လာရင်တော့ ပိုလုပ်ဖြစ်ပါတယ်။ တစ်ယောက်တည်းဆိုရင်လည်း စိတ်အားထက်သန်ရင် အဆင်ပြေတာပါပဲ။

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

အထောက်အကူဖြစ်ကြလိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။ 🥷

You can help our page grow just by sharing. 🚀

🔵 “References”

  • Prathkum
  • Marko Denic
  • codeStackr