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

Сайн байна уу, энэ сургалт нь одоо хийгдэж байгаа бөгөөд та УРЬДЧИЛСАН ЗАХИАЛГААР худалдаж авах боломжтой. Урьдчилсан захиалж авахын давуу тал нь та уг сэдвийг судлах яаралтай шаардлагатай байгаа бол багшийг хичээлээ оруулж байхад нь цуг үзээд явах боломж бүрдэх бөгөөд мөн жинхэнэ үнээс нь хямдралтайгаар авах боломжтой болж байгаа юм. Урьдчилан захиалгаар зарагдах сургалт нь БҮРЭН БИШ бөгөөд багш нь өдөрт 1-3 хичээл нэмэх замаар явах юм. Хэрэв та өдөрт 1-3 хичээл нэмэгдэхийг удаан гэж үзвэл энэхүү сургалтыг БҮРЭН ДУУССАНЫХ НЬ ДАРАА худалдаж авахыг зөвлөж байна. Жич: хичээлийн нэрний ард видеоны үргэлжлэх минут:секунд харагдаж байвал уг хичээл үзэхэд бэлэн гэж ойлгох юм.

Сүүлийн 3 жилийн турш вэб хөгжүүлэлтийн салбарт, тэр дундаа CSS framework-уудын дунд “Аясын салхи” хэмээх өвөрмөц содон нэр тод сонсогдох болсон бөгөөд үнэхээр ч нэрэндээ гайхалтай зохицон, шинэ уур амьсгал, шинэ боломж, шинэ ирээдүйг вэб хөгжүүлэгчдэд авч ирсэн юм. Тиймээ энэ бол 2017 оны 11-р сард анх танилцуулагдаж байсан “Tailwind” хэмээх utility классууд дээр суурилсан маш хүчирхэг CSS framework билээ.

Tailwind нь ердөө хоёрхон жилийн дотор асар их нэр хүндтэй болж, Bootstrap, Foundation, Materialize зэрэг архагуудыг ээлж дарааллан бут ниргэсээр дэлхийд алдартай “stateofjs.com” сайтаас 2019 онд дэлхийн мянга мянган вэб хөгжүүлэгчдийн дунд явуулсан судалгаагаар хамгийн шилдэг CSS framework-оор тодроод байна.

Тэгвэл Tailwind яг юугаараа эдгээр хуучны алдартай framework-уудаас онцлог юм бэ? Хуучны “компонент дээр суурилсан framework”-ууд нь таны өмнөөс хэтэрхий ихийг хийж өгдөг. Товчлуур, цэс, кард гээд ихэнх шаардлагатай компонентуудыг урьдчилан бэлдээд танд санал болгодог. Энэ нь хэдийгээр гоё мэт боловч яг бодит амьдрал дээр учир дутагдалтай ажээ. Ийм framework-уудаар хийсэн сайтууд ихэнхдээ төстэй өнгө төрх, загвар дизайнтай болдог. Өөрийн хүссэнээр customize хийж өөрчлөх боломжтой боловч энэ нь бүр ч төвөгтэй байдлыг үүсгэх нь бий.

Харин Tailwind бол танд яг хэрэгтэйг чинь л өгнө. Танд компонентуудыг биш, харин тэдгээрийг хийхэд чинь тус болох доод түвшний классуудыг гаргаж өгдөг. Энэ классуудыг ашигласнаар та HTML файл дотроо л код бичиж, өөрийн хүссэн загвар дизайнаа гайхалтай хурдан хугацаанд хялбархан бүтээх боломжтой. Дээр нь бүх төрлийн хэмжээтэй дэлгэцүүд, бүх browser-ууд дээр таарах бүрэн responsive вэб сайт хийнэ гээд бод доо.

Нэг өгүүлбэрээр хэлбэл та CSS-ийн ертөнцийн хамгийн хүчирхэг, хамгийн орчин үеийн хэрэгсэлтэй танилцах гэж байна.

Tailwind-ын давуу талууд:
- Загвар дизайнаа хүссэнээрээ өөрчлөх хязгааргүй боломжийг олгоно.
- Классуудыг нэрлэх төвөгтэй ажлаас чөлөөлнө.
- HTML, CSS файлуудын хооронд дахин дахин шилжих шаардлагагүй. HTML дотроосоо бүхнийг хийнэ.
- Tailwind-ийг сурсан хөгжүүлэгчид хамтран нэг төсөл дээр ажиллахад маш хялбар, үл ойлголцол гарах магадлал асар бага.
- Өөрийн гэсэн компонентуудыг маш хялбар бүтээх боломжтой.
- Вэб хөгжүүлэлтийн хурдыг үлэмж нэмэгдүүлнэ.
- Бүрэн Responsive.
- Нэг төрлийн классаа олон дахин хэрэглэдэг учраас таны вэбийг үзэж буй хэрэглэгчид CSS файлыг дахин дахин татаж авах шаардлагагүй.
- Бусад framework-ууд дээр вэбийнхээ аль нэг хуудасны загварыг өөрчлөхөд бусад хуудаснуудад алдаа гарах асуудал их байдаг бол Tailwind-ийг ашиглах үед та санаа зовох зүйлгүйгээр дуртай хуудсаа чөлөөтэй өөрчилж чадна.

Та энэ сургалтаар юу сурч мэдэх вэ?

• Tailwind-ийн бүх төрлийн классуудтай танилцаж, тэдгээрийг хэрхэн үр дүнтэй зөв ашиглах арга барилд суралцана.
• Өөрсдийн компонентуудыг хийж сурна.
• tailwind.config.js файлын тохиргоог хийж, дизайнаа дураараа өөрчилж сурна.
• Plugin-уудтай ажиллаж сурна.
• Төрөл бүрийн формуудыг хийж сурна.
• Font Awesome 5-ыг ашиглан өөрийн вэб сайтад хүссэн icon-оо оруулж сурна.
• Мөн Tailwind CSS framework-оо ашиглан хэд хэдэн бүрэн responsive вэб сайтуудыг эхнээс нь дуустал өөрсдөө хийж үзнэ.

Энэ сургалтыг үзэхэд ямар мэдлэг шаардлагатай вэ?

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

Энэ сургалт хэнд зориулагдсан бэ?

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

   Хичээлүүд :   

  1. 36:39
    Tailwind яагаад хамгийн шилдэг нь гэж? CSS framework-уудын үүсэл
  2. 8:08
    Tailwind-ийг implement хийх 1-р арга. CDN линкийг холбож өгөх
  3. 22:39
    Tailwind-ийг implement хийх 2-р арга. NPM ашиглан install хийх. PostCSS-ийн тохиргоо
  4. 5:53
    VS Code editor дээр Tailwind CSS IntelliSence extention суулгах, тестлэх
  5. 8:41
    Tailwind-ийн background классууд
  6. 8:42
    Элементийн хэмжээ, REM нэгж дээр суурилсан тоон систем
  7. 5:37
    Ягаан өнгөний чэллэнж
  8. 8:50
    Tailwind-ийн Padding болон Margin
  9. 9:33
    Текстийн стайл 1-р хэсэг
  10. 9:58
    Текстийн стайл 2-р хэсэг
  11. 10:49
    Текстийн стайл хийх чэллэнж
  12. 12:38
    Хүрээ
  13. 11:22
    Товчлуур хийх чэллэнж
  14. 5:54
    Display mode-ууд
  15. 17:11
    Flexbox
  16. 11:41
    Flexbox галерей чэллэнж
  17. 14:53
    Responsive дизайн
  18. 8:09
    Pseudo modifier классууд
  19. 9:24
    Variants гэж юу вэ? tailwind.config.js файлтай танилцъя
  20. 6:52
    Modifier-ын комбинациуд
  21. 14:29
    Shadow болон Opacity
  22. 7:52
    Cursor
  23. 17:27
    Input form хийх чэллэнж
  24. 9:48
    Background-ийг scroll хийх, Background-ийн байршил
  25. 5:47
    Background-ийн хэмжээ болон Background-ийг давтах
  26. 18:56
    Flexbox-ийн үргэлжлэл
  27. 15:43
    Grid - Grid columns, Grid gap
  28. 10:14
    Grid - Grid rows, Grid auto flow
  29. 14:25
    Хүснэгттэй ажиллах классууд
  30. 18:55
    Transform классууд - scale, rotate, skew, translate, origin
  31. 23:03
    Transition классууд - property, duration, timing, delay
  32. 12:45
    Багш урих card хийх жишээ
  33. 20:35
    Багш урих card-ыг responsive болгох
  34. 15:43
    Өөрийн utility классуудыг хэрхэн хийх вэ?
  35. 13:39
    Tailwind-ийн дизайны системийг өөрийнхөөрөө өөрчлөх
  36. 6:29
    Жагсаалттай ажиллах классууд
  37. 5:12
    Placeholder-ийн өнгө болон opacity
  38. 23:54
    Төсөл 1: Мультимедиа компанийн вэб сайт - Үндсэн цэс хийх
  39. 14:27
    Төсөл 1: Мультимедиа компанийн вэб сайт - Hero section-ийг зураг эсвэл видеотойгоор хийх
  40. 35:56
    Төсөл 1: Мультимедиа компанийн вэб сайт - Hoverable card бүхий Flexbox slider хийх
  41. 17:38
    Төсөл 1: Мультимедиа компанийн вэб сайт - Дахин ашиглагдах card-уудыг өөрийн классуудын тусламжтай хялбаршуулах
  42. 30:53
    Төсөл 1: Мультимедиа компанийн вэб сайт - Шинэ трэйлер section
  43. 26:05
    Төсөл 1: Мультимедиа компанийн вэб сайт - Бүртгэлийн section, Footer
  44. 13:25
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Ажиллах орчноо бэлдэх
  45. 19:07
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Top bar
  46. 06:25
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Tailwind breakpoint-уудыг Browser-ийн Dev Tools-д нэмэх
  47. 34:07
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Үндсэн цэс
  48. 35:55
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Hero Section
  49. 31:23
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Vertical Product section. 1-р хэсэг
  50. 10:50
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Vertical Product section. 2-р хэсэг
  51. 26:56
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Horizontal Product section.
  52. 27:55
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. News Section
  53. 27:20
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. About Us Section
  54. 21:04
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Share Media Section
  55. 17:29
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Footer. Цэсүүд.
  56. 19:22
    Төсөл 2: JulianaBicycles.com-ыг дахин хийх. Footer. Bottom bar.
189,000    49,000

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

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

Маш өндөр байгаа Ганзориг багшдаа маш их баярлалаа, багшаас асуумаар байгаа зарим нэг хувийн зүйлсийг хэрхэн асуух вэ? Хичээлийн талаар бус практик туршлага зөвөлгөө гэх мэт зүйлс?
Билгүүн, 2020-10-10 10:16:35
Таалагдлаа
Bat-Erdene, 2020-09-09 10:39:28
Nice
dugersuren, 2020-05-30 22:38:21
thanks
Баянбаатар, 2020-05-26 09:40:56
Сайн сургалт болсон байна. TY
Nanzad, 2020-05-21 23:26:57
Хүлээж байсан хичээл байна. Баярлалаа.
Тулгаа, 2020-05-19 14:48:00