Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!

Та HTML болон CSS-ын талаар үндсэн ойлголтуудыг мэддэг боловч өөрийгөө вэб хөгжүүлэгчийн ажлын байрны шаардлагыг бүрэн хангаж хараахан чадахгүй гэж бодож байна уу?

Тийм бол энэхүү заагийг арилгах гайхалтай сургалтыг танд танилцуулж байна. Уг сургалтын явцад бид хамтдаа mobile-first дизайнтай responsive вэб сайтыг бүр эхнээс нь алхам алхмаар хийж таныг жинхэнэ мэргэжилтэн болгож хөгжүүлэх болно. Мэдээж үүний зэрэгцээ компаниудын хамгийн ихээр эрж хайж байдаг орчин үеийн вэб хөгжүүлэгчдийн заавал эзэмшсэн байх ёстой чухал ур чадвар, технологиудад суралцаад явах юм. Вэб хөгжүүлэгч, компанийн захирал олон найзууд, танилуудтайгаа ярилцаж байхад миний толгойд "ажил горилогчдод яг тохирсон, тэдэнд компаниудын хайж байдаг ур чадваруудыг эзэмшүүлэх сургалтууд байвал сайхан шүү" гэсэн бодол байнга төрдөг байсан бөгөөд харамсалтай нь яг ийм сургалт зах зээл дээрээс бараг олдохгүй байлаа. Тийм ч учраас би өөрөө энэхүү сургалтыг бэлтгэн та бүхэнд хүргэхээр шийдсэн юм.

Та сургалтын явцад Git, GitHub, Node.js, NPM, обьект хандалтат JavaScript, ES6, webpack, Netlify, BEM method-ын талаар үзэх болно.

Энэхүү сургалт нь 2019 оны 11-р сарын байдлаар вэб хөгжүүлэлтийн салбарт трэнд болоод байгаа технологи, мэдээллүүд, шинэчлэлтүүд дээр тулгуурлан хийгдсэн учраас та хамгийн сүүлийн үеийн арга барилаар дээрх ур чадваруудыг эзэмших юм.

Эрднийн чулуу засаагүй байхдаа хямд үнэтэй байдаг. Харин хэн нэг уран гартны гараар дамжиж, урлагийн бүтээл болсны дараа үнэ цэнэ нь хэд дахин өсдөг билээ. Яг үүнтэй адилаар та HTML, CSS-ийг зүгээр нэг мэддэг байгаад зогсохгүй, жинхэнэ орчин үеийн аргаар HTML, CSS кодыг бичиж сурснаар өөрийнхөө үнэ цэнийг улам бүр нэмэгдүүлэх боломжтой болно.

Хэрэв та эхлэн суралцагч бол манай сайтад байгаа "HTML5, CSS3-ыг эхнээс нь дуустал" сургалтыг эхлээд үзээрэй.

Өөрийн вэб хөгжүүлэгчийн карьерийг шинэ түвшинд гаргахын тулд:
- Git, Github болон command-line ийг ашиглан, бусадтай хамтран ажиллах ур чадвараа хөгжүүлэх
- NPM, Webpack ашиглан үйл ажиллагаагаа автоматжуулж, цаг хэмнэж сурах
- BEM, PostCSS зэрэг аргуудыг ашиглан ямар ч том хэмжээний вэб сайтад тохирсон, супер зохион байгуулалттай стайлуудыг бүтээж, CSS-ийн мэдлэгээ улам дээшлүүлэх
- Mobile-first философийг баримтлан өөрийн вэб сайтыг гайхалтай хурдан болгох
- Обьект хандалтат Javascript-ийн үндсийг ойлгох
- AWS Lambda cloud функцүүдийн үндсэн ойлголтуудтай танилцах
- Ажлын ярилцлаганд тань туслах чухал зөвлөгөөнүүдийг авах зэрэг
олон гайхалтай зүйлсийг энэхүү сургалтаас олж авах юм.

Миний хувьд 1234.mn сайт дээр "HTML5, CSS3-ыг эхнээс нь дуустал" сургалтыг бэлтгэж оруулсан нь суралцагчдаас өндөр үнэлгээ авсаар байна. Одоо танд хүргэж байгаа энэхүү шинэ сургалт нь бүр илүү түвшинд хийгдсэн бөгөөд өмнөх сургалт бол ердөө л бие халаалт байсан гэж ойлгоход болно. Та тэгвэл энэ сургалтыг үзэж дууссанаар яг ямар амжилтанд хүрэх вэ?

- Хамгийн орчин үеийн хэрэгсэл, технологиудыг ашиглан супер responsive вэб хийж сурна.
- Бусад хөгжүүлэгчдэд маш хялбархан ойлгогдох, супер зохион байгуулалттай Javascript, CSS кодыг бичиж сурна.
- Ямар ч вэб хөгжүүлэлтийн багт оронгуутаа шууд зохицож ажиллах чадвартай болно.

Сургалтыг үзэхэд шаардагдах зүйлс:

- HTML, CSS-ийн үндсэн ойлголтуудыг мэддэг байх. Та HTML ашиглан paragraph элемент үүсгэж чадах уу? Та тэр paragraph-аа улбар шар өнгөтэй болгож чадах уу? Хэрэв эдгээрийг чаддаг бол та уг сургалтыг үзэхэд асуудалгүй.
- Мөн та JavaScript хэлний тодорхой мэдлэгтэй байх хэрэгтэй. Хэрэв та өөрийн JavaScript-ийн мэдлэгийг хангалтгүй гэж үзэж байвал манай сайтын хамгийн өндөр рэйтингтэй сургалт болох JavaScript хэлийг эхнээс нь дуустал сургалтыг авч суралцахад энэхүү хэлний хангалттай өндөр түвшний мэдлэгтэй болж чадах юм.
- Бидний хэрэглэх бүх програмууд 100% үнэгүй. Бидний вэбээ байршуулах Github, Netlify үйлчилгээнүүд ч гэсэн үнэгүй.
- Бид Visual Studio Code текст засварлагч програмыг ашиглах болно.
- Яг өөрийн гэсэн компьютераа хэрэглэхийг зөвлөж байна. Яагаад гэвэл бид шаардлагатай програм хангамж, хэрэгслүүдээ суулгаж ашиглах учраас. Windows болон Mac OS үйлдлийн системтэй байвал илүү тохиромжтой. Хэдийгээр бидний хийх зүйлс Linux дээр бүрэн ажиллах боловч бид энэ сургалтаар Linux-ийн талаар ярилцахгүй.

Өөрийнхөө ур чадварыг шинэ түвшинд гаргаж, өөрчлөлт хийхээр шийдсэн танд баяр хүргэе. Сургалтандаа эргэж уулзацгаая.

   Хичээлүүд :   

  1. 35:11
    Сургалтанд тавтай морил
  2. 16:59
    Энэ сургалтаар бид юу үзэх вэ?
  3. 15:03
    Git гэж юу вэ?
  4. 9:26
    Git яаж ажилладаг вэ? 1-р хэсэг
  5. 22:40
    Git яаж ажилладаг вэ? 2-р хэсэг
  6. 20:06
    Git-ийг суулгах, gitbash-ийн тохиргоо
  7. 17:19
    Git-ийн үндсэн командуудыг ажиллуулж үзэцгээе
  8. 7:10
    GitHub: Өөрийн GitHub account-ийг үүсгэх
  9. 16:57
    GitHub: Сургалтаар хийх вэб сайтын маань starter файлуудыг агуулсан Repository үүсгэх
  10. 31:46
    Завсарлага: VS Code editor суулгах, тохируулах
  11. 28:57
    Завсарлага: VS Code editor-т extention-ууд суулгах
  12. 12:30
    Зохион байгуулалт, автоматжуулалт нь зайлшгүй шаардлагатай юу?
  13. 7:15
    Node.js гэж юу вэ?
  14. 5:22
    Node-ийг өөрийн компьютерт суулгах
  15. 17:13
    Node.js-ийн туршилт
  16. 9:14
    NPM, package management гэж юу вэ?
  17. 16:00
    NPM-ийн туршилт
  18. 4:15
    Webpack: Webpack гэж юу вэ?
  19. 20:21
    Webpack: Webpack.config
  20. 3:41
    VS Code-ыг PostCSS syntax-ыг ойлгодог болгож тохируулах
  21. 5:51
    Webpack: CSS workflow гэж юу вэ?
  22. 14:08
    Webpack: Webpack.config-т үндсэн CSS support нэмэх
  23. 8:46
    Webpack: Webpack.config-т PostCSS support нэмэх
  24. 16:48
    CSS файлуудын архитектур. 1-р хэсэг
  25. 13:30
    CSS файлуудын архитектур. 2-р хэсэг
  26. 21:55
    BEM гэж юу вэ?
  27. 12:06
    Class-ын нэр, CSS selector-уудыг бичих дүрмүүд
  28. 10:46
    Large-Hero block-ийг хийж дуусгах
  29. 15:00
    Button block-ийг хийж дуусгах
  30. 15:28
    Webpack Dev Server: CSS, JS дээр хийгдсэн өөрчлөлтийг Web Browser-ыг full reload хийлгүйгээр харуулах
  31. 5:54
    Webpack Dev Server: HTML дээр хийгдсэн өөрчлөлтийг Web Browser-ыг reload хийлгүйгээр харуулах
  32. 10:20
    Webpack Dev Server: Хийж буй вэб сайтаа нэг сүлжээнд буй төхөөрөмжүүд дээр зэрэг харах
  33. 10:00
    Mobile-first: Mobile-first гэж юу вэ?
  34. 4:18
    Mobile-first: Mobile-first дизайн манай төсөлд
  35. 14:37
    Mobile-first: CSS кодоо mobile-first аргаар бичиж эхлэцгээе
  36. 5:33
    Mobile-first: Responsive image гэж юу вэ?
  37. 6:39
    Mobile-first: Responsive image. Нөхцөл 1. Зургийн байршил болон Crop
  38. 8:06
    Mobile-first: Responsive image. Нөхцөл 2. Файлын хэмжээ болон нягтрал
  39. 13:14
    Mobile-first: Өөрсдийн вэб сайтад responsive image нэмж эхлэх
  40. 11:22
    Mobile-first: Responsive image-ийг тестлэх зарим аргууд
  41. 17:37
    Дахин ашиглагдах блокуудыг хийх. 1-р хэсэг
  42. 11:57
    Дахин ашиглагдах блокуудыг хийх. 2-р хэсэг
  43. 19:31
    Headline блок
  44. 18:35
    Modifier систем яагаад чухал вэ?
  45. 16:55
    Дахин ашиглагдах Column Layout блокийг хийх. 1-р хэсэг
  46. 16:20
    Дахин ашиглагдах Column Layout блокийг хийх. 2-р хэсэг
  47. 30:49
    Intro хэсгийн зургуудыг responsive болгох
  48. 20:42
    Intro хэсгийн текстүүдийн стайл
  49. 10:35
    Завсарлага. Git branch: Git branch шинээр үүсгэх
  50. 10:44
    Завсарлага. Git branch: Branch-ууд хооронд шилжиж ажиллах, command line ашиглан merge хийх
  51. 18:31
    Завсарлага. Git branch: Github ашиглан merge хийх
  52. 17:23
    Бидний онцлогууд section стайл 1-р хэсэг
  53. 16:43
    Бидний онцлогууд section стайл 2-р хэсэг
  54. 12:24
    Бидний онцлогууд section стайл 3-р хэсэг
  55. 28:12
    Талархал section-ийн стайл. 1-р хэсэг. Дахин ашиглагдах testimonial block-ийг хийх
  56. 21:32
    Талархал section-ийн стайл. 2-р хэсэг. Small screen-д тохируулах
  57. 17:41
    Талархал section-ийн стайл. 3-р хэсэг. Medium screen-д тохируулах
  58. 11:24
    Footer-ийн стайл
  59. 26:22
    Header-ийн стайл. Large screen-д тохируулах
  60. 13:20
    Header-ийн стайл. Small screen-д тохируулах
  61. 35:09
    JavaScript. Обьект хандалтат програмчлалын тухай товчхон
  62. 13:11
    JavaScript. JS файлаа олон файлуудад хуваах. Class-ын удамшил
  63. 22:25
    Мобайл цэс. JavaScript шпагетти код бичихээс хэрхэн зайлсхийх вэ?
  64. 22:35
    Мобайл цэс. Мобайл цэсний стайл
  65. 21:21
    Мобайл цэс. Гамбургер шугамуудын анимаци
  66. 26:06
    Scroll хийх үед элементүүдийг харуулах. 1-р хэсэг
  67. 28:55
    Scroll хийх үед элементүүдийг харуулах. 2-р хэсэг. Кодоо илүү үр өгөөжтэй болгох
  68. 24:29
    Scroll хийх үед элементүүдийг харуулах. 3-р хэсэг. Reveal Feature-ээ дахин ашиглах
  69. 21:05
    Sticky Header. 1-р хэсэг. Header-ийг sticky болгох, логоны анимаци
  70. 28:01
    Sticky Header. 2-р хэсэг. Цэсний линкийг highlight хийх
  71. 23:47
    Modal Overlay. 1-р хэсэг. Modal Overlay-ийн CSS-ийг бичих
  72. 24:27
    Modal Overlay. 2-р хэсэг. Modal Overlay-ийн JS-ийг бичих
  73. 20:17
    Webpack Code splitting
  74. 13:23
    Lazy Loading хийж вэбийн дуудагдах хурдыг сайжруулах
  75. 19:53
    Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: Dev болон Build script-ийн тохиргоо
  76. 25:58
    Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: Bundled.js файлаас CSS файлаа extract хийж гаргаж авах
  77. 21:22
    Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: HTML файлуудаа үүсгэх
  78. 10:55
    Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: Зургуудаа Dist folder-т хуулах
  79. 13:36
    Вэбээ GitHub pages дээр байршуулах
  80. 16:12
    Netlify-ийг ашиглан Build хийх
  81. 14:14
    Cloud functions: Cloud function гэж юу вэ?
  82. 17:57
    Cloud functions: Postman ашиглан cloud function-аа тестлэх
  83. 12:57
    Cloud functions: Хэрэглэгчдийн хэсгийн HTML, CSS-ийг хийх
  84. 17:29
    Cloud functions: Хэрэглэгчдийн хэсгийн javascript-ийг бичих
  85. 19:54
    React-ийг өөрсдийн project-доо холбож ажилуулах
  86. 21:13
    Git-ийн merge-ийн зөрчлөөс сэргийлэх, гарсан зөрчлийг зохицуулах
  87. 12:38
    CSS-ийн тухай бусад зүйлс: CSS gradient
  88. 26:40
    CSS-ийн тухай бусад зүйлс: CSS gradient-ийг анимаци хийх
  89. 27:11
    CSS-ийн тухай бусад зүйлс: CSS transition properties
  90. 17:06
    CSS-ийн тухай бусад зүйлс: Swup ашиглан HTML page-үүдийн хооронд transition хийх
  91. 9:56
    CSS-ийн тухай бусад зүйлс: CSS calc функцийн тухай
  92. 12:14
    CSS-ийн тухай бусад зүйлс: CSS transform skew ашиглан hover эффект бүхий товчлуур хийх
  93. 17:13
    HTML и-мэйл илгээх: Mailtrap ашиглан и-мэйл илгээж тестлэх
  94. 16:28
    HTML и-мэйл илгээх: Nodemailer ашиглан gmail хаягаараа и-мэйл илгээх
  95. 23:37
    HTML и-мэйл илгээх: HTML, CSS бүхий и-мэйлийн кодыг бичихэд тавигдах шаардлагууд
  96. 26:54
    HTML и-мэйл илгээх: HTML, CSS бүхий и-мэйлийг яаж responsive байдлаар бичих вэ?
  97. 26:17
    HTML и-мэйл илгээх: Гоё HTML и-мэйл бичиж үзэцгээе! 1-р хэсэг
  98. 19:41
    HTML и-мэйл илгээх: Гоё HTML и-мэйл бичиж үзэцгээе! 2-р хэсэг
  99. 17:05
    Мөрөөдлийн ажил: Яаж илүү олон ажлын ярилцлагад орох вэ?
  100. 17:54
    Мөрөөдлийн ажил: Ажлын ярилцлагад орохдоо бүтэлгүйтэхгүй байх аргууд
  101. 23:30
    Frontend, backend фрэймворкууд үүссэн шалтгаан, тэдгээрийн эзлэх байр суурь
  102. 44:55
    Орчин үеийн вэб хөгжүүлэх архитектурын дүр зураг, ашиглах фрэймворкууд
  103. 33:05
    CSS Framework-уудын тулаанд хэн ялж байна вэ? Бидний дараагийн судлах зүйл
199,000    49,000

Худалдаж авах

== Сурагчдын сэтгэгдлүүд ==

Үнэхээр ойлгомжтой сайн заасан хичээлүүд болсон байна. Баярлалаа
Булгадай, 2020-03-26 00:43:46
Сайн сургалт. Видеоны цагыг багасгавал сайн л байна.
Мөнхбат, 2020-03-25 11:27:55
Сургалт таалагдаж байна. Баярлалаа
Bazarragchaa, 2020-03-11 12:43:18
Баярлалаа.
Баяржаргал, 2020-03-10 14:03:47
маш гоё сургалт болсоон
Очирсүрэн, 2020-03-03 11:58:34
Mash sain surgalt baina.. shine zuils surch avlaa,, web front end khugjuulelt khiideg turshlagatai developeruud ch gesen uzekhed zugeer sanagdlaa..
Zaya, 2020-03-03 09:01:46
nice
Мөнхбат, 2020-02-27 11:28:55
Сайн байцгаана уу? Юуны өмнө та бүхэнд баяр хүргээд, баярласнаа илэрхийлэх зүйтэй байх. Энэхүү хичээл нь үнэхээр миний сурахыг хүссэн мэдлэг, мэдээллийг миний сэтгэлд 100% нийцсэн байдлаар өгч байгаа. Улам их амжилт хүсье! Дахин баярлалаа.
Бэлгүтэй, 2020-02-27 01:15:31
Сонирхолтой сургалт байна.
Enhjavhlan Javxaa, 2020-02-25 19:54:33
Энэхүү хичээл үнэхээр гайхалтай хичээл байна.
Та HTML & CSS эхнээс дуустал хичээлийг үзчихээд үзвэл их ойлгомжтой
1234.mn Багш нартаа баярлалаа
Б. Мөнхбаяр, 2020-02-23 17:59:08
маш хэрэгтэй сургалт байна маш их баярлалаа цаашдын ажилд нь өндрөөс өндөр амжилт хүсье
jadamba, 2020-02-21 09:51:21
Үнэхээр чанартай хичээл болсон байна. Ийм гайхалтай хичээлийг бэлтгэсэн 1234.mn - ны нийт хамт олонд гүнээ талархал илэрхийлье. :)
Оргилболд, 2020-02-20 23:33:41
сургалтууд таалагдаж байгаа
Наранзана, 2020-02-20 00:11:19
cool
Цэдэнсодном, 2020-02-19 22:54:25
mash goy surgalt bolson
Nanzaa, 2020-02-17 11:21:59
Таалагдаж байна
Мөнхчулуун, 2020-02-17 08:51:33
Гайхалтай
Болдбаатар, 2020-02-16 20:25:56
mash sain surgalt
Насанбат, 2020-02-16 13:58:21