Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
Энэхүү сургалт нь Flexbox, CSS Grid, Sass зэрэг орчин үеийн HTML5 ба CSS3+ технологиудыг ашиглан Responsive (бүх төрлийн дэлгэцэнд тохирох) вэбсайт, хэрэглэгчийн интерфэйсийг хэрхэн хийх тухай эхлэн суралцагчид болон туршлагатай вэб хөгжүүлэгчдэд зориулагдсан цогц сургалт юм.
Уг сургалт нь олон цагийн турш үргэлжлэх бодит төсөл дээр тулгуурласан хичээлүүдийг агуулсан. Bootstrap мэтийн framework-уудад хэт их найдахаа больж, өөрийн гэсэн бүтэц, хэрэгслүүдийг зохиож цоо шинэ хэв маягтай вэб сайт, UI-ийг бүтээцгээе.Сургалтын эхний хэдэн бүлэг нь эхлэн суралцагчдад зориулагдсан бөгөөд хэрэв та урд нь вэб бүтээхтэй холбоотой юу ч хийж байгаагүй бол яг л энэ хэдэн бүлгээс та бүх үндсэн ойлголтуудыг авах болно. Харин та HTML болон CSS-ийн талаар тодорхой мэдлэгтэй бол шууд 3 болон 4 дүгээр бүлгийн хичээлүүдийг үзэж эхлээрэй.
Бидний судлах зүйлс:
Вэб сайт хэрхэн ажилладаг вэ?
Visual Studio Code-ын тохиргоо, Live Server болон Emmet
HTML5 Semantic бүтэц
CSS-ийн үндсэн ойлголтууд
Media Query бүхий Responsive дизайн
CSS-ийн хэмжих нэгжүүд - rem, em, vh, vw гэх зэрэг
Flexbox
CSS Grid
Keyframe, Transition ашиглан Animation хийх
CSS хувьсагчууд
Sass
Бүрэн болон мини төслүүд
Shared Host дээр вэбийг байршуулах
Суралцагчдын ур чадварын түвшин: Бүх түвшний
Сургалтыг үзэхэд шаардагдах зүйлс бий юу? Уг сургалт нь эхлэн суралцагчаас мэргэжлийн хөгжүүлэгчид хүртэл бүх хүмүүст зориулагдсан. Ямар нэг урьдчилсан нөхцөл шаардагдахгүй.
Сургалтын явцад та орчин үеийн шаардлагад нийцсэн гоёмсог дизайн бүхий вэб сайтыг өөрөө бүтээж сурах бөгөөд таны вэб сайт тэс өөр түвшинд хүрч хөгжинө гэдэгт итгэлтэй байна.
Хичээлүүд :
-
3:51Нэгдүгээр бүлэг. Сургалтанд тавтай морил.
-
9:41Вэб хэрхэн ажилладаг вэ?
-
7:14Вэб хөгжүүлэлтэд HTML болон CSS-ийн гүйцэтгэх үүргүүд
-
13:21Visual Studio Code-ыг суулгах, тохируулах
-
3:16Хоёрдугаар бүлэг. HTML-ийн үндэс. Бүлгийн танилцуулга.
-
10:35HTML хуудсыг үүсгэх, нээх
-
13:32Doctype болон үндсэн layout
-
9:20Live Server-ийг тохируулах (Visual Studio Code-ын нэмэлт)
-
12:12Meta Tag болон Хайлтын системүүд
-
16:27Heading, Paragraph болон текстийн харагдах байдал
-
23:32Вэб холбоос (link), зураг, attribute-ийн тухай
-
19:04Жагсаалт болон хүснэгт
-
30:26Form болон Input
-
9:22Block level болон Inline level элементүүд
-
17:02Div, Span, ID болон классууд
-
11:27Html Entities, Symbols
-
7:24Html5 Semantic Таg-ууд
-
6:05Html5 Semantics үргэлжлэл
-
2:24Гуравдугаар бүлэг. CSS-ийн үндэс. Бүлгийн танилцуулга.
-
15:47CSS-ийг implement хийх
-
17:24CSS-ийн үндсэн selector-ууд
-
9:38Developer Tools-ийн тухай
-
17:01CSS дэх фонтууд
-
11:01Өнгөний төрлүүд
-
24:47Хүрээ болон дэвсгэр өнгө
-
26:45Box модель, Margin болон Padding
-
22:37Float болон зэрэгцүүлэлт
-
16:45Вэб холбоосын төлөв болон товчлуурын загварыг өөрчлөх нь
-
20:16Цэстэй ажиллах
-
13:12Inline, Block болон Inline-Block
-
19:41Positioning буюу байрлуулах
-
3:25Form-ийн загварын даалгавар
-
17:48Form-ийн загварын шийдлүүд
-
11:29Visibility, Order болон хасах Margin
-
5:10Дөрөвдүгээр бүлэг. Зочид буудлын вэб сайт. Төслийн танилцуулга.
-
5:39Дизайны санаа
-
36:47Файлын бүтэц, Navbar
-
35:50Showcase болон Hotel Info
-
20:29Feature-ууд болон Footer
-
30:07Бидний тухай хуудас
-
18:55Холбоо барих хуудас
-
5:10Тавдугаар бүлэг. Responsive Layout. Responsive дизайн гэж юу вэ?
-
24:44Media Query-г ашиглах нь
-
20:30Em болон Rem хэмжих нэгжүүд
-
19:25Vh болон Vw хэмжих нэгжүүд
-
28:29Зочид буудлын сайтаа бүрэн Responsive болгох
-
5:38Зургаадугаар бүлэг. Flexbox-ын тухай. Flexbox гэж юу вэ?
-
15:38Flex-ийн үндсэн ойлголтууд
-
21:18Flex зэрэгцүүлэлт болон эрэмбэ
-
5:00Долдугаар бүлэг. Platinum Financial вэб сайт (Flexbox). Төслийн танилцуулга.
-
23:22Файлын бүтэц, Flex NavBar
-
18:02Showcase Header
-
15:47Бид юу хийдэг вэ? хэсэг
-
18:34Бид хэн бэ? болон үйлчлүүлэгчдийн хэсэг
-
23:34Холбоо барих форм, газрын зураг, footer
-
10:56Widescreen болон таблетад үзүүлэх
-
13:02Ухаалаг утсанд үзүүлэх
-
7:45Бяцхан даалгавар
-
16:18Наймдугаар бүлэг. CSS-ийн бусад ойлголтууд. Targeted Selector-ууд.
-
11:28nth-child Pseudo selector-ууд
-
14:09before, after Pseudo selector-ууд
-
13:46Box Shadows
-
7:09Text Shadows
-
13:41CSS-ийн хувьсагчууд
-
12:33Keyframe анимаци 1
-
7:10Keyframe анимаци 2
-
12:36CSS Transition-ууд
-
8:07Transform Property
-
11:30Есдүгээр бүлэг. Keyframe, Transition бүхий мини төслүүд. Пресентэйшн вэб сайт 1 - HTML
-
14:08Пресентэйшн вэб сайт 2 - Хуудаснуудын CSS
-
12:34Пресентэйшн вэб сайт 3 - Text Animation
-
26:32Hamburger Menu Overlay 1 - HTML болон үндсэн СSS
-
11:32Hamburger Menu Overlay 2 - Гамбургер хийх
-
6:20Hamburger Menu Overlay 3 - Гамбургер шугамуудад анимаци хийх
-
21:07Hamburger Menu Overlay 4 - Menu Overlay
-
17:03Он цагийн товчоо 1 - HTML болон үндсэн CSS
-
19:25Он цагийн товчоо 2 - Box болон Arrow
-
9:27Он цагийн товчоо 3 - Responsive Media Query
-
12:32Он цагийн товчоо 4 - Scroll In анимаци
-
26:04Drop Down Menu
-
6:03Аравдугаар бүлэг. CSS grid. CSS grid гэж юу вэ?
-
12:48Grid-ийн тухай үндсэн ойлголтууд, багана
-
7:10Grid мөрнүүд
-
10:00Grid-ийн мөр болон баганыг сунгах
-
6:14Autofit болон Minmax
-
15:21Grid Template-ийн талбарууд
-
9:00Media Query болон Grid
-
3:32Арваннэгдүгээр бүлэг. NewsGrid вэбсайт. Төслийн танилцуулга.
-
12:06Тохиргоо болон Favicon
-
20:07Үндсэн style-ууд, хувьсагчид, Navbar
-
19:40Overlay бүхий Showcase, товчлуурын загварууд
-
26:41Эхлэлийн Article Grid
-
18:45Grid Footer
-
11:39Бидний тухай хуудас, Page container
-
15:23Article хуудас
-
21:34Responsive Media Query
-
9:47Бонус: Photoshop дээр лого хийх.
-
5:24Арванхоёрдугаар бүлэг. Вэб сайтыг байршуулах (Netlify). Энэ хэрхэн ажилладаг вэ?
-
7:06Git-ийн тухай. GitHub руу илгээх.
-
10:25Netlify байршуулалт
-
6:36Хямд домэйн нэр авах тухай
-
7:44Арвангуравдугаар бүлэг. Sass-ыг сурцгаая. Sass гэж юу вэ?
-
11:47Node-Sass аар ажиллах орчноо бэлтгэх
-
6:11Koala Sass Compiler
-
8:21Хувьсагчид болон partial
-
8:24Nesting, Structuring
-
5:53Удамшил болон контраст
-
17:03Функцүүд
-
4:46Арвандөрөвдүгээр бүлэг. Sass ашиглан Portfolio вэб сайт хийх. Төслийн танилцуулга.
-
18:25Төслийн тохиргоо
-
34:41Header болон Main Nav
-
19:08Мэргэшил болон Статистик хэсэг
-
31:01Процесс хэсэг, Footer
-
21:09About Page Info хэсэг
-
19:58About хуудасны лого
-
30:14Transition бүхий Галерей
-
20:09Холбоо барих хуудас
-
33:50Responsive Media Query
-
11:55Spam filter бүхий холбоо барих форм, вэб байршуулах
-
2:52Төгсөв. Үүнээс цааш яах вэ?
Javascript хэлийг эхнээс нь дуустал!
Хугацаа: 52 цаг 21 мин | Сурагчид: 3094 | Үнэ:
29,900₮
|
|
Ахисан төвшний HTML CSS, FRONT-END мастерын
нууц
Хугацаа: 30 цаг 49 мин | Сурагчид: 1389 | Үнэ:
29,900₮
|
|
React эхнээс нь дуустал!
Хугацаа: 42 цаг 2 мин | Сурагчид: 1796 | Үнэ:
29,900₮
|
|
BULMA Орчин үеийн CSS framework
Хугацаа: 22 цаг 29 мин | Сурагчид: 310 | Үнэ:
29,900₮
|
|
Tailwind - Дэлхийн хамгийн шилдэг CSS
framework
Хугацаа: 14 цаг 59 мин | Сурагчид: 646 | Үнэ:
29,900₮
|
|
CSS animation супер хийж сурцгаая
Хугацаа: 26 цаг 3 мин | Сурагчид: 464 | Үнэ:
29,900₮
|
|
Bootstrap 5 - CSS Framework эхнээс нь
дуустал
Хугацаа: 19 цаг 3 мин | Сурагчид: 369 | Үнэ:
29,900₮
|
|
== Сурагчдын сэтгэгдлүүд ==
их юм мэдэж авлаа
"sass": "node-sass --watch scss/ --output dist/css/ --recursive fals"
},
103 sass ажилагүй бол энийг бичээд үзээрэй
нэг лавлах зүйл байна: 34-р хичээл дээр гарсан олон шавьтай багшийг яаж олох вэ? олонд хүрдэг тэр сувагийг хэлж өгөөч pls
үзэх гэж байгаа хүмүүстэй зөвлөхөд эхлүүлсэн бол нэгч хичээл орхигдуулалгүй үзээрэй
Багш маш ойлгомжтой, тодорхой тайлбарлаж байна.
Энэ сургалт анхлан сурж буй хүмүүст санал болгохүйц сургалт байлаа. Баярлалаа!
Миний хувьд дагаж хийж сурдаг онцлогтой тул Багшийн тайлбар маш сайн тохирч байгаа. Дагаад хийгээд явахад сайн ойлгож, тогтоож байна. Мөн бичиглэлийн дадал нь ер нь Багштай адилхан болчих шиг боллоо кк. Баярлалаа.
Харин энэ сургалтаар хамт дагаад код бичээд, туршлагаасаа хуваалцаж байгаа болохоор хамаагүй амар, гоё сайн сургалт болсон байна лээ.
Ganzorig bagshaa oshoo iluu olon olon hicheeluud oruularai
Энэ сургалтаар их зүйл сурч авлаа.
Баярлалаа.
Reply хийгээрэй
Энэ сургалт нь код бичих талаар ямар ч ойлголтгүй хүн үзсэн ч ойлгомжтой. Хичээлүүдээ бүлэг болгон багцалсан нь цэгцтэй мэдлэг авхад дөхөм болсон гэж бодож байна. Бүлэг бүрийн дараа ч юм уу Form-ийн загварын даалгавар шиг эсвэл мини төслүүдийнхээ хэсгүүдийг эхлэж даалгавар маягаар өгөөд хийлгэх маягаар бие дааж гүйцэтгэх даалгавар илүү олон байвал зүгээр санагдаж байна.
* Sanal :
Zoom-eer online nemelt practice hicheeluud hiigdeh bolomjtoi yu? odoo tavigdsan bgaa hicheeluudee hedii oilgoj bgaa ch dahin davtlaga hiih, practic hicheeluud avch hiih heregtei sanagdsan. ajiliin bus tsagaar tohiromjtoi davtlaga chadvar ahiulsan hicheeluud avah huseltei bna. Amerikt code bichij surahiig hussen sonirhson zaluus ih bna. tsagiin zurvv bolon surah arga baril uchiraa olohgui bh shig bna. magadgui yagaad Amerik dahi code sonirhson mongol zaluust tusgailan shuud zoom online video surgalt ehluulj bolohgui gj ? ene bolomjtoi yu?
Sanal setgegdel asuusand bayarlalaa. amjilt husie.
Та нарынхаа ачийг яаж хариулах билээ би үгээр хэлэшгүй ачтан ачтан та нар минь билээ
Анх Youtube-ээс бичлэг үздэг байсан англи хэл дээр ойлгохгүй зүйл их гардаг басан шантрах үе их гардаг байсан.
Харин одоо 1234.mn Онлайн Сургалт гарч ирсэнээр өөрийн хийж чадахгүй байсан зүйлээ амархан хийж чаддаг болсон .
1234.mn Багш нартаа Баярлаллаа