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

Сүүлийн 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. 16:15
    Tailwind-ийг implement хийх 2-р арга. NPM ашиглан install хийх
  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.

Та зөвхөн өнөөдөр бүртгүүлснээр энэ сургалтыг 29,900₮ болгож хямдруулж аваарай!
 
Энэ сургалтын өмнө үзсэн байвал зохих сургалтууд
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2824 | Үнэ: 29,900₮
BULMA Орчин үеийн CSS framework
Хугацаа: 22 цаг 29 мин | Сурагчид: 310 | Үнэ: 29,900₮
Bootstrap 5 - CSS Framework эхнээс нь дуустал
Хугацаа: 19 цаг 3 мин | Сурагчид: 369 | Үнэ: 29,900₮
 
Энэ сургалтын дараа үргэлжлүүлэн үздэг сургалтууд
Ахисан төвшний HTML CSS, FRONT-END мастерын нууц
Хугацаа: 30 цаг 49 мин | Сурагчид: 1389 | Үнэ: 29,900₮

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

❤️ Ойлгомжтой гоё байна.
2024-10-04 15:33:55
❤️ хичээл үзээд араас нь челленж хийх нь илүү үр дүнтэй юм аа.Баярлалаа
2024-04-17 18:23:55
❤️ Сайн байна уу. 3 4 дүгээр хичээлүүдийн хооронд зөрүү гарсан байна, шийдэж өгөөч
2024-04-17 13:48:40
❤️ Маш их хэрэгтэй сургалт байлаа.
2024-02-14 20:00:55
❤️ GOOD
2024-01-03 09:21:41
❤️ Жишээ төслүүд нь гоё юм байна.
2023-12-05 13:01:58
❤️ Most awesome tut! I ever had.
2023-11-13 13:35:29
❤️ Маш их Баярлалаа!!! Та бүхэнд ажлын өндөр амжилт хүсье.
2023-08-31 17:06:19
❤️ Веб хуудсын загварыг хялбар аргаар хийж сурлаа. Жишээгээр хийсэн 2 төслийг үргэлжлүүлэн хөгжүүлж өөрийн гэсэн 2 вэб хуудастай болсон. Та бүхэнд баярлалаа
2023-08-08 08:59:14
❤️ Сайн байна уу. Уламжлалт css үзсэний дараа Reactjs дээр Tailwind css ашиглаж сурах хэрэгтэй болсон. Хичээлүүд богино мөн сонирхолтой , гол нь ойлгомжтой зааж байна. Ер нь бол энэ сайтнаас бүх кодоо сурч байна. Ямар ч кодны мэдэгдэхүйн байхгүй хүнд бүх зүйлийг ойлгомжтой , тайлбарлаж өгж байгаад үнэхээр их баярлаж байгаа.
Баярлалаа. Энэ сайтын хичээлийг тоодоггүй байсан кккк . Анх React native ийн хичээлийг үзсэнээс хойш бусад хичээлийг үзсээр байна. Чанартай сургалттай шүү .
2023-08-03 18:01:33
❤️ gap bdgui yum uu
2023-08-03 00:04:35
❤️ mash ikh taalagdlaa. sain surgalt tul ahin, dakhij uzej baina. Thanks
2023-02-02 03:27:47
❤️ bg-red-500 gesen ungu ni orood busad sm md geh met deer ungu ni orj uguhgui um ymr asuudal bn?
2023-01-04 00:39:30
❤️ style.css аль хичээл дээр байгаа вэ?
2022-12-28 10:51:33
❤️ cool
2022-11-08 14:06:59
❤️ чанартай сургалт байна баярлалаа
2022-07-22 16:23:58
❤️ Янзтай байнөө,
2022-01-24 00:59:41
❤️ Үнэхээр гоё сонирхолтой сургалт байна.
2021-11-03 20:01:24
❤️ mash ikh taalagdlaa. sain surgalt tul akhin dakhin uzej baina
2021-10-05 12:20:10
❤️ thank you
2021-09-10 13:17:37
❤️ unheer sain surgalt bailaa
2021-08-28 16:16:47
❤️ Баярллаа. Их зүйл сурлаа
2021-08-18 11:25:29
❤️ Tailwindcss -ийг өөрийн хийж байгаа express, mongodb, reactjs-тай project-д туршиж үзэхээр өнөөдөр эхэлж байна. Ийм олон зүйлийг зааж өгч байгаа 1234.mn- дээ маш их баярлалаа
2021-08-14 17:43:39
❤️ маш их мэдлэгтэй болж байгаадаа баяртай байна.
2021-07-30 01:03:14
❤️ Сайн сургалт болсон байна. Баярлалаа
2021-06-29 15:24:17
❤️ Маш ойлгомжтой сонирхолтой зааж байна аа, цэвэр CSS-ээр бичихэд түвэгтэй санагдсан бол энэ хичээлийг заавал үзээрэй, хамаагүй хялбар юм байна шүү.
2021-05-12 08:09:02
❤️ Сайн сургалт болж
2021-04-16 12:56:16
❤️ Дэлхий нийтэд тренд болж css framework-ыг эх хэлээрээ маш ойлгомжтой тайлбартайгаар үзэж цаг үеэсээ хоцрохгүйгээр алхах боломжийг олгосон Ганзориг багшдаа маш их баярлалаа.Өнөөгийн технологи минут секунд бүрээр өөрчлөгдөж хөгжиж байгаа үед аль болох бусдаасаа хоцрохгүйгээр хөгжиж байж л өөрийн хүссэн ирээдүйг бүтээх боломжтой болно гэдгийг залуус маан ойлгож тасралтгүй суралцаасай гэж хүсэж байна.
2021-04-03 11:18:56
❤️ Баярлалаа. Гайхалтай сургалт байна
2021-02-18 11:37:37
❤️ Амжилт!!!
2021-01-13 00:33:47
❤️ Энэ өдрийн мэнд хүргэе. Маш сайн сургалт, маааш их таалагдлаа. Эмх цэгцтэй, гоё тайлбартай, дуу дүрсний өндөр чанартай сайхан бүтээл болжээ. Ганзориг багшийн заах арга зүй сайн юмаа.

Танай сайтын хамт олонд ажлын өндөр амжилт хүсэхийн ялдам өшөө олон хүүхэд залуусын сурах их танхимын үүд байгаасай гэж ерөөе!
2020-12-27 15:11:03
❤️ Таалагдлаа
2020-09-09 10:39:28
❤️ Сайн сургалт болсон байна. TY
2020-05-21 23:26:57
❤️ Хүлээж байсан хичээл байна. Баярлалаа.
2020-05-19 14:48:00