Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
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 фрэймворкуудын үйл ажиллагаа, зарчмыг гүнзгий судлахыг хүссэн бүх хүмүүст зориулагдсан.
Хичээлүүд :
-
11:09Энэ сургалтаар та юу, юу сурч эзэмших вэ?
-
7:19Bulma-гийн тухай анхны мэдэгдэхүүн
-
7:56Bulma-гийн responsive байдал
-
5:30Өнгө
-
8:31Bulma-г implement хийж ажиллуулах
-
31:46Завсарлага: VS Code editor суулгах, тохируулах
-
28:57Завсарлага: VS Code editor-т extention-ууд суулгах
-
9:29Bulma Learning Kit
-
12:18Helpers
-
12:06Responsive Helpers
-
9:09Color Helpers
-
7:01Typography Helpers
-
17:19Bulma-гийн баганууд
-
16:26Багануудын талаарх бусад зүйлс
-
5:12Container
-
6:36Hero компонент
-
5:46Section container
-
7:22Footer container
-
9:23Level container
-
14:05Media обьект
-
18:43Шидэт Tile
-
17:19Bulma-гийн Form-ын тухай
-
16:57Forms: Input
-
5:07Forms: Textarea
-
6:56Forms: Select
-
10:17Forms: Checkbox болон Radio button
-
12:22Forms: File Upload
-
13:40Forms: Form addons, Form group, Expanded form
-
4:41Элементүүд: Box элемент
-
16:58Элементүүд: Button элемент
-
6:41Элементүүд: Content элемент
-
5:35Элементүүд: Delete элемент
-
11:00Элементүүд: Icon элемент
-
13:21Элементүүд: Image элемент
-
6:39Элементүүд: Notification элемент
-
4:14Элементүүд: Progress элемент
-
11:46Элементүүд: Table элемент
-
8:15Элементүүд: Tag элемент
-
6:42Элементүүд: Title элемент
-
13:41Компонентууд: Breadcrumb
-
11:53Компонентууд: Card
-
11:39Компонентууд: Dropdown
-
6:17Компонентууд: Menu
-
4:57Компонентууд: Message
-
18:38Компонентууд: Modal
-
15:22Компонентууд: Navbar
-
13:53Компонентууд: Pagination
-
12:04Компонентууд: Panel
-
11:47Компонентууд: Tabs
-
10:03Bonus: Tesla вэб сайт - Launch page Hero
-
16:43Bonus: Tesla вэб сайт - Launch page Navbar
-
29:45Bonus: Tesla вэб сайт - Launch page Header текст, Node-sass суулгах
-
18:06Bonus: Tesla вэб сайт - Launch page Responsive grid
-
4:07Төсөл 1: Вэб хөгжүүлэгчийн resume хуудас. Танилцуулга
-
15:29Төсөл 1: Resume хуудас. Ажлын орчноо бэлдэх, ерөнхий бүтэц.
-
6:13Төсөл 1: Resume хуудас. Intro section
-
13:21Төсөл 1: Resume хуудас. Ажлын туршлага болон Боловсрол section
-
6:43Төсөл 1: Resume хуудас. Сэтгэгдлүүд section
-
24:09Төсөл 1: Resume хуудас. Холбоо барих section
-
10:55Төсөл 1: Resume хуудас. Миний Portfolio section
-
11:15Төсөл 1: Resume хуудас. Ур чадварууд section
-
3:58Төсөл 2: Жижиг бизнесийн вэб сайт. Төслийн танилцуулга.
-
9:22Төсөл 2: Жижиг бизнесийн вэб сайт. Ажлын орчноо бэлдэх.
-
16:54Төсөл 2: Жижиг бизнесийн вэб сайт. Үндсэн цэс.
-
16:48Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны Hero.
-
14:50Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны Notification.
-
10:31Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны Бид юу хийдэг вэ section.
-
14:42Төсөл 2: Жижиг бизнесийн вэб сайт. Нүүр хуудасны мэдээний section.
-
15:20Төсөл 2: Жижиг бизнесийн вэб сайт. Footer.
-
12:13Төсөл 2: Жижиг бизнесийн вэб сайт. Үйлчилгээ хуудас.
-
17:17Төсөл 2: Жижиг бизнесийн вэб сайт. Бидний тухай хуудас.
-
11:25Төсөл 2: Жижиг бизнесийн вэб сайт. Баг хуудас.
-
12:12Төсөл 2: Жижиг бизнесийн вэб сайт. Холбоо барих хуудас. Хаяг, цагийн хуваарь.
-
15:43Төсөл 2: Жижиг бизнесийн вэб сайт. Холбоо барих хуудас. Мессеж илгээх Form.
-
10:58Төсөл 2: Жижиг бизнесийн вэб сайт. Холбоо барих хуудас. Google Map.
-
13:44Төсөл 3: Онлайн дэлгүүр. Ажлын орчноо бэлдэх.
-
18:41Төсөл 3: Онлайн дэлгүүр. Нүүр хуудасны Hero-г хийх
-
19:06Төсөл 3: Онлайн дэлгүүр. Sidebar
-
16:19Төсөл 3: Онлайн дэлгүүр. Мобайл Navbar
-
18:16Төсөл 3: Онлайн дэлгүүр. Гамбургер товчлуур
-
37:45Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний ангилал Quickview
-
41:22Төсөл 3: Онлайн дэлгүүр. Дэлгүүр Quickview
-
20:40Төсөл 3: Онлайн дэлгүүр. Сагс Quickview
-
31:53Төсөл 3: Онлайн дэлгүүр. Search Overlay
-
41:10Төсөл 3: Онлайн дэлгүүр. Зурагтай tile-ууд ашиглан хийсэн дэлгүүрийн хуудас
-
30:53Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний жагсаалтын хуудас. 1-р хэсэг
-
31:16Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний жагсаалтын хуудас. 2-р хэсэг
-
25:58Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний хуудас - Left panel
-
39:31Төсөл 3: Онлайн дэлгүүр. Бүтээгдэхүүний хуудас - Right panel
-
24:23Төсөл 3: Онлайн дэлгүүр. Login form
-
36:24Аль CSS framework нь илүү вэ? Цаашдаа яах вэ?
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын
хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2698 | Үнэ:
49,000
|
|
Ахисан төвшний HTML CSS, FRONT-END мастерын
нууц
Хугацаа: 30 цаг 49 мин | Сурагчид: 1355 | Үнэ:
49,000
|
|
Tailwind - Дэлхийн хамгийн шилдэг CSS
framework
Хугацаа: 14 цаг 59 мин | Сурагчид: 628 | Үнэ:
49,000
|
|
PHP мастер сургалт - Хувийн санхүү хөтлөх
систем бүтээцгээе
Хугацаа: 22 цаг 4 мин | Сурагчид: 438 | Үнэ:
49,000
|
|
Bootstrap 5 - CSS Framework эхнээс нь
дуустал
Хугацаа: 19 цаг 3 мин | Сурагчид: 359 | Үнэ:
49,000
|
|
== Сурагчдын сэтгэгдлүүд ==
Надад нэг хүсэлт байна нэг шинэ сургалтаар тухайн хийсэн бүтээл өөрийн прожект, төсөлүүдээ сервер дээр байршуулах цаашид аричлах, мөн яаж хөгжүүлэлтийг цааш үрэгжлүүлэх гэх мэт бусад арай өөр талаас нь суралт авхыг хүсч байна.