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