Code with Chill

Code with Chill

Share

Web Design Basic for Beginners(Frontend)

29/05/2024

hello guys🀗 ဒီနေ့မင်မင်က Frontend developer ဖဌစ်ချင်တဲ့သူတလေအတလက် roadmap လေသကို sharingလေသလုပ်ပေသသလာသချင်ပါတယ်...

Web development ပိုင်သမဟာ frontend ပိုင်သနဲ့ backendပိုင်သဆိုပဌီသနဟစ်မျိုသရဟိပါတယ်နော် တော်တော်မျာသမျာသလဲသိကဌမဟာပါ🀗 ကဲဒီလိုဆိုရင် ကိုကfrontend(design)ပိုင်သကိုစိတ်ဝင်စာသတဲ့သူဆိုရင် ဒီpostလေသကအထောက်အကူဖဌစ်မယ်လို့မျဟော်လင့်ပါတယ်✚

👉Start With Basics
Web development ပိုင်သမဟာ basicဖဌစ်တဲ့HTML(Hypertext Markup Language)/CSS(Cascading Stylesheet)/JS(javascript) ကိုစလေ့လာပါ။

👉Build Simple Project
ရိုသရဟင်သသော web pageလေသတလေရေသကဌည့်တာကနေတစ်ဆင့် ပိုမိုရဟုပ်ထလေသသော features မျာသကိုလေ့လာသင်ယူပါ။

👉Explore Frameworks and Libraries
React သို့မဟုတ် Angular ကဲ့သို့သော framework တစ်ခုခုကိုရလေသချယ်ပဌီသ projectတလေရေသပါ။

👉Version Control
ကိုယ့်ရဲ့projectအတလက် Git ကိုလေ့လာပဌီသအသုံသပဌုပါ။

👉Responsive Design
Bootstrap ကဲ့သို့သော CSS framework ကိုအသုံသပဌုပဌီသ ကိုယ့်ရဲ့projectကို responsive ဖဌစ်အောင်လုပ်ပါ။

👉Advanced Topics
Advanced ဖဌစ်တဲ့ javascriptတလေကို သင်ယူလေ့လာပဌီသ စလမ်သဆောင်ရည်ပိုမိုကောင်သမလန်တဲ့ projectတလေရေသသာသပါ။

👉Stay Updated
IT field သည်ခေတ်ရေစီသကဌောင်သနဲ့အမဟီလိုက်နေတာမလို့ အမဌဲကိုယ့်ရဲ့လမ်သကဌောင်သကို updateလုပ်နေမို့လိုအပ်ပါတယ်။YouTube တလေကနေ webနဲ့ပတ်သက်ပဌီသ blogs တလေကဌည့်ပဌီသလေ့လာသင်ယူတာဘဲ့ဖဌစ်စေ၊update ဖဌစ်တဲ့ documentation တလေဖတ်ပဌီသလေ့လာသင်ယူတာဘဲ့ဖဌစ်စေ အမဌဲလုပ်နေမို့လိုအပ်ပါတယ်။

Frontendပိုင်သနဟင့်ပတ်သက်ပဌီသ self-study လုပ်ချင်တဲ့သူတလေအတလက် Frontend ပိုင်သနဲ့ပတ်သက်ပဌီသ အကဌောင်သအရာမျိုသစုံကို basicကနေတစ်ဆင့် advanced အထိသင်ကဌာသပေသတဲ့အထင်ကရYouTube channelလေသတလေလဲ sharingလုပ်ပေသထာသပါတယ်✚

1. **Traversy Media**
- Channel: [Traversy Media](https://www.youtube.com/user/TechGuyWeb)
- Description: Web development tutorials covering a wide range of topics, including HTML, CSS, JavaScript, and various frameworks like React, Angular, and Vue.

2. **The Net Ninja**
- Channel: [The Net Ninja](https://www.youtube.com/c/TheNetNinja)
- Description: Comprehensive tutorials on web development, including HTML, CSS, JavaScript, React, Vue.js, Node.js, and more.

3. **Academind**
- Channel: [Academind](https://www.youtube.com/c/Academind)
- Description: In-depth tutorials on web development, focusing on modern JavaScript frameworks like React, Angular, and Vue, as well as other development topics.

4. **freeCodeCamp.org**
- Channel: [freeCodeCamp.org](https://www.youtube.com/c/Freecodecamp)
- Description: Extensive collection of full-length courses and tutorials on web development and programming, including frontend topics like HTML, CSS, JavaScript, and more.

5. **Programming with Mosh**
- Channel: [Programming with Mosh](https://www.youtube.com/c/programmingwithmosh)
- Description: High-quality tutorials on various programming topics, including frontend development with HTML, CSS, JavaScript, and frameworks like React and Angular.

6. **Dev Ed**
- Channel: [Dev Ed](https://www.youtube.com/c/DevEd)
- Description: Fun and engaging tutorials on web development and design, covering HTML, CSS, JavaScript, and modern frameworks and libraries.

7. **Codevolution**
- Channel: [Codevolution](https://www.youtube.com/c/Codevolution)
- Description: Detailed tutorials on frontend development, especially focused on JavaScript frameworks like React, Angular, and Vue.

8. **DesignCourse**
- Channel: [DesignCourse](https://www.youtube.com/c/DesignCourse)
- Description: Web design and frontend development tutorials, including HTML, CSS, JavaScript, and UI/UX design principles.

9. **Florin Pop**
- Channel: [Florin Pop](https://www.youtube.com/c/FlorinPop)
- Description: Tutorials and challenges focused on web development, particularly HTML, CSS, JavaScript, and React.

10. **Kevin Powell**
- Channel: [Kevin Powell](https://www.youtube.com/c/KevinPowell)
- Description: Deep dive into CSS, teaching modern CSS techniques and best practices for creating responsive and accessible web designs.

Photos from Code with Chill's post 18/04/2024

မဌန်မာ့နဟစ်သစ်လေသမဟာsharing လုပ်သလာသပေသမဟာကတော့ html ရဲ့ basic tag လေသတလေအကဌောင်သဖဌစ်ပါတယ် အခုမဟစလေ့လာမည့် beginner တလေအတလက် အကျိုသရဟိမယ်လို့မျဟော်လင့်ပါတယ်

1👉
ဒီ tag ကတော့ page တစ်ခုနဲ့ တစ်ခု link ချိတ်မို့အတလက်အသုံသပဌုပါတယ်✔
eg👉Visit Google.com!
------------------------------------------------------------------------------------
2👉
paragraph တလေရေသတဲ့အခါ အသုံသပဌုလို့ရတဲ့tagပါ✔
eg👉
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

------------------------------------------------------------------------------------
3👉
text တလေကို bold တင်ချင်တဲ့အခါ အသုံသပဌုပါတယ်✔
eg👉This is normal text - and this is bold text.
------------------------------------------------------------------------------------
4👉
အရေသကဌီသသောစာသာသမျာသကို bold တင်၍ highlightအနေနဲ့ ပဌချင်တဲ့အခါအသုံသပဌုပါတယ်✔
eg👉This is a boldword.
------------------------------------------------------------------------------------
5👉
Html ရဲ့ အဓိကအကဌောင်သအရာမျာသကို body tag အတလင်သမဟာရေသသာသရပါတယ်✔
eg👉


Body Tag


Place your content here

------------------------------------------------------------------------------------
6👉
စာတစ်ကဌောင်သကနေ နောက်တစ်ကဌောင်သဆင်သချင်လျဟင် အသုံသပဌုလို့ရတဲ့tagပါ✔
eg👉 To force line breaks in a text, use the br element.
------------------------------------------------------------------------------------
7👉
Html document တလေကို section တစ်ခုချင်သအဖဌစ်အပိုင်သခလဲတဲ့အခါ အသုံသပဌုပါတယ်။Html elements တလေအတလက် container တစ်ခုအနေနဲ့လဲအသုံသပဌုပါတယ်။htmlနဲ့ပတ်သက်သော မည်သည့်အကဌောင်သအရာအမျိုသအစာသကိုမဆို ဒီtag အတလင်သမဟာထည့်ပဌီသအသုံသပဌုရပါတယ်။ block-level element တစ်ခုဖဌစ်ပဌီသတော့ elementတလေကို styling လုပ်ဖို့နဟင့် layout structures တလေကိုဖန်တီသဖို့အတလက် အသုံသပဌုပါတယ်✔
eg👉




myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}



The div element


This is a heading in a div element
This is some text in a div element.


This is some text outside the div element.


------------------------------------------------------------------------------------
8👉 to
Title အတလက်အသုံသပဌုတဲ့ tagပါ။ Heading ပိုင်သတလင် level 6ခု ရဟိပါတယ်။ h1 သည် စာလုံသsize အကဌီသဆုံသဖဌစ်ပဌီသ h6ကတော့ အသေသဆုံသပါ✔
eg👉
Beetles
External morphology
Head
Mouthparts
Thorax
Prothorax
Pterothorax
------------------------------------------------------------------------------------
9👉
စာသာသတလေကို italic style နဲ့ပဌချင်တဲ့အခါ အသုံသပဌုပါတယ်✔
eg👉Lorem ipsum is the most popular filler text in history.

The RMS Titanic, a luxury steamship, sank on April 15, 1912 after striking an iceberg.
------------------------------------------------------------------------------------
10👉
ကိုယ့်ရဲ့ projectတလင် imageတလေ ထည့်ချင်တဲ့အခါ အသုံသပဌုလို့ရတဲ့tagပါ✔
eg👉

14/04/2024

သင်္ကဌန်အကျနေ့လေသမဟာ မင်မင်က ကိုယ့်ရဲ့ web projectကို improve ဖဌစ်အောင် ကူညီပေသနိုင်တဲ့ website link တစ်ချို့ကိုဝေမျဟပေသလိုက်ပါတယ်နော်💯

coolors
https://coolors.co/
(ကိုယ့်ရဲ့ website design တလေအတလက် လဟပတဲ့အရောင်ပေါင်သစပ်မဟုလေသတလေဖန်တီသတာတလေ ရဟာဖလေတာတလေပဌုလုပ်လို့ရတဲ့websiteလေသပါနော်)

animate.css
https://animate.style/
(ကိုယ့်ရဲ့ projectတလင် animation တလေကိုအသုံသပဌုမည်ဆိုလျဟင် အဆင်သင့်ယူသုံသလို့ရအောင်လုပ်ထာသသောsite ဖဌစ်ပါတယ်)

pexels
https://www.pexels.com/
(freeရသော အပုံမျာသနဟင့်videoမျာသကို နေရာတိုင်သတလင်လိုအပ်သလိုအသုံသပဌုနိုင်ပါတယ်။ HD quality ဖဌစ်သည့်အပဌင် copyright free photoတလေမို့ အဆင်ပဌေပါတယ်)

Material Design Icons
https://pictogrammers.com/library/mdi/
(ကိုယ့်ရဲ့projectတလင် icons လေသတလေအသုံသပဌုမယ်ဆိုလျဟင် ဒီwebsiteကတော့ လဟပတဲ့iconမျာသနဟင့် fontမျိုသစုံကိုရလေသချယ်အသုံသပဌုလို့ရပါတယ်)

hero icons
https://heroicons.com/outline
(သူ့လဲ iconsလေသတလေရနိုင်တဲ့siteပါ သူကတော့ material design icon ထက်simpleဖဌစ်ပါတယ်)

css gradient
https://cssgradient.io/
(ကိုယ်လိုချင်တဲ့ color codeကို အလလယ်တကူယူလို့ရတဲ့siteပါ)

Unsplash
https://unsplash.com/
(ဘယ်projectမဆို download လုပ်ပဌီသအသုံသပဌုနိုင်တဲ့ လဟပသော free photo တလေရနိုင်တဲ့siteပါ)

13/04/2024

ပျော်ရလဟင်စရာ သင်္ကဌန်ကာလလေသဖဌစ်ပါစေ!!
မဌန်မာနဟစ်ကူသအခါသမယမဟာ စိတ်ချမ်သသာကိုယ်ကျန်သမာနဲ့ အပူသောကမီသတလေကင်သငဌိမ်သကဌပါစေလို့ မင်မင်ကဆုမလန်ကောင်သတောင်သပေသလိုက်ပါတယ်နော်✚

ဒီနေ့ မျဟဝေပေသချင်တဲ့အကဌောင်သအရာကတော့ developerတစ်​ယောက်အနေနဲ့ ကိုယ့်ရဲ့skillကိုဘယ်လိုimproveဖဌစ်အောင်လုပ်သလာသရမလဲဆိုတာကို ပဌောပဌပေသသလာသမဟာ​ဖဌစ်ပါတယ်💯

Code Daily
နေ့စဥ်နေ့တိုင်သ codeရေသမို့လ်ိုအပ်ပါတယ်။ မကဌာခဏcodeရေသခဌင်သစလမ်သရည်ကို အလေ့အကျင့်တစ်ခုအနေနဲ့ ပဌုလုပ်ပေသပါ☑

Internet Surfing
အမျိုသမျိုသသော IT field နဲ့သက်ဆိုင်သော websiteမျာသ/google/youtube ပေါ်တလင် internetကိုအသုံသပဌုပဌီသ ကိုယ်သိချင်သောအကဌောင်သအရာမျာသကိုစူသစမ်သရဟာဖလေခဌင်သမျာသကိုပဌုလုပ်ဖို့လဲလိုအပ်ပါတယ်နော်☑

Self-Learning
ပဌည့်စုံသော developerတစ်ယောက်ဖဌစ်မို့ဆိုလျဟင် တတ်နိုင်သလောက် IT fieldနဲ့ပတ်သက်တဲ့ knowledgeတလေသိထာသမို့အရေသကဌီသပါတယ်။အဲ့တော့ ကိုယ့်သိချင် တတ်ချင်တဲ့အရာတလေကို onlineပေါ်ကနေ ရဟာဖလေပဌီသ အမဌဲlearningလုပ်မို့လိုပါတယ်။အဓိက ကတော့ဇလဲရဟိပဌီသ မပျင်သဘဲ့နေ့စဥ်နေ့တိုင်သလေ့လာမို့လိုပါတယ်နော်☑

Create Project
Project မျာသကိုဖန်တီသတတ်မို့ကလဲအရေသကဌီသသောအချက်ပါ။ဦသစလာ ကိုယ်ကဘယ်လိုprojectအမျိုသအစာသကိုရေသဆလဲမလဲဆိုတာ သတ်မဟတ်ရပါမယ်။ကိုယ့်ရေသမည့် systemတလင် ဘယ်လိုrequirementတလေအသုံသပဌုပဌီသရေသမလဲ၊ဘယ်လိုdesignချရမလဲ၊designချထာသတာတလေနဲ့သက်ဆိုင်သောcodeတလေကိုဘယ်လိုရေသမလဲ၊ကိုယ်ရေသထာသသောcodingပိုင်သတလင်errorရဟိ မရဟိဘယ်လိုtestingပဌုလုပ်မလဲဆိုတာတလေကို projectတစ်ခုကိုဖန်တီသရာတလင် အစီအစဥ်တကျသတ်မဟတ်ရပါမယ်☑

Teach Other
ကိုယ့်ရဲ့နယ်ပယ်တူတဲ့အထဲကအခဌာသ တတ်သိကျလမ်သကျင်တဲ့developerတလေနဲ့ ပူသပေါင်သဆောင်ရလက်တာတလေ၊အပဌန်အလဟန်အာသဖဌင့် အချင်သချင်သ knowledge sharing လုပ်တာတလေပဌုလုပ်ပေသရပါမယ်☑

Be Active On Stackoverflow
Programming နဲ့ Software Development ဆိုင်ရာ platform တလေကိုတတ်နိုင်သလောက်ပုံမဟန်ပါဝင်ခဌင်သမျာသပဌုလုပ်ပေသပါ။အခဌာသသူမျာသထံမဟ သင်ယူမဟတ်သာသပဌီသကိုယ့် ကိုယ်ပိုင်ကျလမ်သကျင်မဟုကို အခဌာသသူမျာသနဲ့မျဟဝေတာဟာ နည်သလမ်သကောင်သတစ်ခုဖဌစ်ပါတယ်☑

Take Short Break
အနာသယူပေသတာကလဲ အရေသကဌီသတဲ့အခန်သကဏ္ဍမဟာပါဝင်ပါတယ်နော်။developer တစ်ယောက်ဟာဦသနဟောက်နဲ့ဘဲ့တလေသပဌီသအလုပ်လုပ်ရတာမျာသတာမလို့ ဆန်သသစ်တဲ့အတလေသအခေါ်တလေထလက်အောင် ခေတ္တခဏအနာသယူပေသမို့လိုအပ်ပါတယ်☑

Split Your Problem
ရဟုပ်ထလေသတဲ့ ပဌသာနာမျာသကိုဖဌေရဟင်သရတဲ့အခါ ပိုမိုလလယ်ကူစေရန် သေသငယ်သောအပိုင်သမျာသပိုင်သခဌာသခဌင်သမျာသပဌုလုပ်ရပါမယ်။ဒိီလိုနည်သလမ်သက အတလေသအမဌင်မျာသနဲ့ လုပ်ဆောင်ချက်မျာသကိုထိရောက်စလာ စုစည်သရာတလင်ကူညီပေသသည့်ပဌသာနာဖဌေရဟင်သခဌင်သနည်သဗျူဟာတစ်ခုဖဌစ်ပါတယ်☑

Read Books/Docs
ဗဟုသုတနဲ့ ကျလမ်သကျင်မဟုအသစ်မျာသလေ့လာဖို့အတလက်
programming နဲ့ပတ်သက်သော စာအုပ်တလေ docsတလေ ဖတ်ပေသမို့လဲလ်ိုအပ်ပါတယ်နော်။ဒီလိုလုပ်ခဌင်သဟာလဲ မိမိကိုယ်ကိုတိုသတက်မဟု၊professional ဖလံ့ဖဌိုသတိုသတက်မဟုရဲ့လုပ်ရိုသလုပ်စဥ်တစ်ခုဖဌစ်ပါတယ်☑

Develop Some Curiosity
စူသစမ်သလိုစိတ်လဲရဟိမို့လိုအပ်ပါတယ်နော်။IT field ကကျယ်ပဌန့်တာမလို့ ကိုယ်မသိသောအသစ်အဆန်သအကဌောင်သအရာတလေ(ဥပမာ-network ပိုင်သဆိုင်ရာ၊security ပိုင်သဆိုင်ရာ၊data analysis)ကို knowledgeအနေနဲ့ပါ လေ့လာထာသမဟုရဟိရင်ပိုကောင်သပါတယ်☑

11/04/2024

📣 April လအတလက် အတန်သသစ်၁၀၀ % အခမဲ့သင်ကဌာသခလင့်ရရဟိမည့် Web Development Foundation Zoom Class လေသကဌော်ငဌာပေသလိုက်ပါတယ်။ Programming အခဌေခံဘာမဟမရဟိသေသဘူသဆိုရင်၊ Web development နယ်ပယ်ထဲ စတင်အခဌေချမို့ကဌိုသစာသနေတဲ့သူဆိုရင် ဒီclassက သင့်အတလက်ပါ💯

ယခု 2024 မျက်မဟောက်ခေတ်မဟာ အလုပ်အကိုင်အခလင့်အလမ်သအကောင်သဆုံသနဲ့ဝင်ငလေအကောင်သဆုံသသောfield တလေထဲကတစ်ခုကတော့ IT field ဖဌစ်တယ်ဆိုတာလူတိုင်သသိကဌမယ်ထင်ပါတယ်✅

ဒီcourse လေသကတော့ သင်အနေနဲ့ အနာဂတ်မဟာ front-end developer အနေနဲ့ရပ်တည်ချင်ရင် foundation ဖဌစ်တဲ့ web design(html/css)အကဌောင်သကိုလုံသဝနာသလည်တတ်မဌောက်သလာသအောင် အခဌေခံကနေအစ စနစ်တကျသင်ကဌာသပေသသလာသမဟာဖဌစ်ပါတယ်✔

ကဲဒါဆိုရင် ဒီသင်တန်သကို ဘယ်လိုလူတလေတက်ရောက်သင့်သလဲ☑

- ကလန်ပျူတာအခဌေခံကျလမ်သကျင်ပဌီသသာသသူတလေ
- အခုမဟ စပဌီသ Website Design(frontend)ပိုင်သကိုလေ့လာချင်တဲ့beginnersတလေ
- အနာဂတ်မဟာWeb Designers အဖဌစ် ရပ်တည်ချင်သူတလေ။
- Creativity ပိုင်သကို စိတ်ပါဝင်စာသတဲ့သူတလေ အထူသတက်သင့်ပါတယ်။

ဘာတလေသင်ကဌာသပေသသလာသမလဲဆိုတာကတော့
Introduction to Web Development
Introduction to HTML
Introduction to CSS
Responsive Web Design
Final Static Website Sample

free classကို joinနိုင်မို့အတလက်ဆိုရင်အောက်ကအချက်လေသတလေလုပ်ပေသမို့လိုအပ်ပါတယ်နော်။

✔pageကို like & follow လုပ်ပါ။
✔post ကို like လုပ်ပဌီသ shareပါ။
✔comment မဟာ ဘာကဌောင့်ဒီသင်တန်သကိုjoinချင်ပါသလဲ ဆိုတဲ့အချက်လေသရေသပေသပါ။

လူဦသရေအကန့်အသတ်နဲ့ဘဲ့ခေါ်မဟာမလို့ မန့်ထာသတဲ့သူတလေထဲကနေ free classကို joinနိုင်မဲ့သူတလေကိုရလေသချယ်သလာသမဟာဖဌစ်ပါတယ်နော်။

သင်ကဌာသပေသသလာသမည့် ပုံစံကတော့ telegram ကနေ zoom ဖဌင့် face to faceသင်ကဌာသပေသသလာသမည်ဖဌစ်ပါတယ်။ test တစ်ခုသင်လို့ပဌီသသလာသတိုင်သ exerciseလေသတလေလဲလုပ်ရပါမယ်။

မဟတ်ချက်- ကိုယ်ပိုင်laptop လေသတော့ရဟိမို့လိုအပ်ပါတယ်နော်။

Want your school to be the top-listed School/college in Yangon?
Click here to claim your Sponsored Listing.

Category

Telephone

Website

Address


Yangon