đ Web Development Learning Series - áĄáááŻááşá¸ (á)
"Web Development áááŻááŹááŹáá˛?"
Web Development áááŻáᏠBrowser áá˛áážáŹ áĄááŻááşááŻááşáá˛áˇ Website (áááŻáˇ) Web Application áá˝áą áááşááąáŹááşáá˛áˇááŻááşáááşá¸á ááş ááźá áşááŤáááşá
- áááŻá¸áážááşá¸áá˛áˇ Static Page (áĽááᏠ- áááŻááşááąá¸áááąáŹáˇááş) áááą
- áážáŻááşáá˝áąá¸áá˛áˇ Web App (áĽááᏠ- Instagram, YouTube, Netflix) áĄáá ááŤáááşááŤáááşá
---
â Web Development á áĄááá áĄáááŻááşá¸ (á) ááťááŻá¸
1ď¸âŁ Frontend Development (Client-side)
- áĄááŻáśá¸ááźáŻáá°ááźááşááá˛áˇ áĄáááŻááşá¸ - áááŻááşááťáŹá¸á ááŹááşááŻáśááťáŹá¸á ááąáŹááşááťáŹá¸á
- áĄááŻáśá¸ááźáŻááąáŹ ááŹááŹá ááŹá¸ááťáŹá¸:
- HTML (áĄááźáąááśááźáááşááŻáśá¸)
- CSS (ááŽáááŻááşá¸áĄáážáááşááźááşá¸)
- JavaScript (áážáŻááşáážáŹá¸áážáŻááťáŹá¸áááˇáşááźááşá¸)
- ááąááşáᎠTool ááťáŹá¸:
- React, Vue, Angular (UI áááŻááźááşááźááşáááşáááşáááşááąáŹááşáááŻáˇ)
2ď¸âŁ Backend Development (Server-side)
- ááąáŹááşáá˝ááşá áĄááŻááşááŻááşááŻáś - Database, API, ááŻáśááźáŻáśááąá¸á
- áĄááŻáśá¸ááźáŻááąáŹ ááŹááŹá ááŹá¸ááťáŹá¸:
- Node.js, Python, PHP, Java
- áĄááŻáśá¸ááťáŹá¸ááąáŹ Tool ááťáŹá¸:
- Express.js (Node), Django (Python), MongoDB/SQL (Database)
---
đ° áĽááᏠ- áááˇáşNetflix áááŻáá˝ááˇáşááźááˇáşááŤá
- Frontend: ááŻááşáážááş list ááťáŹá¸á Play áááŻááşá Thumbnail ááťáŹá¸á
- Backend: áááˇáşááźááˇáşáá°á¸áááˇáş movie á áŹáááşá¸áááŻáá°ááźááşá¸á ááŽááŽáááŻá áŽá¸áááşá¸áážáŻáááŻááŻáśááźáŻáśá á˝áŹááŻááşááąáŹááşááźááşá¸á
---
đ˝ Real-life Analogy: áááşáá˝áąáˇáĽááᏠ(á áŹá¸ááąáŹááşáááŻááş)
- Frontend = á áŹá¸áá˝á˛áááŻá¸áážááˇáş Menu (áááşááźááşááááˇáşáĄáááŻááşá¸)
- Backend = ááŽá¸áááŻááťáąáŹááşáážááˇáşá áŹá¸áááŻáážá°á¸ (áááˇáşáĄáá˝ááşáĄááŻááşááŻááşááąáááˇáşááąááŹ)
---
đ§ Mini Tip
Frontend áááŻááŹááąáˇááŹáá°ááźá áşá áąá Backend áĄááźáąááśáááŻááŹá¸áááşááŹá¸ááźááşá¸á áááˇáşááᯠáááŻáááŻááąáŹááşá¸áá˝ááşáá˛áˇ Developer ááźá áşá áąááŤáááş!
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
"Web Development áááŻááŹááŹáá˛?"
Web Development áááŻáᏠBrowser áá˛áážáŹ áĄááŻááşááŻááşáá˛áˇ Website (áááŻáˇ) Web Application áá˝áą áááşááąáŹááşáá˛áˇááŻááşáááşá¸á ááş ááźá áşááŤáááşá
- áááŻá¸áážááşá¸áá˛áˇ Static Page (áĽááᏠ- áááŻááşááąá¸áááąáŹáˇááş) áááą
- áážáŻááşáá˝áąá¸áá˛áˇ Web App (áĽááᏠ- Instagram, YouTube, Netflix) áĄáá ááŤáááşááŤáááşá
---
â Web Development á áĄááá áĄáááŻááşá¸ (á) ááťááŻá¸
1ď¸âŁ Frontend Development (Client-side)
- áĄááŻáśá¸ááźáŻáá°ááźááşááá˛áˇ áĄáááŻááşá¸ - áááŻááşááťáŹá¸á ááŹááşááŻáśááťáŹá¸á ááąáŹááşááťáŹá¸á
- áĄááŻáśá¸ááźáŻááąáŹ ááŹááŹá ááŹá¸ááťáŹá¸:
- HTML (áĄááźáąááśááźáááşááŻáśá¸)
- CSS (ááŽáááŻááşá¸áĄáážáááşááźááşá¸)
- JavaScript (áážáŻááşáážáŹá¸áážáŻááťáŹá¸áááˇáşááźááşá¸)
- ááąááşáᎠTool ááťáŹá¸:
- React, Vue, Angular (UI áááŻááźááşááźááşáááşáááşáááşááąáŹááşáááŻáˇ)
2ď¸âŁ Backend Development (Server-side)
- ááąáŹááşáá˝ááşá áĄááŻááşááŻááşááŻáś - Database, API, ááŻáśááźáŻáśááąá¸á
- áĄááŻáśá¸ááźáŻááąáŹ ááŹááŹá ááŹá¸ááťáŹá¸:
- Node.js, Python, PHP, Java
- áĄááŻáśá¸ááťáŹá¸ááąáŹ Tool ááťáŹá¸:
- Express.js (Node), Django (Python), MongoDB/SQL (Database)
---
đ° áĽááᏠ- áááˇáşNetflix áááŻáá˝ááˇáşááźááˇáşááŤá
- Frontend: ááŻááşáážááş list ááťáŹá¸á Play áááŻááşá Thumbnail ááťáŹá¸á
- Backend: áááˇáşááźááˇáşáá°á¸áááˇáş movie á áŹáááşá¸áááŻáá°ááźááşá¸á ááŽááŽáááŻá áŽá¸áááşá¸áážáŻáááŻááŻáśááźáŻáśá á˝áŹááŻááşááąáŹááşááźááşá¸á
---
đ˝ Real-life Analogy: áááşáá˝áąáˇáĽááᏠ(á áŹá¸ááąáŹááşáááŻááş)
- Frontend = á áŹá¸áá˝á˛áááŻá¸áážááˇáş Menu (áááşááźááşááááˇáşáĄáááŻááşá¸)
- Backend = ááŽá¸áááŻááťáąáŹááşáážááˇáşá áŹá¸áááŻáážá°á¸ (áááˇáşáĄáá˝ááşáĄááŻááşááŻááşááąáááˇáşááąááŹ)
---
đ§ Mini Tip
Frontend áááŻááŹááąáˇááŹáá°ááźá áşá áąá Backend áĄááźáąááśáááŻááŹá¸áááşááŹá¸ááźááşá¸á áááˇáşááᯠáááŻáááŻááąáŹááşá¸áá˝ááşáá˛áˇ Developer ááźá áşá áąááŤáááş!
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
â¤5
đĽ Microsoft á áĄááá˛áˇ Certification Courses ááťáŹá¸! đĽ
đŻ AI, Data Science, áá˛áˇ Machine Learning ááᯠááąáˇááŹáááŻáˇ áĄáá˝ááˇáşáĄáááşá¸ááąáŹááşá¸ááźá áşááŤáááş!
đĄ ááŹááźáąáŹááˇáş ááŽáááşáááşá¸áá˝áąááᯠáááşáááˇáşááŹáá˛?
â áááşáá˝áąáˇ Project áá˝áąáá˛áˇ ááąáˇááŹááááş! đ
â Real-World Applications áá˝áąááᯠááŹá¸áááşáááş! đ
â Microsoft ááťá˝ááşá¸ááťááşáá°áá˝áąáá˛áˇ áááşá¸áá˝ážááşáážáŻááááş! đ
â áĄááá˛áˇ Certificate ááááŻááşáááş! đ
đ Microsoft áá˛áˇ áĄááá˛áˇ áááşáááşá¸ááťáŹá¸
1ď¸âŁ đ¤ Artificial Intelligence for Beginners
đ AI Course Link
2ď¸âŁ đ Data Science for Beginners
đ Data Science Course Link
3ď¸âŁ đ§ Machine Learning for Beginners
đ ML Course Link
đ áĄááťáááşááŻááş áá˝áąááŻááş áááşááŹá á˝áŹáá˛áˇ Tech Skills áá˝áą áááŻá¸áááşáĄáąáŹááş ááŻááşáááŻááşááźááĄáąáŹááş!
#Microsoft
#FreeCourses
#AI
#DataScience
#MachineLearning
#TechBurmese
#LearnForFree
đŻ AI, Data Science, áá˛áˇ Machine Learning ááᯠááąáˇááŹáááŻáˇ áĄáá˝ááˇáşáĄáááşá¸ááąáŹááşá¸ááźá áşááŤáááş!
đĄ ááŹááźáąáŹááˇáş ááŽáááşáááşá¸áá˝áąááᯠáááşáááˇáşááŹáá˛?
â áááşáá˝áąáˇ Project áá˝áąáá˛áˇ ááąáˇááŹááááş! đ
â Real-World Applications áá˝áąááᯠááŹá¸áááşáááş! đ
â Microsoft ááťá˝ááşá¸ááťááşáá°áá˝áąáá˛áˇ áááşá¸áá˝ážááşáážáŻááááş! đ
â áĄááá˛áˇ Certificate ááááŻááşáááş! đ
đ Microsoft áá˛áˇ áĄááá˛áˇ áááşáááşá¸ááťáŹá¸
1ď¸âŁ đ¤ Artificial Intelligence for Beginners
đ AI Course Link
2ď¸âŁ đ Data Science for Beginners
đ Data Science Course Link
3ď¸âŁ đ§ Machine Learning for Beginners
đ ML Course Link
đ áĄááťáááşááŻááş áá˝áąááŻááş áááşááŹá á˝áŹáá˛áˇ Tech Skills áá˝áą áááŻá¸áááşáĄáąáŹááş ááŻááşáááŻááşááźááĄáąáŹááş!
#Microsoft
#FreeCourses
#AI
#DataScience
#MachineLearning
#TechBurmese
#LearnForFree
â¤10âĄ1
Software Developer áááŻááşá¸ááááŹá¸áááˇáşáá˛áˇ Sorting Algorithm (á
)ááŻ
đ ááŽáážáŹáĄááźááˇáşáĄá áŻáśááźááˇáşááŤááťá
#Programming
#sorting
#algorithms
#myanmarTech
đ ááŽáážáŹáĄááźááˇáşáĄá áŻáśááźááˇáşááŤááťá
#Programming
#sorting
#algorithms
#myanmarTech
đĽ°1
CSS Animations Generator
CSS Animations áá˝áąá developer áá˝áąááᯠthird-party tools ááťáŹá¸ (áááŻáˇ) scripting áááŻáśá¸áᲠeye-catching visual effects áá˝áąááᯠáááşááŽá¸áááŻááşá áąááŤáááşá áᎠCSS Animations Guide áážáŹáááŻáááş CSS Animations áá˛áˇ áĄááźáąááśááťáŹá¸á keyframesá áĄááąá¸ááźáŽá¸ááąáŹ properties ááťáŹá¸ááᯠJavaScript animations ááťáŹá¸áážááˇáş áážááŻááşá¸áážááşááťááşááťáŹá¸ ááŤáááşááźáŽá¸ CSS Animations ááťáŹá¸ááᯠáĄááąáŹááşáĄáááşááąáŹáşáááş áá˝ááşáá°ááźáŽá¸ hardware acceleration ááźáąáŹááˇáş JavaScript animations áá˝áąáááş ááŻáśáˇááźááşáážáŻáááŻáááŻááźááşáááşááźáŽá¸ ááááşá¸ááááşá¸áááş áááŻáááŻáá˝ááşáá°ááŤáááşá áááŻáááŻáážáŻááşáá˝áąá¸ááąáŹ (áááŻáˇ) interactive animations ááťáŹá¸áĄáá˝ááş JavaScript ááᯠáĄááŻáśá¸ááźáŻáááŻáˇáĄááźáśááźáŻááŤáááşá
đđ˛ @tech4umm
CSS Animations áá˝áąá developer áá˝áąááᯠthird-party tools ááťáŹá¸ (áááŻáˇ) scripting áááŻáśá¸áᲠeye-catching visual effects áá˝áąááᯠáááşááŽá¸áááŻááşá áąááŤáááşá áᎠCSS Animations Guide áážáŹáááŻáááş CSS Animations áá˛áˇ áĄááźáąááśááťáŹá¸á keyframesá áĄááąá¸ááźáŽá¸ááąáŹ properties ááťáŹá¸ááᯠJavaScript animations ááťáŹá¸áážááˇáş áážááŻááşá¸áážááşááťááşááťáŹá¸ ááŤáááşááźáŽá¸ CSS Animations ááťáŹá¸ááᯠáĄááąáŹááşáĄáááşááąáŹáşáááş áá˝ááşáá°ááźáŽá¸ hardware acceleration ááźáąáŹááˇáş JavaScript animations áá˝áąáááş ááŻáśáˇááźááşáážáŻáááŻáááŻááźááşáááşááźáŽá¸ ááááşá¸ááááşá¸áááş áááŻáááŻáá˝ááşáá°ááŤáááşá áááŻáááŻáážáŻááşáá˝áąá¸ááąáŹ (áááŻáˇ) interactive animations ááťáŹá¸áĄáá˝ááş JavaScript ááᯠáĄááŻáśá¸ááźáŻáááŻáˇáĄááźáśááźáŻááŤáááşá
đđ˛ @tech4umm
âĄ2
đWeb Scraping with Python Course - áĄááá˛áˇáááşáááşá¸
ááŽáááşáááşá¸áážáŹ Python ááŻáśá¸á website ááťáŹá¸ááž áĄááťááşáĄáááşááťáŹá¸ááᯠáĄáááŻáĄááťáąáŹááşááá°áááşá¸ (Web Scraping) ááᯠáááşáá˝áąáˇááąáˇááťááˇáşáááşá¸ááťáŹá¸áá˛áˇáĄáá° áááşááźáŹá¸ááąá¸áážáŹááźá áşááŤáááşá
đŻ áááşáááşá¸áá˝ááş ááąáˇááŹááááˇáşáĄááťááşááťáŹá¸
1. HTML ááąááŹááťáŹá¸ááᯠString Methods áážááˇáş Regular Expressions ááźááˇáşáááşááźááşá¸
2. HTML Parser (BeautifulSoup, lxml) ááťáŹá¸ááźááˇáş ááąááŹáááşááźááşá¸
3. Website ááťáŹá¸áážááˇáş áĄááźááşáĄáážááşááŻááşááąáŹááşááźááşá¸ (Forms, Buttons)
đ áááşáááşá¸ link
#FreeCourses
#MyanmarDevs
#Programming
#python
ááŽáááşáááşá¸áážáŹ Python ááŻáśá¸á website ááťáŹá¸ááž áĄááťááşáĄáááşááťáŹá¸ááᯠáĄáááŻáĄááťáąáŹááşááá°áááşá¸ (Web Scraping) ááᯠáááşáá˝áąáˇááąáˇááťááˇáşáááşá¸ááťáŹá¸áá˛áˇáĄáá° áááşááźáŹá¸ááąá¸áážáŹááźá áşááŤáááşá
đŻ áááşáááşá¸áá˝ááş ááąáˇááŹááááˇáşáĄááťááşááťáŹá¸
1. HTML ááąááŹááťáŹá¸ááᯠString Methods áážááˇáş Regular Expressions ááźááˇáşáááşááźááşá¸
2. HTML Parser (BeautifulSoup, lxml) ááťáŹá¸ááźááˇáş ááąááŹáááşááźááşá¸
3. Website ááťáŹá¸áážááˇáş áĄááźááşáĄáážááşááŻááşááąáŹááşááźááşá¸ (Forms, Buttons)
đ áááşáááşá¸ link
#FreeCourses
#MyanmarDevs
#Programming
#python
â¤5
đ Web Development Learning Series - áĄáááŻááşá¸ (á)
Frontend vs Backend vs Full Stack Development
---
đš áá Frontend Development (Client-side)
áĄááŻáśá¸ááźáŻáá°ááźááşáááąáŹ áĄáááŻááşá¸ - Website/Web App á áĄááźááşáááşá¸ááŽáááŻááşá¸áážááˇáş áĄááźááşáĄáážááşááŻááşááąáŹááşáážáŻááťáŹá¸á
áĄááŻáśá¸ááźáŻáááˇáş áááşá¸áááŹááťáŹá¸
- HTML - á áŹááťááşáážáŹááĄááźáąááśááźáááşááŻáśá¸
- CSS - áĄáážáááşááźááşá¸á áĄáá˝ááşáĄá áŹá¸áážáááźááşá¸
- JavaScript - áážáŻááşáážáŹá¸áážáŻááťáŹá¸áááˇáşáá˝ááşá¸ááźááşá¸
- Framework/Library: React, Vue, Angular
Frontend Developer á ááŹáááşááťáŹá¸
âď¸ Website/Web App Layout áážááˇáş UI ááŽáááŻááşá¸ááąá¸áá˝á˛ááźááşá¸
âď¸ Mobile/Tablet/PC áááŻáˇáá˝ááş áĄáá˝ááşáĄá áŹá¸áĄáááŻááş áĄáááşááźáąá áąáááş (Responsive Design)
âď¸ Animation, Dropdown Menu á áááˇáş Effect ááťáŹá¸áááˇáşááźááşá¸
âď¸ Website áĄááźááşáážáŻááşá¸áážááˇáş Accessibility ááąáŹááşá¸áá˝ááşá áąáááş
áĽáááŹ: áááŻááşááťáŹá¸á ááąáŹááşááťáŹá¸á ááŻááşááŻáśááźáááşá¸ááťáŹá¸ â ááŤáá˝áąáĄáŹá¸ááŻáśá¸ááᯠFrontend á áááŻááşáá˝ááşááŤáááşá
---
đš áá Backend Development (Server-side)
áááźááşáááąáŹ áĄáááŻááşá¸ - Data á áŽááśáááˇáşáá˝á˛áážáŻá ááŻáśááźáŻáśááąá¸áážááˇáş Server Communicationá
áĄááŻáśá¸ááźáŻáááˇáş áááşá¸áááŹááťáŹá¸
- Programming Languages: Node.js, Python, PHP, Java
- Database: MongoDB (NoSQL), MySQL, PostgreSQL (SQL)
- Frameworks: Express.js (Node), Django (Python), Flask (Python)
Backend Developer á ááŹáááşááťáŹá¸
âď¸ API áááşááąáŹááşááźááşá¸ (Frontend áážááˇáş Data ááťáááşáááşáááş)
âď¸ áĄááąáŹááˇáşáááşááźááşá¸á Payment á áá áşáá˛áˇáááŻáˇ ááŻáśááźáŻáśááąá¸ááŻááşáááşá¸ááťáŹá¸
âď¸ Database áá˝ááş áĄááťááşáĄáááşááááşá¸áááşá¸ááźááşá¸/ááźááşáááşááá°ááźááşá¸
âď¸ Server Performance ááąáŹááşá¸áá˝ááşá áąáááş áĄáŹááŻáśá ááŻááşááźááşá¸
áĽáááŹ: áááşáĄááąáŹááˇáşáááşáááˇáşáĄá፠Backend á Email/Password ááᯠá á áşááąá¸ááźáŽá¸ ááŻáśááźáŻáśá á˝áŹ áĄáááĄáážááşááźáŻááąá¸ááźááşá¸á
---
đš áá Full Stack Development
Frontend + Backend áážá áşááťááŻá¸ááŻáśá¸ááᯠáááşááťá˝ááşá¸áá° - Website áá áşááŻááŻáśá¸ááᯠáááşááąáŹááşáááŻááşá á˝ááşá¸á
Full Stack Developer ááťáŹá¸ áĄááŻááşááááˇáş áĄááźáąáŹááşá¸áááşá¸
âď¸ Startup áážááˇáş áĄááąá¸á áŹá¸áĄáá˝á˛áˇááťáŹá¸áá˝ááş áá áşáŚá¸áááşá¸ Project áĄááźááˇáşááŻááşáááŻááşááźááşá¸
âď¸ Portfolio áĄáá˝ááş á áŻáśáááşááąáŹ Project ááťáŹá¸ áááşááąáŹááşáááŻááşááźááşá¸
âď¸ Data Flow áĄááźááˇáşáĄá áŻáśááŹá¸áááşááźááşá¸:
User â UI â Server â Database â UI
Full Stack Dev áá áşáŚá¸ áĄááŻáśá¸ááźáŻáááŻááşááąáŹ Tools
- Frontend: React
- Backend: Node.js + Express.js
- Database: MongoDB
- Hosting: GitHub + Vercel/Render
---
đ˝ Real-Life Analogy:áááşáá˝áąáˇááá°áᏠ(á áŹá¸ááąáŹááşáááŻááşáĄáá˝ááşá¸)
- Frontend = á áŹá¸áá˝á˛áááŻá¸ (Menu ááźáááźááşá¸á áážáŹáá°áážáŻáááŻáááşááśááźááşá¸)
- Backend = á áŹá¸áááŻáážá°á¸ + ááŽá¸áááŻááťáąáŹááş (áĄá áŹá¸áĄá áŹááźááşáááşááźááşá¸)
- Full Stack = á áŹá¸ááąáŹááşáááŻááşáááŻááşáážááş (áĄááźááşáážááˇáşáĄáá˝ááşá¸ áážá áşááťááŻá¸ááŻáśá¸áááŻááŹáááşáá°ááźááşá¸)
đ áĄáááŻááşá¸ (á) áááşáááşá
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
Frontend vs Backend vs Full Stack Development
---
đš áá Frontend Development (Client-side)
áĄááŻáśá¸ááźáŻáá°ááźááşáááąáŹ áĄáááŻááşá¸ - Website/Web App á áĄááźááşáááşá¸ááŽáááŻááşá¸áážááˇáş áĄááźááşáĄáážááşááŻááşááąáŹááşáážáŻááťáŹá¸á
áĄááŻáśá¸ááźáŻáááˇáş áááşá¸áááŹááťáŹá¸
- HTML - á áŹááťááşáážáŹááĄááźáąááśááźáááşááŻáśá¸
- CSS - áĄáážáááşááźááşá¸á áĄáá˝ááşáĄá áŹá¸áážáááźááşá¸
- JavaScript - áážáŻááşáážáŹá¸áážáŻááťáŹá¸áááˇáşáá˝ááşá¸ááźááşá¸
- Framework/Library: React, Vue, Angular
Frontend Developer á ááŹáááşááťáŹá¸
âď¸ Website/Web App Layout áážááˇáş UI ááŽáááŻááşá¸ááąá¸áá˝á˛ááźááşá¸
âď¸ Mobile/Tablet/PC áááŻáˇáá˝ááş áĄáá˝ááşáĄá áŹá¸áĄáááŻááş áĄáááşááźáąá áąáááş (Responsive Design)
âď¸ Animation, Dropdown Menu á áááˇáş Effect ááťáŹá¸áááˇáşááźááşá¸
âď¸ Website áĄááźááşáážáŻááşá¸áážááˇáş Accessibility ááąáŹááşá¸áá˝ááşá áąáááş
áĽáááŹ: áááŻááşááťáŹá¸á ááąáŹááşááťáŹá¸á ááŻááşááŻáśááźáááşá¸ááťáŹá¸ â ááŤáá˝áąáĄáŹá¸ááŻáśá¸ááᯠFrontend á áááŻááşáá˝ááşááŤáááşá
---
đš áá Backend Development (Server-side)
áááźááşáááąáŹ áĄáááŻááşá¸ - Data á áŽááśáááˇáşáá˝á˛áážáŻá ááŻáśááźáŻáśááąá¸áážááˇáş Server Communicationá
áĄááŻáśá¸ááźáŻáááˇáş áááşá¸áááŹááťáŹá¸
- Programming Languages: Node.js, Python, PHP, Java
- Database: MongoDB (NoSQL), MySQL, PostgreSQL (SQL)
- Frameworks: Express.js (Node), Django (Python), Flask (Python)
Backend Developer á ááŹáááşááťáŹá¸
âď¸ API áááşááąáŹááşááźááşá¸ (Frontend áážááˇáş Data ááťáááşáááşáááş)
âď¸ áĄááąáŹááˇáşáááşááźááşá¸á Payment á áá áşáá˛áˇáááŻáˇ ááŻáśááźáŻáśááąá¸ááŻááşáááşá¸ááťáŹá¸
âď¸ Database áá˝ááş áĄááťááşáĄáááşááááşá¸áááşá¸ááźááşá¸/ááźááşáááşááá°ááźááşá¸
âď¸ Server Performance ááąáŹááşá¸áá˝ááşá áąáááş áĄáŹááŻáśá ááŻááşááźááşá¸
áĽáááŹ: áááşáĄááąáŹááˇáşáááşáááˇáşáĄá፠Backend á Email/Password ááᯠá á áşááąá¸ááźáŽá¸ ááŻáśááźáŻáśá á˝áŹ áĄáááĄáážááşááźáŻááąá¸ááźááşá¸á
---
đš áá Full Stack Development
Frontend + Backend áážá áşááťááŻá¸ááŻáśá¸ááᯠáááşááťá˝ááşá¸áá° - Website áá áşááŻááŻáśá¸ááᯠáááşááąáŹááşáááŻááşá á˝ááşá¸á
Full Stack Developer ááťáŹá¸ áĄááŻááşááááˇáş áĄááźáąáŹááşá¸áááşá¸
âď¸ Startup áážááˇáş áĄááąá¸á áŹá¸áĄáá˝á˛áˇááťáŹá¸áá˝ááş áá áşáŚá¸áááşá¸ Project áĄááźááˇáşááŻááşáááŻááşááźááşá¸
âď¸ Portfolio áĄáá˝ááş á áŻáśáááşááąáŹ Project ááťáŹá¸ áááşááąáŹááşáááŻááşááźááşá¸
âď¸ Data Flow áĄááźááˇáşáĄá áŻáśááŹá¸áááşááźááşá¸:
User â UI â Server â Database â UI
Full Stack Dev áá áşáŚá¸ áĄááŻáśá¸ááźáŻáááŻááşááąáŹ Tools
- Frontend: React
- Backend: Node.js + Express.js
- Database: MongoDB
- Hosting: GitHub + Vercel/Render
---
đ˝ Real-Life Analogy:áááşáá˝áąáˇááá°áᏠ(á áŹá¸ááąáŹááşáááŻááşáĄáá˝ááşá¸)
- Frontend = á áŹá¸áá˝á˛áááŻá¸ (Menu ááźáááźááşá¸á áážáŹáá°áážáŻáááŻáááşááśááźááşá¸)
- Backend = á áŹá¸áááŻáážá°á¸ + ááŽá¸áááŻááťáąáŹááş (áĄá áŹá¸áĄá áŹááźááşáááşááźááşá¸)
- Full Stack = á áŹá¸ááąáŹááşáááŻááşáááŻááşáážááş (áĄááźááşáážááˇáşáĄáá˝ááşá¸ áážá áşááťááŻá¸ááŻáśá¸áááŻááŹáááşáá°ááźááşá¸)
đ áĄáááŻááşá¸ (á) áááşáááşá
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
Telegram
đ§đ˛đ°đľđ°đ¨
đ Web Development Learning Series - áĄáááŻááşá¸ (á)
"Web Development áááŻááŹááŹáá˛?"
Web Development áááŻáᏠBrowser áá˛áážáŹ áĄááŻááşááŻááşáá˛áˇ Website (áááŻáˇ) Web Application áá˝áą áááşááąáŹááşáá˛áˇááŻááşáááşá¸á ááş ááźá áşááŤáááşá
- áááŻá¸áážááşá¸áá˛áˇ Static Page (áĽááᏠ- áááŻááşááąá¸áááąáŹáˇááş) áááąâŚ
"Web Development áááŻááŹááŹáá˛?"
Web Development áááŻáᏠBrowser áá˛áážáŹ áĄááŻááşááŻááşáá˛áˇ Website (áááŻáˇ) Web Application áá˝áą áááşááąáŹááşáá˛áˇááŻááşáááşá¸á ááş ááźá áşááŤáááşá
- áááŻá¸áážááşá¸áá˛áˇ Static Page (áĽááᏠ- áááŻááşááąá¸áááąáŹáˇááş) áááąâŚ
â¤6âĄ1đ1
Computer Networking Notes đĽ áĄáááŻááşá¸ (á)
đ Note áĄááźááˇáşáĄá áŻáśááᯠááá°áááşá
đ PDF áááŻááşáááş ááá°áááşá
#NetworkingBasics
#TechMyanmar
#ITStudents
đ Note áĄááźááˇáşáĄá áŻáśááᯠááá°áááşá
đ PDF áááŻááşáááş ááá°áááşá
#NetworkingBasics
#TechMyanmar
#ITStudents
â¤3
đ AI/ML áááşá¸áááŹááąáˇááŹáááŻáá°ááťáŹá¸áĄáá˝ááş ááášááŹáˇááááşáááşá¸ááášááááŻááşááťáŹá¸ááž áĄááá˛áˇáááşáááşá¸ááťáŹá¸ (YouTube Playlists)
ááŽáá áşááŤááąáŹáˇ Stanford, MIT, CMU á áá˛áˇ ááááşáááşá¸ááášááááŻááşáá˝áąá AI, Machine Learning áá˛áˇ Deep Learning áááşáááşá¸áá˝áąááᯠYouTube áážáŹáĄááá˛áˇááźááˇáşáážáŻáááŻááşáá˛áˇ Playlist Link áá˝áą á áŻá ááşá¸ááąá¸áááŻááşááŤáááşá
đ¨âđThe Best Courses for AI from Universities with YouTube Playlists
đŤ Stanford University Courses
â˘CS221 - Artificial Intelligence: Principles and Techniques
â˘CS224U: Natural Language Understanding
â˘CS224n - Natural Language Processing with Deep Learning
â˘CS229 - Machine Learning
â˘CS230 - Deep Learning
â˘CS231n - Convolutional Neural Networks for Visual Recognition
â˘CS234 - Reinforcement Learning
â˘CS330 - Deep Multi-task and Meta-Learning
â˘CS25 - Transformers United
đŤ Carnegie Mellon University (CMU) Courses
â˘CS 10-708: Probabilistic Graphical Models
â˘CS/LTI 11-711: Advanced NLP
â˘CS/LTI 11-737: Multilingual NLP
â˘CS/LTI 11-785: Introduction to Deep Learning
â˘CS/LTI 11-785: Neural Networks
đŤ MIT (Massachusetts Institute of Technology) Courses
â˘Introduction to Algorithms
â˘Introduction to Deep Learning
â˘6.S094 - Deep Learning
đ DeepMind x University College London (UCL)
â˘COMP M050 - Introduction to Reinforcement Learning
â˘Deep Learning Series
(áážááşááťááş - áĄááťááŻáˇáááşáááşá¸áá˝áąáážáŹ Lecture Slides áá˛áˇ Assignments áá˝áąááᯠááášááááŻááşáááşááşáááŻááşáá˝áąáážáŹ áážáŹáá˝áąáááŻááşááŤáááşá)
#MyanmarTech
#MyanmarDevs
#AI
#ML
ááŽáá áşááŤááąáŹáˇ Stanford, MIT, CMU á áá˛áˇ ááááşáááşá¸ááášááááŻááşáá˝áąá AI, Machine Learning áá˛áˇ Deep Learning áááşáááşá¸áá˝áąááᯠYouTube áážáŹáĄááá˛áˇááźááˇáşáážáŻáááŻááşáá˛áˇ Playlist Link áá˝áą á áŻá ááşá¸ááąá¸áááŻááşááŤáááşá
đ¨âđThe Best Courses for AI from Universities with YouTube Playlists
đŤ Stanford University Courses
â˘CS221 - Artificial Intelligence: Principles and Techniques
â˘CS224U: Natural Language Understanding
â˘CS224n - Natural Language Processing with Deep Learning
â˘CS229 - Machine Learning
â˘CS230 - Deep Learning
â˘CS231n - Convolutional Neural Networks for Visual Recognition
â˘CS234 - Reinforcement Learning
â˘CS330 - Deep Multi-task and Meta-Learning
â˘CS25 - Transformers United
đŤ Carnegie Mellon University (CMU) Courses
â˘CS 10-708: Probabilistic Graphical Models
â˘CS/LTI 11-711: Advanced NLP
â˘CS/LTI 11-737: Multilingual NLP
â˘CS/LTI 11-785: Introduction to Deep Learning
â˘CS/LTI 11-785: Neural Networks
đŤ MIT (Massachusetts Institute of Technology) Courses
â˘Introduction to Algorithms
â˘Introduction to Deep Learning
â˘6.S094 - Deep Learning
đ DeepMind x University College London (UCL)
â˘COMP M050 - Introduction to Reinforcement Learning
â˘Deep Learning Series
(áážááşááťááş - áĄááťááŻáˇáááşáááşá¸áá˝áąáážáŹ Lecture Slides áá˛áˇ Assignments áá˝áąááᯠááášááááŻááşáááşááşáááŻááşáá˝áąáážáŹ áážáŹáá˝áąáááŻááşááŤáááşá)
#MyanmarTech
#MyanmarDevs
#AI
#ML
â¤3đĽ°1
đ Coursera áĄááá˛áˇáĄááŻáśá¸ááźáŻáááşá¸ (Complete Guide) đ
áááˇáşá Coursera áážáŹ áááşáááşá¸áá˝áąááᯠfree áááşáááŻáááşáááá˛ááááťááşááąááŹá¸? ááŤáážáááŻááş Financial aid áááşáááŻááťážáąáŹááşáááᲠááááťááşááąááŹá¸ á áááŹáááşáᯠááťážáąáŹááşááŹáážáŹ ááŹáá˝áąáááŻáĄááşááá˛áááŻááŹááᯠááááťááşááąááŹá¸ á áááźááˇáşááąá¸áá˝ááşá¸áá˝áąáážáááąáááşáááŻáááşááąáŹáˇ áᎠcomplete guide á áááˇáşáĄáá˝ááşááźá áşááŤáááşá
đŻ áᎠGuide áážáŹááŹáá˝áąááŤáááşááá˛?
â Coursera áážáŹ áĄááá˛áˇáááşáááşá¸áááşáááşá¸ (Audit Option)
â Financial Aid (áááŹáááşááŻ) ááťážáąáŹááşáááşá¸ áĄáááˇáşáááˇáş
â Financial Aid (áááŹáááşááŻ) áĄáąáŹááşááźááşá á˝áŹááťážáąáŹááşááŹá¸áááŻááşáááˇáş Tips & Tricks
đ Complete Guide áĄááźááˇáşáĄá áŻáśááᯠááŽááąááŹáááŻáážáááşááźáŽá¸ free ááá°ááŤá
đĽ áĄáá°á¸áĄááźáśááźáŻááťááş:
- Financial Aid ááťážáąáŹááşááŹáá˝ááş áááşá á áááşáĄáŹá¸áááşáááşáážáŻááᯠááąáŹáşááźááŤ
- áá áşááźáááşááźááşá¸áááşááśáááŤá ááźááşáááşááťážáąáŹááşááŹá¸áááŻááşááŤáááş
#Coursera
#FreeCourses
#OnlineLearning
#MyanmarStudents
#EducationForAll
#Scholarship
đ˘ áᎠguide ááᯠááťážááąááźááşá¸ááźááˇáş áĄááźáŹá¸áá°ááťáŹá¸á፠áĄááťááŻá¸áážáá áąááŤá áą!
áááˇáşá Coursera áážáŹ áááşáááşá¸áá˝áąááᯠfree áááşáááŻáááşáááá˛ááááťááşááąááŹá¸? ááŤáážáááŻááş Financial aid áááşáááŻááťážáąáŹááşáááᲠááááťááşááąááŹá¸ á áááŹáááşáᯠááťážáąáŹááşááŹáážáŹ ááŹáá˝áąáááŻáĄááşááá˛áááŻááŹááᯠááááťááşááąááŹá¸ á áááźááˇáşááąá¸áá˝ááşá¸áá˝áąáážáááąáááşáááŻáááşááąáŹáˇ áᎠcomplete guide á áááˇáşáĄáá˝ááşááźá áşááŤáááşá
đŻ áᎠGuide áážáŹááŹáá˝áąááŤáááşááá˛?
â Coursera áážáŹ áĄááá˛áˇáááşáááşá¸áááşáááşá¸ (Audit Option)
â Financial Aid (áááŹáááşááŻ) ááťážáąáŹááşáááşá¸ áĄáááˇáşáááˇáş
â Financial Aid (áááŹáááşááŻ) áĄáąáŹááşááźááşá á˝áŹááťážáąáŹááşááŹá¸áááŻááşáááˇáş Tips & Tricks
đ Complete Guide áĄááźááˇáşáĄá áŻáśááᯠááŽááąááŹáááŻáážáááşááźáŽá¸ free ááá°ááŤá
đĽ áĄáá°á¸áĄááźáśááźáŻááťááş:
- Financial Aid ááťážáąáŹááşááŹáá˝ááş áááşá á áááşáĄáŹá¸áááşáááşáážáŻááᯠááąáŹáşááźááŤ
- áá áşááźáááşááźááşá¸áááşááśáááŤá ááźááşáááşááťážáąáŹááşááŹá¸áááŻááşááŤáááş
#Coursera
#FreeCourses
#OnlineLearning
#MyanmarStudents
#EducationForAll
#Scholarship
đ˘ áᎠguide ááᯠááťážááąááźááşá¸ááźááˇáş áĄááźáŹá¸áá°ááťáŹá¸á፠áĄááťááŻá¸áážáá áąááŤá áą!
â¤8âĄ1
đ Web Development Learning Series - áĄáááŻááşá¸ (á)
"Website áá áşáᯠáĄááŻááşááŻááşááŻáś (Client-Server Model áážááşá¸áááşá¸ááťááş)"
---
đš áĄááźáąááśáĄááŻááşááŻááşááŻáś
áááˇáşáĄááąáá˛áˇ www.google.com áááŻáááŻááşáááˇáşáááŻááşáá˛áˇáĄá፠ááąáŹááşáá˝ááşáážáŹ ááŹáá˝áąááźá áşáá˝áŹá¸áá˛?
1ď¸âŁ áááˇáş Browser (Client) á Website ááááşá áŹááᯠServer áᎠRequest áááŻáˇááąá¸áááş
2ď¸âŁ Server á Request áááŻáááşááśááźáŽá¸ Process ááŻááşáááş
3ď¸âŁ HTML, CSS, JavaScript File áá˝áąááᯠááźááşáááŻáˇááąá¸áááş
4ď¸âŁ Browser á áᎠFile áá˝áąáááŻáĄááŻáśá¸ááźáŻááźáŽá¸ Website áááŻááźáááąá¸áááş
---
đš áĄááąá¸ááźáŽá¸ááąáŹ Key Terms ááťáŹá¸
Client
- Chrome, Firefox áá˛áˇáááŻáˇááąáŹ Browser (Request áááŻáˇáá°)
Server
- Website Data ááťáŹá¸ááᯠááááşá¸áááşá¸ááŹá¸ááąáŹ Computer (Response ááźááşáááŻáˇáá°)
HTTP/HTTPS
- Client-Server áĄááźáŹá¸ Data áááŻáˇááąáŹááşááŹáá˝ááş áĄááŻáśá¸ááźáŻááąáŹ Protocol
DNS
Domain Name (google.com) ááᯠIP Address áĄááźá áş ááźáąáŹááşá¸ááąá¸ááąáŹ System
---
đ˝ Real-Life Analogy : áááşáá˝áąáˇááá°áᏠ(á áŹá¸ááąáŹááşáááŻááş)
- áááşáˇ (Client) = á áŹá¸áá˝á˛áááŻá¸ááᯠáĄá áŹáážáŹáááş
- á áŹá¸áá˝á˛áááŻá¸ (Browser) = ááŽá¸áááŻááťáąáŹááşááᯠáĄááźáąáŹááşá¸ááźáŹá¸áááş
- ááŽá¸áááŻááťáąáŹááş (Server) = áĄá áŹááźááşáááşááźáŽá¸ áááˇáşááśáááŻáˇááąá¸áááş
ááááş: áááşáˇáážáąáˇáážáŹ áá°áá°áá˝áąá¸áá˝áąá¸ áĄá áŹá¸áĄá áŹááąáŹááşááŹááźááşá¸ (Website Load ááźá áşááźááşá¸áážááˇáşáĄáá°áá°ááŤáá˛!)
---
đš Technical áĄáááˇáşáááˇáş (Amazon.com áááŻáááşááźááˇáşáááˇáşáĄááŤ)
1ď¸âŁ Browser á DNS áááŻááŻáśá¸ááźáŽá¸ amazon.com á IP Address áááŻáážáŹáááş
2ď¸âŁ Amazon Server áᎠHTTP GET Request áááŻáˇáááş
3ď¸âŁ Server á HTML File áááŻááźááşáááŻáˇáááş
4ď¸âŁ Browser á HTML áááŻáááşááźáŽá¸ CSS, JS File áá˝áąáááŻáĄáááŻáĄááťáąáŹááşááąáŹááşá¸áá°áááş
5ď¸âŁ ááááş: Amazon á ááźááˇáşá áŻáśááąáŹ Website ááąáŤáşááŹáááş
---
đĄ Developer Tools áĄááŻáśá¸ááźáŻáááşá¸
1. Browser áážáŹ F12 áážáááşá፠(Chrome/Firefox)
2. Network Tab áááŻáá˝áąá¸ááŤ
3. Page ááᯠRefresh ááŻááşááźáŽá¸ File áá˝áąáááşáááŻááąáŹááşá¸áá°ááŹá¸áᲠááźááˇáşáááŻááşáááş
đ áĄáááŻááşá¸ (á) áááşáááşá
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
"Website áá áşáᯠáĄááŻááşááŻááşááŻáś (Client-Server Model áážááşá¸áááşá¸ááťááş)"
---
đš áĄááźáąááśáĄááŻááşááŻááşááŻáś
áááˇáşáĄááąáá˛áˇ www.google.com áááŻáááŻááşáááˇáşáááŻááşáá˛áˇáĄá፠ááąáŹááşáá˝ááşáážáŹ ááŹáá˝áąááźá áşáá˝áŹá¸áá˛?
1ď¸âŁ áááˇáş Browser (Client) á Website ááááşá áŹááᯠServer áᎠRequest áááŻáˇááąá¸áááş
2ď¸âŁ Server á Request áááŻáááşááśááźáŽá¸ Process ááŻááşáááş
3ď¸âŁ HTML, CSS, JavaScript File áá˝áąááᯠááźááşáááŻáˇááąá¸áááş
4ď¸âŁ Browser á áᎠFile áá˝áąáááŻáĄááŻáśá¸ááźáŻááźáŽá¸ Website áááŻááźáááąá¸áááş
---
đš áĄááąá¸ááźáŽá¸ááąáŹ Key Terms ááťáŹá¸
Client
- Chrome, Firefox áá˛áˇáááŻáˇááąáŹ Browser (Request áááŻáˇáá°)
Server
- Website Data ááťáŹá¸ááᯠááááşá¸áááşá¸ááŹá¸ááąáŹ Computer (Response ááźááşáááŻáˇáá°)
HTTP/HTTPS
- Client-Server áĄááźáŹá¸ Data áááŻáˇááąáŹááşááŹáá˝ááş áĄááŻáśá¸ááźáŻááąáŹ Protocol
DNS
Domain Name (google.com) ááᯠIP Address áĄááźá áş ááźáąáŹááşá¸ááąá¸ááąáŹ System
---
đ˝ Real-Life Analogy : áááşáá˝áąáˇááá°áᏠ(á áŹá¸ááąáŹááşáááŻááş)
- áááşáˇ (Client) = á áŹá¸áá˝á˛áááŻá¸ááᯠáĄá áŹáážáŹáááş
- á áŹá¸áá˝á˛áááŻá¸ (Browser) = ááŽá¸áááŻááťáąáŹááşááᯠáĄááźáąáŹááşá¸ááźáŹá¸áááş
- ááŽá¸áááŻááťáąáŹááş (Server) = áĄá áŹááźááşáááşááźáŽá¸ áááˇáşááśáááŻáˇááąá¸áááş
ááááş: áááşáˇáážáąáˇáážáŹ áá°áá°áá˝áąá¸áá˝áąá¸ áĄá áŹá¸áĄá áŹááąáŹááşááŹááźááşá¸ (Website Load ááźá áşááźááşá¸áážááˇáşáĄáá°áá°ááŤáá˛!)
---
đš Technical áĄáááˇáşáááˇáş (Amazon.com áááŻáááşááźááˇáşáááˇáşáĄááŤ)
1ď¸âŁ Browser á DNS áááŻááŻáśá¸ááźáŽá¸ amazon.com á IP Address áááŻáážáŹáááş
2ď¸âŁ Amazon Server áᎠHTTP GET Request áááŻáˇáááş
3ď¸âŁ Server á HTML File áááŻááźááşáááŻáˇáááş
4ď¸âŁ Browser á HTML áááŻáááşááźáŽá¸ CSS, JS File áá˝áąáááŻáĄáááŻáĄááťáąáŹááşááąáŹááşá¸áá°áááş
5ď¸âŁ ááááş: Amazon á ááźááˇáşá áŻáśááąáŹ Website ááąáŤáşááŹáááş
---
đĄ Developer Tools áĄááŻáśá¸ááźáŻáááşá¸
1. Browser áážáŹ F12 áážáááşá፠(Chrome/Firefox)
2. Network Tab áááŻáá˝áąá¸ááŤ
3. Page ááᯠRefresh ááŻááşááźáŽá¸ File áá˝áąáááşáááŻááąáŹááşá¸áá°ááŹá¸áᲠááźááˇáşáááŻááşáááş
đ áĄáááŻááşá¸ (á) áááşáááşá
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
â¤2âĄ1
Computer Networking Notes đĽ áĄáááŻááşá¸ (á)
đ Note áĄááźááˇáşáĄá áŻáśááᯠááá°áááşá
đ PDF áááŻááşáááş ááá°áááşá
đ áĄáááŻááşá¸ (á) áááşáááşá
#NetworkingBasics
#TechMyanmar
#ITStudents
đ Note áĄááźááˇáşáĄá áŻáśááᯠááá°áááşá
đ PDF áááŻááşáááş ááá°áááşá
đ áĄáááŻááşá¸ (á) áááşáááşá
#NetworkingBasics
#TechMyanmar
#ITStudents
â¤2
đ JSON Web Token (JWT) áááŻááŹááŹáá˛?
JWT áááŻáᏠáĄááşááŹáááşáážáŹ ááŻáśááźáŻáśá á˝áŹ áĄááťááşáĄáááşááážááşáááŻáˇááŻáśá¸áá˛áˇ Token áá áşááťááŻá¸ááŤá
JWT ááᯠá áá áşáááťáĄááŻáśá¸ááźáŻááźááşá¸ááźááˇáş Web/Mobile App áá˝áąááᯠááŻáśááźáŻáśá áąááŤá áąáááşá đ
JWT áĄááźáąáŹááşá¸ááᯠáááŻááźáŽááááťááşáááşááąáŹáˇ ááŽááąááŹáááŻáážáááşááźáŽá¸áĄááźááˇáşáĄá áŻáśáááşáááŻáˇáááŤáááşááťá
#JWT
#WebSecurity
#API
#Authentication
#Programming
#MyanmarTech
JWT áááŻáᏠáĄááşááŹáááşáážáŹ ááŻáśááźáŻáśá á˝áŹ áĄááťááşáĄáááşááážááşáááŻáˇááŻáśá¸áá˛áˇ Token áá áşááťááŻá¸ááŤá
JWT ááᯠá áá áşáááťáĄááŻáśá¸ááźáŻááźááşá¸ááźááˇáş Web/Mobile App áá˝áąááᯠááŻáśááźáŻáśá áąááŤá áąáááşá đ
JWT áĄááźáąáŹááşá¸ááᯠáááŻááźáŽááááťááşáááşááąáŹáˇ ááŽááąááŹáááŻáážáááşááźáŽá¸áĄááźááˇáşáĄá áŻáśáááşáááŻáˇáááŤáááşááťá
#JWT
#WebSecurity
#API
#Authentication
#Programming
#MyanmarTech
â¤1
Operating Systems áá˝áąáá˛áˇáááşáááşá¸áá˝áąááŤáđ¨đťâđť
áááş OS ááááŻááˇáşáááşáĄáááşááźáŽá¸ááąáᲠááááĄáąáŹááşááŤá đđ
đ Windows 11 (3 years old)
đŞ Windows 10 (8 years old)
đ macOS Yosemite (10 years old)
đ Kali Linux (11 years old)
đť Windows 8 (12 years old)
đ Manjaro (11 years old)
đť Windows 7 (14 years old)
đĽ Windows Vista (17 years old)
đż Linux Mint (18 years old)
đ§ Ubuntu (20 years old)
âď¸ Fedora (20 years old)
đ§ OpenSUSE (20 years old)
âď¸ CentOS (20 years old)
đ§ Arch Linux (22 years old)
đ macOS (22 years old)
đť Windows XP (23 years old)
đĽ Windows 2000 (24 years old)
đą Windows 98 (25 years old)
đ Windows 95 (28 years old)
đť Windows 3.1 (29 years old)
đĽ OS/2 (32 years old)
đ§ Debian (31 years old)
đ´ Red Hat Linux (30 years old)
đŽ AmigaOS (34 years old)
đĽ Xenix (40 years old)
đ VMS (44 years old)
đž MS-DOS (42 years old)
đž CP/M (49 years old)
đĽ Unix (54 years old)
#MyanmarTech
#tech4umm
#OS
#age
áááş OS ááááŻááˇáşáááşáĄáááşááźáŽá¸ááąáᲠááááĄáąáŹááşááŤá đđ
đ Windows 11 (3 years old)
đŞ Windows 10 (8 years old)
đ macOS Yosemite (10 years old)
đ Kali Linux (11 years old)
đť Windows 8 (12 years old)
đ Manjaro (11 years old)
đť Windows 7 (14 years old)
đĽ Windows Vista (17 years old)
đż Linux Mint (18 years old)
đ§ Ubuntu (20 years old)
âď¸ Fedora (20 years old)
đ§ OpenSUSE (20 years old)
âď¸ CentOS (20 years old)
đ§ Arch Linux (22 years old)
đ macOS (22 years old)
đť Windows XP (23 years old)
đĽ Windows 2000 (24 years old)
đą Windows 98 (25 years old)
đ Windows 95 (28 years old)
đť Windows 3.1 (29 years old)
đĽ OS/2 (32 years old)
đ§ Debian (31 years old)
đ´ Red Hat Linux (30 years old)
đŽ AmigaOS (34 years old)
đĽ Xenix (40 years old)
đ VMS (44 years old)
đž MS-DOS (42 years old)
đž CP/M (49 years old)
đĽ Unix (54 years old)
#MyanmarTech
#tech4umm
#OS
#age
â¤12
đ Web Development Learning Series - áĄáááŻááşá¸ (á)
Frontend Technologies (HTML, CSS, JS áĄááźáąááśááťáŹá¸)
---
đ§ą Frontend Development á áááşáááş
Website áá áşááŻáááşááąáŹááşááŹáá˝ááş HTML, CSS áážááˇáş JavaScript áááş áĄááźáąááśáĄáŻááşááźá áşááźá áşááŤáááşá
---
đš áá HTML (HyperText Markup Language) - The Structure
HTML áááş Webpage áStructure ááźá áşááźáŽá¸ áááşáááˇáşáĄááŹááťáŹá¸ááŤáááşáááşááᯠáááşáážááşááąá¸ááŤáááşá
áĄááŻáśá¸ááťáŹá¸ááąáŹ HTML Elements
⢠Headings (<h1> to <h6>)
⢠Paragraphs (<p>)
⢠Images (<img>)
⢠Links (<a href="">)
⢠Lists (<ul>, <ol>, <li>)
⢠Forms, buttons, inputs
đ Example:
---
đš áá CSS (Cascading Style Sheets) - The Style
CSS á Webpage áá˛áˇáĄáážáĄááážááˇáş áĄááźááşáĄáááşááᯠááááşá¸ááťáŻááşááąá¸ááŤáááşá
CSS áá˛áˇáĄáááááŻááşááąáŹááşááťááşááťáŹá¸
⢠Colors
⢠Fonts
⢠Layouts
⢠Spacing
⢠Responsiveness
CSS áĄááŻáśá¸ááźáŻáááşá¸ (á) ááťááŻá¸
1ď¸âŁ Inline CSS
2ď¸âŁ Internal CSS
3ď¸âŁ External CSS
---
đš áá JavaScript (JS) - The Interactivity
JavaScript á Website ááᯠáĄááźááşáĄáážááşááŻááşááąáŹááşáááŻááşá áąáááş ááźáŻááŻááşááąá¸ááŤáááşá
JavaScript áá˛áˇáĄáááááŻááşááąáŹááşááťááşááťáŹá¸
⢠Respond to button clicks
⢠Show/hide elements
⢠Validate form inputs
⢠Make API calls
đ Example:
---
đĄ Frontend Flow Summary:
- HTML â áĄáááşáá˛áˇ Structure áá˛áˇáá°ááŤáááşá
- CSS â áĄáááşáááŻáĄáážáááşááźááşá¸ (ááąá¸ááŻááşááźááşá¸á áĄáážáááşááźááşá¸)
- JavaScript â áĄáááşáááŻá áááşááźá áşá áąááźááşá¸ (áĄáááŻáĄááťáąáŹááşááŽá¸áá˝ááˇáşááźááşá¸á ááŻáśááźáŻáśááąá¸á áá áş)
đ áĄáááŻááşá¸ (á) áááşáááşá
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
Frontend Technologies (HTML, CSS, JS áĄááźáąááśááťáŹá¸)
---
đ§ą Frontend Development á áááşáááş
Website áá áşááŻáááşááąáŹááşááŹáá˝ááş HTML, CSS áážááˇáş JavaScript áááş áĄááźáąááśáĄáŻááşááźá áşááźá áşááŤáááşá
---
đš áá HTML (HyperText Markup Language) - The Structure
HTML áááş Webpage áStructure ááźá áşááźáŽá¸ áááşáááˇáşáĄááŹááťáŹá¸ááŤáááşáááşááᯠáááşáážááşááąá¸ááŤáááşá
áĄááŻáśá¸ááťáŹá¸ááąáŹ HTML Elements
⢠Headings (<h1> to <h6>)
⢠Paragraphs (<p>)
⢠Images (<img>)
⢠Links (<a href="">)
⢠Lists (<ul>, <ol>, <li>)
⢠Forms, buttons, inputs
đ Example:
<h1>Header</h1>
<p>Paragraphs</p>
<a href="https://example.com">link</a>
<img src="image.jpg" alt="image">
<ul>
<li>list 1</li>
<li>list 2</li>
</ul>
---
đš áá CSS (Cascading Style Sheets) - The Style
CSS á Webpage áá˛áˇáĄáážáĄááážááˇáş áĄááźááşáĄáááşááᯠááááşá¸ááťáŻááşááąá¸ááŤáááşá
CSS áá˛áˇáĄáááááŻááşááąáŹááşááťááşááťáŹá¸
⢠Colors
⢠Fonts
⢠Layouts
⢠Spacing
⢠Responsiveness
CSS áĄááŻáśá¸ááźáŻáááşá¸ (á) ááťááŻá¸
1ď¸âŁ Inline CSS
<h1 style="color: red;">red header</h1>
2ď¸âŁ Internal CSS
<head>
<style>
h1 { color: blue; text-align: center; }
</style>
</head>
3ď¸âŁ External CSS
<link rel="stylesheet" href="styles.css">
---
đš áá JavaScript (JS) - The Interactivity
JavaScript á Website ááᯠáĄááźááşáĄáážááşááŻááşááąáŹááşáááŻááşá áąáááş ááźáŻááŻááşááąá¸ááŤáááşá
JavaScript áá˛áˇáĄáááááŻááşááąáŹááşááťááşááťáŹá¸
⢠Respond to button clicks
⢠Show/hide elements
⢠Validate form inputs
⢠Make API calls
đ Example:
html
<button onclick="alert('áááşášáááŹááŤ!')">áážáááşááŤ</button>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
---
đĄ Frontend Flow Summary:
- HTML â áĄáááşáá˛áˇ Structure áá˛áˇáá°ááŤáááşá
- CSS â áĄáááşáááŻáĄáážáááşááźááşá¸ (ááąá¸ááŻááşááźááşá¸á áĄáážáááşááźááşá¸)
- JavaScript â áĄáááşáááŻá áááşááźá áşá áąááźááşá¸ (áĄáááŻáĄááťáąáŹááşááŽá¸áá˝ááˇáşááźááşá¸á ááŻáśááźáŻáśááąá¸á áá áş)
đ áĄáááŻááşá¸ (á) áááşáááşá
#MyanmarTech
#MyanmarDevs
#WebDevelopment
#Programming
#HTMLCSS
Telegram
đ§đ˛đ°đľđ°đ¨
đ Web Development Learning Series - áĄáááŻááşá¸ (á)
"Website áá áşáᯠáĄááŻááşááŻááşááŻáś (Client-Server Model áážááşá¸áááşá¸ááťááş)"
---
đš áĄááźáąááśáĄááŻááşááŻááşááŻáś
áááˇáşáĄááąáá˛áˇ www.google.com áááŻáááŻááşáááˇáşáááŻááşáá˛áˇáĄá፠ááąáŹááşáá˝ááşáážáŹ ááŹáá˝áąááźá áşáá˝áŹá¸áá˛?
1ď¸âŁ áááˇáş Browser (Client) á WebsiteâŚ
"Website áá áşáᯠáĄááŻááşááŻááşááŻáś (Client-Server Model áážááşá¸áááşá¸ááťááş)"
---
đš áĄááźáąááśáĄááŻááşááŻááşááŻáś
áááˇáşáĄááąáá˛áˇ www.google.com áááŻáááŻááşáááˇáşáááŻááşáá˛áˇáĄá፠ááąáŹááşáá˝ááşáážáŹ ááŹáá˝áąááźá áşáá˝áŹá¸áá˛?
1ď¸âŁ áááˇáş Browser (Client) á WebsiteâŚ
â¤4
đ¨ áĄááŻáśá¸áááşá
áąáááˇáş CSS Filters ááťáŹá¸
⨠CSS Filter á áĄááąáŹááşááźáąáŹááşá¸ááźááşá¸á áážáŻááşááŤá¸ááźááşá¸á áĄáááşá¸áĄáážáąáŹááşááźáŻááźááşááźááşá¸ á áá˛áˇ áĄáážáááşáá°áá˝áą ááᯠááŹááşááŻáś (image) áá˛áˇ HTML element áá˝áąáážáŹ áááˇáşáá˝ááşá¸áĄááŻáśá¸ááźáŻáááŻááşááŤáááşá
đ ááŽááąááŹáááŻáážáááşááźáŽá¸ áĄááźááˇáşáĄá áŻáśáááşáááŻááşááŤáááşááťá
#CSS
#CSSFilters
#WebDesign
#Frontend
#MyanmarWebDev
⨠CSS Filter á áĄááąáŹááşááźáąáŹááşá¸ááźááşá¸á áážáŻááşááŤá¸ááźááşá¸á áĄáááşá¸áĄáážáąáŹááşááźáŻááźááşááźááşá¸ á áá˛áˇ áĄáážáááşáá°áá˝áą ááᯠááŹááşááŻáś (image) áá˛áˇ HTML element áá˝áąáážáŹ áááˇáşáá˝ááşá¸áĄááŻáśá¸ááźáŻáááŻááşááŤáááşá
đ ááŽááąááŹáááŻáážáááşááźáŽá¸ áĄááźááˇáşáĄá áŻáśáááşáááŻááşááŤáááşááťá
#CSS
#CSSFilters
#WebDesign
#Frontend
#MyanmarWebDev
â¤4
Programming Language Fundamental áážáŹááŹáá˝áąááąáˇááŹáááŻáˇ áááŻáĄááşááá˛?
ááŽáážáŹáĄááąá¸á áááş tree áá˛áˇááźááŹá¸ááŤáááşáđ
đ Programming Tree
#MyanmarTech
#Programming
ááŽáážáŹáĄááąá¸á áááş tree áá˛áˇááźááŹá¸ááŤáááşáđ
đ Programming Tree
#MyanmarTech
#Programming
â¤5âĄ1
đĽ Server áĄááťááŻá¸áĄá
áŹá¸ááťáŹá¸
â¨Server áá áşááŻááťááşá¸á áŽáá˛áˇ áĄááŻááşááŻááşááŻáśá áááşáááŻáĄááŻáśá¸áááşáááşáááŻáᏠáᎠPost áážáŹ áĄáá˝ááşááá° ááŹá¸áááşáĄáąáŹááş áážááşá¸ááźááąá¸ááŹá¸ááŤáááş!
đ ááŽááąááŹáááŻáážáááşááźáŽá¸ áĄááźááˇáşáĄá áŻáśáááşáááŻááşááŤáááşááťá
#ServerTypes
#WebDevelopment
#Networking
#TechBurmese
#DigitalInfrastructure
â¨Server áá áşááŻááťááşá¸á áŽáá˛áˇ áĄááŻááşááŻááşááŻáśá áááşáááŻáĄááŻáśá¸áááşáááşáááŻáᏠáᎠPost áážáŹ áĄáá˝ááşááá° ááŹá¸áááşáĄáąáŹááş áážááşá¸ááźááąá¸ááŹá¸ááŤáááş!
đ ááŽááąááŹáááŻáážáááşááźáŽá¸ áĄááźááˇáşáĄá áŻáśáááşáááŻááşááŤáááşááťá
#ServerTypes
#WebDevelopment
#Networking
#TechBurmese
#DigitalInfrastructure
â¤3