Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
Сүүлийн 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 фрэймворкуудын үйл ажиллагаа, зарчмыг гүнзгий судлахыг хүссэн бүх хүмүүст зориулагдсан.
Хичээлүүд :
-
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 классууд
-
9:24Variants гэж юу вэ? tailwind.config.js файлтай танилцъя
-
6:52Modifier-ын комбинациуд
-
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.
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын
хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2698 | Үнэ:
49,000
|
|
BULMA Орчин үеийн CSS framework
Хугацаа: 22 цаг 29 мин | Сурагчид: 308 | Үнэ:
49,000
|
|
Bootstrap 5 - CSS Framework эхнээс нь
дуустал
Хугацаа: 19 цаг 3 мин | Сурагчид: 359 | Үнэ:
49,000
|
|
Ахисан төвшний HTML CSS, FRONT-END мастерын
нууц
Хугацаа: 30 цаг 49 мин | Сурагчид: 1355 | Үнэ:
49,000
|
|
== Сурагчдын сэтгэгдлүүд ==
Баярлалаа. Энэ сайтын хичээлийг тоодоггүй байсан кккк . Анх React native ийн хичээлийг үзсэнээс хойш бусад хичээлийг үзсээр байна. Чанартай сургалттай шүү .
Танай сайтын хамт олонд ажлын өндөр амжилт хүсэхийн ялдам өшөө олон хүүхэд залуусын сурах их танхимын үүд байгаасай гэж ерөөе!