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

CSS framework гэж юу вэ? Девелопер бүр доод төвшний хэл, дээд төвшний програмчлалын хэл гэж мэддэг. Жишээ нь доороос нь дээд төвшин рүү эрэмбэлж үзвэл зарим хэлүүд ингэж жагсана : Ассемблер, С, C# гэх мэт. Програмчлалын хэл доод төвшнийх байх тусам машины бүтэц рүү илүү дөхөж програмчилдаг бол дээд төвшнийх байх тусам илүү хүнд ойлгомжтой талаасаа код нь бичигддэг. Доод төвшний хэлний давуу тал нь өндөр хурдтай програм бүтээж чаддаг бол дутагдалтай тал нь асар их, урт код бичих шаардлагатай болдог бөгөөд ойлгож ажиллахад хүндрэлтэй байдаг. Иймээс энэ асуудлуудыг шийдэхийн тулд дээд төвшний хэлүүдийг бүтээсэн билээ. Мэдээж орчин үед та бизнесийн төрөл бүрийн програм хийхийн тулд Ассемблер юмуу С хэл дээр бичихгүй. Бичихээр бол мөн л асар их код бичих болно шүү дээ. Тэгснээс, илүү дээд төвшний Javascript, PHP, C#, Ruby зэрэг хэлүүдийг ашиглаж байж богино хугацаанд чанартай програм бичиж чадна.

Яг үүнтэй адил вэб хуудас бүтээхэд доод төвшинд та төрөл бүрийн CSS кодыг бичдэг бөгөөд олон төрлийн броузерууд, тэдгээрийн өөр өөр хувилбарт тааруулан маш их хэмжээний код бичих хэрэгтэй болдог. Мэдээж энэ нь их цаг, хүч хөдөлмөр шаардана. Тэгвэл үүнээс гарах арга байгаа юу? Вэбийн дээд төвшний хэл буюу CSS Framework-уудтай танилц! Орчин үеийн CSS фрэймворкуудыг ашиглан та ширээний суурин компьютер, нөүтбүүк, төрөл бүрийн хэмжээтэй ухаалаг утас, цаг, зурагт гээд бүгдэд нь автоматаар тааран ажиллах, бүрэн responsive дизайныг ядах юмгүй хурдан бичих боломжтой байдаг. Энэ чинь л дээд төвшний хэлний ашиг тус шүү дээ :)

Орчин үед Bootstrap, Bulma, Tailwind, Materialize, Foundation, PureCSS, SemanticUI… олон арван CSS фрэймворкууд ашиглагдаж байгаа. Бид харин таны цагийг хэмнэж, эдгээр олон сонголтууд дундаас 2019 онд дэлхийн хэмжээнд девелоперуудын хайр талархлыг хүлээн #2 CSS фрэймворкооор сонгогдсон Bulma фрэймворкийг бүрэн эзэмшүүлэх энэхүү сургалтыг гаргаж байна. Цаг бол алт.

Хэрэв та асар богино хугацаанд, бүх төхөөрөмжинд ямар ч алдаагүй ажилладаг вэб бүтээх шаардлага гарсан бол шууд л Bulma-г сонго гэж зөвлөх байна. Энэ нь таны цаг, хөрөнгө мөнгийг хэмнэж, стрессээс сэргийлэх болно!

Яагаад Bulma бусдаасаа илүү вэ?
Хэрэв та алдарт https://stateofjs.com/ сайтын салбар болох https://stateofcss.com/ сайт дээр 2019 онд хийгдсэн CSS Framework-уудын талаар дэлхийн 135 улсын мянга мянган вэб хөгжүүлэгчдээс авсан судалгааг авч үзвэл тэнд Bootstrap, Foundation, Materialize, SemanticUI зэрэг хуучны гол тоглогчид уналтанд орж харин Bulma, Tailwind зэрэг орчин үеийн шинэ төлөөлөгчид эхний байруудад хүч түрэн гарч ирсэн байгааг олж харах болно.

Харьцангуй сүүлд гарсан ч яагаад Bulma ийм амжилтанд хүрсэн бэ? Хэд хэдэн шалтгааныг танд танилцуулья :
- Суралцахад маш хялбар : Bulma-ийн гол зарчим нь суралцахад маш хялбар байх явдал гэвэл танд аятайхан сонсогдож байгаа биз?
- Bulma бол flexbox архитектуртай : Тиймээ, иймээс л responsive байх нь Bulma-д огт асуудалгүй байгаа юм.
- Bulma бол модулар : Та Булмагийн яг өөрт таалагдсан зүйлсийг тухай бүрт нь авч вэбдээ ашиглах боломжтой.
- Bulma нь зөвхөн CSS ашигладаг : Тиймээ та Javascript модуль заавал хамт ашиглахгүй байх давуу талтай. Тиймээс ч хэмжээ нь бага байдаг.
- Bulma нь бүрэн responsive: Компьютер болон ухаалаг утаснуудад бүгдэд нь зөв ажиллах вэб хийхэд хэцүү. Тэгвэл Bulma-ийн хувьд энэ нь тун хялбархан даалгавар. Учир нь Bulma нь анхнаасаа mobile first зарчмыг баримталсан тул та дизайныг нэг хийгээд л бүх төрлийн төхөөрөмж дээр асуудалгүй үзэх болно.
- Bulma гайхалтай тусламжийн сайттай.
- Bulma баялаг компонентийн сантай. Вэбд хэрэгтэй бүх компонентуудыг шууд авч ашиглахад бэлэн байж байх болно.
- Bulma нь броузер хооронд тааламжтай ажилладаг. Нэг броузер дээр тааруулан хийсэн дизайн бүх броузеруудад ижил харагдах болно.
- Bulma нь бусдаасаа сүүлд гарч ирсэн. Эхэлж гарсан чихнээс сүүлд ургасан эвэр дээр гэдэг дээ...
-Bulma нь open source бөгөөд дэлхий даяар маш олон девелоперууд түүнийг маш эрчимтэй хөгжүүлж байна.

Та энэ сургалтаар юу сурч мэдэх вэ?
• Bulma CSS framework-ийн хамгийн сүүлийн хувилбарыг бүрэн ашиглаж сурна. Үүн дотор:
• Уян хатан responsive вэбийн загварыг хийж сурна.
• CSS-ийн breakpoint болон grid системийг үр өгөөжтэй хэрэглэж сурна.
• Бүх төрлийн контентуудын бүтцийг зөв зохион байгуулж сурна.
• Bulma modifier-уудыг ашиглаж сурна.
• Төрөл бүрийн формуудыг хийж сурна.
• Bulma-гийн 11 төрлийн элементүүдийг үүсгэж, тохируулж сурна.
• 10 төрлийн компонентуудыг ашиглаж сурна.
• Font Awesome 5-ыг суулгаж, өөрийн вэб сайтад хүссэн icon-оо оруулж сурна.
• Bulma CSS framework-ийг ашиглан 4 төрлийн бүрэн responsive вэб сайтуудыг эхнээс нь дуустал өөрсдөө хийж үзнэ.

Энэ сургалтыг үзэхэд ямар мэдлэг шаардлагатай вэ?
- Танаас HTML, CSS-ийн тодорхой мэдлэгүүд шаардагдана. Хэрэв та эдгээрийг сайн мэдэхгүй, судлах шаардлагатай бол 1234.mn дээр байгаа “HTML5, CSS3-ыг эхнээс нь дуустал” болон “Ахисан төвшний HTML CSS, Front-End мастерын нууц” сургалтуудыг эхлээд үзэхийг зөвлөж байна. Та уг хоёр сургалтыг урьдчилан үзсэнээр HTML, CSS-ийг бүрэн мэддэг болно.

Энэ сургалт хэнд зориулагдсан бэ?
- Орчин үеийн загвартай, бүрэн responsive вэб сайтуудыг маш богино хугацаанд, хялбархан хийж сурахаас гадна CSS фрэймворкуудын үйл ажиллагаа, зарчмыг гүнзгий судлахыг хүссэн бүх хүмүүст зориулагдсан.

   Хичээлүүд :   

  1. 11:09
    Энэ сургалтаар та юу, юу сурч эзэмших вэ?
  2. 7:19
    Bulma-гийн тухай анхны мэдэгдэхүүн
  3. 7:56
    Bulma-гийн responsive байдал
  4. 5:30
    Өнгө
  5. 8:31
    Bulma-г implement хийж ажиллуулах
  6. 31:46
    Завсарлага: VS Code editor суулгах, тохируулах
  7. 28:57
    Завсарлага: VS Code editor-т extention-ууд суулгах
  8. 9:29
    Bulma Learning Kit
  9. 12:18
    Helpers
  10. 12:06
    Responsive Helpers
  11. 9:09
    Color Helpers
  12. 7:01
    Typography Helpers
  13. 17:19
    Bulma-гийн баганууд
  14. 16:26
    Багануудын талаарх бусад зүйлс
  15. 5:12
    Container
  16. 6:36
    Hero компонент
  17. 5:46
    Section container
  18. 7:22
    Footer container
  19. 9:23
    Level container
  20. 14:05
    Media обьект
  21. 18:43
    Шидэт Tile
  22. 17:19
    Bulma-гийн Form-ын тухай
  23. 16:57
    Forms: Input
  24. 5:07
    Forms: Textarea
  25. 6:56
    Forms: Select
  26. 10:17
    Forms: Checkbox болон Radio button
  27. 12:22
    Forms: File Upload
  28. 13:40
    Forms: Form addons, Form group, Expanded form
  29. 4:41
    Элементүүд: Box элемент
  30. 16:58
    Элементүүд: Button элемент
  31. 6:41
    Элементүүд: Content элемент
  32. 5:35
    Элементүүд: Delete элемент
  33. 11:00
    Элементүүд: Icon элемент
  34. 13:21
    Элементүүд: Image элемент
  35. 6:39
    Элементүүд: Notification элемент
  36. 4:14
    Элементүүд: Progress элемент
  37. 11:46
    Элементүүд: Table элемент
  38. 8:15
    Элементүүд: Tag элемент
  39. 6:42
    Элементүүд: Title элемент
  40. 13:41
    Компонентууд: Breadcrumb
  41. 11:53
    Компонентууд: Card
  42. 11:39
    Компонентууд: Dropdown
  43. 6:17
    Компонентууд: Menu
  44. 4:57
    Компонентууд: Message
  45. 18:38
    Компонентууд: Modal
  46. 15:22
    Компонентууд: Navbar
  47. 13:53
    Компонентууд: Pagination
  48. 12:04
    Компонентууд: Panel
  49. 11:47
    Компонентууд: Tabs
  50. 10:03
    Bonus: Tesla вэб сайт - Launch page Hero
  51. 16:43
    Bonus: Tesla вэб сайт - Launch page Navbar
  52. 29:45
    Bonus: Tesla вэб сайт - Launch page Header текст, Node-sass суулгах
  53. 18:06
    Bonus: Tesla вэб сайт - Launch page Responsive grid
  54. 4:07
    Төсөл 1: Вэб хөгжүүлэгчийн resume хуудас. Танилцуулга
  55. 15:29
    Төсөл 1: Resume хуудас. Ажлын орчноо бэлдэх, ерөнхий бүтэц.
  56. 6:13
    Төсөл 1: Resume хуудас. Intro section
  57. 13:21
    Төсөл 1: Resume хуудас. Ажлын туршлага болон Боловсрол section
  58. 6:43
    Төсөл 1: Resume хуудас. Сэтгэгдлүүд section
  59. 24:09
    Төсөл 1: Resume хуудас. Холбоо барих section
  60. 10:55
    Төсөл 1: Resume хуудас. Миний Portfolio section
  61. 11:15
    Төсөл 1: Resume хуудас. Ур чадварууд section
  62. 3:58
    Төсөл 2: Жижиг бизнесийн вэб сайт. Төслийн танилцуулга.
  63. 9:22
    Төсөл 2: Жижиг бизнесийн вэб сайт. Ажлын орчноо бэлдэх.
  64. 16:54
    Төсөл 2: Жижиг бизнесийн вэб сайт. Үндсэн цэс.
  65. 16:48
    Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны Hero.
  66. 14:50
    Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны Notification.
  67. 10:31
    Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны Бид юу хийдэг вэ section.
  68. 14:42
    Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны мэдээний section.
  69. 15:20
    Төсөл 2: Жижиг бизнесийн вэб сайт. Footer.
  70. 12:13
    Төсөл 2: Жижиг бизнесийн вэб сайт. Үйлчилгээ хуудас.
  71. 17:17
    Төсөл 2: Жижиг бизнесийн вэб сайт. Бидний тухай хуудас.
  72. 11:25
    Төсөл 2: Жижиг бизнесийн вэб сайт. Баг хуудас.
  73. 12:12
    Төсөл 2: Жижиг бизнесийн вэб сайт. Холбоо барих хуудас. Хаяг, цагийн хуваарь.
  74. 15:43
    Төсөл 2: Жижиг бизнесийн вэб сайт. Холбоо барих хуудас. Мессеж илгээх Form.
  75. 10:58
    Төсөл 2: Жижиг бизнесийн вэб сайт. Холбоо барих хуудас. Google Map.
  76. 13:44
    Төсөл 3: Онлайн дэлгүүр. Ажлын орчноо бэлдэх.
  77. 18:41
    Төсөл 3: Онлайн дэлгүүр. Нүүр хуудасны Hero-г хийх
  78. 19:06
    Төсөл 3: Онлайн дэлгүүр. Sidebar
  79. 16:19
    Төсөл 3: Онлайн дэлгүүр. Мобайл Navbar
  80. 18:16
    Төсөл 3: Онлайн дэлгүүр. Гамбургер товчлуур
  81. 37:45
    Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний ангилал Quickview
  82. 41:22
    Төсөл 3: Онлайн дэлгүүр. Дэлгүүр Quickview
  83. 20:40
    Төсөл 3: Онлайн дэлгүүр. Сагс Quickview
  84. 31:53
    Төсөл 3: Онлайн дэлгүүр. Search Overlay
  85. 41:10
    Төсөл 3: Онлайн дэлгүүр. Зурагтай tile-ууд ашиглан хийсэн дэлгүүрийн хуудас
  86. 30:53
    Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний жагсаалтын хуудас. 1-р хэсэг
  87. 31:16
    Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний жагсаалтын хуудас. 2-р хэсэг
  88. 25:58
    Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний хуудас - Left panel
  89. 39:31
    Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний хуудас - Right panel
  90. 24:23
    Төсөл 3: Онлайн дэлгүүр. Login form
  91. 36:24
    Аль CSS framework нь илүү вэ? Цаашдаа яах вэ?
179,000    49,000

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

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

Сургалт таалагдсан баярлалаа
Алтаншагай, 2020-06-07 13:52:11
энэ сургалт бол үнэхээр сайн сургалт болсон байна
dugersuren, 2020-05-18 22:30:40
zunduu zuil surch avakh sain surgalt boljee.. ene surgaltiig avsandaa bayartai baina
Zaya, 2020-05-11 09:26:49
Баярлалаа
Баяржаргал, 2020-05-06 12:09:07