Creative Coder Myanmar
1.4K subscribers
563 photos
1 video
103 links
Web Development ခရီးစဉ်ကို
Creative Coder နှင့်စတင်လိုက်ပါ။🚀
Download Telegram
September 14, 2024
September 14, 2024
September 16, 2024
Responsive Web Design အတွက်သိထားသင့်တဲ့အချက်များ

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

Developer မှန်ရင် responsive နဲ့မကင်းပါဘူး။
ကိုယ်ရေးထားတဲ့ website တွေဟာ ဘယ်လို device မျိုးမှာမဆို user တွေအဆင်ပြေအောင် အသုံးပြုနိုင်ဖို့အရေးကြီးပါတယ်။ Responsive web design ဆိုတာကတော့ desktop, tablet, mobile စတဲ့ device မျိုးစုံမှာ user တွေအသုံးပြုရအဆင်ပြေအောင် layout ကို အလိုအလျောက် adjust လုပ်ပေးတဲ့နည်းပညာပဲဖြစ်ပါတယ်။

Developer တိုအနေနဲ့အောက်မှာဖော်ပြထားတဲ့နည်းလမ်းတွေကိုအသုံးပြုပြီး responsive web design ရအောင်ပြုလုပ်နိုင်ပါတယ်။

📌 fluid grid system ကိုအသုံးပြုပြီး page layout ကို screen အလိုက်ပုံစံအမျိုးမျိုးပြောင်းနိုင်သလို percentage-based width ကိုအသုံးပြုပြီးတော့လည်း မည်သည့် screen size ကိုမဆို ညီအောင်ပြုလုပ်လို့ရပါတယ်။

📌 CSS media queries ကိုအသုံးပြုပြီးတော့လည်း device screen size, orientation, resolution စတဲ့အချက်အလတ်ပေါ်မူတည်ပြီးတော့လည်း style ကိုပြောင်းလဲနိုင်ပါတယ်။

📌 Images, videos နဲ့ frame တွေကို max-width 100% ကိုသုံးပြီး screen size အလိုက် adjust လုပ်ယူလို့လည်းရပါတယ်။

📌 Mobile device တွေမှာ touch input တွေကို သေချာစဉ်းစားပြီး buttons, links, navigation menus တွေကို တင်ပေးရပါမယ်။
Clickable areas ကြီးမားစေပြီးတော့ touch interface အသုံးပြုသူများအတွက် သက်သောင့်သက်သာဖြစ်အောင်လုပ်ပေးတဲ့အတွက်ကြောင့်ဖြစ်ပါတယ်။

📌 Responsive design ကို ဘာ browser, device မှာမဆို အရင်ဆုံး testing လုပ်ဖို့လိုပါတယ်။
Google Chrome's DevTools ထဲက responsive mode နဲ့ simulate လုပ်ပြီး screen size မျိုးစုံမှာ စစ်ဆေးရပါမယ်။

📌 နောက်ဆုံးအနေနဲ့ကတော့ Bootstrap, Foundation စတဲ့ responsive CSS frameworks တွေက website ကို ပိုလွယ်ကူမြန်ဆန်စေပါတယ်။
In-built grid systems, media queries, and components တွေက responsive design ကို အရမ်းသက်သာစေပါတယ်။

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

အခြား developer သူငယ်ချင်းတွေသိသွားအောင်လည်း sharing လုပ်ပေးဖို့ မမေ့ပါနဲ့နော် 👀

#creative_coder_myanmar
September 16, 2024
September 18, 2024
September 18, 2024
September 19, 2024
Web Development ကိုအစကနေ ထိထိရောက်ရောက်လေ့လာကြည့်ရအောင် 👀

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

Web Development ကိုစတင်လေ့လာဖို့စဉ်းစားနေတဲ့ Developer တွေရှိပါသလား?

ဒါဆိုရင်နေ့ရွှေ့ညရွှေ့လုပ်မနေဘဲ အခုပြထားတဲ့ resource တွေကနေ အခမဲ့လေ့လာကြည့်လိုက်ရအောင် 👀🚀

ဒီနေ့မှာတော့ Beginner တွေအတွက်အသုံး၀င်စေမယ့် HTML, CSS resource (၂) ခုကိုမျှ‌ဝေပေးသွားမှာဖြစ်ပါတယ်။

📝 Mozilla Developer Network (MDN) မှာဆိုရင် ပထမဆုံး web page ကိုပြုလုပ်ဖို့အတွက် HTML ရဲ့ basic concept တွေဖြစ်တဲ့ tags, elements, attributes တွေကိုလေ့လာနိုင်မှာဖြစ်ပါတယ်။
👉 https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics


📝 Real world example တွေနဲ့အတူ လေ့လာနိုင်တာကတော့ CSS tricks - A complete guide to CSS ပဲဖြစ်ပါတယ်။ ဒီမှာဆိုရင် အခြေခံ concept တွေနဲ့အတူ web page တစ်ခုကို ဘယ်လိုစပြီး styling လုပ်ရမလဲဆိုတာတွေပါဝင်ပါတယ်။

👉 https://css-tricks.com/guides/


ဒီလိုမျိုး resource လုပ်ပေးတဲ့ series လေးကိုကြိုက်တယ်ဆိုရင် နောက်နေ့မှာလည်း လေ့လာဖို့လိုအပ်တဲ့ အကြောင်းအရာလေးတွေတင်ပေးသွားမှာဖြစ်လို့ ဒီ resource လေးတွေက ကိုယ့်အတွက် အသုံး၀င်မ၀င် comment မှာရေးပေးခဲ့ကြနော် 👀

#creative_coder_myanmar
#beginner
#html
#css
September 19, 2024
Practical Project တွေလုပ်ဖို့ ခေါင်းခဲနေတဲ့ developer တွေအတွက် GitHub Resources

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

Practical Project တွေအတွက် လေ့လာလို့ရမယ့် GitHub resource တွေကို မျှဝေပေးသွားမှာဖြစ်ပါတယ်။ ဒီ resource တွေကနေ လေ့လာပြီး စု၊တု၊ပြု ကာ ကိုယ်ပိုင် project တွေကိုတည်ဆောက်လာနိုင်မှာပါ။

👉 https://github.com/gothinkster/realworld

ဒီ resource မှာတော့ fullstack development အတွက် လိုအပ်တဲ့ real world project တွေကိုပြပေးထားပါတယ်။

👉 https://github.com/Chalarangelo/30-seconds-of-code

ကိုယ့်ရဲ့ project တွေမှာထည့်သွင်းအသုံးပြုနိုင်မယ့် JavaScript Code snippet တွေကိုထည့်သွင်းပေးထားပါတယ်။

👉 https://github.com/public-apis/public-api
ကိုယ့်ရဲ့ practical project တွေမှာအသုံးပြုနိုင်မယ့် API အမျိုးမျိုးကို ထည့်ပေးထားပါတယ်။

👉 https://github.com/practical-tutorials/project-based-learning

programming language အမျိုးမျိုးရဲ့ real world project တွေပါ၀င်မှာဖြစ်ပြီး language တစ်ခုချင်းစီတိုင်းအတွက် သက်ဆိုင်ရာ project တွေထည့်သွင်းပေးထားပါတယ်။။

👉 https://github.com/codecrafters-io/build-your-own-x

operating system တွေ database တွေစတဲ့ project တွေတည်ဆောက်ဖို့အတွက် resource အစုံအလင်ပါ၀င်မှာဖြစ်ပါတယ်။

ကဲ.. ဒီ resource တွေကိုသုံးပြီး next level ရောက်ဖို့ကြိုးစားကြမယ်နော် 👀

#creative_coder_myanmar
September 20, 2024
September 20, 2024
September 21, 2024
September 22, 2024
အခုအပ်၊ အခုတက်၊ တသက်လုံးလေ့လာ လို့ရမယ့် Learning Platform အတန်းတွေကို အချိန်‌မရွေးအပ်နှံနိုင်ပါပြီ 💯👀

Learning Platform ကအတန်းတွေကို အချိန်မရွေးလေ့လာနိုငိတာ သိပြီးကြပြီလား??

Learning Platform မှာ Premium Course တွေ Free Course တွေစုံလင်စွာရှိပြီး Certificate ထုတ်ယူနိုင်အောင်ပြုလုပ်ပေးထားပါတယ်။ "အခုအပ် အခုတက် တစ်သက်လုံးလေ့လာ" လို့ရအောင်ပြုလုပ်ပေးထားတာကြောင့် လူကြိုက်အများဆုံး အတန်းပုံစံတစ်မျိုးလည်းဖြစ်ပါတယ်။

တက်ရောက်နိုင်တဲ့အတန်းတွေကတော့
📌 Js +Vue + Firebase Course
📌 PHP + Deep Dive Laravel Course
📌 Web Deployment From Scratch Course
📌 MERN Stack
📌 React + Firebase Combo Course
📌 Programming Basic With JavaScript Course
📌 Python From Scratch
📌Git & GitHub Basic Course
📌 Git & Github Intermediate Course
📌 Python From Scratch
📌 Vuex Course
📌 PHP Framework Thinking Course
📌 Websocket 101
📌 Laravel Folio Course တွေပဲဖြစ်ပါတယ်။

အတန်းတွေအကြောင်းကို အသေးစိတ်သိရဖို့အောက်ပါ link ကနေ၀င်ရောက်ကြည့်ရှုနိုင်ပါတယ်။

https://creativecodermm.com/courses

#creative_coder_myanmar
#website
#web_development
September 22, 2024