Myanmar Coder Guide

Course Outline from w3school.com

Sunday, November 29, 2020

Using Codepen

Codepan ဆိုတာကတော့ HTML, CSS, JavaScript Code တွေကို Websit ပေါ် မှာ Live Edited လုပ်နိုင်ပြီး Result ကိုလည်း Live ကြည့်နိုင်တဲ့ Website တစ်ခုဖြစ်ပါတယ်။

Codepen ကို ဘာကြောင့်သုံးရတာလဲ ဆိုတာ့ Try it Yourself! Button ကိုနှိပ် ပြီး Example Code နှင့် Result ကိုတွဲပြီးလေ့လာနိုင်ဖို့ အတွက် ဖြစ်ပါတယ်။

Account ဖွင့်ခြင်း၊ Login ဝင်ခြင်း

codepen.io Websit ကိုသွားလိုက်ပါ။

ကျွန်တော်တို့ အောက်ကပုံအတိုင်းမြင်ရတဲံအခါ ညာဘက်အပေါ်ဒေါင့်က Sing Up ဆိုတဲ့ Button ကိုနှိပ်လိုက်ပါ။

ပြီးရင် အကောင့်ဖွင့်ပုံဖွင့်နည်း၊ Varified လုပ်နည်းတွေတော့ အသေးစိတ်မရေးတော့ပါဘူး။ ပြီးရင်တော့ Login ဝင်လိုက်ပါ။

(အခက်အခဲရှိရင် Facebook Messenger မှာလာမေးနိုင်ပါတယ်။)

Login ဝင်ပြီးသွားရင်တော့ ညာဘက်အပေါ်ဒေါင့်က ခလုပ်လေးကိုနှိပ်ပြီး New pen ဆိုပြီး အသစ်တောင်းလိုက်ပါ။

ပြီးရင်တော့ ဘာ Code မှမရေးခင်မှာ အရင်ဆုံး Name ပေးပါမယ်။

Name ပေးတဲ့အခါမှာ ကျွန်တော်ကတော့ ကျွန်တော်တင်တဲ့ ပိုစ့် Name ပြီတော့ နောက်က ဂဏန်း ၂ လုံးနံပတ်ပေးပါတယ်။ ဂဏန်းနှစ်လုံးနံပတ်ကတော့ ပိုစ့်တစ်ခုမှာ Example Code က တစ်ခုထက်ပိုပါနိုင်တယ်လေ။ ပထမ Example Code အတွက်ဆို _01, ဒုတိယ အတွက်ဆို _02 စသည်ဖြင့်ပေးပါတယ်။ ဒီတော့ ဥပမာ - JS Where To _01, JS Whert to _02 စသည်ဖြင့် ပေးပါတယ်။

မိတ်ဆွေတို့ကတော့ အဆင်ပြေသလို ပေးနိုင်ပါတယ်။ အဓိက, က ရှင်းရှင်းလင်းလင်မြင်သာဖို့၊ နောက်ပိုင်း ပြင်ဆင်ရာမှာ လွယ်ကူစေဖို့ စဉ်းစားပြီးပေးပါ။

ပြီးသွားရင်တော့ လိုအပ်မယ့် Code တွေကို HTML, CSS, JavaScript တွေထဲမှာရေးထည့်နိုင်ပါပြီ။ လိုအပ်သလို ရေးပြီးသွားပြီဆိုရင်တော့ Save လုပ်လိုက်ပါ။

Save လိုက်တာနဲ့ URL ပြောင်းသွားတာကို သတိထားမိကြပါလိမ့်မယ်။

အဲဒိ URL ကို Copy ယူပြီး သက်ဆိုင်ရာ Try it yourself! Button ရဲ့ href="" Attribute မှာထည့်ပေးလိုက်ရုံပါဘဲ။

Try it Yourself! Button တွေမှာ target="_blank" ထားဖို့ကလည်း အရေးကြီးပါတယ်နော်။


ကျေးဇူးတင်ပါတယ် အဆင်ပြေမယ်လို့ မျှော်လင့်ပါတယ်။

အဆင်မပြေတာရှိရင် Comment ချန်ပြီးမေးခဲ့ နိုင်ပါတယ်။

No comments:

Post a Comment